TDataView_ui/scripts/mod/gcms/gcmsPictures.js

/**
 * [ONEMAP.M.gcmsPictures]
 * @return {[object]}
 */
define([
    'html!templates/gcms/gcmsPictures',
    'vendorDir/handlebars/handlebars',
    'css!styles/gcms/gcmsPictures'],
function(tpcLayout,Handlebars){

    //数据存放和外部数据调用
    var modValue = {
        options:{},
        iviewer:null,
        picturesData:[]
    };
    

    //地图层
    //var _map = ONEMAP.M.mapHolder.map;
    /**
     * 模块初始化
     * @return {[type]} [description]
     */
    function init(options){
        remove();
        modValue.options = {};
        for(var op in options){
            modValue.options[op] = options[op];
        }

        //获取内容数据
        getDetailData({callback:function(){
            //设置容器布局
            setPicturesModal();
            bindEvent();
        }}); 
        
        //订阅推送
        subscribe();
    }

    function getDetailData(options){
        ONEMAP.V.loading.load();
        $.ajax({
            url: onemapUrlConfig.gcmsServiceUrl+'/show/'+modValue.options['column_name']+'/'+modValue.options['article_id'],
            type:"GET",
            dataType: 'json'
        })
        .done(function(data) {
            ONEMAP.V.loading.loaded();
            if(data.code == 4){
                ONEMAP.C.noPermission('getDetailData');
                return false;
            }
            if(data.code == 3){
                ONEMAP.C.logout('getDetailData');
            }

            if(JSON.parse(data['data']['record'][modValue.options['field_name']]).length == 0){
                ONEMAP.C.publisher.publish({ type: 'warning', message: '没有图册数据' }, 'noteBar::add');
                remove();
            }else {
                ONEMAP.D.gcmsCurArticleData = data['data'];
                options.callback();
            }
            if(modValue.options['name']){ 
                $("#gcmsPicturesViewerTitleLabel .name").text(modValue.options['name'])
            }
            if(modValue.options['creater']){
                $("#gcmsPicturesViewerTitleLabel .creater").text(modValue.options['creater'])
            }
            if(modValue.options['phone_num']){
                $("#gcmsPicturesViewerTitleLabel .phone_num").text(modValue.options['phone_num'])
            }
        })
        .fail(function() {
            ONEMAP.V.loading.loaded();
        }); 
    }

    /**
     * 设置容器
     */
    function setPicturesModal(){
        var picturesData = JSON.parse(ONEMAP.D.gcmsCurArticleData['record'][modValue.options['field_name']]);
        modValue.picturesData = [];

        $(picturesData).each(function(index, el) {
            modValue.picturesData.push({
                title:'图片'+(index+1),
                thumbnail_url:onemapUrlConfig.gcmsServiceUrl+'/file/thumbnail'+el+'?w=200&h=100',
                img_url:onemapUrlConfig.gcmsServiceUrl+'/file'+el+'?jwt='+ONEMAP.D.user.ticket
            })
        });

        var template = Handlebars.compile(tpcLayout);
        $('body').append(template(modValue.picturesData));     

        $('#gcmsPicturesList').css({
            width:modValue.picturesData.length*210
        })
        if(map23DData.display.map2D){
            $('#gcmsPicturesViewer').removeClass('TD');
        }else{
            $('#gcmsPicturesViewer').addClass('TD');
        }
        $('#gcmsPicturesModal').show(); 
        setTimeout(function(){
            $('#gcmsPicturesModal .modal-body').mCustomScrollbar({
                horizontalScroll:true
            });
        },300);
        
    }

    /**
     * 事件绑定
     * @return {[type]} [description]
     */
	function bindEvent(){
        layoutResize();

        $('#gcmsPicturesModal .modal-header .close').bind('click', function() {
            remove();
        });

        $('#gcmsPicturesViewer .modal-header .close').bind('click',function(){
            $("#gcmsPicturesViewer").hide();
            $('#gcmsPicturesList .selected').removeClass('selected');
            modValue.iviewer.iviewer('loadImage', onemapUrlConfig.siteLibUrl+'/images/bg_fff_1.png');
        });

        $('#gcmsPicturesList li').bind('click', function () {
            $('#gcmsPicturesList .selected').removeClass('selected');
            $(this).addClass('selected');  
            $("#gcmsPicturesViewer").show();
            $('#gcmsPicturesViewerInfo .title').html(modValue.picturesData[$(this).attr('pid')]['title']);
            if(modValue.iviewer){
                modValue.iviewer.iviewer('loadImage', modValue.picturesData[$(this).attr('pid')]['img_url']);
                return false;
            }else {                
                modValue.iviewer = $("#gcmsPicturesViewerBox").iviewer({
                    zoom_max:200,
                    zoom_min:5,
                    src: modValue.picturesData[$(this).attr('pid')]['img_url'],
                    onFinishLoad:function(){
                        modValue.iviewer.iviewer('fit');
                    }
                });
            }  
        });

        $('#gcmsPicturesViewer .modal-header').dragmove($('#gcmsPicturesViewer'));

        var $box2 = $('#gcmsPicturesViewer').on('mousedown', '#coorForGcmsPicturesViewer', function(e) {
            var posix = {
                    'w': $box2.width(), 
                    'h': $box2.height(), 
                    'x': e.pageX, 
                    'y': e.pageY
                };
            
            $.extend(document, {'move': true, 'call_down': function(e) {
                $box2.css({
                    'width': Math.max(30, e.pageX - posix.x + posix.w),
                    'height': Math.max(30, e.pageY - posix.y + posix.h)
                });
                var bodyHeight = Math.max(30, e.pageY - posix.y + posix.h )-67;
                var bodyWidth = Math.max(30, e.pageX - posix.x + posix.w);
                $("#gcmsPicturesViewer .modal-body").css({
                    height:bodyHeight,
                    width:bodyWidth
                });  
                $("#gcmsPicturesViewerBox").iviewer('update');                    
            }});
            return false;
        });


    }    



    /**
     * 界面布局重置
     * @type {Function}
     */
    function layoutResize(){
        $('#gcmsPicturesViewer .modal-body').css({
            height:$(window).height()/3*2,
            width:$(window).width()/2
        });
    }   
    /**
     * 切换23D样式
     */
    function layoutResizeCSS(cid) {
        if (cid == '2d') {
            $('#gcmsPicturesViewer').removeClass('TD');
        } else {
            $('#gcmsPicturesViewer').addClass('TD');
        }
    }
    /**
     * 注册监听
     * @type {Function}
     */
    function subscribe(){
        ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
        ONEMAP.C.publisher.subscribe(remove,'gcmsArticleShowRemove');
        ONEMAP.C.publisher.subscribe(remove, 'cleanMap');
        ONEMAP.C.publisher.subscribe(layoutResizeCSS, 'change23D');
    }

    /**
     * 取消监听
     * @type {Function}
     */
    function unSubscribe() {
        ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
    }

	/**
	 * 模块移除
	 * @return {[type]} [description]
	 */
	function remove(){
        $('#gcmsPicturesModal').remove();
        $('#gcmsPicturesViewer').remove();
		unSubscribe();
        modValue.iviewer = null;
	}

    return ONEMAP.M.gcmsPictures = {
        init:init,
        remove:remove
    }
});