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-11-01 21:52:13 +03:00
parent 353e0715ca
commit 82452a959e
12 changed files with 798 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/ActionCollection/ActionCollection.js
+12 -8
View File
@@ -2,26 +2,30 @@
kit.PluginManager.register('ActionCollection', function(module, exports, require, global) {
var Collection = require('Collection');
var support = require('support');
/**
* @class ActionCollection
* @extends {kit.Collection}
* @memberOf kit
*/
var ActionCollection = function (list = []) {
this.collection = new Collection(list);
Collection.prototype.constructor.apply(this, arguments);
};
ActionCollection.prototype.push = function (action) {
this.collection.push(action);
};
ActionCollection.prototype.run = function (count = -1) {
this.collection.map(function (action) {
var proto = ActionCollection.prototype;
proto.run = function (count = -1) {
this.map(function (action) {
action.run(count);
})
};
ActionCollection.prototype.stop = function () {
this.collection.map(function (action) {
proto.stop = function () {
this.map(function (action) {
action.stop();
})
};
support.extend(ActionCollection.prototype, Collection.prototype);
return module.exports = ActionCollection;
});
assets/Viewer/Viewer.js
+69 -23
View File
@@ -10,12 +10,13 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
var AnimationTrap = function (node, callbackBefore = function(){}, callbackAfter = function(){}) {
this.node = support.getNode(node);
this.active = 0;
this.active = false;
this.__timeoutId = 0;
this.__callbackOptions = {};
this.callbackBefore = callbackBefore;
this.callbackAfter = callbackAfter;
this.__callbackAfterHandler = function () {
this.callbackAfter();
this.callbackAfter(this.__callbackOptions);
this.stop();
}.bind(this);
this.__animationstart = false;
@@ -28,30 +29,43 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
new Action(this.node, 'animationcancel', this.__callbackAfterHandler)
]);
};
AnimationTrap.prototype.run = function () {
AnimationTrap.prototype.run = function (options = {}) {
if(this.active === 1){
if(this.active){
return;
}
this.active = 1;
this.__callbackOptions = Object.assign({
useAnim: true
}, options);
if(!this.__callbackOptions.useAnim){
this.callbackBefore(this.__callbackOptions);
this.callbackAfter(this.__callbackOptions);
this.stop();
return;
}
this.active = true;
this.__animationStartAction.run(1);
this.callbackBefore();
this.callbackBefore(this.__callbackOptions);
this.__animationEndAction.run(1);
this.__timeoutId = setTimeout(function () {
if(!this.__animationstart) {
this.__callbackAfterHandler();
this.__callbackAfterHandler(this.__callbackOptions);
}
}.bind(this), 100);
};
AnimationTrap.prototype.stop = function () {
clearTimeout(this.__timeoutId);
this.__timeoutId = 0;
this.__callbackOptions = {};
this.__animationstart = false;
this.__animationStartAction.stop();
this.__animationEndAction.stop();
this.active = 0;
this.active = false;
};
@@ -76,26 +90,36 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
this.node = support.getNode(node);
this.masterNode = support.getNode(masterNode);
this.onShow = new Collection();
this.onShowBefore = new Collection();
this.onHide = new Collection();
this.onHideBefore = new Collection();
this.animShowClass = '';
this.animHideClass = '';
this.delayHide = 0;
this.activeMasterClass = 'active';
this.__aminationTrapHide = new AnimationTrap(this.node, function () {
this.__aminationTrapHide = new AnimationTrap(this.node, function (options) {
if(options.onHideBefore !== false) {
this.onHideBefore.eachCall();
}
removeAnimation.call(this, this.animShowClass);
addAnimation.call(this, this.animHideClass);
}.bind(this), function () {
}.bind(this), function (options) {
if(this.masterNode && this.activeMasterClass) {
this.masterNode.classList.remove(this.activeMasterClass);
}
this.node.classList.add('hide');
this.node.classList.remove('show');
if(options.onHide !== false) {
this.onHide.eachCall();
}
this.node.style.display = 'none';
}.bind(this));
this.__aminationTrapShow = new AnimationTrap(this.node, function () {
this.__aminationTrapShow = new AnimationTrap(this.node, function (options = {}) {
if(options.onShowBefore !== false) {
this.onShowBefore.eachCall();
}
this.node.classList.remove('hide');
this.node.classList.add('show');
if(this.node.style.display === 'none') {
@@ -104,10 +128,13 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
if(this.masterNode && this.activeMasterClass) {
this.masterNode.classList.add(this.activeMasterClass);
}
removeAnimation.call(this, this.animHideClass);
addAnimation.call(this, this.animShowClass);
if(options.onShow !== false) {
this.onShow.eachCall();
}.bind(this), function () {
}
}.bind(this), function (options = {}) {
}.bind(this));
@@ -121,30 +148,42 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
};
var proto = Viewer.prototype;
proto.show = function(){
proto.show = function(options = {}){
if(this.isShown()) {
return;
}
deferredHideCancel.call(this);
this.__aminationTrapHide.stop();
this.__aminationTrapShow.run();
options.useAnim = !!this.animHideClass;
this.stop();
this.__aminationTrapShow.run(options);
};
proto.hide = function(){
proto.hide = function(options = {}){
if(this.isHidden()) {
return;
}
options.useAnim = !!this.animHideClass;
this.__aminationTrapShow.stop();
var hideDeferred = function () {
deferredHideCancel.call(this);
if(this.delayHide) {
this.__deferredHideID = setTimeout(hide.bind(this), this.delayHide);
return;
}
hide();
}.bind(this);
var hide = function() {
deferredHideCancel.call(this);
this.__aminationTrapShow.stop();
this.__aminationTrapHide.run();
this.__aminationTrapHide.run(options);
}.bind(this);
hideDeferred();
};
proto.toggle = function(){
@@ -156,15 +195,22 @@ kit.PluginManager.register('Viewer', function(module, exports, require, global)
return false;
};
proto.isShown = function(){
return !this.isHidden() && !this.__aminationTrapHide.active;
return !this.isHidden();
};
proto.isHidden = function(){
var result = this.node.classList.contains('hide');
result = result || getComputedStyle(this.node).display === 'none';
if(this.masterNode && this.activeMasterClass) {
result = result || !this.masterNode.classList.contains(this.activeMasterClass);
}
return result || this.__aminationTrapHide.active;
return result || this.__aminationTrapHide.active || this.__deferredHideID;
};
proto.stop = function () {
this.__aminationTrapHide.stop();
this.__aminationTrapShow.stop();
deferredHideCancel.call(this);
// removeAnimation.call(this, this.animHideClass);
// removeAnimation.call(this, this.animShowClass);
};
return module.exports = Viewer;
});
assets/align/align.js
+28 -9
View File
@@ -457,6 +457,11 @@ kit.PluginManager.register('align',function(module, exports, require) {
};
/**
*
* @param node
* @return {AlignClass}
*/
AlignClass.prototype.setNode = function(node){
this.unset();
this.node = support.getNode(node);
@@ -471,6 +476,10 @@ kit.PluginManager.register('align',function(module, exports, require) {
return this;
};
/**
* @param node
* @return {AlignClass}
*/
AlignClass.prototype.setParentNode = function(node){
this.parentNode = support.getNode(node);
if(this.__calc) {
@@ -478,6 +487,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
}
return this;
};
AlignClass.prototype.setLimiterNode = function(node){
this.limiterNode = support.getNode(node) || window;
if(this.__calc) {
@@ -520,18 +530,27 @@ kit.PluginManager.register('align',function(module, exports, require) {
return this;
};
/**
*
* @param hAlign
* @param vAlign
* @param hDirection
* @param vDirection
* @return {AlignClass}
*/
AlignClass.prototype.set = function(hAlign, vAlign, hDirection, vDirection){
this.setEx('vertical', vDirection, vAlign);
this.setEx('horizontal', hDirection, hAlign);
return this;
};
AlignClass.prototype.setVertical = function(direction, align){
this.setEx('vertical', direction, align);
this.setEx('vertical', vAlign, vDirection);
this.setEx('horizontal', hAlign, hDirection);
return this;
};
AlignClass.prototype.setHorizontal = function(direction, align){
this.setEx('horizontal', direction, align);
AlignClass.prototype.setVertical = function(align, direction){
this.setEx('vertical', align, direction);
return this;
};
AlignClass.prototype.setHorizontal = function(align, direction){
this.setEx('horizontal', align, direction);
return this;
};
@@ -544,7 +563,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
}
};
AlignClass.prototype.setEx = function(axis, direction, align){
AlignClass.prototype.setEx = function(axis, align, direction){
this.reset(axis === 'horizontal', axis === 'vertical');
assets/collection/collection.js
+14 -23
View File
@@ -91,13 +91,16 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
return ob;
};
Collection.prototype.serialize = function () {
return JSON.stringify(this.all());
return JSON.stringify(this.toObject());
};
Collection.prototype.serializeArray = function () {
return JSON.stringify(this.toArray());
};
Collection.prototype.has = function (key) {
return this.data.hasOwnProperty(key) && this.__keys.includes(safeArrayKey(key));
return this.__keys.includes(safeArrayKey(key));
};
Collection.prototype.indexKey = function (key) {
return this.__keys.indexOf(key);
return this.__keys.indexOf(safeArrayKey(key));
};
/**
* @param key
@@ -157,17 +160,13 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
* @return {kit.Collection}
*/
Collection.prototype.each = function (callback = true) {
var BreakException = {}, i;
try {
var i;
if(this.__keys.length)
for (i = 0; i < this.__keys.length; i++) {
if(valueEx(callback, this.__values[i], this.__keys[i], this.data) === false) {
throw BreakException;
break;
}
}
} catch (e) {
if (e !== BreakException) throw e;
}
return this;
};
/**
@@ -175,17 +174,13 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
* @return {kit.Collection}
*/
Collection.prototype.eachReverse = function (callback = true) {
var BreakException = {}, i;
try {
var i;
if(this.__keys.length)
for (i = this.__keys.length - 1; i >= 0; i--) {
if(valueEx(callback, this.__values[i], this.__keys[i], this.data) === false) {
throw BreakException;
break;
}
}
} catch (e) {
if (e !== BreakException) throw e;
}
return this;
};
/**
@@ -328,7 +323,7 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
* Method removes and returns the last item from the collection
*/
Collection.prototype.pop = function(){
var index = this.length - 1;
var index = this.__keys.length - 1;
if(index < 0) {
return undefined;
}
@@ -381,13 +376,12 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
* @return {kit.Collection}
*/
Collection.prototype.eachCall = function (context, args1, args2) {
var args = [];
var args = [], i;
if(arguments.length > 1)
for(var i = 1; arguments.length - 1 >= i;i++) {
for(i = 1; arguments.length - 1 >= i;i++) {
args.push(arguments[i]);
}
var BreakException = {}, i;
try {
if(this.__keys.length)
for (i = 0; i < this.__keys.length; i++) {
if(typeof this.__values[i] === 'function' &&
@@ -395,9 +389,6 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
throw BreakException;
}
}
} catch (e) {
if (e !== BreakException) throw e;
}
return this;
};
assets/config/config.js
+4
View File
@@ -8,8 +8,12 @@ window.kit = window.kit || {};
*/
kit.config = kit.config || {};
// [PluginManager]
kit.config.assetsPath = '/local/templater.dev/kit/assets';
kit.config.requiredDependencies = ['bsCore', 'toolkit', 'support'];
kit.config.autoloadPluginList = ['tooltip', 'support'];
kit.config.debug = true;
kit.config.defaultPhoneMask = '+7 (999) 999-99-99';
// [OtherPlugins]
assets/menu/menu.css
+10 -2
View File
@@ -29,12 +29,20 @@
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);
}
.kit-menu.active {
.kit-menu.active, .kit-menu.show {
display: block;
z-index: 1000;
}
.kit-text-debug {
position: absolute;
background-color: #363636;
pointer-events: none;
color: #dddddd;
font-size: 12px;
font-family: monospace;
line-height: 1.1em;
}
assets/menu/menu.js
+134 -300
View File
@@ -1,11 +1,11 @@
/** @module menu */
//todo: instance, options, auto-options-by-node
__PluginManager__.register('menu',function(module, exports, require) {
__PluginManager__.register('menu',function(module, exports, require, global) {
var userAction = require('userAction');
var Collection = require('Collection');
var Action = require('Action');
var userAction = require('userAction');
var ActionCollection = require('ActionCollection');
var support = require('support');
var Viewer = require('Viewer');
@@ -13,14 +13,18 @@ __PluginManager__.register('menu',function(module, exports, require) {
var libModule = require('lib');
var dataStructures = require('dataStructures');
const MENU_PLUGIN_NAME = 'menu';
const MENU_ITEM_PLUGIN_NAME = 'menuItem';
const MENU_CLASS = 'kit-menu';
const MENU_ITEM_CLASS = 'kit-menu-item';
/**
* @class kitMenuClassDefaultOptions
*/
var defaultMenuOptions = {
parent: null,
nodeProperty: 'menu',
class: 'kit-menu',
eventType: 'hover',
eventType: 'hint',
animation: '',
hideDelay: 200,
alignOffset: [0, 0],
@@ -42,7 +46,6 @@ __PluginManager__.register('menu',function(module, exports, require) {
var MenuList = [];
var MenuListIncrement = 0;
var MenuClass = (function () {
/**
* @typedef kitMenuItemHandler
* @param event {MouseEvent}
@@ -52,54 +55,36 @@ __PluginManager__.register('menu',function(module, exports, require) {
/**
* @class kit.menu.Class
* @param options
* @param items
* @constructor
*/
function Menu(options = {}, items = [])
var Menu = function(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 = ++MenuListIncrement;
MenuList[this.id] = this;
this.itemList = {};
this.align = new align.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;
};
/**
* хуета
* @return {null}
*/
Menu.prototype.getNode = function () {
if(this.node.innerHTML === '') {
this.render();
}
return this.node;
};
Menu.prototype.getParent = function () {
@@ -107,72 +92,30 @@ __PluginManager__.register('menu',function(module, exports, require) {
};
Menu.prototype.createNode = function () {
this.node = document.createElement('div');
this.node.classList.add(this.options.class);
this.node.classList.add(MENU_CLASS);
this.node.style.display = 'none';
this.node.setAttribute('data-menu-id', this.id);
this.node.kit = this.node.kit || {};
this.node.kit[this.options.nodeProperty] = this;
};
Menu.prototype.showNode = function () {
// console.log('Menu: showNode ' + this.id, this.bActive);
this.deferredHideCancel();
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();
this.node.kit[MENU_PLUGIN_NAME] = this;
};
Menu.prototype.hide = function () {
getChainActiveMenuDataList(this.id).reverse().forEach(function (data) {
data.menu.hideNodeNow();
});
return this;
};
Menu.prototype.hideNode = function () {
this.hideNodeNow();
};
Menu.prototype.hideNodeDeferred = function () {
this.deferredHideCancel();
this.deferredHideID = setTimeout(this.hideNodeNow.bind(this), this.options.hideDelay);
};
Menu.prototype.deferredHideCancel = function () {
if(this.deferredHideID) {
clearTimeout(this.deferredHideID);
this.deferredHideID = 0;
if(this.viewer) {
this.viewer.hide();
}
return this;
};
Menu.prototype.hideNodeNow = function () {
// 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;
this.removeDocumentEventListener();
Menu.prototype.show = function () {
if(this.viewer) {
this.viewer.show();
}
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);
}
};
Menu.prototype.calcStyle = function () {
// console.log('calcStyle ' + this.id);
if(!(this.options.parent instanceof Element)) {
Menu.prototype.setPosition = function () {
// console.log('setPosition ' + this.id);
if(!(this.getParent() instanceof Element)) {
console.warn('Menu.options.parent NOT instanceof Element');
return false;
}
@@ -183,13 +126,11 @@ __PluginManager__.register('menu',function(module, exports, require) {
//var parentNode = this.getParentMenuNode() || this.getParent();
var parentNode = this.getParent();
var hAlign = 'right';
var hDirection = 'right';
var parentMenu = this.getParentMenu();
if(parentMenu && parentMenu instanceof Menu) {
hDirection = parentMenu.align.condition.horizontal.direction;
}
var hAlign = 'right';
if(parentMenu && parentMenu instanceof Menu) {
hAlign = parentMenu.align.condition.horizontal.align;
}
@@ -197,31 +138,32 @@ __PluginManager__.register('menu',function(module, exports, require) {
this.align
.setNode(this.node)
.setParentNode(parentNode)
.setHorizontal(hDirection, hAlign)
.setVertical('bottom', 'top');
.set(hAlign, 'top', hDirection, 'bottom');
};
Menu.prototype.calcStyleChain = function(){
getChainActiveMenuDataList(this.id).forEach(function (data) {
data.menu.calcStyle();
Menu.prototype.setPositionRecursive = function(){
var list = getChainActiveMenuDataList(this.id);
list.forEach(function (data) {
data.menu.setPosition();
})
};
/**
* под сомнением
* рассмотреть под призмой нескольких меню для родительской ноды
* @return {Menu} | null
*/
Menu.prototype.getParentMenu = function() {
var p = this.getParent();
if(p instanceof Element && p.hasOwnProperty('kit') && p.kit.menuItem instanceof MenuItemClass) {
return p.kit.menuItem.getMenu();
if(p instanceof Element && p.hasOwnProperty('kit') && p.kit[MENU_ITEM_PLUGIN_NAME] instanceof MenuItemClass) {
return p.kit[MENU_ITEM_PLUGIN_NAME].getMenu();
}
};
Menu.prototype.getParentMenuNode = function() {
var parentMenu = this.getParentMenu(),
parentMenuNode;
if(parentMenu) {
parentMenuNode = parentMenu.getNode();
parentMenuNode = parentMenu.node;
}
return parentMenuNode;
};
@@ -229,26 +171,22 @@ __PluginManager__.register('menu',function(module, exports, require) {
/**
*
* @param options {kitMenuItemOptions}
* @param returnItem
* @return {Menu}
* @return {MenuItem}
*/
Menu.prototype.addItem = function (options = {}, returnItem = false) {
var listIndex;
Menu.prototype.addItem = function (options = {}) {
var id;
if(options instanceof MenuItemClass) {
options.parentId = this.id;
listIndex = options.options.id;
this.itemList[listIndex] = options;
id = options.options.id;
this.itemList[id] = options;
} else if(options instanceof Object){
if(!options.id) {
options.id = this.uniqueId(8);
options.id = support.uniqueId(8);
}
listIndex = options.id;
this.itemList[listIndex] = (new this.MenuItem(this.id)).setOptions(options).init();
id = options.id;
this.itemList[id] = (new this.MenuItem(this.id)).setOptions(options).init();
}
if(returnItem) {
return this.itemList[listIndex];
}
return this;
return this.itemList[id];
};
Menu.prototype.addItemList = function(itemList = []){
itemList.forEach((function(element, index, array){
@@ -259,7 +197,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
Menu.prototype.sortItems = function() {
this.itemList = Object.entries(this.itemList)
.sort(function(a, b){
return a[1].options.sort - b[1].options.sort;
return a[1].options.sort >>> 0 - b[1].options.sort >>> 0;
})
.reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
};
@@ -267,6 +205,9 @@ __PluginManager__.register('menu',function(module, exports, require) {
//console.log('Menu: render');
this.sortItems();
this.node.innerHTML = '';
if(global.config.debug) {
this.node.innerHTML = '<div class="kit-text-debug">'+this.id+'</div>';
}
for (var i in this.itemList) {
if(this.itemList.hasOwnProperty(i)) {
this.node.append(this.itemList[i].getNode());
@@ -274,209 +215,101 @@ __PluginManager__.register('menu',function(module, exports, require) {
}
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);
};
/**
* @param parentNode
* @return {boolean}
*/
Menu.prototype.setParent = function(parentNode) {
// console.log('Menu: setParent ' + parentNode);
if(typeof parentNode === 'string') {
parentNode = document.querySelector(parentNode);
}
parentNode = support.getNode(parentNode);
if(!(parentNode instanceof Element)) {
//console.warn('Menu.setParent: Не удалось получить parent. ' + parentNode);
return false;
}
this.removeParentEventListener();
if(this.viewer instanceof Viewer) {
this.bActive = this.viewer.isShown();
this.viewer.stop();
}
this.options.parent = parentNode;
if(this.bInit) {
this.reInit(true);
this.init(true);
}
};
Menu.prototype.setEventType = function(type = 'hover') {
Menu.prototype.setEventType = function(type = 'hint') {
this.options.eventType = type;
if(this.bInit) {
this.reInit();
this.init();
}
};
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) {
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.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;
}
Menu.prototype.init = function (setPositionRecursive = false) {
var self = this;
this.node.removeEventListener('mouseenter', this.nodeActionHandler, false);
this.node.removeEventListener('mouseleave', this.nodeActionHandler, false);
};
Menu.prototype.insertToNode = function (parent) {
if(!(parent instanceof Element)) {
console.warn('Menu.insertToNode - node NOT instanceof Element');
if(!(this.options.parent instanceof Element)) {
console.warn('Menu.init: Не установлен parent');
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.addNodeEventListener();
//document.addEventListener('click', this.documentListenerHandler, false);
this.node.setAttribute('data-kit-menu-init', 1);
this.bInit = true;
};
Menu.prototype.reInit = function (recursiveCalcStyle = false) {
console.warn('Menu: reInit ' + this.id);
if(this.bInit === false) {
return;
}
this.removeNodeEventListener();
this.removeParentEventListener();
//this.removeDocumentEventListener();
//this.removeAnimation();
if(this.node.parentElement !== this.options.parent) {
this.removeAnimation();
this.node.remove();
this.options.parent.prepend(this.node);
}
this.render();
if(this.align instanceof align.Class) {
this.align.unset();
}
this.align = new align.Class(this.node, this.options.parent);
if(this.actions instanceof ActionCollection) {
this.actions.stop();
}
var ua = new userAction[support.str.ucFirst(this.options.eventType)](this.options.parent, this.node);
if(ua.viewer instanceof Viewer) {
this.viewer = ua.viewer;
ua.viewer.onHideBefore.push(function () {
var list = getChainActiveMenuDataList(self.id);
list.shift();
list.reverse().forEach(function (data) {
if(data.menu.viewer) {
data.menu.viewer.hide({onHideBefore: false});
}
});
});
ua.viewer.onHide.push(function () {
self.bActive = self.viewer.isShown();
});
ua.viewer.onShow.push(function () {
self.setPosition.call(self);
self.bActive = self.viewer.isShown();
});
}
this.actions = new ActionCollection([ua]);
this.actions.run();
if(this.bActive) {
if(recursiveCalcStyle) {
this.calcStyleChain();
if(setPositionRecursive) {
this.setPositionRecursive();
} else {
this.calcStyle();
this.setPosition();
}
this.showNode();
} else {
this.hideNode();
}
this.addNodeEventListener();
this.addParentEventListener();
//this.addDocumentEventListener();
};
Menu.prototype.toggle = function() {
if(this.node.classList.toggle('active')) {
this.showNode();
this.show();
} else {
this.hide();
}
};
Menu.prototype.parentAction = function (event) {
event.stopPropagation();
// event.stopImmediatePropagation();
switch (event.type) {
case 'mouseout':
if (this.needHideByParent(event.relatedTarget)) {
this.hideNodeDeferred();
}
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.hideNodeDeferred();
}
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.options.eventType === 'click') {
if (this.needHideByParent(event.target)) {
this.toggle();
}
}
this.node.setAttribute('data-kit-menu-init', 1);
this.bInit = true;
};
/**
* @param options {kitMenuClassDefaultOptions}
* @return {Menu}
@@ -506,7 +339,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
arrow: libModule.svg.arrowMenu,
label: 'menu',
href: 'javascript:void(0);',
class: 'kit-menu-item',
class: '',
sort: 500,
visible: true,
/** @type {kitMenuItemHandler} */
@@ -565,7 +398,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
MenuItem.prototype.getParent = function () {
if(MenuList[this.parentId] instanceof Menu) {
return MenuList[this.parentId].getNode();
return MenuList[this.parentId].node;
}
return null;
};
@@ -676,7 +509,9 @@ __PluginManager__.register('menu',function(module, exports, require) {
return this;
};
MenuItem.prototype.addClass = function (addClass = '') {
if(addClass) {
this.node.classList.add(addClass);
}
return this;
};
@@ -699,6 +534,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
this.setLabel(this.options.label);
this.setHref(this.options.href);
this.setId(this.options.id);
this.addClass(MENU_ITEM_CLASS);
this.addClass(this.options.class);
this.setChild(this.options.child);
this.setIcon(this.options.icon);
@@ -746,7 +582,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
return function() {
if(MenuList.hasOwnProperty(parentId) && MenuList[parentId].itemList.hasOwnProperty(id)) {
delete MenuList[parentId].itemList[id];
MenuList[parentId].reInit();
MenuList[parentId].init();
}
};
})(this.parentId, this.options.id),0);
@@ -794,10 +630,9 @@ __PluginManager__.register('menu',function(module, exports, require) {
}();
Menu.prototype.MenuItem = MenuItemClass;
return Menu;
})();
var getInstance = function(options = {}, items = []) {
if(options instanceof MenuClass) {
if(options instanceof Menu) {
return options;
}
if(typeof options === 'string') {
@@ -806,15 +641,9 @@ __PluginManager__.register('menu',function(module, exports, require) {
if((options instanceof HTMLElement) && options.kit && options.kit.menu) {
return options.kit.menu;
}
return new MenuClass(options, items);
return new Menu(options, items);
};
var getActiveMenuDataList = function(){
function valueEx(value) {
if(typeof value === 'function') {
return value();
}
return value;
}
var idList = [];
var dataList = [];
var refList = [];
@@ -823,7 +652,9 @@ __PluginManager__.register('menu',function(module, exports, require) {
element = MenuList[id];
}
var parentId = false, parentMenu;
if(!(refList.hasOwnProperty(id) && refList[id].parentMenu)) {
if(refList.hasOwnProperty(id) && refList[id].parentMenu) {
return refList[id].parentMenu.id;
}
if(element) {
refList[id] = refList[id] || {};
parentMenu = refList[id].parentMenu = element.getParentMenu();
@@ -831,12 +662,10 @@ __PluginManager__.register('menu',function(module, exports, require) {
parentMenu && (parentId = parentMenu.id);
return parentId;
}
return refList[id].parentMenu.id;
}
MenuList.forEach(function(element){
var pos, posId, id, parentId;
if(!((element instanceof MenuClass) && element.bInit && element.bActive)) {
if(!((element instanceof Menu) && element.bInit && element.bActive)) {
return;
}
id = element.id;
@@ -845,7 +674,8 @@ __PluginManager__.register('menu',function(module, exports, require) {
parentId = getParentId(id, element);
var depth = function (id){
return function() {
return 1 + valueEx(refList[refList[id].data.parentId].data.depth)
var pid = refList[id].data.parentId;
return 1 + (refList.hasOwnProperty(pid)?(support.valueEx(refList[pid].data.depth)):0);
};
};
!(
@@ -879,11 +709,15 @@ __PluginManager__.register('menu',function(module, exports, require) {
)
&&(idList.indexOf(id)===-1)&&(idList.push(id), dataList.push(refList[id].data = {id:id, depth: 1, parentId: 0, type: 4}));
});
var result = [];
dataList.forEach(function (data) {
data.depth = valueEx(data.depth);
data.depth = support.valueEx(data.depth);
data.menu = refList[data.id].menu;
if(data.menu) {
result.push(data);
}
});
return dataList;
return result;
};
var getChainActiveMenuDataList = function (id) {
var dataList = getActiveMenuDataList(), result = [], depth = 0;
@@ -903,14 +737,14 @@ __PluginManager__.register('menu',function(module, exports, require) {
var reInitAllMenu = function(){
var dataList = getActiveMenuDataList();
dataList.forEach(function(data) {
data.menu.reInit();
data.menu.init();
});
};
var reCalcAllMenu = function(){
console.log('reCalcAllMenu');
var dataList = getActiveMenuDataList();
dataList.forEach(function(data) {
data.menu.calcStyle();
data.menu.setPosition();
});
};
var autoload = function(doc = document, selector = '.kit-menu'){
@@ -920,7 +754,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
var menuList = doc.querySelectorAll(selector);
menuList.forEach(
function(menuNode, currentIndex, listObj) {
if(!menuNode.kit || !menuNode.kit.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
if(!menuNode.kit || !menuNode.kit.hasOwnProperty(MENU_PLUGIN_NAME)) {
}
}
@@ -940,7 +774,7 @@ __PluginManager__.register('menu',function(module, exports, require) {
* @memberOf kit
*/
var menu = {
Class: MenuClass,
Class: Menu,
getInstance: getInstance,
reInitAllMenu: reInitAllMenu,
reCalcAllMenu: reCalcAllMenu,
assets/support/support.js
+16 -9
View File
@@ -86,18 +86,23 @@ __PluginManager__.register('support', function(module, exports, require, global)
if(isNode(selector) || isElement(selector)) {
return selector;
}
return undefined;
return null;
}
var nameFromToStringRegex = /^function\s?([^\s(]*)/;
function className(object, defaultName) {
var result = "";
if (typeof object === 'function') {
result = object.name || object.toString().match(nameFromToStringRegex)[1];
} else if (typeof object.constructor === 'function') {
result = className(object.constructor, defaultName);
var extend = function(target) {
if(!arguments[1]) {
return;
}
return result || defaultName;
for(i=1; i < arguments.length; i++) {
var source = arguments[i];
for(var prop in source) {
if(!target[prop] && source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
};
/**
@@ -117,7 +122,9 @@ __PluginManager__.register('support', function(module, exports, require, global)
isFloat,
isString,
isNode,
isElement,
getNode,
extend,
};
return module.exports = support;
assets/userAction/userAction.js
+14 -1
View File
@@ -7,7 +7,13 @@ kit.PluginManager.register('userAction', function(module, exports, require, glob
var Viewer = require('Viewer');
/**
*
* @param masterNode
* @param slaveNode
* @return {Popover}
* @constructor
*/
var Popover = function (masterNode, slaveNode) {
this.__setMasterNode(masterNode);
this.__setSlaveNode(slaveNode);
@@ -56,6 +62,13 @@ kit.PluginManager.register('userAction', function(module, exports, require, glob
})();
/**
*
* @param masterNode
* @param slaveNode
* @return {Hint}
* @constructor
*/
var Hint = function (masterNode, slaveNode) {
this.__setMasterNode(masterNode);
this.__setSlaveNode(slaveNode);
tests/kit.Collection.php
+9 -2
View File
@@ -31,7 +31,7 @@ print_r($x);
console.log(true, msg);
return;
}
console.error(msg, value, need);
console.error(msg, '-', 'value:', value, 'need:', need);
}
</script>
@@ -213,7 +213,14 @@ kit.ready(['collection'], function () {
assertSame(x3.last(), 111, 'only last+');
assertSame(x3.length, 1, 'only length');
x.
xOb = {a: 'a10', b: 'b11', 10: 101};
x = new kit.Collection(xOb);
x.set(11, 111);
assertSame(x.indexKey(11), 3, 'indexKey (int)');
assertSame(x.indexKey('11'), 3, 'indexKey (string)');
assertSame(x.indexKey('111'), -1, 'indexKey (-1)');
});
tests/menu.php
+17 -9
View File
@@ -140,7 +140,7 @@ kit.ready(['menu', 'animations'], function () {
var menu;
menu = kit.menu.getInstance({
alignOffset: [0, 5],
eventType: 'click',
eventType: 'popover',
}, [
{
label: 'еще (' + window.i + ')',
@@ -161,19 +161,20 @@ kit.ready(['menu', 'animations'], function () {
window.menuBuilder = (function(){
console.log('menuBuilder');
window.menuBase = null;
var menuBase = new kit.menu.Class();
window.menuBase = menuBase;
menuBase.setOptions({
animation: kit.animations.scaleIn,
alignOffset: [5, 5],
hideDelay: 1000,
parent: '#chat-message-15 .chat-message--manager-item-menu',
/**
* доступно 2 режима click / hover,
* доступно 2 режима popover / hint,
* понимать так: данное меню появляется по Клику на родитя (по дефолту hover)
*/
eventType: 'click',
eventType: 'popover',
});
/**
@@ -249,7 +250,7 @@ kit.ready(['menu', 'animations'], function () {
menuItem.remove();
},
});
menu.reInit();
menu.init();
},
});
/**
@@ -262,16 +263,23 @@ kit.ready(['menu', 'animations'], function () {
var item1 = menuBase.addItem({
label: 'меняем предка на R',
/**
*
* @param e
* @param menuItem
* @param {kit.menu.Class} menu
*/
click: function(e, menuItem, menu) {
console.log('клик by ' + menuItem.options.label);
menuItem.setVisible(false);
var tMenu = menu.getItemById(item2.getId());
if(tMenu) {
tMenu.setVisible(true);
}
menu.setParent(document.querySelector('#change-context-menu-r'));
menu.setParent('#change-context-menu-r');
},
}, true);
});
var item2 = menuBase.addItem({
label: 'меняем предка на X',
visible: false,
@@ -282,9 +290,9 @@ kit.ready(['menu', 'animations'], function () {
if(tMenu) {
tMenu.setVisible(true);
}
menu.setParent(document.querySelector('#change-context-menu-x'));
menu.setParent('#change-context-menu-x');
},
}, true);
});
menuBase.init();
tests/userAction.php
+13
View File
@@ -33,11 +33,24 @@ $APPLICATION->ShowHead();
m5.viewer.animShowClass = kit.animations.scaleIn;
m5.viewer.animHideClass = kit.animations.scaleOut;
m5.run();
// var m6 = new kit.userAction.Hint();
var m6 = new kit.userAction.Hint('#object8', '#object9');
m6.run();
m6.viewer.animShowClass = kit.animations.scaleIn;
m6.viewer.animHideClass = kit.animations.scaleOut;
m6.run();
var m7 = new kit.userAction.Hint();
try {
m7.run();
} catch (e) {
console.log(e);
}
try {
m7.stop();
} catch (e) {
console.log(e);
}
});
</script>
<style>