cesium_example_auth/public/cesium_example/lib/admui/js/sections/content-tabs.js

/**
 * UI v1.1.0
 * Copyright 2017-2018 Muyao
 * Licensed under the Muyao License 1.0 
 */
(function (window, document, $) {
    'use strict';

    $.site.contentTabs = {
        $instance: $('#admui-navTabs .site-menu'),
        $content: $('#admui-pageContent'),
        storageKey: 'admui.base.contentTabs',
        tabId: 0,
        relative: 0,
        tabTimeout: 30,
        init: function () {
            this.bind();
            this._defaultTab();
        },
        bind: function () {
            var self = this,
                $navContabs = $("#admui-siteConTabs"),
                $navContent = $navContabs.find("ul.con-tabs");

            this.tabWidth = $navContent.find("li").width();
            this.view = $navContabs.find(".contabs-scroll").width();

            this.ifameTabs();

            // 标签页的左右移动  &&  关闭单个标签页  && 切换标签页
            $navContabs
                .on('click.site.contabs', 'button.pull-left', function () {
                    self.tabPosition($navContent, self.tabWidth, "right");
                })
                .on('click.site.contabs', '.pull-right>.btn-icon', function () {
                    var content = $navContent.width();

                    self.tabPosition($navContent, self.tabWidth, "left", self.view, content);
                })
                .on('click.site.contabs', 'ul.con-tabs>li', function (e) {
                    var $target = $(e.target), $item = $(this);

                    if ($target.is("i.wb-close-mini")) { // 关闭
                        self.closeTab($item);
                    } else if (!$item.is(".active")) { // 切换
                        $item.siblings("li").removeClass("active");
                        $item.addClass("active");

                        self._checkoutTab($item.find('a'));
                        self.enable($item);
                    }
                    e.preventDefault();
                });

            // 刷新当前页 && 关闭其他 && 所有标签页
            $navContabs
                .on('click.site.contabs', '.pull-right li.reload-page', function () {
                    var $navLi = $navContabs.find('ul.con-tabs>li.active>a'),
                        tabUrl = $navLi.attr('href');

                    // 刷新当前页
                    self.$content.children('[src="' + tabUrl + '"]').attr('src', tabUrl);

                })
                .on('click.site.contabs', '.pull-right li.close-other', function () {
                    var $navLis = $navContabs.find('ul.con-tabs>li');

                    $navLis.each(function () {
                        var $that = $(this), tabId;

                        if (!$that.is('.active') && $that.index() !== 0) {
                            tabId = $that.find('a').attr('target');
                            $that.remove();
                            self.$content.children('[name="' + tabId + '"]').remove();
                            self._updateSetting(tabId);
                        }
                    });

                    $navContent.animate({left: 0}, 100);

                    self.btnView('hide');
                })
                .on('click.site.contabs', '.pull-right li.close-all', function () {
                    var $tabs = $navContabs.find('ul.con-tabs>li'),
                        $checked = $tabs.eq(0);

                    $tabs.each(function () {
                        var $that = $(this), tabId;

                        if ($that.index() !== 0) {
                            tabId = $that.find('a').attr('target');
                            $that.remove();
                            self._updateSetting(tabId);
                        }
                    });

                    $navContent.animate({left: 0}, 100);

                    self.btnView('hide');

                    $checked.addClass('active');
                    self.enable($tabs.eq(0));
                    self._checkoutTab($checked.find('a'));

                    // 关闭所有
                    self.$content.children(':not(:first)').remove();

                    self.tabSize();
                });

            // 登出清楚标签页缓存
            $(document).on('click', '#admui-signOut', function () {
                $.sessionStorage.remove(self.storageKey);
            });

            // 浏览器窗口大小改变,标签页的对应状态
            $(window).on('resize', this.resize);
        },
        ifameTabs: function (el) { // 为当前doc对象中的a[data-iframe]标签绑定创建标签页功能
            var self = this,
                doc = el === undefined ? document : el;

            // 新建标签页
            $(doc).on('click', 'a[data-iframe]', function (e) {
                var $item = $(this), urlResult,
                    url = $item.attr('href'),
                    title = $.trim($item.text()) || $.trim($item.attr('title')),
                    iframeContent = $item.data('iframe') || '#admui-pageContent',
                    tabResult = $item.is('[target="_blank"]');
                
                urlResult = new RegExp(/^([a-zA-z]+:|#|javascript|www\.)/); // 不执行新建标签页操作的地址

                if (urlResult.test(url)) {
                    return;
                }

                if (tabResult && iframeContent === '#admui-pageContent') {
                    window.history.replaceState(null, '', '#!' + url);
                    self.tabType = true;
                    self.buildTab({name: title, url: url});

                    if (!self.$instance.find($item).length) {
                        self.enable($item.parent());
                    }
                } else if (!tabResult) {
                    $(iframeContent).find('iframe.active').attr('src', url);
                }

                e.preventDefault();
            });
        },
        _checkoutTab: function (tab) { // 标签页的切换
            var $content = this.$content,
                tabId = tab.attr('target'),
                tabTitle = $.trim(tab.attr('title')),
                tabUrl = tab.attr('href'),
                $checkedTab = $content.children('iframe[name="' + tabId + '"]');

            $('title').text(tabTitle);

            if (!this.tabType) {
                window.history.replaceState(null, '', '#!' + tabUrl);
            }

            if (!$checkedTab.attr('src')) {
                $checkedTab.attr('src', tabUrl);
            }

            $content.children('.active').removeClass('active');
            $checkedTab.addClass('active');

            $.site.iframeEvents($checkedTab);
            this._updateSetting('checked', tabId);
            this.tabType = false;
        },
        _defaultTab: function () { // 存储默认标签的信息
            var $defaultTab = $('#admui-siteConTabs').find('li:first > a'), settings;

            settings = this.settings = $.sessionStorage.get(this.storageKey);

            if (settings === null) {
                settings = $.extend(true, {}, {
                    'iframe-0': {
                        'url': $defaultTab.attr('href'),
                        'name': $defaultTab.text()
                    },
                    'checked': $defaultTab.attr('target'),
                    'tabId': this.tabId
                });

                this._updateSetting(settings);
            } else {
                this.tabId = settings.tabId;
            }
        },
        _updateSetting: function (item, value) {
            var settings = $.sessionStorage.get(this.storageKey);
            settings = settings ? settings : {};

            if (typeof item === 'object') {
                $.extend(true, settings, item);
            } else if (!value) {
                delete settings[item];
            } else {
                settings[item] = value;
            }

            $.sessionStorage.set(this.storageKey, settings, this.tabTimeout);
        },
        resize: function () {
            var self = $.site.contentTabs,
                $navContabs = $(".site-contabs"),
                $navContent = $navContabs.find("ul.con-tabs");

            self._throttle(function () {
                self.view = $navContabs.find(".contabs-scroll").width();
                self.tabEvent($navContent, 'media');
            }, 200)();
        },
        enable: function ($el) { // 左侧菜单定位
            var $instance = this.$instance,
                href = $.trim($el.find('a').attr('href')),
                _result = href.indexOf('#'),
                tabUrl = _result > 0 ? href.substring(0, _result) : href,
                $current = $instance.find('a[href="' + tabUrl + '"]'),
                $currentParents, $currentLi, $currentHasSub, $instanceLi, checkedId, currentId;

            if ($current.length === 0) {
                $.site.menu.refresh();
                return;
            }

            checkedId = $.trim($instance.closest('div.tab-pane.active').attr('id'));
            currentId = $.trim($current.closest('div.tab-pane').attr('id'));

            if (checkedId !== currentId) {
                $('#admui-navbar a[href="#' + currentId + '"]').tab('show');
            }

            $currentLi = $current.closest('li').siblings('li.open');
            $currentParents = $current.parents('li.has-sub');
            $currentHasSub = $current.closest('li.has-sub').siblings('li.open');
            $instanceLi = $instance.find('li.open');

            $instance.find('li.active').trigger('deactive.site.menu');
            $current.closest('li').trigger('active.site.menu');

            if ($currentLi.length) {
                $currentLi.trigger('close.site.menu');
            }

            if (!$current.closest('li.has-sub').hasClass('open')) {
                if ($currentHasSub.length) {
                    $currentHasSub.trigger('close.site.menu');
                }

                if ($instanceLi.length) {
                    $instanceLi.not($currentParents).trigger('close.site.menu');
                }

                $currentParents.trigger('open.site.menu');
            }
        },
        buildTab: function (opt) { // 新建标签页
            var $tabNav = $(".con-tabs"), tabName, obj = {}, tabId,
                _url = opt.url,
                _result = _url.indexOf('#'),
                tabUrl = _result > 0 ? _url.substring(0, _result) : _url;

            if (this._checkTabs($tabNav, tabUrl)) { // 标签查重
                return;
            }

            tabId = ++this.tabId;
            tabName = 'iframe-' + tabId;

            // 修改当前选中的标签页
            $tabNav.find("li.active").removeClass("active");
            $tabNav.append('<li  class="active"><a href="' + tabUrl + '" target="' + tabName +
                '" title="' + opt.name + '' + '" rel="contents"><span>' + opt.name + '</span><i class="icon' +
                ' wb-close-mini">' + '</i></a></li>');

            obj[tabName] = {
                'url': tabUrl,
                'name': opt.name
            };

            $.extend(obj, {
                'checked': tabName,
                'tabId': tabId
            });

            this._updateSetting(obj);

            // 修改页面标题
            opt.name = opt.name === '' ? '无标题' : opt.name;
            $('title').text($.trim(opt.name));

            this.buildIframe(_url);
            this.tabSize();
            this.tabEvent($tabNav, 'media');
            this.tabType = false;
        },
        _checkTabs: function (doc, url) { // 标签查重
            var x, prevAll, nextAll, contentW,
                _view = this.view, _tab = this.tabWidth,
                $currenttab = doc.find("a[href='" + url + "']").closest('li');

            if ($currenttab.hasClass('active')) { // 标签存在&已选中
                return true;
            }

            if ($currenttab.size() <= 0) { // 标签不存在
                return false;
            }

            // 标签存在未选中
            doc.find("li.active").removeClass("active");
            $currenttab.addClass("active");

            // 切换标签页
            this._checkoutTab($currenttab.find('a'));

            // 标签位移到可视界面显示
            x = doc.position().left;
            contentW = doc.width();
            prevAll = $currenttab.prevAll('li').size() * _tab;
            nextAll = $currenttab.nextAll('li').size() * _tab;

            if (-prevAll < x) {
                if (prevAll + x < _view) {
                    return true;
                }

                x = -(prevAll - _view + _tab);
            } else {
                if (-x < contentW - nextAll) {
                    return true;
                }

                x = -(contentW - nextAll - _tab);
            }

            doc.animate({
                left: x
            }, 100);

            return true;
        },
        buildIframe: function (url) { // 创建iframe窗口
            var $content = this.$content,
                iframeName = 'iframe-' + this.tabId, $checkedIframe;

            $content.children('.active').removeClass('active');
            $content.append('<iframe src="' + url + '" frameborder="0" name="' + iframeName + '" class="page-frame animation-fade active"></iframe>');

            $checkedIframe = $content.find('iframe[name="' + iframeName + '"]');

            $.site.iframeEvents($checkedIframe);
        },
        tabSize: function () { // 修改标签页盒子尺寸
            var content, $tabNav = $(".con-tabs"),
                _num = $tabNav.find("li").size();

            content = this.tabWidth * _num;
            $tabNav.css("width", content);
        },
        tabEvent: function (doc, media) { // 增删标签页的对应状态
            var content = $(".con-tabs").width(),
                _view = this.view, _tab = this.tabWidth;

            if (content > this.view) {
                this.tabPosition(doc, _tab, "left", _view, content, media);
                this.btnView('visible');
            } else {
                this.btnView('hide');
            }

            if (this.currentView < _view || this.currentContent > content) {
                this.tabPosition(doc, _tab, "right", _view, content, media);
            }
            this.currentView = _view;
            this.currentContent = content;
        },
        tabPosition: function (doc, width, dir, view, content, media) { // 标签页的位移
            var self = this,
                x = doc.position().left,
                callback = function (x) {
                    var flag = x + width;

                    if (flag > 0) {
                        self.relative = x;
                        return 0;
                    } else {
                        return x;
                    }
                };

            if (dir === "left") {
                if (x <= view - content) {
                    return false;
                }
                if (typeof media !== 'undefined') {
                    x = view - content;
                } else {
                    x = this.relative !== 0 ? x - width + this.relative : x - width;
                    this.relative = 0;
                }
            } else if (dir === "right") {
                if (x === 0) {
                    return false;
                }

                if (typeof media !== 'undefined') {
                    x = content <= view ? 0 : view - content;
                } else {
                    x = callback(x + width);
                }
            }

            doc.animate({
                left: x
            }, 100);
        },
        _throttle: function (fn, interval) { // 函数节流操作
            var _fn = fn,
                timer,
                firstTime = true;
            return function () {
                var args = arguments,
                    self = this;

                if (firstTime) {
                    _fn.apply(self, args);
                    firstTime = false;
                }

                if (timer) {
                    return false;
                }

                timer = setTimeout(function () {
                    clearTimeout(timer);
                    timer = null;
                    _fn.apply(self, args);
                }, interval || 500);
            };
        },
        closeTab: function ($item) {
            var checkedTabId = $item.children('a').attr('target'), $checked = '',
                $nextLi = $item.next('li'),
                $content = this.$content;

            if ($item.is('.active')) { // 关闭选中标签
                if ($nextLi.size() > 0) {
                    $checked = $nextLi;
                } else {
                    $checked = $item.prev('li');
                }

                $checked.addClass("active");

                this.enable($checked);
                this._checkoutTab($checked.find('a'));
            }

            $item.remove();
            $content.children('[name="' + checkedTabId + '"]').remove();
            this._updateSetting(checkedTabId);

            this.tabSize();
            this.tabEvent($(".con-tabs"), 'media');

        },
        btnView: function (status) { // 标签页左右移动按钮状态
            var $siteContabs = $('.site-contabs'),
                $contabsLeftBtn = $siteContabs.children('button.pull-left'),
                $contabsRightBtn = $siteContabs.find('.pull-right > button.btn-icon');

            if (status === 'visible') {
                $contabsLeftBtn.removeClass('hide');
                $contabsRightBtn.removeClass('hide');
            } else if (status === 'hide') {
                $contabsLeftBtn.addClass('hide');
                $contabsRightBtn.addClass('hide');
            }
        }
    };

})(window, document, jQuery);