mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
init
This commit is contained in:
@@ -0,0 +1,787 @@
|
||||
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;
|
||||
});
|
||||
Reference in New Issue
Block a user