fix

assets/Action/Action.js

@@ -0,0 +1,37 @@
+/** @module Action */
+kit.PluginManager.register('Action', function(module, exports, require, global) {
+
+    var support = require('support');
+
+    /**
+     * @memberOf kit
+     */
+    var Action = function (node, eventName, handler) {
+        this.node = support.getNode(node);
+        this.eventName = eventName;
+        this.handler = function () {
+            if(this.count > -1) {
+                this.count--;
+                if(this.count === -1) {
+                    return;
+                }
+                if(this.count === 0) {
+                    this.stop();
+                }
+            }
+            handler.apply(this, arguments);
+        }.bind(this);
+        this.count = -1;
+    };
+    Action.prototype.run = function (count = -1) {
+        this.stop();
+        this.count = count;
+        this.node.addEventListener(this.eventName, this.handler, false);
+    };
+    Action.prototype.stop = function () {
+        this.count = -1;
+        this.node.removeEventListener(this.eventName, this.handler, false);
+    };
+
+    return module.exports = Action;
+});

assets/ActionCollection/ActionCollection.js

@@ -0,0 +1,27 @@
+/** @module ActionCollection */
+kit.PluginManager.register('ActionCollection', function(module, exports, require, global) {
+
+    var Collection = require('Collection');
+
+    /**
+     * @memberOf kit
+     */
+    var ActionCollection = function (list = []) {
+        this.collection = new Collection(list);
+    };
+    ActionCollection.prototype.push = function (action) {
+        this.collection.push(action);
+    };
+    ActionCollection.prototype.run = function (count = -1) {
+        this.collection.map(function (action) {
+            action.run(count);
+        })
+    };
+    ActionCollection.prototype.stop = function () {
+        this.collection.map(function (action) {
+            action.stop();
+        })
+    };
+
+    return module.exports = ActionCollection;
+});

assets/UserActionManager/UserActionManager.js

@@ -1,190 +0,0 @@
-/** @module UserActionManager */
-/**
- * в разработке
- */
-kit.PluginManager.register('UserActionManager',function(module, exports, require, global) {
-
-    var Collection = require('collection');
-    var support = require('support');
-
-    var actionList = ['popover', 'hint'];
-
-    var UserAction = function () {
-
-        this.parentActionHandler = this.parentAction.bind(this);
-        this.documentListenerHandler = this.documentListener.bind(this);
-        this.nodeActionHandler = this.nodeAction.bind(this);
-
-        this.clickHandlerCollection = new Collection([]);
-        this.dblclickHandlerCollection = new Collection([]);
-        this.mouseoverHandlerCollection = new Collection([]);
-        this.mouseoutHandlerCollection = new Collection([]);
-
-        this.handleEvent = function(event) {
-            switch(event.type) {
-                case 'mouseover':
-                    this.mouseoverHandlerCollection.each(function (event, ) {
-                        item
-                    });
-                    break;
-                case 'mouseout':
-                    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;
-            }
-        };
-    };
-    var proto = UserAction.prototype;
-    proto.documentListener = function(event) {
-
-        if(this.options.eventType === 'click') {
-            if (this.needHideByParent(event.target)) {
-                this.toggle();
-            }
-        }
-    };
-    proto.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;
-        }
-    };
-    proto.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;
-        }
-    };
-
-    proto.addDocumentEventListener = function() {
-        document.addEventListener('click', this.documentListenerHandler, false);
-    };
-    proto.removeDocumentEventListener = function() {
-        document.removeEventListener('click', this.documentListenerHandler, false);
-    };
-    proto.removeParentEventListener = function() {
-        // console.log('Menu: removeParentEventListener');
-        if(this.node instanceof Element) {
-            this.node.classList.remove('active');
-            this.node.removeEventListener('click', this.parentActionHandler, false);
-            this.node.removeEventListener('mouseover', this.parentActionHandler, false);
-            this.node.removeEventListener('mouseout', this.parentActionHandler, false);
-        }
-    };
-    proto.addParentEventListener = function() {
-        if(this.node instanceof Element) {
-            if(this.options.eventType === 'hover') {
-                this.node.addEventListener('mouseover', this.parentActionHandler, false);
-                this.node.addEventListener('mouseout', this.parentActionHandler, false);
-            }
-            if(this.options.eventType === 'click') {
-                this.node.addEventListener(this.options.eventType, this.parentActionHandler, false);
-            }
-        }
-    };
-    proto.addNodeEventListener = function() {
-        if(!this.node) {
-            return;
-        }
-
-        this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
-        this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
-    };
-    proto.removeNodeEventListener = function() {
-        if(!this.node) {
-            return;
-        }
-
-        this.node.removeEventListener('mouseenter', this.nodeActionHandler, false);
-        this.node.removeEventListener('mouseleave', this.nodeActionHandler, false);
-    };
-    proto.active = function(){
-        this.node.addEventListener('mouseover', this, false);
-        this.node.addEventListener('click', this, false);
-        this.node.addEventListener('dblclick', this, false);
-    };
-    proto.clear = function(){
-        this.node.removeEventListener('mouseover', this, false);
-        this.node.removeEventListener('click', this, false);
-        this.node.removeEventListener('dblclick', this, false);
-    };
-    proto.destroy = function(){
-
-    };
-
-    proto.setAction = function (action) {
-        if(actionList.indexOf(action) === -1) {
-            action = 'click';
-        }
-        this.action = action;
-        return this;
-    };
-    proto.setNode = function (node) {
-        this.node = node;
-        return this;
-    };
-    proto.setTakeNode = function (takeNode) {
-        this.takeNode = takeNode;
-        return this;
-    };
-
-
-    /**
-     * @class UserActionManager
-     * @memberOf kit
-     */
-    var UserActionManager = function (actions = []) {
-
-        this.test = new Collection([]);
-        this.collection = new Collection([]);
-        if(!Array.isArray(actions)) {
-            actions = [actions];
-        }
-        actions.forEach(function (act) {
-
-        }.bind(this));
-        /**
-         * @static
-         */
-        this.actions = {
-            popover: 'popover',
-            hint: 'hint',
-        };
-        return this;
-    };
-
-    UserActionManager.prototype.setAction = function(action){
-        this.action = action;
-        this.collection.put();
-    };
-
-    return module.exports = UserActionManager;
-});

assets/Viewer/Viewer.js

@@ -0,0 +1,170 @@
+/** @module Viewer */
+kit.PluginManager.register('Viewer', function(module, exports, require, global) {
+
+    var Collection = require('Collection');
+    var support = require('support');
+    var Action = require('Action');
+    var ActionCollection = require('ActionCollection');
+
+
+
+    var AnimationTrap = function (node, callbackBefore = function(){}, callbackAfter = function(){}) {
+        this.node = support.getNode(node);
+        this.active = 0;
+        this.__timeoutId = 0;
+        this.callbackBefore = callbackBefore;
+        this.callbackAfter = callbackAfter;
+        this.__callbackAfterHandler = function () {
+            this.callbackAfter();
+            this.stop();
+        }.bind(this);
+        this.__animationstart = false;
+        this.__animationStartAction = new Action(this.node, 'animationstart', () => {
+            this.__animationstart = true;
+        });
+
+        this.__animationEndAction = new ActionCollection([
+            new Action(this.node, 'animationend', this.__callbackAfterHandler),
+            new Action(this.node, 'animationcancel', this.__callbackAfterHandler)
+        ]);
+    };
+    AnimationTrap.prototype.run = function () {
+
+        if(this.active === 1){
+            return;
+        }
+
+        this.active = 1;
+        this.__animationStartAction.run(1);
+        this.callbackBefore();
+        this.__animationEndAction.run(1);
+
+        this.__timeoutId = setTimeout(function () {
+            if(!this.__animationstart) {
+                this.__callbackAfterHandler();
+            }
+        }.bind(this), 100);
+    };
+    AnimationTrap.prototype.stop = function () {
+        clearTimeout(this.__timeoutId);
+        this.__timeoutId = 0;
+        this.__animationstart = false;
+        this.__animationStartAction.stop();
+        this.__animationEndAction.stop();
+        this.active = 0;
+    };
+
+
+
+
+    var removeAnimation = function(animationClass){
+        if(animationClass && this.node.classList.contains(animationClass)){
+            this.node.classList.remove(animationClass);
+        }
+    };
+    var addAnimation = function(animationClass){
+        if(animationClass && !this.node.classList.contains(animationClass)){
+            this.node.classList.add(animationClass);
+        }
+    };
+
+
+    /**
+     * @memberOf kit
+     */
+    var Viewer = function (node, masterNode) {
+        this.node = support.getNode(node);
+        this.masterNode = support.getNode(masterNode);
+        this.onShow = new Collection();
+        this.onHide = new Collection();
+        this.animShowClass = '';
+        this.animHideClass = '';
+        this.delayHide = 0;
+        this.activeMasterClass = 'active';
+
+        this.__aminationTrapHide = new AnimationTrap(this.node, function () {
+            removeAnimation.call(this, this.animShowClass);
+            addAnimation.call(this, this.animHideClass);
+        }.bind(this), function () {
+            if(this.masterNode && this.activeMasterClass) {
+                this.masterNode.classList.remove(this.activeMasterClass);
+            }
+            this.node.classList.add('hide');
+            this.node.classList.remove('show');
+            this.onHide.eachCall();
+            this.node.style.display = 'none';
+        }.bind(this));
+
+        this.__aminationTrapShow = new AnimationTrap(this.node, function () {
+            this.node.classList.remove('hide');
+            this.node.classList.add('show');
+            if(this.node.style.display === 'none') {
+                this.node.style.display = '';
+            }
+            if(this.masterNode && this.activeMasterClass) {
+                this.masterNode.classList.add(this.activeMasterClass);
+            }
+            removeAnimation.call(this, this.animHideClass);
+            addAnimation.call(this, this.animShowClass);
+            this.onShow.eachCall();
+        }.bind(this), function () {
+
+        }.bind(this));
+
+    };
+
+    var deferredHideCancel = function () {
+        if(this.__deferredHideID) {
+            clearTimeout(this.__deferredHideID);
+            this.__deferredHideID = 0;
+        }
+    };
+
+    var proto = Viewer.prototype;
+    proto.show = function(){
+        if(this.isShown()) {
+            return;
+        }
+        deferredHideCancel.call(this);
+        this.__aminationTrapHide.stop();
+        this.__aminationTrapShow.run();
+    };
+    proto.hide = function(){
+        if(this.isHidden()) {
+            return;
+        }
+
+        var hideDeferred = function () {
+            deferredHideCancel.call(this);
+            this.__deferredHideID = setTimeout(hide.bind(this), this.delayHide);
+        }.bind(this);
+
+
+        var hide = function() {
+            deferredHideCancel.call(this);
+            this.__aminationTrapShow.stop();
+            this.__aminationTrapHide.run();
+        }.bind(this);
+        hideDeferred();
+    };
+    proto.toggle = function(){
+        if(this.isHidden()) {
+            this.show();
+            return true;
+        }
+        this.hide();
+        return false;
+    };
+    proto.isShown = function(){
+        return !this.isHidden() && !this.__aminationTrapHide.active;
+    };
+    proto.isHidden = function(){
+        var result = this.node.classList.contains('hide');
+        if(this.masterNode && this.activeMasterClass) {
+            result = result || !this.masterNode.classList.contains(this.activeMasterClass);
+        }
+        return result || this.__aminationTrapHide.active;
+    };
+
+    return module.exports = Viewer;
+});

assets/align/align.js

@@ -1,6 +1,8 @@
 /** @module align */
 kit.PluginManager.register('align',function(module, exports, require) {
 
+    var support = require('support');
+
     /**
      * @class Rect
      * @param node
@@ -200,28 +202,28 @@ kit.PluginManager.register('align',function(module, exports, require) {
             direction: {
                 get: function () {
                     switch (_this.direction) {
-                        case 'start':
                         case 'left':
                         case 'top':
                             return 'start';
-                        case 'end':
                         case 'right':
                         case 'bottom':
                             return 'end';
+                        default:
+                            return _this.direction;
                     }
                 }
             },
             align: {
                 get: function () {
                     switch (_this.align) {
-                        case 'start':
                         case 'left':
                         case 'top':
                             return 'start';
-                        case 'end':
                         case 'right':
                         case 'bottom':
                             return 'end';
+                        default:
+                            return _this.align;
                     }
                 }
             },
@@ -268,6 +270,23 @@ kit.PluginManager.register('align',function(module, exports, require) {
                         return  getShiftWhenHidingNodeUnderLimiterStart(this.shift + this.applicability);
                     }.bind(this),
                 },
+                /**
+                 * todo: applicability, valid, shiftExtra
+                 */
+                center: {
+                    shift: function () {
+                        return - this.nodeMetricsLine.offset / 2 + this.offset[this.map.axisNumber()];
+                    }.bind(this),
+                    applicability: function () {
+                        return this.limiterMetricsLine.end - (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
+                    }.bind(this),
+                    valid: function () {
+                        return this.limiterMetricsLine.end >= (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
+                    }.bind(this),
+                    shiftExtra: function () {
+                        return  getShiftWhenHidingNodeUnderLimiterStart(this.shift + this.applicability);
+                    }.bind(this),
+                },
             },
             align: {
                 start: {
@@ -275,6 +294,11 @@ kit.PluginManager.register('align',function(module, exports, require) {
                         return this.nodeMetricsLine.clientStart;
                     }.bind(this),
                 },
+                center: {
+                    shift: function () {
+                        return this.parentMetricsLine.offset / 2 - this.parentMetricsLine.clientStart;
+                    }.bind(this),
+                },
                 end: {
                     shift: function () {
                         return this.parentMetricsLine.offset - this.parentMetricsLine.clientStart;
@@ -414,9 +438,9 @@ kit.PluginManager.register('align',function(module, exports, require) {
 
 
     /**
-     * @param node {HTMLElement}
-     * @param parentNode {HTMLElement}
-     * @param limiterNode {HTMLElement}
+     * @param node {HTMLElement|String}
+     * @param parentNode {HTMLElement|String}
+     * @param limiterNode {HTMLElement|String}
      * @constructor
      */
     var AlignClass = function(node, parentNode, limiterNode = window)
@@ -425,7 +449,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
         this.withinTheScreen = true;
         this.offset = [0, 0];
 
-        this.status = {vertical: {}, horizontal: {},};
+        this.condition = {vertical: {}, horizontal: {},};
 
         this.setNode(node);
         this.setParentNode(parentNode);
@@ -435,29 +459,29 @@ kit.PluginManager.register('align',function(module, exports, require) {
 
     AlignClass.prototype.setNode = function(node){
         this.unset();
-        this.node = node;
+        this.node = support.getNode(node);
         this.reset();
-        if(node instanceof HTMLElement) {
+        if(this.node instanceof HTMLElement) {
             this.node.kit = this.node.kit || {};
             this.node.kit.align = this;
         }
-        if(this.calc) {
-            this.calc.setNode(this.node);
+        if(this.__calc) {
+            this.__calc.setNode(this.node);
         }
         return this;
     };
 
     AlignClass.prototype.setParentNode = function(node){
-        this.parentNode = node;
-        if(this.calc) {
-            this.calc.setParentNode(this.parentNode);
+        this.parentNode = support.getNode(node);
+        if(this.__calc) {
+            this.__calc.setParentNode(this.parentNode);
         }
         return this;
     };
     AlignClass.prototype.setLimiterNode = function(node){
-        this.limiterNode = node;
-        if(this.calc) {
-            this.calc.setLimiterNode(this.limiterNode);
+        this.limiterNode = support.getNode(node) || window;
+        if(this.__calc) {
+            this.__calc.setLimiterNode(this.limiterNode);
         }
         return this;
     };
@@ -475,7 +499,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
     };
     AlignClass.prototype.reset = function(bHorizontal = true, bVertical = true){
         if(bHorizontal) {
-            this.status.horizontal = {};
+            this.condition.horizontal = {};
             if(this.node instanceof HTMLElement) {
                 this.node.style.left = '';
                 this.node.style.right = '';
@@ -484,7 +508,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
             }
         }
         if(bVertical) {
-            this.status.vertical = {};
+            this.condition.vertical = {};
             if(this.node instanceof HTMLElement) {
                 this.node.style.top = '';
                 this.node.style.bottom = '';
@@ -492,6 +516,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
                 this.node.removeAttribute('data-kit-align-vertical-align');
             }
         }
+        this.__nodeComputedStyle = undefined;
         return this;
     };
 
@@ -510,45 +535,56 @@ kit.PluginManager.register('align',function(module, exports, require) {
         return this;
     };
 
+    AlignClass.prototype.__setAdditionalStyles = function(){
+        if(!this.__nodeComputedStyle) {
+            this.__nodeComputedStyle = getComputedStyle(this.node);
+        }
+        if(!['absolute', 'relative'].includes(this.__nodeComputedStyle.position)) {
+            this.node.style.position = 'absolute';
+        }
+    };
+
     AlignClass.prototype.setEx = function(axis, direction, align){
 
         this.reset(axis === 'horizontal', axis === 'vertical');
 
-        this.status[axis].direction = direction;
-        this.status[axis].align = align;
+        this.__setAdditionalStyles();
 
-        if(!this.calc) {
-            this.calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
+        this.condition[axis].direction = direction;
+        this.condition[axis].align = align;
+
+        if(!this.__calc) {
+            this.__calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
         }
 
-        this.calc.offset = this.offset;
+        this.__calc.offset = this.offset;
         this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
         this.node.setAttribute('data-kit-align-'+axis+'-align', align);
-        var defAlignResult = this.calc.updateMetrics().setAxis(axis).setDirection(direction).setAlign(align).calc().getData();
+        var defAlignResult = this.__calc.updateMetrics().setAxis(axis).setDirection(direction).setAlign(align).calc().getData();
         // console.log('defAlignResult', axis, align, direction, defAlignResult);
         if(this.changeOfDirection) {
             if(!defAlignResult.valid) {
-                this.node.setAttribute('data-kit-align-'+axis+'-direction', this.getInverse(direction));
-                this.node.setAttribute('data-kit-align-'+axis+'-align', this.getInverse(align));
-                var inverseAlignResult = this.calc.updateMetrics().setDirection(this.getInverse(direction)).setAlign(this.getInverse(align)).calc().getData();
-                // console.log('inverseAlignResult', axis, this.getInverse(align), this.getInverse(direction), inverseAlignResult);
-                this.status[axis].direction = this.getInverse(direction);
-                this.status[axis].align = this.getInverse(align);
+                this.node.setAttribute('data-kit-align-'+axis+'-direction', this.__getInverse(direction));
+                this.node.setAttribute('data-kit-align-'+axis+'-align', this.__getInverse(align));
+                var inverseAlignResult = this.__calc.updateMetrics().setDirection(this.__getInverse(direction)).setAlign(this.__getInverse(align)).calc().getData();
+                // console.log('inverseAlignResult', axis, this.__getInverse(align), this.__getInverse(direction), inverseAlignResult);
+                this.condition[axis].direction = this.__getInverse(direction);
+                this.condition[axis].align = this.__getInverse(align);
                 if(!inverseAlignResult.valid && (defAlignResult.applicability > inverseAlignResult.applicability) ) {
                     this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
                     this.node.setAttribute('data-kit-align-'+axis+'-align', align);
-                    this.status[axis].direction = direction;
-                    this.status[axis].align = align;
-                    this.calc.updateMetrics().setDirection(direction).setAlign(align).calc();
+                    this.condition[axis].direction = direction;
+                    this.condition[axis].align = align;
+                    this.__calc.updateMetrics().setDirection(direction).setAlign(align).calc();
                 }
             }
         }
 
-        this.calc.render(this.withinTheScreen);
+        this.__calc.render(this.withinTheScreen);
         return this;
     };
 
-    AlignClass.prototype.getInverse = function(value){
+    AlignClass.prototype.__getInverse = function(value){
         var inverseConfig = {
             start: 'end',
             left: 'right',

assets/animations/animations.css

@@ -13,4 +13,33 @@
         opacity: 1;
         transform: scale(1);
     }
+}
+
+.anim-scale-out {
+    -webkit-animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
+    animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+@-webkit-keyframes scale-out-center {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        opacity: 0;
+    }
+}
+@keyframes scale-out-center {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        opacity: 0;
+    }
 }

assets/animations/animations.js

@@ -1,4 +1,7 @@
-/** @module animations */
+/**
+ * https://animista.net/
+ * @module animations
+ **/
 kit.PluginManager.register('animations',function(module, exports, require, global) {
 
     /**
@@ -6,6 +9,7 @@ kit.PluginManager.register('animations',function(module, exports, require, globa
      */
     var animations = {
         scaleIn: 'anim-scale-in',
+        scaleOut: 'anim-scale-out',
     };
 
     Object.assign(animations, global.animations || {});

assets/collection/collection.js

@@ -1,7 +1,4 @@
-/** @module collection */
-/**
- * в разработке
- */
+/** @module Collection */
 kit.PluginManager.register('Collection', function(module, exports, require, global) {
 
     var support = require('support');
@@ -107,7 +104,7 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
      * @param value
      * @return {kit.Collection}
      */
-    Collection.prototype.set = Collection.prototype.put = function (key, value) {
+    Collection.prototype.add = Collection.prototype.set = Collection.prototype.put = function (key, value) {
         var index = -1;
         if(this.has(key)) {
             this.data[key] = this.__values[index = this.indexKey(key)] = value;
@@ -380,6 +377,73 @@ kit.PluginManager.register('Collection', function(module, exports, require, glob
         debugger;
         return this;
     };
+    /**
+     * @return {kit.Collection}
+     */
+    Collection.prototype.eachCall = function (context, args1, args2) {
+        var args = [];
+        if(arguments.length > 1)
+            for(var 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' &&
+                        this.__values[i].apply(context, [].concat(args, this.__keys[i])) === false) {
+                        throw BreakException;
+                    }
+                }
+        } catch (e) {
+            if (e !== BreakException) throw e;
+        }
+        return this;
+    };
+
+    /**
+     * аналог Array.includes
+     *
+     * @param searchElement
+     * @param fromIndex
+     * @return {boolean}
+     */
+    Collection.prototype.includes = function(searchElement, fromIndex) {
+        var len = this.__keys.length;
+        if (len === 0) {
+            return false;
+        }
+        var n = fromIndex | 0;
+        var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+        function sameValueZero(x, y) {
+            return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
+        }
+        while (k < len) {
+            if (sameValueZero(this.__values[k], searchElement)) {
+                return true;
+            }
+            k++;
+        }
+        return false;
+    };
+
+    Collection.prototype.search = function(searchElement) {
+        var len = this.__keys.length;
+        if (len === 0) {
+            return false;
+        }
+        var k = 0;
+        function sameValueZero(x, y) {
+            return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
+        }
+        while (k < len) {
+            if (sameValueZero(this.__values[k], searchElement)) {
+                return this.__keys[k];
+            }
+            k++;
+        }
+        return false;
+    };
 
     return module.exports = Collection;
 });

assets/config/config.js

@@ -9,7 +9,7 @@ window.kit = window.kit || {};
 kit.config = kit.config || {};
 
 kit.config.assetsPath = '/local/templater.dev/kit/assets';
-kit.config.requiredDependencies = ['bsCore', 'toolkit'];
-kit.config.autoloadPluginList = ['tooltip'];
+kit.config.requiredDependencies = ['bsCore', 'toolkit', 'support'];
+kit.config.autoloadPluginList = ['tooltip', 'support'];
 kit.config.debug = true;
 kit.config.defaultPhoneMask = '+7 (999) 999-99-99';

assets/core/core.register.js

@@ -6,7 +6,7 @@ __PluginManager__.registerPlugins({
             '/menu.css'
         ],
         type: 'loader',
-        deps: ['lib', 'align', 'dataStructures', 'animations']
+        deps: ['lib', 'align', 'dataStructures', 'animations', 'userAction', 'Collection', 'support', 'ActionCollection', 'Action', 'Viewer']
     },
     lib: {
         path: __pmConfig__.assetsPath + '/lib',
@@ -17,6 +17,7 @@ __PluginManager__.registerPlugins({
         path: __pmConfig__.assetsPath + '/align',
         module: '/align.js',
         type: 'loader',
+        deps: ['support']
     },
     support: {
         path: __pmConfig__.assetsPath + '/support',
@@ -158,11 +159,29 @@ __PluginManager__.registerPlugins({
         module: '/dataStructures.js',
         type: 'loader',
     },
-    UserActionManager: {
-        path: __pmConfig__.assetsPath + '/UserActionManager',
-        module: '/UserActionManager.js',
+    userAction: {
+        path: __pmConfig__.assetsPath + '/userAction',
+        module: '/userAction.js',
         type: 'loader',
-        deps: ['Collection'],
+        deps: ['support', 'ActionCollection', 'Action', 'Viewer'],
+    },
+    Viewer: {
+        path: __pmConfig__.assetsPath + '/Viewer',
+        module: '/Viewer.js',
+        type: 'loader',
+        deps: ['Collection', 'support', 'ActionCollection', 'Action'],
+    },
+    ActionCollection: {
+        path: __pmConfig__.assetsPath + '/ActionCollection',
+        module: '/ActionCollection.js',
+        type: 'loader',
+        deps: ['Collection', 'support', 'Action'],
+    },
+    Action: {
+        path: __pmConfig__.assetsPath + '/Action',
+        module: '/Action.js',
+        type: 'loader',
+        deps: ['support'],
     },
 
 });

assets/flex-kit/flex-kit.css

@@ -11,6 +11,7 @@
     --gap-section: 30px;
     --gap-wrapper: 30px;
     --col-count: 4;
+    --col-span: 1;
     --line-clamp: 3;
     --line-clamp-height: 1.3em;
     --width-wrapper: 800px;
@@ -108,7 +109,7 @@
 }
 .flex-list-item {
     --gap-row: var(--gap);
-    --col-width: calc((100%) / var(--col-count));
+    --col-width: calc(100% / var(--col-count) * var(--col-span));
     box-sizing: border-box;
 }
 .flex-list > .flex-list-item {

assets/menu/menu.js

@@ -1,8 +1,14 @@
 /** @module menu */
-//todo: instance, options, auto-options-by-node, userEventManager
+//todo: instance, options, auto-options-by-node
 __PluginManager__.register('menu',function(module, exports, require) {
 
 
+    var userAction = require('userAction');
+    var Collection = require('Collection');
+    var Action = require('Action');
+    var ActionCollection = require('ActionCollection');
+    var support = require('support');
+    var Viewer = require('Viewer');
     var align = require('align');
     var libModule = require('lib');
     var dataStructures = require('dataStructures');
@@ -180,11 +186,11 @@ __PluginManager__.register('menu',function(module, exports, require) {
             var hDirection = 'right';
             var parentMenu = this.getParentMenu();
             if(parentMenu && parentMenu instanceof Menu) {
-                hDirection = parentMenu.align.status.horizontal.direction;
+                hDirection = parentMenu.align.condition.horizontal.direction;
             }
             var hAlign = 'right';
             if(parentMenu && parentMenu instanceof Menu) {
-                hAlign = parentMenu.align.status.horizontal.align;
+                hAlign = parentMenu.align.condition.horizontal.align;
             }
 
             this.align.offset = this.options.alignOffset;

assets/support/support.js

@@ -1,6 +1,11 @@
 /** @module support */
 __PluginManager__.register('support', function(module, exports, require, global){
 
+    var node = {
+        isRelate: function (node, container = document) {
+            return node === container || container.contains(node);
+        }
+    };
     var str = {
         ucFirst: function (str) {
             if (!str) return str;
@@ -26,13 +31,13 @@ __PluginManager__.register('support', function(module, exports, require, global)
         return (idStr);
     }
     function valueEx(value) {
-        var arg = [];
+        var args = [];
         if(arguments.length > 1)
             for(var i = 1; arguments.length - 1 >= i;i++) {
-                arg.push(arguments[i]);
+                args.push(arguments[i]);
             }
         if(typeof value === 'function') {
-            return value.apply(this, arg);
+            return value.apply(this, args);
         }
         return value;
     }
@@ -60,10 +65,46 @@ __PluginManager__.register('support', function(module, exports, require, global)
     function isFloat(value) {
         return isNumber(value);
     }
+    function isString(value) {
+        return typeof value === 'string';
+    }
+    function isNode(value) {
+        return value instanceof Node;
+    }
+    function isElement(value) {
+        return value instanceof Element;
+    }
+
+    /**
+     * @param selector
+     * @return Element
+     */
+    function getNode(selector) {
+        if(isString(selector)) {
+            return document.querySelector(selector);
+        }
+        if(isNode(selector) || isElement(selector)) {
+            return selector;
+        }
+        return undefined;
+    }
+    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);
+        }
+        return result || defaultName;
+    }
+
+
     /**
      * @memberOf kit
      */
     var support = {
+        node: node,
         str: str,
         arr: arr,
         uniqueId,
@@ -74,6 +115,9 @@ __PluginManager__.register('support', function(module, exports, require, global)
         isObject,
         isInteger,
         isFloat,
+        isString,
+        isNode,
+        getNode,
     };
 
     return module.exports = support;

assets/userAction/userAction.js

@@ -0,0 +1,156 @@
+/** @module userAction */
+/**
+ * в разработке
+ */
+kit.PluginManager.register('userAction', function(module, exports, require, global) {
+
+    var support = require('support');
+    var ActionCollection = require('ActionCollection');
+    var Action = require('Action');
+    var Viewer = require('Viewer');
+
+
+
+    var Popover = function (masterNode, slaveNode) {
+        this.__setMasterNode(masterNode);
+        this.__setSlaveNode(slaveNode);
+        this.__documentAction = new Action(document, 'click', this.__documentHandler.bind(this));
+        this.__masterAction = new Action(this.__masterNode, 'click', this.__masterHandler.bind(this));
+
+        this.viewer = new Viewer(this.__slaveNode, this.__masterNode);
+        this.viewer.onShow.set('documentActionRun', this.__documentAction.run.bind(this.__documentAction));
+        this.viewer.onHide.set('documentActionStop', this.__documentAction.stop.bind(this.__documentAction));
+        return this;
+    };
+    (function () {
+        var proto = Popover.prototype;
+
+        proto.__documentHandler = function(event) {
+            if(
+                !support.node.isRelate(event.target, this.__masterNode) &&
+                !support.node.isRelate(event.target, this.__slaveNode)
+            ) {
+                this.viewer.hide();
+            }
+        };
+        proto.__masterHandler = function(event) {
+            if(
+                !support.node.isRelate(event.target, this.__slaveNode)
+            ) {
+                this.viewer.toggle();
+            }
+        };
+        proto.__setMasterNode = function(selector){
+            this.__masterNode = support.getNode(selector);
+        };
+        proto.__setSlaveNode = function(selector){
+            this.__slaveNode = support.getNode(selector);
+        };
+        proto.run = function(){
+            if(this.viewer.isShown()) {
+                this.__documentAction.run();
+            }
+            this.__masterAction.run();
+        };
+        proto.stop = function(){
+            this.__documentAction.stop();
+            this.__masterAction.stop();
+        };
+    })();
+    
+    
+    var Hint = function (masterNode, slaveNode) {
+        this.__setMasterNode(masterNode);
+        this.__setSlaveNode(slaveNode);
+        this.viewer = new Viewer(this.__slaveNode, this.__masterNode);
+
+        this.__masterAction = new ActionCollection([
+            new Action(this.__masterNode, 'mouseover', function (event) {
+                if(support.node.isRelate(event.target, this.__masterNode)) {
+                    this.viewer.show();
+                    // console.log('master over ', event.target.id, ' > ', this.__slaveNode.id, 'show');
+                    // console.log(event);
+                }
+            }.bind(this)),
+            new Action(this.__masterNode, 'mouseout', function (event) {
+                if(
+                    !support.node.isRelate(event.relatedTarget, this.__masterNode) &&
+                    !support.node.isRelate(event.relatedTarget, this.__slaveNode)
+                ) {
+                    this.viewer.hide();
+                    // console.log('master out ', event.target.id, ' > ', this.__slaveNode.id, 'hide');
+                    // console.log(event);
+                }
+            }.bind(this))
+        ]);
+        this.__slaveAction = new ActionCollection([
+            new Action(this.__slaveNode, 'mouseover', function (event) {
+                // this.viewer.show();
+                // console.log('slave over ', event.target.id, ' > ', this.__slaveNode.id, 'show');
+            }.bind(this)),
+            new Action(this.__slaveNode, 'mouseout', function (event) {
+                if(
+                    !support.node.isRelate(event.relatedTarget, this.__masterNode) &&
+                    !support.node.isRelate(event.relatedTarget, this.__slaveNode)
+                ) {
+                    this.viewer.hide();
+                    // console.log('slave out ', event.target.id, ' > ', this.__slaveNode.id, 'hide');
+                }
+            }.bind(this))
+        ]);
+        this.__documentAction = new Action(document, 'click', this.__documentHandler.bind(this));
+
+        this.viewer.onShow.set('documentActionRun', (function (){
+            this.__slaveAction.run();
+            this.__documentAction.run();
+        }).bind(this));
+        this.viewer.onHide.set('documentActionStop', (function (){
+            this.__slaveAction.stop();
+            this.__documentAction.stop();
+        }).bind(this));
+        return this;
+    };
+    (function () {
+        var proto = Hint.prototype;
+
+        proto.__documentHandler = function(event) {
+            if (
+                !support.node.isRelate(event.target, this.__slaveNode) &&
+                !support.node.isRelate(event.target, this.__masterNode) &&
+                this.viewer.isShown()
+            ) {
+                this.viewer.hide();
+            }
+        };
+        proto.__setMasterNode = function(selector){
+            this.__masterNode = support.getNode(selector);
+        };
+        proto.__setSlaveNode = function(selector){
+            this.__slaveNode = support.getNode(selector);
+        };
+        proto.run = function(){
+            if(this.viewer.isShown()) {
+                this.__documentAction.run();
+                this.__slaveAction.run();
+            }
+            this.__masterAction.run();
+        };
+        proto.stop = function(){
+            this.__documentAction.stop();
+            this.__masterAction.stop();
+            this.__slaveAction.stop();
+        };
+    })();
+
+    /**
+     * @var userAction
+     * @memberOf kit
+     */
+    var userAction = {
+        Popover: Popover,
+        Hint: Hint,
+        Action: Action
+    };
+
+    return module.exports = userAction;
+});

tests/UserActionManager.php

@@ -1,41 +0,0 @@
-<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
-<?
-if(\Bitrix\Main\Loader::includeModule('wt.core')) {
-    app()->service()->assets()->setPlugins([
-        'kit:config',
-        'kit:flex-kit',
-        'kit:core',
-        'kit:bsCore',
-        'kit:collapse',
-        'kit:site',
-        'kit:toolkit',
-        'kit:theme',
-    ])->render();
-}
-$APPLICATION->ShowHead();
-
-?>
-<script>
-    kit.ready(['UserActionManager'], function () {
-        var m1 = new kit.UserActionManager();
-        m1.setAction('popover');
-
-    });
-</script>
-    <style>
-        .hide {
-            display: none;
-        }
-    </style>
-<div class="kit-wrapper">
-
-
-    <div id="object1" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">1</div>
-
-    <div id="object2" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">2</div>
-
-    <div id="object3" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">3</div>
-
-</div>
-<?
-?>

tests/align.php

@@ -0,0 +1,125 @@
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?
+if(\Bitrix\Main\Loader::includeModule('wt.core')) {
+    app()->service()->assets()->setPlugins([
+        'kit:config',
+        'kit:flex-kit',
+        'kit:core',
+        'kit:bsCore',
+        'kit:collapse',
+        'kit:site',
+        'kit:toolkit',
+        'kit:theme',
+    ])->render();
+}
+$APPLICATION->ShowHead();
+
+?>
+<style>
+    .hide {
+        display: none;
+    }
+    .main-body {
+        display: flex;
+        width: 250px;
+        height: 250px;
+        justify-content: center;
+        align-items: center;
+        float: left;
+    }
+    .main-list {
+        width: 100px;
+        height: 100px;
+        background-color: #ffc400;
+        position: relative;
+    }
+    .main-item {
+        width: 50px;
+        height: 50px;
+        color: whitesmoke;
+        font-size: 10px;
+        line-height: 1.2em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+</style>
+<div class="kit-wrapper">
+    <div class="main-body">
+        <div id="object-main" class="main-list">
+            <div id="object1" class="main-item" style="background-color: green;">'left', 'top', 'left', 'top'</div>
+            <div id="object2" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'right', 'top'</div>
+            <div id="object3" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'right', 'bottom'</div>
+            <div id="object4" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'left', 'bottom'</div>
+        </div>
+    </div>
+    <div class="main-body">
+        <div id="object-main2" class="main-list">
+            <div id="object5" class="main-item" style="background-color: green;">'left', 'top', 'right', 'top'</div>
+            <div id="object6" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'right', 'bottom'</div>
+            <div id="object7" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'left', 'bottom'</div>
+            <div id="object8" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'left', 'top'</div>
+        </div>
+    </div>
+    <div class="main-body">
+        <div id="object-main3" class="main-list">
+            <div id="object9" class="main-item" style="background-color: green;">'left', 'top', 'center', 'center'</div>
+            <div id="object10" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'center', 'center'</div>
+            <div id="object11" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'center', 'center'</div>
+            <div id="object12" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'center', 'center'</div>
+        </div>
+    </div>
+    <div class="main-body">
+        <div id="object-main4" class="main-list">
+            <div id="object13" class="main-item" style="background-color: green;">'center', 'center', 'left', 'top'</div>
+            <div id="object14" class="main-item" style="background-color: #0a51ae;">'center', 'center', 'right', 'top'</div>
+            <div id="object15" class="main-item" style="background-color: #c23a3a;">'center', 'center', 'right', 'bottom'</div>
+            <div id="object16" class="main-item" style="background-color: rebeccapurple;">'center', 'center', 'left', 'bottom'</div>
+        </div>
+    </div>
+</div>
+<script>
+    kit.ready(['align'], function () {
+        var align1 = new kit.align.Class('#object1', '#object-main');
+        align1.set('left', 'top', 'left', 'top');
+        var align2 = new kit.align.Class('#object2', '#object-main');
+        align2.set('right', 'top', 'right', 'top');
+        var align3 = new kit.align.Class('#object3', '#object-main');
+        align3.set('right', 'bottom', 'right', 'bottom');
+        var align4 = new kit.align.Class('#object4', '#object-main');
+        align4.set('left', 'bottom', 'left', 'bottom');
+
+        var align5 = new kit.align.Class('#object5', '#object-main2');
+        align5.set('left', 'top', 'right', 'top');
+        var align6 = new kit.align.Class('#object6', '#object-main2');
+        align6.set('right', 'top', 'right', 'bottom');
+        var align7 = new kit.align.Class('#object7', '#object-main2');
+        align7.set('right', 'bottom', 'left', 'bottom');
+        var align8 = new kit.align.Class('#object8', '#object-main2');
+        align8.set('left', 'bottom', 'left', 'top');
+
+        var align9 = new kit.align.Class('#object9', '#object-main3');
+        align9.set('left', 'top', 'center', 'center');
+        var align10 = new kit.align.Class('#object10', '#object-main3');
+        align10.set('right', 'top', 'center', 'center');
+        var align11 = new kit.align.Class('#object11', '#object-main3');
+        align11.set('right', 'bottom', 'center', 'center');
+        var align12 = new kit.align.Class('#object12', '#object-main3');
+        align12.set('left', 'bottom', 'center', 'center');
+
+        var align13 = new kit.align.Class('#object13', '#object-main4');
+        align13.offset = [5, 5];
+        align13.set('center', 'center', 'left', 'top');
+        var align14 = new kit.align.Class('#object14', '#object-main4');
+        align14.offset = [5, 5];
+        align14.set('center', 'center', 'right', 'top');
+        var align15 = new kit.align.Class('#object15', '#object-main4');
+        align15.offset = [5, 5];
+        align15.set('center', 'center', 'right', 'bottom');
+        var align16 = new kit.align.Class('#object16', '#object-main4');
+        align16.offset = [5, 5];
+        align16.set('center', 'center', 'left', 'bottom');
+
+    });
+</script>

tests/index.php

@@ -1,12 +1,13 @@
 <div style="display: flex; flex-direction: column; align-items: center;">
 
+    <a href="cheatsheet.php"><b>cheatsheet</b></a>
     <a href="menu.php">Menu</a>
+    <a href="align.php">align</a>
     <a href="templates.svg.php">templates.svg</a>
     <a href="flex-kit.php">flex-kit</a>
-    <a href="cheatsheet.php">cheatsheet</a>
     <a href="card/block.php">card/block</a>
     <a href="kit.Collection.php">kit.Collection</a>
-    <a href="UserActionManager.php">UserActionManager</a>
+    <a href="userAction.php">userAction</a>
     <a href="templater.php">templater</a>
 
 </div>

tests/userAction.php

@@ -0,0 +1,77 @@
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?
+if(\Bitrix\Main\Loader::includeModule('wt.core')) {
+    app()->service()->assets()->setPlugins([
+        'kit:config',
+        'kit:flex-kit',
+        'kit:core',
+        'kit:bsCore',
+        'kit:collapse',
+        'kit:site',
+        'kit:toolkit',
+        'kit:theme',
+    ])->render();
+}
+$APPLICATION->ShowHead();
+
+?>
+<script>
+    kit.ready(['userAction', 'animations'], function () {
+        var m1 = new kit.userAction.Popover('#object1', '#object2');
+        m1.run();
+        var m2 = new kit.userAction.Popover('#object2', '#object3');
+        m2.run();
+
+        var m3 = new kit.userAction.Hint('#object4', '#object5');
+        m3.run();
+        m3.viewer.animShowClass = kit.animations.scaleIn;
+        var m4 = new kit.userAction.Hint('#object5', '#object6');
+        m4.run();
+
+
+        var m5 = new kit.userAction.Hint('#object7', '#object8');
+        m5.viewer.animShowClass = kit.animations.scaleIn;
+        m5.viewer.animHideClass = kit.animations.scaleOut;
+        m5.run();
+        var m6 = new kit.userAction.Hint('#object8', '#object9');
+        m6.run();
+        m6.viewer.animShowClass = kit.animations.scaleIn;
+        m6.viewer.animHideClass = kit.animations.scaleOut;
+
+    });
+</script>
+    <style>
+        .hide {
+            display: none;
+        }
+    </style>
+<div class="kit-wrapper">
+
+<div style="padding: 40px;">
+    <div id="object1" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">1</div>
+
+    <div id="object2" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">
+        2
+        <div id="object3" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">3</div>
+    </div>
+</div>
+<div style="padding: 40px;">
+    <div id="object4" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">4</div>
+    <div id="object5" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">5</div>
+    <div id="object6" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">6</div>
+</div>
+
+<div style="padding: 40px;" id="box3">
+    <div id="object7" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">
+        <div>7</div>
+        <div id="object8" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">
+            <div>8</div>
+            <div id="object9" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">9</div>
+        </div>
+    </div>
+</div>
+
+
+</div>
+<?
+?>