kit/assets/menu/menu.js

kit.PluginManager.register('menu',function(module, exports, require) {

    var AlignModule = require('align');
    var libModule = require('lib');
    var utils = require('utils');


    var defaultMenuOptions = {
        parent: null,
        nodeProperty: 'kitMenu',
        class: 'kit-menu',
        eventType: 'hover',
        hideDelay: 200,
        offsetHorizontal: 0,
        offsetVertical: 0,
        click: (function (event, menu) {
            console.log('Menu click');
        }),
        hover: (function (event, menu) {
            console.log('Menu hover');
        }),
        dblclick: (function (event, menu) {
            console.log('Menu dblclick');
        }),
        hide: (function () {
        })
    };


    var MenuList = [];
    var MenuClass = (function () {

        function Menu(options = {}, items = [])
        {
            //console.log('Menu: constructor');
            var _this = this;
            this.parentActionHandler = this.parentAction.bind(this);
            this.documentListenerHandler = this.documentListener.bind(this);
            this.nodeActionHandler = this.nodeAction.bind(this);

            this.id = MenuList.length;
            MenuList[this.id] = this;


            this.itemList = {};
            this.align = new AlignModule.Class();
            this.node = null;
            this.bInit = false;
            this.deferredHideID = 0;
            this.bActive = false;
            this.options = defaultMenuOptions;
            this.createNode(); //с пула нужна базовая нода
            this.setOptions(options);
            this.addItemList(items);
            this.handleEvent = function(event) {
                // console.log('Menu handleEvent');
                // console.log(event.type);
                switch(event.type) {
                    case 'click':
                        this.options.click(event, _this);
                        break;
                    case 'mouseover':
                        this.options.hover(event, _this);
                        break;
                }
            };
        }
        Menu.prototype.getItemById = function(itemId) {
            if(this.itemList.hasOwnProperty(itemId)) {
                return this.itemList[itemId];
            }
            return false;
        };
        Menu.prototype.getNode = function () {
            if(this.node.innerHTML === '') {
                this.render();
            }
            return this.node;
        };
        Menu.prototype.getParent = function () {
            return this.options.parent;
        };
        Menu.prototype.createNode = function () {
            this.node = document.createElement('div');
            this.node.classList.add(this.options.class);
            this.node.style.display = 'none';
            this.node.setAttribute('data-menu-id', this.id);
            this.node[this.options.nodeProperty] = this;
        };
        Menu.prototype.showNode = function () {
            // console.log('Menu: showNode');
            this.deferredHideCancel();
            this.node.style.display = '';
            this.node.classList.add('active');
            this.options.parent.classList.add('active');
            this.calcStyle();
            this.bActive = true;
            document.addEventListener('click', this.documentListenerHandler, false);
        };
        Menu.prototype.hideNode = function () {
            // console.log('Menu: hideNode');
            this.hideNodeDeferred();
        };
        Menu.prototype.hideNodeDeferred = function () {
            this.deferredHideCancel();
            this.deferredHideID = setTimeout(this.hideNodeNow.bind(this), this.options.hideDelay);
            // console.log('hideNodeDeferred ' + this.deferredHideID);
        };

        /**
         * @returns {Menu}
         */
        Menu.prototype.deferredHideCancel = function () {
            if(this.deferredHideID) {
                clearTimeout(this.deferredHideID);
                this.deferredHideID = 0;
            }
            return this;
        };

        /**
         * @returns {Menu}
         */
        Menu.prototype.hideNodeNow = function () {
            // console.log('Menu: hideNodeNow');
            this.deferredHideCancel();
            this.node.style.display = 'none';
            this.node.classList.remove('active');
            this.options.parent.classList.remove('active');
            this.bActive = false;
            document.removeEventListener('click', this.documentListenerHandler, false);
            return this;
        };

        /**
         * @returns {Menu}
         */
        Menu.prototype.hide = function () {
            this.hideNodeNow();
            var tmp = this;
            while(tmp instanceof MenuClass) {
                tmp = tmp.hideNodeNow().getParentMenu();
            }
            return this;
        };
        Menu.prototype.calcStyle = function () {
            if(!(this.options.parent instanceof Element)) {
                console.warn('Menu.options.parent NOT instanceof Element');
                return false;
            }

            this.node.style.position = 'absolute';
            this.node.style.width = 'fit-content';

            //var parentNode = this.getParentMenuNode() || this.getParent();
            var parentNode = this.getParent();

            var right = true;
            var parentMenu = this.getParentMenu();
            if(parentMenu && parentMenu instanceof Menu) {
                right = !parentMenu.align.left.valid;
            }

            this.align.offsetHorizontal = this.options.offsetHorizontal;
            this.align.offsetVertical = this.options.offsetVertical;
            this.align
                .setNode(this.node)
                .setParentNode(parentNode)
                .setHorizontal(right, false)
                .setVertical(false, true);

            // this.node.setAttribute('data-kit-menu-align-horizontal', horMode);
        };

        /**
         * @return {Menu} | null
         */
        Menu.prototype.getParentMenu = function() {
            if(
                this.getParent() && (this.getParent() instanceof Element) &&
                this.getParent().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass) &&
                this.getParent().kitMenuItem.getMenu() && (this.getParent().kitMenuItem.getMenu() instanceof Menu)
            ) {
                return this.getParent().kitMenuItem.getMenu();
            }
            return null;
        };
        Menu.prototype.getParentMenuNode = function() {
            var parentMenu = this.getParentMenu(),
                parentMenuNode;
            if(parentMenu) {
                parentMenuNode = parentMenu.getNode();
            }
            return parentMenuNode;
        };

        Menu.prototype.addItem = function (options = {}, returnItem = false) {
            var listIndex;
            if(options instanceof MenuItemClass) {
                options.parentId = this.id;
                listIndex = options.options.id;
                this.itemList[listIndex] = options;
            } else if(options instanceof Object){
                if(!options.id) {
                    options.id = this.uniqueId(8);
                }
                listIndex = options.id;
                this.itemList[listIndex] = (new this.MenuItem(this.id)).setOptions(options).init();
            }
            if(returnItem) {
                return this.itemList[listIndex];
            }
            return this;
        };
        Menu.prototype.addItemList = function(itemList = []){
            itemList.forEach((function(element, index, array){
                this.addItem(element);
            }).bind(this));
            return this;
        };
        Menu.prototype.sortItems = function() {
            this.itemList = Object.entries(this.itemList)
                .sort(function(a, b){
                    return a[1].options.sort - b[1].options.sort;
                })
                .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
        };
        Menu.prototype.render = function() {
            //console.log('Menu: render');
            this.sortItems();
            this.node.innerHTML = '';
            for (var i in this.itemList) {
                if(this.itemList.hasOwnProperty(i)) {
                    this.node.append(this.itemList[i].getNode());
                }
            }
            return this;
        };
        Menu.prototype.uniqueId = function (idStrLen = 32) {
            var idStr = '';
            idStrLen && (idStr = (Math.floor((Math.random() * 25)) + 10).toString(36));
            do {
                idStr += (Math.floor((Math.random() * 35))).toString(36);
            } while (idStr.length < idStrLen);
            return (idStr);
        };

        Menu.prototype.setParent = function(parentNode) {
            // console.log('Menu: setParent ' + parentNode);

            if(typeof parentNode  === 'string') {
                parentNode = document.querySelector(parentNode);
            }

            if(!(parentNode instanceof Element)) {
                //console.warn('Menu.setParent: Не удалось получить parent. ' + parentNode);
                return false;
            }

            this.removeParentEventListener();

            this.options.parent = parentNode;

            if(this.bInit) {
                this.reInit();
            }
        };
        Menu.prototype.setEventType = function(type = 'hover') {

            this.options.eventType = type;

            if(this.bInit) {
                this.reInit();
            }
        };
        Menu.prototype.removeParentEventListener = function() {
            // console.log('Menu: removeParentEventListener');
            if(this.options.parent instanceof Element) {
                this.options.parent.classList.remove('active');
                this.options.parent.removeEventListener('click', this.parentActionHandler, false);
                this.options.parent.removeEventListener('mouseover', this.parentActionHandler, false);
                this.options.parent.removeEventListener('mouseout', this.parentActionHandler, false);
            }
        };
        Menu.prototype.addParentEventListener = function() {
            if(this.options.parent instanceof Element) {
                if(this.options.eventType === 'hover') {
                    this.options.parent.addEventListener('mouseover', this.parentActionHandler, false);
                    this.options.parent.addEventListener('mouseout', this.parentActionHandler, false);
                }
                if(this.options.eventType === 'click') {
                    this.options.parent.addEventListener(this.options.eventType, this.parentActionHandler, false);
                }
            }
        };
        Menu.prototype.initNodeHandlers = function() {
            if(this.node) {
                this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
                this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
            }
        };
        Menu.prototype.toggleParent = function() {
            this.node.classList.toggle('active');
            return this.node.classList.contains('active');
        };
        Menu.prototype.insertToNode = function (parent) {
            if(!(parent instanceof Element)) {
                console.warn('Menu.insertToNode - node NOT instanceof Element');
                return false;
            }
            this.setParent(parent);
            this.options.parent.prepend(this.getNode());
        };
        Menu.prototype.init = function () {
            if(this.bInit === true) {
                return;
            }
            if(!this.options.parent instanceof Element) {
                console.warn('Menu.init: Не установлен parent');
            }
            this.setParent(this.options.parent);

            this.render();
            this.options.parent.append(this.getNode());

            this.addParentEventListener();
            this.initNodeHandlers();

            //document.addEventListener('click', this.documentListenerHandler, false);

            this.node.setAttribute('data-kit-menu-init', 1);
            this.bInit = true;

        };
        Menu.prototype.reInit = function () {
            //console.log('Menu: reInit ' + this.id);
            if(this.bInit === false) {
                return;
            }

            this.removeParentEventListener();

            document.removeEventListener('click', this.documentListenerHandler, false);

            this.node.remove();

            this.render();

            this.options.parent.prepend(this.getNode());

            if(this.bActive) {
                this.showNode();
            } else {
                this.hideNode();
            }

            this.addParentEventListener();
            this.initNodeHandlers();

            //document.addEventListener('click', this.documentListenerHandler, false);

        };
        Menu.prototype.toggle = function() {
            if(this.toggleParent()) {
                this.showNode();
            } else {
                this.hideNode();
            }
        };
        Menu.prototype.parentAction = function (event) {
            event.stopPropagation();
            // event.stopImmediatePropagation();
            switch (event.type) {
                case 'mouseout':
                    if (this.needHideByParent(event.relatedTarget)) {
                        this.hideNode();
                    }
                    break;
                case 'mouseover':
                    this.showNode();
                    break;
                case 'click':
                    this.toggle();
                    break;
            }
        };
        Menu.prototype.nodeAction = function (event) {
            event.stopPropagation();
            // event.stopImmediatePropagation();
            switch (event.type) {
                case 'mouseout':
                    break;
                case 'mouseover':
                    break;
                case 'mouseleave':
                    if(this.options.eventType === 'hover') {
                        this.hideNode();
                    }
                    break;
                case 'mouseenter':
                    this.deferredHideCancel();
                    break;
            }
        };
        Menu.prototype.needHideByParent = function(target) {
            var its_menu = target === this.node || this.node.contains(target);
            var its_parent = target === this.options.parent;
            var is_active_parent = this.node.classList.contains('active');
            return !its_menu && !its_parent && is_active_parent;
        };
        Menu.prototype.documentListener = function(event) {
            // console.log('documentListener');
            // console.log(event);

            if (this.needHideByParent(event.target)) {
                this.toggle();
            }
        };
        Menu.prototype.setOptions = function (options = {}) {
            this.options = Object.assign({}, this.options, options);
            this.setParent(this.options.parent);
            return this;
        };

        var MenuItemClass = function () {

            function MenuItem(parentId) {
                var _thisMenuItem = this;
                this.parentId = Number(parentId);
                this.node = Element;
                this.bInit = false;
                this.bActive = false;
                this.child = null;
                this.options = {
                    id: '',
                    icon: libModule.icon.options,
                    arrow: libModule.icon.arrowMenu,
                    label: 'menu',
                    href: 'javascript:void(0);',
                    class: 'kit-menu-item',
                    sort: 500,
                    visible: true,
                    hover: this.defaultHoverHandler,
                    click: this.defaultClickHandler,
                    dblclick: this.defaultDblClickHandler,
                };

                this.handleEvent = function(event) {
                    event.stopPropagation();
                    switch(event.type) {
                        case 'mouseover':
                            this.options.hover(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
                            break;
                        case 'click':
                            this.options.click(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
                            break;
                        case 'dblclick':
                            this.options.dblclick(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
                            break;
                    }
                };
                this.createNode();
            }

            /**
             * @param event {MouseEvent}
             * @param menuItem {MenuItem}
             * @param menu {Menu}
             */
            MenuItem.prototype.defaultHoverHandler = function (event, menuItem, menu) {
                console.log('hover: ' + menuItem.options.label);
            };
            /**
             * @param event {MouseEvent}
             * @param menuItem {MenuItem}
             * @param menu {Menu}
             */
            MenuItem.prototype.defaultClickHandler = function (event, menuItem, menu) {
                console.log('click: ' + menuItem.options.label);
                menu.hide();
            };
            /**
             * @param event {MouseEvent}
             * @param menuItem {MenuItem}
             * @param menu {Menu}
             */
            MenuItem.prototype.defaultDblClickHandler = function (event, menuItem, menu) {
                console.log('dblclick: ' + menuItem.options.label);
            };

            MenuItem.prototype.getMenu = function () {
                return MenuList[this.parentId];
            };

            MenuItem.prototype.getParent = function () {
                if(MenuList[this.parentId] instanceof Menu) {
                    return MenuList[this.parentId].getNode();
                }
                return null;
            };

            MenuItem.prototype.getId = function () {
                return this.options.id;
            };

            /**
             * @returns HTMLElement
             */
            MenuItem.prototype.getNode = function () {
                return this.node;
            };

            MenuItem.prototype.createNode = function () {
                this.node = document.createElement('a');
                this.node.style.position = 'relative';
                this.node.dataset.parentId = this.parentId;
                this.node.kitMenuItem = this;
            };

            /**
             * @param content HTMLElement | string
             * @returns {MenuItem}
             */
            MenuItem.prototype.setLabel = function (content = '') {
                this.options.label = content;
                var wrap = this.getNodeScopeElementByClassName('kit-menu-item__label');
                this.setContent(wrap, content);
                return this;
            };

            /**
             * @param href
             * @returns {MenuItem}
             */
            MenuItem.prototype.setHref = function (href = 'javascript:void(0);') {
                this.options.href = href;
                this.getNode().setAttribute('href', href);
                return this;
            };

            /**
             * @param content HTMLElement | string
             * @returns {MenuItem}
             */
            MenuItem.prototype.setIcon = function (content = '') {
                this.options.icon = content;
                var wrap = this.getNodeScopeElementByClassName('kit-menu-item__icon');
                this.setContent(wrap, content);
                return this;
            };

            /**
             * @param sort int
             * @returns {MenuItem}
             */
            MenuItem.prototype.setSort = function (sort = 500) {
                this.options.sort = Number(sort);
                return this;
            };

            /**
             * @param content HTMLElement | string
             * @returns {MenuItem}
             */
            MenuItem.prototype.setArrow = function (content = '') {
                this.options.arrow = content;
                var wrap = this.getNodeScopeElementByClassName('kit-menu-item__arrow');
                this.setContent(wrap, content);
                return this;
            };
            MenuItem.prototype.setId = function (id = '') {
                if(id) {
                    this.options.id = id;
                }
                this.node.id = this.options.id;
                return this;
            };
            MenuItem.prototype.setVisible = function (visible = true) {
                this.options.visible = visible;
                this.node.style.display = this.options.visible?'':'none';
                return this;
            };

            /**
             * @param {Menu} menu
             * @return {MenuItem}
             */
            MenuItem.prototype.setChild = function (menu) {
                if(menu instanceof Menu) {
                    menu.setParent(this.node);
                    menu.init();
                }
                else if( Array.isArray(menu) ) {
                    var menuClass;
                    menuClass = new Menu();
                    menu.forEach(function (item, i) {
                        if(typeof item === 'object') {
                            menuClass.addItem(item);
                        }
                    });
                    menuClass.setParent(this.node);
                    menuClass.init();
                }
                return this;
            };
            MenuItem.prototype.addClass = function (addClass = '') {
                this.node.classList.add(addClass);
                return this;
            };

            /**
             * @param options Object
             * @return {MenuItem}
             */
            MenuItem.prototype.setOptions = function (options = {}) {

                this.options = Object.assign({}, this.options, options);

                return this;
            };

            /**
             * @return {MenuItem}
             */
            MenuItem.prototype.render = function () {

                this.setLabel(this.options.label);
                this.setHref(this.options.href);
                this.setId(this.options.id);
                this.addClass(this.options.class);
                this.setChild(this.options.child);
                this.setIcon(this.options.icon);
                this.setArrow(this.options.arrow);
                this.setVisible(this.options.visible);
                this.setSort(this.options.sort);

                return this;
            };

            MenuItem.prototype.init = function () {

                if(this.bInit) {
                    return this;
                }
                this.render();

                this.node.removeEventListener('click', this, false);
                this.node.removeEventListener('dblclick', this, false);
                this.node.addEventListener('click', this, false);
                this.node.addEventListener('dblclick', this, false);

                this.bInit = true;
                return this;
            };

            MenuItem.prototype.reInit = function () {

                this.render();

                this.node.removeEventListener('click', this, false);
                this.node.removeEventListener('dblclick', this, false);
                this.node.addEventListener('click', this, false);
                this.node.addEventListener('dblclick', this, false);

                return this;
            };

            MenuItem.prototype.remove = function () {
                this.node.removeEventListener('click', this, false);
                this.node.removeEventListener('dblclick', this, false);
                var id = this.options.id;
                //console.log('remove item' + id);
                setTimeout((function(parentId, id){
                    return function() {
                        if(MenuList.hasOwnProperty(parentId) && MenuList[parentId].itemList.hasOwnProperty(id)) {
                            delete MenuList[parentId].itemList[id];
                            MenuList[parentId].reInit();
                        }
                    };
                })(this.parentId, this.options.id),0);
            };

            /**
             * @param className
             * @returns HTMLElement
             */
            MenuItem.prototype.getNodeScopeElementByClassName = function(className = ''){
                var wrap;
                this.node && (wrap = this.node.querySelector(':scope > .' + className));

                if(!wrap) {
                    wrap = document.createElement('div');
                    wrap.classList.add(className);
                    this.node.append(wrap);
                }
                return wrap;
            };

            /**
             * @param node HTMLElement
             * @param content HTMLElement | string
             * @param isText boolean
             * @return boolean
             */
            MenuItem.prototype.setContent = function(node, content, isText = false){
                if(!(node instanceof Element)) {
                    return false;
                }
                while (node.firstChild) {
                    node.removeChild(node.firstChild);
                }
                if((content instanceof Element) || isText) {
                    node.append(content);
                } else {
                    node.innerHTML = content;
                }
                return true;
            };


            return MenuItem;
        }();
        Menu.prototype.MenuItem = MenuItemClass;

        return Menu;
    })();
    var getInstance = function(options = {}, items = []) {
        return new MenuClass(options, items);
    };
    var getActiveMenuIdList = function(){
        var idList = [];
        MenuList.forEach(function(element, index, array){
            var pos, posId, id, parentId;
            if((element instanceof MenuClass) && element.bInit && element.bActive) {
                id = element.id;
                parentId = false;
                element.getParentMenu() && (parentId = element.getParentMenu().id);
                !(parentId!==false&&(((pos=idList.indexOf(parentId))!==-1)?((idList.indexOf(id)===-1)&&idList.splice(pos
                    +1,0,id)):(((posId=idList.indexOf(id))!==-1)?idList.splice(posId,0,parentId):(idList.push(parentId),
                    idList.push(id))),0))&&(idList.indexOf(id)===-1)&&(idList.push(id));
            }
        });
        return idList
    };
    var reInitAllMenu = function(){
        var idList = getActiveMenuIdList();
        idList.forEach(function(id, i, arr) {
            MenuList[id].reInit();
        });
    };
    var reCalcAllMenu = function(){
        console.log('reCalcAllMenu');
        var idList = getActiveMenuIdList();
        idList.forEach(function(id, i, arr) {
            MenuList[id].calcStyle();
        });
    };
    var autoload = function(doc = document){
        if(!(doc instanceof Node)) {
            return false;
        }
        var menuList = doc.querySelectorAll('.' + defaultMenuOptions.class);
        menuList.forEach(
            function(menuNode, currentIndex, listObj) {
                if(!menuNode.hasOwnProperty(defaultMenuOptions.nodeProperty)) {

                }
            }
        );
    };

    var reCalcAllMenuLimiter = new utils.StackExecutionLimiter(this, reCalcAllMenu, 200);
    var globalHandlers = {
        resize: function(){
            reCalcAllMenuLimiter.exec();
        },
    };

    window.addEventListener('resize', globalHandlers.resize);
    this.Class = MenuClass;
    this.getInstance = getInstance;
    this.reInitAllMenu = reInitAllMenu;
    this.reCalcAllMenu = reCalcAllMenu;
    this.autoload = autoload;

    return this;
});