erp/Web/js/res/menu.js


//{ id, text, parentId?, href?, hrefTarget?, icon, iconCls, cls, expanded, children }

var Menu_Id = 1;

var Menu = function (element, options) {
    this.element = $(element);
    this.options = $.extend(true, {}, this.options, options);
    this.init();
}
var open_li = null;
var open_el = null;
var sel_li = null;
Menu.prototype = {

    options: {
        data: null,    
        itemclick: null
    },

    loadData: function (data) {
        this.options.data = data || [];
        this.refresh();
    },

    refresh: function () {
        this._render();
    },

    init: function () {
        var me = this,
            opt = me.options,
            el = me.element;

        //el.addClass('menu');

        me.loadData(opt.data);

        el.on('click', '.menu-title', function (event) {
            var el = $(event.currentTarget);
            var li = el.parent();
            var item = me.getItemByEvent(event);
            //alert(item);
            //            me.toggleItem(item);
            //alert(li + "," + open_li);
            //if (open_li.getAttribute("data-id") == li.getAttribute("data-id")) {
            //    li.toggleClass('open');
            //} else {
            //    if (open_li != null) {
            //        if(open_li.attr("data-id") == li.attr("data-id"))
            //        open_li.toggleClass('open');
            //    }
            //    else li.toggleClass('open');
            //    open_li = li;
            //}

            if (open_el != null) {
                if (open_el.attr("data-id") == el.attr("data-id")) {
                    open_li.toggleClass("open");
                    open_li = null;
                    open_el = null;
                    return;
                }
                open_li.toggleClass("open");
                open_li = null;
                open_el = null;
            }
            li.toggleClass('open');
            open_li = li;
            open_el = el;
            
            //li.toggleClass('open');
            if (opt.itemclick) opt.itemclick.call(me, item);
        });
        el.on('click', '.menu-sec-title', function (event) {
            var el = $(event.currentTarget);

            var li = el.parent();

            var item = me.getSecItemByEvent(event);

            //alert(item);
            //            me.toggleItem(item);
            if (sel_li != null) sel_li.toggleClass('sel');

            li.toggleClass('sel');
            sel_li = li;

            if (opt.itemclick) opt.itemclick.call(me, item);
        });
    },

    _render: function () {
        var data = this.options.data || [];
        var html = this._renderItems(data, null);
        this.element.html(html);        
    },

    _renderItems: function (items, parent) {
        var s = '<ul class="' + (parent ? "menu-submenu" : "menu") + '">';
        for (var i = 0, l = items.length; i < l; i++) {
            var item = items[i];
            s += this._renderItem(item,(parent?1:0));
        }
        s += '</ul>';
        return s;
    },

    _renderItem: function (item, idx) {
        idx = idx || 0;
        var me = this,
            hasChildren = item.children && item.children.length > 0;

        var s = '<li class="' + (hasChildren ? 'has-children' : '') + '">';        //class="menu-item" open, expanded?
        if ( idx > 0) s += '<a class="menu-sec-title" data-id="' + item.id + '" ';
        else s += '<a class="menu-title" data-id="' + item.id + '" ';
        //        if (item.href) {
        //            s += 'href="' + item.href + '" target="' + (item.hrefTarget || '') + '"';
        //        }
        s += '>';

        s += '<i class="menu-icon fa ' + item.iconCls + '"></i>';
        s += '<span class="menu-text">' + item.text + '</span>';

        if (hasChildren) {
            s += '<span class="menu-arrow fa"></span>';
        }

        s += '</a>';

        if (hasChildren) {
            s += me._renderItems(item.children, item);
        }

        s += '</li>';
        return s;
    },

    getItemByEvent: function (event) {
        var el = $(event.target).closest('.menu-title');
        var id = el.attr("data-id");
        return this.getItemById(id);
    },
    getSecItemByEvent: function (event) {
        var el = $(event.target).closest('.menu-sec-title');
        var id = el.attr("data-id");
        return this.getItemById(id);
    },

    getItemById: function (id) {
        var me = this,
            idHash = me._idHash;

        if (!idHash) {
            idHash = me._idHash = {};
            function each(items) {
                for (var i = 0, l = items.length; i < l; i++) {
                    var item = items[i];
                    if (item.children) each(item.children);
                    idHash[item.id] = item;
                }
            }
            each(me.options.data);
        }

        return me._idHash[id];
    }

};