cesium_example_auth/public/cesium_example/lib/admui/js/sections/media-menu.js

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

    /***
     * 左侧菜单响应式操作
     *
     * **/

    $.site.menubar = {
        opened: null,
        folded: null,
        top: false,
        foldAlt: false,
        auto: true,
        init: function () {
            var self = this,
                $body = this.$body = $('body'),
                $html = this.$html = $('html'),
                $instance = this.$instance = $("#admui-navTabs");

            $html.removeClass('css-menubar').addClass('js-menubar');

            this.tabId = $('#admui-navbar').find('li.active > a').attr('href');

            if (this.tabId === '#') {
                this.tabId = $('.nav-tabs li.active').find('ul>li.active>a').attr('href');
            }

            if (!$instance.length) {
                return;
            }

            // 鼠标经过左侧菜单显示图标
            if ($body.is('.site-menubar-fold-alt')) {
                this.foldAlt = true;
            }

            // 鼠标经过左侧菜单显示文字
            if ($body.is('.site-menubar-keep')) {
                if ($body.hasClass('site-menubar-fold')) { // 收起
                    this.auto = 'fold';
                } else if ($body.hasClass('site-menubar-unfold')) { //展开
                    this.auto = 'unfold';
                }
            }

            $instance.on('changed.site.menubar', function () {
                self.update();
            });

            $('.nav-tabs li:not(.no-menu)').on('shown.bs.tab', function (event) {
                var tabId = self.tabId = $(event.target).attr('href');

                if ($body.hasClass('site-menubar-fold')) {
                    self.hoverscroll.enable(tabId);
                } else if ($body.hasClass('site-menubar-unfold')) {
                    self.slimScroll.enable();
                }
            });

            this.change();
        },
        change: function () {
            var breakpoint = Breakpoints.current();

            if (this.auto !== true) {
                switch (this.auto) {
                    case 'fold':
                        this.reset();
                        if (breakpoint.name === 'xs') {
                            this.hide();
                        } else {
                            this.fold();
                        }
                        return;
                    case 'unfold':
                        this.reset();
                        if (breakpoint.name === 'xs') {
                            this.hide();
                        } else {
                            this.unfold();
                        }
                        return;
                }
            }

            this.reset();

            if (breakpoint) {
                switch (breakpoint.name) {
                    case 'lg':
                        this.unfold();
                        break;
                    case 'md':
                    case 'sm':
                        this.fold();
                        break;
                    case 'xs':
                        this.hide();
                        break;
                }
            }
            Breakpoints.on('xs', 'leave', function () {
                $('#admui-navbar').responsiveHorizontalTabs({
                    tabParentSelector: '#admui-navTabs',
                    fnCallback: function (el) {
                        if ($('#admui-navbar').is(':visible')) {
                            el.removeClass('is-load');
                        }
                    }
                });
            });
        },
        animate: function (doing, callback) {
            var self = this,
                $body = self.$body;

            $body.addClass('site-menubar-changing');

            doing.call(self);
            this.$instance.trigger('changing.site.menubar');

            callback.call(self);
            $body.removeClass('site-menubar-changing');

            self.$instance.trigger('changed.site.menubar');
        },
        reset: function () {
            this.opened = null;
            this.folded = null;
            this.$body.removeClass('site-menubar-hide site-menubar-open site-menubar-fold site-menubar-unfold');
            this.$html.removeClass('disable-scrolling');
        },
        open: function () {
            if (this.opened !== true) {
                this.animate(function () {
                    this.$body.removeClass('site-menubar-hide').addClass('site-menubar-open site-menubar-unfold');
                    this.opened = true;

                    this.$html.addClass('disable-scrolling');

                }, function () {
                    this.slimScroll.enable();
                });
            }
        },
        hide: function () {
            this.hoverscroll.disable();

            if (this.opened !== false) {
                this.animate(function () {

                    this.$html.removeClass('disable-scrolling');
                    this.$body.removeClass('site-menubar-open').addClass('site-menubar-hide site-menubar-unfold');
                    this.opened = false;

                }, function () {
                    this.slimScroll.enable();
                });
            }
        },
        unfold: function () {
            this.hoverscroll.disable();

            if (this.folded !== false) {
                this.animate(function () {
                    this.$body.removeClass('site-menubar-fold').addClass('site-menubar-unfold');
                    this.folded = false;

                }, function () {
                    this.slimScroll.enable();
                });
            }
        },
        fold: function () {
            this.slimScroll.destroy();

            if (this.folded !== true) {
                this.animate(function () {
                    this.$body.removeClass('site-menubar-unfold').addClass('site-menubar-fold');
                    this.folded = true;

                }, function () {
                    this.hoverscroll.enable(this.tabId);
                });
            }
        },
        toggle: function () {
            var breakpoint = Breakpoints.current(),
                folded = this.folded,
                opened = this.opened;

            switch (breakpoint.name) {
                case 'lg':
                    if (folded === null || folded === false) {
                        this.fold();
                    } else {
                        this.unfold();
                    }
                    break;
                case 'md':
                case 'sm':
                    if (folded === null || folded === true) {
                        this.unfold();
                    } else {
                        this.fold();
                    }

                    $('#admui-navbar').responsiveHorizontalTabs({
                        tabParentSelector: '#admui-navTabs'
                    });
                    break;
                case 'xs':
                    if (opened === null || opened === false) {
                        this.open();
                    } else {
                        this.hide();
                    }
                    break;
            }
        },
        update: function () {
            this.hoverscroll.update();
        },
        slimScroll: {
            api: null,
            native: false,
            init: function () {
                // if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                //   this.native = true;
                //   $body.addClass('site-menubar-native');
                //   return;
                // }

                if ($('body').is('.site-menubar-native')) {
                    this.native = true;
                    return;
                }

                $.site.menubar.$instance.slimScroll($.po('slimScroll'));
            },
            enable: function () {
                if (this.native) {
                    return;
                }
                this.init();
            },
            destroy: function () {
                $.site.menubar.$instance.slimScroll({destroy: true});
                $.site.menubar.$instance.removeAttr('style');
            }
        },
        hoverscroll: {
            api: null,
            init: function (tabId) {
                $.site.menubar.$instance.find(tabId).children('div').attr('style', '');

                this.api = $.site.menubar.$instance.find(tabId).asHoverScroll({
                    namespace: 'hoverscorll',
                    direction: 'vertical',
                    list: '.site-menu',
                    item: '> li',
                    exception: '.site-menu-sub',
                    fixed: false,
                    boundary: 100,
                    onEnter: function () {
                        //$(this).siblings().removeClass('hover');
                        //$(this).addClass('hover');
                    },
                    onLeave: function () {
                        //$(this).removeClass('hover');
                    }
                }).data('asHoverScroll');
            },

            update: function () {
                if (this.api) {
                    this.api.update();
                }
            },

            enable: function (tabId) {
                if (tabId !== this.tabId) {
                    this.tabId = tabId;
                    this.init(tabId);
                } else {
                    this.api.enable();
                }
            },

            disable: function () {
                if (this.api) {
                    this.api.disable();
                }
            }
        }
    };

})(window, document, jQuery);