bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-09-29 12:05:44 +03:00
parent 77fda4e363
commit bf74cd1618
21 changed files with 3815 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/menu/menu.css
+9 -8
View File
@@ -21,11 +21,11 @@
background: var(--kit-color-menu-content);
display: none;
}
.kit-menu[data-kit-align-horizontal="right"] {
.kit-menu[data-kit-align-horizontal-align="right"] {
border-left: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
box-shadow: 0 0 10px 0 #00000033, inset 5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
}
.kit-menu[data-kit-align-horizontal="left"] {
.kit-menu[data-kit-align-horizontal-align="left"] {
border-right: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
box-shadow: 0 0 10px 0 #00000033, inset -5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
}
@@ -46,6 +46,7 @@
padding-left: 0.5em;
padding-right: 0.5em;;
min-width: calc(15 * 1em);
text-decoration: none;
}
.kit-menu-item > *:not(.kit-menu) {
margin-left: 0.5em;
@@ -104,8 +105,8 @@
.kit-menu-item__label:hover > a {
color: var(--kit-color-menu-content-text-hover);
}
.kit-menu[data-kit-align-horizontal="left"] .kit-menu-item:before,
.kit-menu[data-kit-align-horizontal="right"] .kit-menu-item:before
.kit-menu[data-kit-align-horizontal-align="left"] .kit-menu-item:before,
.kit-menu[data-kit-align-horizontal-align="right"] .kit-menu-item:before
{
content: "";
position: absolute;
@@ -119,7 +120,7 @@
left: 0;
right: unset;
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item:before {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item:before {
right: 0;
left: unset;
}
@@ -142,14 +143,14 @@
flex: 0 0 1.5em;
order: 1000;
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
/*order: 10;*/
/*transform: rotate(180deg);*/
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
/*order: 990;*/
}
.kit-menu[data-kit-align-horizontal="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
.kit-menu[data-kit-align-horizontal-align="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
}
.kit-menu-item__arrow {
assets/menu/menu.js
+179 -57
View File
@@ -1,18 +1,23 @@
kit.PluginManager.register('menu',function(module, exports, require) {
/** @module menu */
//todo: instance, options, auto-options-by-node, fast reCalc, fast reInit, userEventManager, collection
__PluginManager__.register('menu',function(module, exports, require) {
var AlignModule = require('align');
var align = require('align');
var libModule = require('lib');
var utils = require('utils');
/**
* @class kitMenuClassDefaultOptions
*/
var defaultMenuOptions = {
parent: null,
nodeProperty: 'kitMenu',
nodeProperty: 'menu',
class: 'kit-menu',
eventType: 'hover',
animation: '',
hideDelay: 200,
offsetHorizontal: 0,
offsetVertical: 0,
alignOffset: [0, 0],
click: (function (event, menu) {
console.log('Menu click');
}),
@@ -27,9 +32,24 @@ kit.PluginManager.register('menu',function(module, exports, require) {
};
var MenuList = [];
var MenuClass = (function () {
var MenuList = [];
var MenuListIncrement = 0;
var MenuClass = (function () {
/**
* @typedef kitMenuItemHandler
* @param event {MouseEvent}
* @param menuItem {MenuItem}
* @param menu {Menu}
*/
/**
* @param options
* @param items
* @constructor
*/
function Menu(options = {}, items = [])
{
//console.log('Menu: constructor');
@@ -38,12 +58,11 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.documentListenerHandler = this.documentListener.bind(this);
this.nodeActionHandler = this.nodeAction.bind(this);
this.id = MenuList.length;
this.id = ++MenuListIncrement;
MenuList[this.id] = this;
this.itemList = {};
this.align = new AlignModule.Class();
this.align = new align.Class();
this.node = null;
this.bInit = false;
this.deferredHideID = 0;
@@ -85,17 +104,21 @@ kit.PluginManager.register('menu',function(module, exports, require) {
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;
this.node.kit = this.node.kit || {};
this.node.kit[this.options.nodeProperty] = this;
};
Menu.prototype.showNode = function () {
// console.log('Menu: showNode');
// console.log('Menu: showNode ' + this.id, this.bActive);
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);
if(!this.bActive) {
this.node.style.display = '';
this.node.classList.add('active');
this.options.parent.classList.add('active');
this.calcStyle();
this.bActive = true;
this.addDocumentEventListener();
}
this.addAnimation();
};
Menu.prototype.hideNode = function () {
// console.log('Menu: hideNode');
@@ -125,13 +148,25 @@ kit.PluginManager.register('menu',function(module, exports, require) {
// console.log('Menu: hideNodeNow');
this.deferredHideCancel();
this.node.style.display = 'none';
this.removeAnimation();
this.node.classList.remove('active');
this.options.parent.classList.remove('active');
this.bActive = false;
document.removeEventListener('click', this.documentListenerHandler, false);
this.removeDocumentEventListener();
return this;
};
Menu.prototype.removeAnimation = function(){
if(this.options.animation && this.node && this.node.classList.contains(this.options.animation)){
this.node.classList.remove(this.options.animation);
}
};
Menu.prototype.addAnimation = function(){
if(this.options.animation && this.node && !this.node.classList.contains(this.options.animation)){
this.node.classList.add(this.options.animation);
}
};
/**
* @returns {Menu}
*/
@@ -143,7 +178,8 @@ kit.PluginManager.register('menu',function(module, exports, require) {
}
return this;
};
Menu.prototype.calcStyle = function () {
Menu.prototype.calcStyle = function (recursive = false) {
// console.log('calcStyle ' + this.id);
if(!(this.options.parent instanceof Element)) {
console.warn('Menu.options.parent NOT instanceof Element');
return false;
@@ -155,35 +191,67 @@ kit.PluginManager.register('menu',function(module, exports, require) {
//var parentNode = this.getParentMenuNode() || this.getParent();
var parentNode = this.getParent();
var right = true;
var hDirection = 'right';
var parentMenu = this.getParentMenu();
if(parentMenu && parentMenu instanceof Menu) {
right = !parentMenu.align.left.valid;
hDirection = parentMenu.align.status.horizontal.direction;
}
var hAlign = 'right';
if(parentMenu && parentMenu instanceof Menu) {
hAlign = parentMenu.align.status.horizontal.align;
}
this.align.offsetHorizontal = this.options.offsetHorizontal;
this.align.offsetVertical = this.options.offsetVertical;
this.align.offset = this.options.alignOffset;
this.align
.setNode(this.node)
.setParentNode(parentNode)
.setHorizontal(right, false)
.setVertical(false, true);
.setHorizontal(hDirection, hAlign)
.setVertical('bottom', 'top');
// this.node.setAttribute('data-kit-menu-align-horizontal', horMode);
if(recursive) {
this.calcStyleChildMenu(true, MenuList);
}
};
Menu.prototype.calcStyleChildMenu = function(recursive = false, MenuList = null){
var i, MenuListActive = [];
for(i in MenuList){
if(!MenuList.hasOwnProperty(i) || !(MenuList[i] instanceof Menu)) {
continue;
}
if(MenuList[i].bActive && this !== MenuList[i]) {
MenuListActive.push(MenuList[i]);
}
}
for(i in MenuListActive){
if(MenuListActive[i].getParentMenu() === this) {
MenuListActive[i].calcStyle();
if(recursive) {
MenuListActive[i].calcStyleChildMenu(true, MenuListActive);
}
}
}
};
/**
* @return {Menu} | null
*/
Menu.prototype.getParentMenu = function() {
if(this.getParent() && this.getParent().kitMenuItem) {
return this.getParent().kitMenuItem.getMenu();
}
return undefined;
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)
this.getParent().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass)
) {
return this.getParent().kitMenuItem.getMenu();
}
return null;
return undefined;
};
Menu.prototype.getParentMenuNode = function() {
var parentMenu = this.getParentMenu(),
@@ -194,6 +262,12 @@ kit.PluginManager.register('menu',function(module, exports, require) {
return parentMenuNode;
};
/**
*
* @param options {kitMenuItemOptions}
* @param returnItem
* @return {Menu}
*/
Menu.prototype.addItem = function (options = {}, returnItem = false) {
var listIndex;
if(options instanceof MenuItemClass) {
@@ -262,7 +336,7 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent = parentNode;
if(this.bInit) {
this.reInit();
this.reInit(true);
}
};
Menu.prototype.setEventType = function(type = 'hover') {
@@ -273,6 +347,12 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.reInit();
}
};
Menu.prototype.addDocumentEventListener = function() {
document.addEventListener('click', this.documentListenerHandler, false);
};
Menu.prototype.removeDocumentEventListener = function() {
document.removeEventListener('click', this.documentListenerHandler, false);
};
Menu.prototype.removeParentEventListener = function() {
// console.log('Menu: removeParentEventListener');
if(this.options.parent instanceof Element) {
@@ -293,11 +373,21 @@ kit.PluginManager.register('menu',function(module, exports, require) {
}
}
};
Menu.prototype.initNodeHandlers = function() {
if(this.node) {
this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
Menu.prototype.addNodeEventListener = function() {
if(!this.node) {
return;
}
this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
};
Menu.prototype.removeNodeEventListener = function() {
if(!this.node) {
return;
}
this.node.removeEventListener('mouseenter', this.nodeActionHandler, false);
this.node.removeEventListener('mouseleave', this.nodeActionHandler, false);
};
Menu.prototype.toggleParent = function() {
this.node.classList.toggle('active');
@@ -324,7 +414,7 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent.append(this.getNode());
this.addParentEventListener();
this.initNodeHandlers();
this.addNodeEventListener();
//document.addEventListener('click', this.documentListenerHandler, false);
@@ -332,15 +422,17 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.bInit = true;
};
Menu.prototype.reInit = function () {
//console.log('Menu: reInit ' + this.id);
Menu.prototype.reInit = function (recursiveCalcStyle = false) {
// console.warn('Menu: reInit ' + this.id);
if(this.bInit === false) {
return;
}
this.removeNodeEventListener();
this.removeParentEventListener();
//this.removeDocumentEventListener();
document.removeEventListener('click', this.documentListenerHandler, false);
this.removeAnimation();
this.node.remove();
@@ -349,17 +441,18 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent.prepend(this.getNode());
if(this.bActive) {
this.calcStyle(recursiveCalcStyle);
this.showNode();
} else {
this.hideNode();
}
this.addNodeEventListener();
this.addParentEventListener();
this.initNodeHandlers();
//document.addEventListener('click', this.documentListenerHandler, false);
//this.addDocumentEventListener();
};
Menu.prototype.toggle = function() {
if(this.toggleParent()) {
this.showNode();
@@ -412,10 +505,16 @@ kit.PluginManager.register('menu',function(module, exports, require) {
// console.log('documentListener');
// console.log(event);
if (this.needHideByParent(event.target)) {
this.toggle();
if(this.options.eventType === 'click') {
if (this.needHideByParent(event.target)) {
this.toggle();
}
}
};
/**
* @param options {kitMenuClassDefaultOptions}
* @return {Menu}
*/
Menu.prototype.setOptions = function (options = {}) {
this.options = Object.assign({}, this.options, options);
this.setParent(this.options.parent);
@@ -431,16 +530,22 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.bInit = false;
this.bActive = false;
this.child = null;
/**
* @class kitMenuItemOptions
*/
this.options = {
id: '',
icon: libModule.icon.options,
arrow: libModule.icon.arrowMenu,
icon: libModule.svg.options,
arrow: libModule.svg.arrowMenu,
label: 'menu',
href: 'javascript:void(0);',
class: 'kit-menu-item',
sort: 500,
visible: true,
/** @type {kitMenuItemHandler} */
hover: this.defaultHoverHandler,
/** @type {kitMenuItemHandler} */
click: this.defaultClickHandler,
dblclick: this.defaultDblClickHandler,
};
@@ -725,6 +830,15 @@ kit.PluginManager.register('menu',function(module, exports, require) {
return Menu;
})();
var getInstance = function(options = {}, items = []) {
if(options instanceof Menu) {
return options;
}
if(typeof options === 'string') {
options = document.querySelector(options);
}
if((options instanceof HTMLElement) && options.kit && options.kit.menu) {
return options.kit.menu;
}
return new MenuClass(options, items);
};
var getActiveMenuIdList = function(){
@@ -755,14 +869,14 @@ kit.PluginManager.register('menu',function(module, exports, require) {
MenuList[id].calcStyle();
});
};
var autoload = function(doc = document){
var autoload = function(doc = document, selector = '.kit-menu'){
if(!(doc instanceof Node)) {
return false;
}
var menuList = doc.querySelectorAll('.' + defaultMenuOptions.class);
var menuList = doc.querySelectorAll(selector);
menuList.forEach(
function(menuNode, currentIndex, listObj) {
if(!menuNode.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
if(!menuNode.kit || !menuNode.kit.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
}
}
@@ -777,11 +891,19 @@ kit.PluginManager.register('menu',function(module, exports, require) {
};
window.addEventListener('resize', globalHandlers.resize);
this.Class = MenuClass;
this.getInstance = getInstance;
this.reInitAllMenu = reInitAllMenu;
this.reCalcAllMenu = reCalcAllMenu;
this.autoload = autoload;
return this;
/**
* @memberof kitCore
* @instance
*/
var menu = {
Class: MenuClass,
getInstance: getInstance,
reInitAllMenu: reInitAllMenu,
reCalcAllMenu: reCalcAllMenu,
autoload: autoload,
MenuList: MenuList,
};
return module.exports = menu;
});