bmfe-vue2-base/src/js/baseLibs/sidebarMenu/index.js

BM 后台系统基础框架

/**
 * @Author: songqi
 * @Date:   2016-09-20
 * @Email:  songqi@benmu-health.com
* @Last modified by:   songqi
* @Last modified time: 2016-10-13
 */

var $ = require('jquery'),
    TweenMax = require('./TweenMax'),
    perfectScrollbar = require('./perfectScrollbar');

var $sidebarMenu = null,
    sm_duration = .2,
    sm_transition_delay = 150;

function ps_update(destroy_init) {
    if ($.isFunction($.fn.perfectScrollbar)) {
        if ($sidebarMenu.hasClass('collapsed')) {
            return;
        }

        $sidebarMenu.find('.sidebar-menu-inner').perfectScrollbar('update');

        if (destroy_init) {
            ps_destroy();
            ps_init();
        }
    }
}

function ps_init() {
    if ($.isFunction($.fn.perfectScrollbar)) {
        if ($sidebarMenu.hasClass('collapsed') || !$sidebarMenu.hasClass('fixed')) {
            return;
        }

        $sidebarMenu.find('.sidebar-menu-inner').perfectScrollbar({
            wheelSpeed: 1,
            wheelPropagation: true
        });
    }
}

function ps_destroy() {
    if ($.isFunction($.fn.perfectScrollbar)) {
        $sidebarMenu.find('.sidebar-menu-inner').perfectScrollbar('destroy');
    }
}

function sidebar_menu_item_collapse($li, $sub) {
    if ($li.data('is-busy'))
        return;

    var $sub_items = $sub.children();

    $li.removeClass('expanded').data('is-busy', true);
    $sub_items.addClass('hidden-item');

    TweenMax.to($sub, sm_duration, {
        css: {
            height: 0
        },
        onUpdate: ps_update,
        onComplete: function() {
            $li.data('is-busy', false).removeClass('opened');

            $sub.removeAttr('style');
            $sub_items.removeClass('hidden-item');

            $li.find('li.expanded ul').attr('style', '').hide().parent().removeClass('expanded');

            ps_update(true);
        }
    });
}

function sidebar_menu_item_expand($li, $sub) {
    if ($li.data('is-busy') || ($li.parent('.main-menu').length && $sidebarMenu.hasClass('collapsed')))
        return;

    $li.addClass('expanded').data('is-busy', true);
    $sub.show();

    var $sub_items = $sub.children(),
        sub_height = $sub.outerHeight(),

        win_y = $(window).height(),
        total_height = $li.outerHeight(),
        current_y = $sidebarMenu.scrollTop(),
        item_max_y = $li.position().top + current_y,
        fit_to_viewpport = $sidebarMenu.hasClass('fit-in-viewport');

    $sub_items.addClass('is-hidden');
    $sub.height(0);


    TweenMax.to($sub, sm_duration, {
        css: {
            height: sub_height
        },
        onUpdate: ps_update,
        onComplete: function() {
            $sub.height('');
        }
    });

    var interval_1 = $li.data('sub_i_1'),
        interval_2 = $li.data('sub_i_2');

    window.clearTimeout(interval_1);

    interval_1 = setTimeout(function() {
        $sub_items.each(function(i, el) {
            var $sub_item = $(el);

            $sub_item.addClass('is-shown');
        });

        var finish_on = sm_transition_delay * $sub_items.length,
            t_duration = parseFloat($sub_items.eq(0).css('transition-duration')),
            t_delay = parseFloat($sub_items.last().css('transition-delay'));

        if (t_duration && t_delay) {
            finish_on = (t_duration + t_delay) * 1000;
        }

        // In the end
        window.clearTimeout(interval_2);

        interval_2 = setTimeout(function() {
            $sub_items.removeClass('is-hidden is-shown');

        }, finish_on);


        $li.data('is-busy', false);

    }, 0);

    $li.data('sub_i_1', interval_1),
        $li.data('sub_i_2', interval_2);
}

function sidebar_menu_close_items_siblings($li) {
    $li.siblings().not($li).filter('.expanded, .opened').each(function(i, el) {
        var $_li = $(el),
            $_sub = $_li.children('ul');

        sidebar_menu_item_collapse($_li, $_sub);
    });
}
module.exports = function(container) {
    $sidebarMenu = $(container).find('.main-menu');
    if ($sidebarMenu.length) {
        var $items_with_subs = $sidebarMenu.find('li:has(> ul)'),
            toggle_others = $sidebarMenu.hasClass('toggle-others');

        $items_with_subs.filter('.active').addClass('expanded');

        $items_with_subs.each(function(i, el) {
            var $li = $(el),
                $a = $li.children('a'),
                $sub = $li.children('ul');

            $li.addClass('has-sub');

            $a.on('click', function(ev) {
                ev.preventDefault();

                if (toggle_others) {
                    sidebar_menu_close_items_siblings($li);
                }

                if ($li.hasClass('expanded') || $li.hasClass('opened'))
                    sidebar_menu_item_collapse($li, $sub);
                else
                    sidebar_menu_item_expand($li, $sub);
            });
        });
    }
}