TDataView_ui/scripts/mod/gcms/gcmsNav.js

/**
 * [ONEMAP.M.gcmsNav]
 * @return {[object]}
 */
define([
    'html!templates/gcms/gcmsNav',
    'modDir/gcms/gcmsEvents',
    'css!styles/gcms/gcmsNav'
], function(tplLayout, gcmsEvents) {


    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     * 数据存放
     */
    var modValue = {
        navData: null,
        appendToMyLayer: null
    };

    /**
     * 状态值
     * @type {Boolean}
     * @default false
     * @private
     */
    var status = {
        initialized: false
    };

    /**
     * 模块初始化
     * @return {[type]} [description]
     */
    function init() {
        //当前栏目内容列表
        ONEMAP.D.gcmsCurColumnListData = {};
        //当前文章详细内容
        ONEMAP.D.gcmsCurArticleData = {};
        //当前文章模型内容
        ONEMAP.D.gcmsCurColumnModelData = {};

        //未初始化，初始化布局
        if (!status.initialized) {
            //订阅推送
            subscribe();
            //设置容器布局
            setLayout();
            status.initialized = true;
        }
        //当前栏目信息
        ONEMAP.D.gcmsCurColumnData = {};
        //栏目列表
        ONEMAP.D.gcmsColumnObjs = {};

        getNavData();
        //设置zIndex 为最高
        var zIndex = ONEMAP.M.sideBar.getZIndex();
        $('#gcmsMainMenu').css({
            zIndex: zIndex
        });

        ONEMAP.D.currentSideBarMod = 'gcmsNav';
        //开启侧栏
        //ONEMAP.C.publisher.publish('handShow', 'layout::sideBar');

        addDiyColumn();
    }

    /**
     * 初始化布局
     */
    function setLayout() {
        $(tplLayout).appendTo($("#sideBarBody"));
        layoutResize();
        $("#gcmsMainMenu .menu").mCustomScrollbar({
            scrollInertia: 1000
        });
    };
    /**
     * 窗口布局重置
     * @type {Function}
     */
    function layoutResize() {
        $("#gcmsMainMenu .menu").css({
            height: $(window).height() - 59
        });
        //$("#gcmsMenuColumnList").css({minHeight: $("#gcmsMainMenu .menu").height()})
        $("#gcmsMainMenu .menu").mCustomScrollbar('update');
    };

    /**
     * 创建冒泡窗
     */
    function creatPopupHtml(options) {
        var popupHtml = '<div class="popup_html marker">' +
            '    <div class="popup-lt"></div>' +
            '    <div class="popup-lb"></div>' +
            '    <div class="popup-rt"></div>' +
            '    <div class="popup-rb"></div>' +
            '    <div class="popup-ct" style="text-indent:15px;line-height:48px">' + options.name +
            '    </div>' +
            '    <div class="popup-cb" style="padding-bottom:20px;color:#666666 !important">' +
            '        <div class="gems_marker" style="padding:30px 5px 0px 5px">' + options.content +
            '        </div>' +
            '    </div>' +
            '</div>'
        return popupHtml;
    }

    function bindEvent() {
        $('#gcmsMenuColumnList .go-back').off('click').bind('click', function() {
            var navLeft = $('#gcmsMainMenu').position().left + 410;
            // var navLeft = 410;
            var parent = $(this).parent().parent().parent();
            var pparent = $(this).parent().parent().parent().parent();
            if (pparent.hasClass('nav tree')) {
                $("#gcmsMenuColumnList").css({
                    height: $("#gcmsMainMenu .menu").height()
                });
            } else {
                $("#gcmsMenuColumnList").css({
                    height: pparent.height()
                });
            }

            $("#gcmsMainMenu .menu").mCustomScrollbar('update');

            $('#gcmsMainMenu').animate({
                left: navLeft
            }, 200, function() {
                parent.addClass('collapsed');

            });
        });

        $('#gcmsMenuColumnList a:not(".go-back")').off('click').bind('click', function() {
            if ($(this).next().hasClass('collapse-section')) {
                $(this).parent().removeClass('collapsed');
                var navLeft = $('#gcmsMainMenu').position().left - 410;
                // var navLeft = -410;

                $("#gcmsMenuColumnList").css({
                    height: $(this).next().height()
                });
                $("#gcmsMainMenu .menu").mCustomScrollbar('update');

                $('#gcmsMainMenu').animate({
                    left: navLeft
                }, 200, function() {});
            }
            $(this).parent().parent().find('.active').removeClass('active');
            $(this).addClass('active');
        });
    }
    /**
     * 获取 菜单数据
     * @return {[type]} [description]
     */
    function getNavData() {
        var gUrl = onemapUrlConfig.gcmsServiceUrl + '/showmenu';
        // console.log(ONEMAP.D.user.ticket)
        if (ONEMAP.D.isLoad) {
            gUrl = onemapUrlConfig.gcmsServiceUrl + '/showmenu';
        }
        ONEMAP.V.loading.load();
        $.ajax({
                url: gUrl,
                type: "GET",
                dataType: 'json'
            })
            .done(function(data) {
                ONEMAP.V.loading.loaded();
                if (data.code == 4) {
                    ONEMAP.C.noPermission('getNavData');
                    return false;
                }
                // if (data.code == 3) {
                //     ONEMAP.C.logout('getNavData');
                // }
                $("#gcmsMenuColumnList").empty();
                modValue.navData = data.data;
                buildMenuColumnObjs(data.data);
                //setGcmsNav();
            })
            .fail(function() {
                ONEMAP.V.loading.loaded();
            });
    }

    /**
     * 构造菜单栏目 对象集合
     * @param  {[type]} options [description]
     * @return {[type]}         [description]
     */
    function buildMenuColumnObjs(options) {
        $(options).each(function(index, el) {
            ONEMAP.D.gcmsColumnObjs[el['name']] = el;
            if (el.hasOwnProperty('son_tree')) {
                buildMenuColumnObjs(el['son_tree']);
            }
        });
    }

    /**
     * 设置栏目列表
     */
    function setGcmsNav() {
        $(modValue.navData).each(function(index, el) {
            switch (el['bind_type']) {
                case 'column':
                    var a = $('<li class="column-menu collapsible collapsed"><a class="collapse-trigger"><span class="icon icon-angle-right f-r"></span><span class="icon icon-th-list"></span>' + el['title'] + '</a></li>');

                    if (el.hasOwnProperty('son_tree')) {
                        buildSonTreeNav(el).appendTo(a);
                    }
                    a.appendTo($('#gcmsMenuColumnList'));
                    break;
                case 'cms':
                    // console.log(el['name'])
                    //隐藏版本更新
                    if (el['name'] != 'update_set') {
                        var a = $('<li class="column-menu collapsible collapsed"><a column-value="' + el['name'] + '"><span class="icon icon-columns"></span>' + el['title'] + '</a></li>');
                        a.bind('click', {
                            navData: el
                        }, function(e) {
                            //                        console.log(e.data.navData);
                            require(['modDir/gcms/gcmsList'], function(gcmsList) {
                                gcmsList.init({
                                    type: 'cms',
                                    data: e.data.navData,
                                    column_name: e.data.navData['name'],
                                    column_title: e.data.navData['title'],
                                });
                            });
                        });
                        a.appendTo($('#gcmsMenuColumnList'));
                    }
                    break;
                case 'link':
                    $('<li class="column-menu collapsible collapsed"><a href="' + el['bind_value'] + '" target="_blank">' + el['title'] + '</a></li>').appendTo($('#gcmsMenuColumnList'));
                    break;
                case 'js':
                    $('<li class="column-menu collapsible collapsed"><a onclick="' + el['bind_value'] + '">' + el['title'] + '</a></li>').appendTo($('#gcmsMenuColumnList'));
                    break;
            }
        });

        $("#partNavMenuGroup .btn-group").mCustomScrollbar('update');

        bindEvent();
    }

    function buildSonTreeNav(data) {
        var ul = $('<ul class="collapse-section"><li><a class="go-back"><span class="icon icon-angle-left"></span><lable>返回 <span>' + data['title'] + '</span></lable></a></li></ul>');
        $(data['son_tree']).each(function(index, el) {
            switch (el['bind_type']) {
                case 'column':
                    var a = $('<li class="collapsed"><a class="collapse-trigger"><span class="icon icon-angle-right f-r"></span><span class="icon icon-th-list"></span>' + el['title'] + '</a></li>');

                    if (el.hasOwnProperty('son_tree')) {
                        buildSonTreeNav(el).appendTo(a);
                    }
                    a.appendTo(ul);
                    break;
                case 'cms':
                    var a = $('<li class="collapsed"><a column-value="' + el['name'] + '"><span class="icon icon-columns"></span>' + el['title'] + '</a></li>');
                    a.bind('click', {
                        navData: el
                    }, function(e) {
                        require(['modDir/gcms/gcmsList'], function(gcmsList) {
                            gcmsList.init({
                                type: 'cms',
                                data: e.data.navData,
                                column_name: e.data.navData['name']
                            });
                        });
                    });
                    a.appendTo(ul);
                    break;
                case 'link':
                    $('<li class="collapsed"><a href="' + el['bind_value'] + '" target="_blank">' + el['title'] + '</a></li>').appendTo(ul);
                    break;
                case 'js':
                    $('<li class="collapsed"><a onclick="' + el['bind_value'] + '">' + el['title'] + '</a></li>').appendTo(ul);
                    break;
            }
        });

        return ul;
    }

    function addDiyColumn() {
        $("#userIGListInfo").html("");
        var category = ONEMAP.D.globalSettingData.importantGoalsCategory;
        for (var i = 0; i < category.length; i++) {
            var liHtml = $('<section class="item"><div class="sectionbg"><span class="translate">' + category[i] + '</span></div></section>')
            var linkcontent = $('<ul class="linkContent" style="display:none"></ul>');
            ONEMAP.D.appendToMyLayer = null;
            $(ONEMAP.D.globalSettingData.importantGoalsSetting).each(function(index, el) {
                if (el.category === category[i]) {
                    var thematicLink = $('<li class="item thematic-layer-link"><div class="linkLibg"></div><span class="translate">' + el.name + '</span></li>');
                    thematicLink.bind('click', el, function(e) {
                        modValue.curClickMenu = e.data.columnName;
                        if ($(this).hasClass('selected')) {
                            $(this).removeClass('selected');
                            $("#gcmsDetailModal").remove();

                            ONEMAP.C.publisher.publish({
                                action: 'remove',
                                guid: ONEMAP.M.diyData
                            }, ONEMAP.M.diyData);

                            var options = {
                                action: "remove",
                                DOMid: ONEMAP.M.diyData
                            }
                            ONEMAP.M.diyData = ONEMAP.M.myLayers.myLayerControl(options);
                        } else {
                            $('#userIGListInfo .selected').removeClass('selected');
                            $(this).addClass('selected');
                            $.ajax({
                                type: 'get',
                                dataType: 'json',
                                url: onemapUrlConfig.gcmsServiceUrl + '/showmenu',
                                beforeSend: ONEMAP.V.loading.load(),
                                success: function(data) {
                                    if (data.code == 0) {
                                        findCloumName(data.data,modValue.curClickMenu);
                                    } else {
                                        ONEMAP.C.publisher.publish({
                                            type: 'warning',
                                            message: data.message
                                        }, 'noteBar::add');
                                    }
                                },
                                error: function(data) {

                                },
                                completer: ONEMAP.V.loading.loaded()
                            })
                            if (!ONEMAP.D.gcmsCurColumnData) {
                                ONEMAP.D.gcmsCurColumnData = {};
                            }
                            // ONEMAP.D.gcmsCurColumnData['name'] = e.data.columnName;

                            //添加图层控制
                            if (!ONEMAP.D.appendToMyLayer) {
                                var options = {
                                    action: "add",
                                    DOM: {
                                        name: e.data.name,
                                        type: "group",
                                        guid: "gcmsList"
                                    }
                                }
                                ONEMAP.D.appendToMyLayer = ONEMAP.M.myLayers.myLayerControl(options);
                                ONEMAP.M.diyData = ONEMAP.D.appendToMyLayer;
                                ONEMAP.C.publisher.subscribe(controlMyLayer, ONEMAP.D.appendToMyLayer);
                            } else {
                                var options = {
                                    action: "update",
                                    DOMid: ONEMAP.D.appendToMyLayer,
                                    DOM: {
                                        name: e.data.name,
                                        type: "group",
                                        guid: "gcmsList"
                                    }
                                }
                                ONEMAP.M.myLayers.myLayerControl(options);
                            }

                        }
                    });
                    thematicLink.appendTo(linkcontent);
                }

            });

            liHtml.find('.sectionbg').bind('click', function() {
                $(this).parent().find('.linkContent').toggle();
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                    $(this).parent().siblings().find('.linkContent').hide();
                    $(this).parent().siblings().find('.sectionbg').removeClass('open');
                }
            })
            linkcontent.appendTo(liHtml);
            liHtml.appendTo($("#userIGListInfo"));
        }
        //更新滚动条
        $('#userIGListInfo .ii-body').mCustomScrollbar('update');
    }
    function findCloumName(data,name){
        $.each(data,function(i,t){
            if(t.bind_type == "column"){
                var curdata = t.son_tree;
                findCloumName(curdata,name);
            }else if(t.bind_type == "cms" && t.name == name){
                require(['modDir/gcms/gcmsList'], function(gcmsList) {
                    gcmsList.init({
                        type: 'cms',
                        data: t,
                        column_name: t['name']
                    });
                });
                ONEMAP.C.publisher.publish('handShow', 'layout::sideBar');
                return false;
            }
        })
    }
    /**
     * 图层控制
     */
    function controlMyLayer(options) {
        switch (options.action) {
            case 'remove':
                removeMyLayer();
                break;
            case 'opacity':
                setGropOpacity(options);
                break;
        }
    }

    function removeMyLayer() {
        map23DControl.group({
            action: 'cleanAll',
            guid: modValue.markersGroupGuid
        });
        map23DControl.group({
            action: 'remove',
            guid: modValue.markersGroupGuid
        })
        remove();
        ONEMAP.C.publisher.publish('hide', 'layout::sideBar');
        ONEMAP.C.publisher.publish('', 'gcmsArticleShowRemove');
        ONEMAP.D.appendToMyLayer = null;
        $("#userIGListInfo section.item li.item").removeClass("selected");
        ONEMAP.C.publisher.publish('handHide', 'layout::sideBar');
        ONEMAP.M.gcmsList.remove();
    };

    function setGropOpacity(options) {
        options = options.options;
        if (options.opacity == 1) {
            map23DControl.group({
                action: 'show',
                guid: modValue.markersGroupGuid
            })
            ONEMAP.C.publisher.publish('show', 'gcmsGroupControl');
        } else if (options.opacity == 0) {
            map23DControl.group({
                action: 'hide',
                guid: modValue.markersGroupGuid
            })
            ONEMAP.C.publisher.publish('hide', 'gcmsGroupControl');
        }
    };

    /**
     * 注册监听
     * @type {Function}
     */
    function subscribe() {}

    /**
     * 取消监听
     * @type {Function}
     */
    function unSubscribe() {}

    /**
     * 模块移除
     * @return {[type]} [description]
     */
    function remove() {
        unSubscribe();
    }

    return ONEMAP.M.gcmsNav = {
        init: init,
        remove: remove,
        creatPopupHtml: creatPopupHtml,
        getNavData: getNavData
    }
});