fix

README.md

@@ -60,7 +60,7 @@ kit.jquery
 ## Пример конфигурации 
 
 ```js
-kit.PluginManager.register('menu', {
+__PluginManager__.register('menu', {
         path: kit.config.assetsPath + '/menu',
         module: '/menu.js',
         type: 'loader',
@@ -121,6 +121,17 @@ PluginManager.ready(deps, callback)
 
 
 
+## Глобальные переменные (window)
+
+переменная kit может быть задана любой, поэтому в некоторых местах корректно будет использовать универсальные глобальные переменные
+
+| name | link | description |
+| --- | --- | --- |
+| `__pmGlobal__` | аналог window.kit |  |
+| `__PluginManager__` |аналог window.kit.PluginManager |  | 
+| `__pmConfig__` | аналог window.kit.config |  |
+
+
 ## z-index map
 
 | z-index | plugin | selector |

assets/align/align.js

@@ -1,220 +1,585 @@
-kit.PluginManager.register('align',function() {
+/** @module align */
+kit.PluginManager.register('align',function(module, exports, require) {
 
-    var AlignClass = function(){
+    /**
-
+     * @class Rect
-        var Align = function()
+     * @param node
-        {
+     */
-            this.reset();
+    var Rect = function (node) {
-            this.node = null;
+        this.node = node;
-            this.parentNode = null;
+        this.get();
-            this.offsetHorizontal = 0;
+    };
-            this.offsetVertical = 0;
+    Rect.prototype.get = function () {
-            this.offset = 0;
+        function getBoundingClientRect(node) {
-        };
+            var rect = node.getBoundingClientRect();
-
-        /**
-         * @param node HTMLElement
-         * @return {Align}
-         */
-        Align.prototype.setNode = function(node){
-            this.node = node;
-            return this;
-        };
-        /**
-         * @param node HTMLElement
-         * @return {Align}
-         */
-        Align.prototype.setParentNode = function(node){
-            this.parentNode = node;
-            return this;
-        };
-        /**
-         * @return {Align}
-         */
-        Align.prototype.reset = function(hor = true, vert = true){
-            if(hor) {
-                this.right = {applicability: 0, valid: false};
-                this.left = {applicability: 0, valid: false};
-            }
-            if(vert) {
-                this.top = {applicability: 0, valid: false};
-                this.bottom = {applicability: 0, valid: false};
-            }
-            return this;
-        };
-
-        Align.prototype.getContentSizes = function() {
             return {
-                InnerWidth: window.innerWidth,
+                top: rect.top,
-                InnerHeight: window.innerHeight,
+                right: rect.right,
+                bottom: rect.bottom,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+                x: rect.x,
+                y: rect.y
             };
+        }
+        var metrics = {};
+        if(this.node instanceof HTMLElement) {
+            metrics = {
+                offsetHeight: this.node.offsetHeight,
+                offsetWidth: this.node.offsetWidth,
+                clientHeight: this.node.clientHeight,
+                clientWidth: this.node.clientWidth,
+                offsetLeft: this.node.offsetLeft,
+                offsetTop: this.node.offsetTop,
+                clientLeft: this.node.clientLeft,
+                clientTop: this.node.clientTop,
+                clientRight: this.node.offsetWidth - this.node.clientWidth,
+                clientBottom: this.node.offsetHeight - this.node.clientHeight,
+
+                offsetRight: document.body.offsetWidth - this.node.offsetLeft - this.node.offsetWidth,
+                offsetBottom: window.innerHeight - this.node.offsetTop - this.node.offsetHeight,
+            };
+            metrics = Object.assign({}, getBoundingClientRect(this.node), metrics);
+        }
+        if(this.node instanceof Window) {
+            metrics = {
+                offsetHeight: window.innerHeight,
+                offsetWidth: document.body.offsetWidth,
+                clientHeight: window.innerHeight,
+                clientWidth: document.body.offsetWidth,
+                offsetLeft: 0,
+                offsetTop: 0,
+                clientLeft: 0,
+                clientTop: 0,
+                clientRight: 0,
+                clientBottom: 0,
+
+                offsetRight: 0,
+                offsetBottom: 0,
+            };
+            metrics = Object.assign({
+                left: 0,
+                top: 0,
+                right: document.body.offsetWidth,
+                bottom: window.innerHeight,
+                x: 0,
+                y: 0,
+                width: document.body.offsetWidth,
+                height: window.innerHeight,
+            }, metrics)
+        }
+        Object.assign(this, metrics);
+        return this;
+    };
+    Rect.prototype.getLine = function (axis = 'horizontal') {
+        var line = new Line(null, axis);
+        line.node = this.node;
+        line.rect = this;
+        line.setAxis(axis);
+        return line;
+    };
+
+    var viewLineDriver = {
+        horizontal: {
+            left: 'start',
+            right: 'end',
+            x: 'a',
+            width: 'length',
+
+            offsetWidth: 'offset',
+            clientWidth: 'client',
+            offsetLeft: 'offsetStart',
+            clientLeft: 'clientStart',
+            offsetRight: 'offsetEnd',
+            clientRight: 'clientEnd',
+        },
+        vertical: {
+            top: 'start',
+            bottom: 'end',
+            y: 'a',
+            height: 'length',
+
+            offsetHeight: 'offset',
+            clientHeight: 'client',
+            offsetTop: 'offsetStart',
+            clientTop: 'clientStart',
+            offsetBottom: 'offsetEnd',
+            clientBottom: 'clientEnd',
+        },
+    };
+
+
+    /**
+     * @param node
+     * @param axis
+     * @property start
+     * @property end
+     * @property a
+     * @property length
+     * @property offset
+     * @property client
+     * @property offsetStart
+     * @property clientStart
+     * @property offsetEnd
+     * @property clientEnd
+     *
+     */
+    var Line = function (node, axis = 'horizontal') {
+        this.axis = axis;
+        this.node = node;
+        this.update();
+    };
+    Line.prototype.setAxis = function(axis){
+        this.axis = axis;
+
+        for (var key in viewLineDriver[this.axis]) {
+            this[viewLineDriver[this.axis][key]] = this.rect[key];
+        }
+    };
+    Line.prototype.update = function () {
+        if(!this.node) {
+            return this;
+        }
+        this.rect = new Rect(this.node);
+        this.setAxis(this.axis);
+        return this;
+    };
+
+    var metric = {
+        Rect: Rect,
+        Line: Line,
+    };
+
+    /**
+     *
+     * @class {AlignCalc}
+     * @param limiterNode {HTMLElement}
+     * @param parentNode {HTMLElement}
+     * @param node {HTMLElement}
+     */
+    var AlignCalc = function (node, parentNode, limiterNode = window) {
+
+        var _this = this;
+        this.axis = 'horizontal';
+        this.direction = 'bottom';
+        this.align = 'bottom';
+        this.offset = [0, 0];
+        this.setLimiterNode(limiterNode);
+        this.setParentNode(parentNode);
+        this.setNode(node);
+
+        this.style = {
+            start: function (extra) {
+                this.nodeMetricsLine.node.style[this.map.style.start()] = '' + ((!this.valid && extra)?this.shiftExtra:this.shift) + 'px';
+            }.bind(this),
+            end: function (extra) {
+                this.nodeMetricsLine.node.style[this.map.style.end()] = 'unset';
+            }.bind(this),
         };
 
-        /**
+        this.map = {
-         * @param top bool
+            style: {
-         * @param inner bool
+                start: function(){
-         * @return {Align}
+                    switch (_this.axis) {
-         */
+                        case 'vertical':
-        Align.prototype.setVertical = function(top = false, inner = false){
+                            return 'top';
-            var contentSizes = this.getContentSizes();
+                        case 'horizontal':
-            this.reset(false, true);
+                            return 'left';
-
+                    }
-            if(top){
+                },
-                !this.calcTop(contentSizes, inner) && this.calcBottom(contentSizes, inner);
+                end: function(){
-            } else {
+                    switch (_this.axis) {
-                !this.calcBottom(contentSizes, inner) && this.calcTop(contentSizes, inner);
+                        case 'vertical':
+                            return 'bottom';
+                        case 'horizontal':
+                            return 'right';
+                    }
+                },
+            },
+            direction: {
+                get: function () {
+                    switch (_this.direction) {
+                        case 'start':
+                        case 'left':
+                        case 'top':
+                            return 'start';
+                        case 'end':
+                        case 'right':
+                        case 'bottom':
+                            return 'end';
+                    }
+                }
+            },
+            align: {
+                get: function () {
+                    switch (_this.align) {
+                        case 'start':
+                        case 'left':
+                        case 'top':
+                            return 'start';
+                        case 'end':
+                        case 'right':
+                        case 'bottom':
+                            return 'end';
+                    }
+                }
+            },
+            axisNumber: function () {
+                return _this.axis === 'horizontal' ? 0 : 1;
             }
+        };
 
-            if(!this.top.valid && !this.bottom.valid) {
+        var getShiftWhenHidingNodeUnderLimiterStart = function(shift) {
-                if(this.top.applicability > this.bottom.applicability || contentSizes.InnerHeight < this.node.offsetHeight) {
+            var d = this.parentMetricsLine.start + shift - this.limiterMetricsLine.start;
-                    this.calcTop(contentSizes, inner, true);
+            if(d < 0) {
-                } else {
+                shift = shift - d;
-                    this.calcBottom(contentSizes, inner, true);
+            }
+            return  shift;
+        }.bind(this);
+
+        this.core = {
+            direction: {
+                start: {
+                    shift: function () {
+                        return  - this.nodeMetricsLine.offset - this.offset[this.map.axisNumber()];
+                    }.bind(this),
+                    applicability: function () {
+                        return (this.parentMetricsLine.start + this.shift) - this.limiterMetricsLine.start;
+                    }.bind(this),
+                    valid: function () {
+                        return (this.parentMetricsLine.start + this.shift) >= this.limiterMetricsLine.start;
+                    }.bind(this),
+                    shiftExtra: function () {
+                        return getShiftWhenHidingNodeUnderLimiterStart(this.shift - this.applicability);
+                    }.bind(this),
+                },
+                end: {
+                    shift: function () {
+                        return 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: {
+                    shift: function () {
+                        return this.nodeMetricsLine.clientStart;
+                    }.bind(this),
+                },
+                end: {
+                    shift: function () {
+                        return this.parentMetricsLine.offset - this.parentMetricsLine.clientStart;
+                    }.bind(this),
+                },
+            },
+        };
+
+        return this;
+    };
+    /**
+     * @param node
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setLimiterNode = function (node) {
+        if(!this.limiterMetricsLine || (this.limiterMetricsLine.node !== node)) {
+            this.limiterMetricsLine = new Line(node, this.axis);
+        }
+        return this;
+    };
+    /**
+     *
+     * @param node
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setParentNode = function (node) {
+        if(!this.parentMetricsLine || (this.parentMetricsLine.node !== node)) {
+            this.parentMetricsLine = new Line(node, this.axis);
+        }
+        return this;
+    };
+    /**
+     *
+     * @param node
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setNode = function (node) {
+        if(!this.nodeMetricsLine || (this.nodeMetricsLine.node !== node)) {
+            this.nodeMetricsLine = new Line(node, this.axis);
+        }
+        return this;
+    };
+
+    /**
+     *
+     * @param extra
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.render = function (extra = false) {
+        for (var key in this.style) {
+            if(this.style.hasOwnProperty(key)) {
+                this.style[key](extra);
+            }
+        }
+        return this;
+    };
+    /**
+     *
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.updateMetrics = function(){
+        this.limiterMetricsLine.update();
+        this.parentMetricsLine.update();
+        this.nodeMetricsLine.update();
+        return this;
+    };
+    /**
+     *
+     * @param direction
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setDirection = function(direction){
+        this.direction = direction;
+        return this;
+    };
+    /**
+     *
+     * @param align
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setAlign = function(align){
+        this.align = align;
+        return this;
+    };
+    /**
+     *
+     * @param axis
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.setAxis = function(axis){
+        this.axis = axis;
+        this.limiterMetricsLine.setAxis(axis);
+        this.parentMetricsLine.setAxis(axis);
+        this.nodeMetricsLine.setAxis(axis);
+        return this;
+    };
+    /**
+     *
+     * @param align
+     * @param direction
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.set = function(align, direction){
+        this.align = align;
+        this.direction = direction;
+        return this;
+    };
+    /**
+     *
+     * @return {AlignCalc}
+     */
+    AlignCalc.prototype.calc = function () {
+        this.shift =
+            this.core.direction[this.map.direction.get()].shift() +
+            this.core.align[this.map.align.get()].shift();
+
+        this.applicability = this.core.direction[this.map.direction.get()].applicability();
+
+        this.valid = this.core.direction[this.map.direction.get()].valid();
+
+        this.shiftExtra = this.core.direction[this.map.direction.get()].shiftExtra();
+
+        return this;
+    };
+    /**
+     *
+     * @return {{valid: *, shiftExtra: *, shift: *, applicability: *}}
+     */
+    AlignCalc.prototype.getData = function () {
+        return {
+            shift: this.shift,
+            applicability: this.applicability,
+            valid: this.valid,
+            shiftExtra: this.shiftExtra,
+        };
+    };
+
+
+    /**
+     * @param node {HTMLElement}
+     * @param parentNode {HTMLElement}
+     * @param limiterNode {HTMLElement}
+     * @constructor
+     */
+    var AlignClass = function(node, parentNode, limiterNode = window)
+    {
+        this.changeOfDirection = true;
+        this.withinTheScreen = true;
+        this.offset = [0, 0];
+
+        this.status = {vertical: {}, horizontal: {},};
+
+        this.setNode(node);
+        this.setParentNode(parentNode);
+        this.setLimiterNode(limiterNode);
+
+    };
+
+    AlignClass.prototype.setNode = function(node){
+        this.unset();
+        this.node = node;
+        this.reset();
+        if(node instanceof HTMLElement) {
+            this.node.kit = this.node.kit || {};
+            this.node.kit.align = this;
+        }
+        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);
+        }
+        return this;
+    };
+    AlignClass.prototype.setLimiterNode = function(node){
+        this.limiterNode = node;
+        if(this.calc) {
+            this.calc.setLimiterNode(this.limiterNode);
+        }
+        return this;
+    };
+
+    AlignClass.prototype.unset = function(){
+        if(this.node instanceof HTMLElement) {
+            if(this.node.kit && this.node.kit.align){
+                delete this.node.kit.align;
+            }
+            this.node.removeAttribute('data-kit-align-horizontal-direction');
+            this.node.removeAttribute('data-kit-align-horizontal-align');
+            this.node.removeAttribute('data-kit-align-vertical-direction');
+            this.node.removeAttribute('data-kit-align-vertical-align');
+        }
+    };
+    AlignClass.prototype.reset = function(bHorizontal = true, bVertical = true){
+        if(bHorizontal) {
+            this.status.horizontal = {};
+            if(this.node instanceof HTMLElement) {
+                this.node.style.left = '';
+                this.node.style.right = '';
+                this.node.removeAttribute('data-kit-align-horizontal-direction');
+                this.node.removeAttribute('data-kit-align-horizontal-align');
+            }
+        }
+        if(bVertical) {
+            this.status.vertical = {};
+            if(this.node instanceof HTMLElement) {
+                this.node.style.top = '';
+                this.node.style.bottom = '';
+                this.node.removeAttribute('data-kit-align-vertical-direction');
+                this.node.removeAttribute('data-kit-align-vertical-align');
+            }
+        }
+        return this;
+    };
+
+    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);
+        return this;
+    };
+
+    AlignClass.prototype.setHorizontal = function(direction, align){
+        this.setEx('horizontal', direction, align);
+        return this;
+    };
+
+    AlignClass.prototype.setEx = function(axis, direction, align){
+
+        this.reset(axis === 'horizontal', axis === 'vertical');
+
+        this.status[axis].direction = direction;
+        this.status[axis].align = align;
+
+        if(!this.calc) {
+            this.calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
+        }
+
+        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();
+        // 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);
+                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();
                 }
             }
+        }
 
-            return this;
+        this.calc.render(this.withinTheScreen);
+        return this;
+    };
+
+    AlignClass.prototype.getInverse = function(value){
+        var inverseConfig = {
+            start: 'end',
+            left: 'right',
+            top: 'bottom',
+            end: 'start',
+            right: 'left',
+            bottom: 'top',
         };
-        Align.prototype.calcTop = function (contentSizes, inner, extra = false) {
+        if(inverseConfig.hasOwnProperty(value)) {
-            var top, offset;
+            return inverseConfig[value];
+        }
+        return value;
+    };
 
-            this.node.setAttribute('data-kit-align-vertical','top');
-            offset = this.offsetVertical || this.offset;
 
-            if(inner) {
+    /**
-                top = 0 - this.node.offsetHeight + this.parentNode.offsetHeight - this.parentNode.clientTop - offset;
+     * @memberof kitCore
-            } else {
+     * @instance
-                top = 0 - this.parentNode.clientTop - this.node.offsetHeight + this.node.clientTop - offset;
+     */
+    var align = {
+        Class: AlignClass,
+        getInstance: function (node, parentNode) {
+            if(node instanceof HTMLElement && node.kit && node.kit.align) {
+                return node.kit.align;
             }
+            return new AlignClass(node, parentNode);
+        },
+        metric: metric,
+    };
 
-            this.node.style.top = '' + top + 'px';
+    module.exports = align;
-            this.node.style.bottom = 'unset';
 
-            if(extra) {
+    return module.exports;
-                this.checkTop(contentSizes);
-                this.node.style.top = (top - this.top.applicability) + 'px';
-                return false;
-            }
-            return this.checkTop(contentSizes);
-        };
-        Align.prototype.calcBottom = function (contentSizes, inner, extra = false) {
-
-            var top, offset;
-            this.node.setAttribute('data-kit-align-vertical','bottom');
-            offset = this.offsetVertical || this.offset;
-
-            if(inner) {
-                top = 0 - this.parentNode.clientTop + offset;
-            } else {
-                top = this.parentNode.offsetHeight - this.parentNode.clientTop + offset;
-            }
-
-            this.node.style.top = '' + top + 'px';
-            this.node.style.bottom = 'unset';
-
-            if(extra) {
-                this.checkBottom(contentSizes);
-                this.node.style.top = (top + this.bottom.applicability) + 'px';
-                return false;
-            }
-            return this.checkBottom(contentSizes);
-        };
-        Align.prototype.checkTop = function (contentSizes) {
-            var b = this.node.getBoundingClientRect();
-            this.top.applicability = b.top - 0;
-            this.top.valid = b.top >= 0;
-            return this.top.valid;
-        };
-        Align.prototype.checkBottom = function (contentSizes) {
-            var b = this.node.getBoundingClientRect();
-            this.bottom.applicability = contentSizes.InnerHeight - (b.top + b.height);
-            this.bottom.valid = contentSizes.InnerHeight >= (b.top + b.height);
-            return this.bottom.valid;
-        };
-
-        /**
-         * @param right bool
-         * @param inner bool
-         * @return {Align}
-         */
-        Align.prototype.setHorizontal = function(right = true, inner = false){
-            var contentSizes = this.getContentSizes();
-            this.reset(true, false);
-
-            if(right){
-                !this.calcRight(contentSizes, inner) && this.calcLeft(contentSizes, inner);
-            } else {
-                !this.calcLeft(contentSizes, inner) && this.calcRight(contentSizes, inner);
-            }
-
-            if(!this.left.valid && !this.right.valid) {
-                if(this.left.applicability > this.right.applicability || contentSizes.InnerWidth < this.node.offsetWidth) {
-                    this.calcLeft(contentSizes, inner, true);
-                } else {
-                    this.calcRight(contentSizes, inner, true)
-                }
-            }
-
-            return this;
-        };
-        Align.prototype.calcLeft = function (contentSizes, inner, extra = false) {
-            var left, offset;
-
-            this.node.setAttribute('data-kit-align-horizontal','left');
-            offset = this.offsetHorizontal || this.offset;
-
-            if(inner) {
-                left = 0 - this.node.offsetWidth + this.parentNode.offsetWidth - this.parentNode.clientLeft - offset;
-            } else {
-                left = 0 - this.parentNode.clientLeft - this.node.offsetWidth + this.node.clientLeft - offset;
-            }
-
-            this.node.style.left = '' + left + 'px';
-            this.node.style.right = 'unset';
-
-            if(extra) {
-                this.checkLeft(contentSizes);
-                this.node.style.left = (left - this.left.applicability) + 'px';
-                return false;
-            }
-            return this.checkLeft(contentSizes);
-        };
-        Align.prototype.calcRight = function (contentSizes, inner, extra = false) {
-            var left, offset;
-            this.node.setAttribute('data-kit-align-horizontal','right');
-            offset = this.offsetHorizontal || this.offset;
-
-            if(inner) {
-                left = 0 - this.parentNode.clientLeft + offset;
-            } else {
-                left = this.parentNode.offsetWidth - this.parentNode.clientLeft + offset;
-            }
-
-            this.node.style.left = '' + left + 'px';
-            this.node.style.right = 'unset';
-
-            if(extra) {
-                this.checkRight(contentSizes);
-                this.node.style.left = (left + this.right.applicability) + 'px';
-                return false;
-            }
-            return this.checkRight(contentSizes);
-        };
-        Align.prototype.checkLeft = function (contentSizes) {
-            var b = this.node.getBoundingClientRect();
-            this.left.applicability = b.left - 0;
-            this.left.valid = b.left >= 0;
-            return this.left.valid;
-        };
-        Align.prototype.checkRight = function (contentSizes) {
-            var b = this.node.getBoundingClientRect();
-            this.right.applicability = contentSizes.InnerWidth - (b.left + b.width);
-            this.right.valid = contentSizes.InnerWidth >= (b.left + b.width);
-            return this.right.valid;
-        };
-        return Align;
-    }();
-
-    this.Class = AlignClass;
-    return this;
 });

assets/animations/animations.css

@@ -0,0 +1,16 @@
+.anim-scale-in {
+    animation-name: scale-in;
+    animation-duration: .15s;
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

assets/animations/animations.js

@@ -0,0 +1,15 @@
+/** @module animations */
+kit.PluginManager.register('animations',function(module, exports, require, global) {
+
+    /**
+     * @memberof kitCore
+     * @instance
+     */
+    var animations = {
+        scaleIn: 'anim-scale-in',
+    };
+
+    Object.assign(animations, global.animations || {});
+
+    return module.exports = animations;
+});

assets/collection/collection.js

@@ -0,0 +1,73 @@
+/** @module collection */
+kit.PluginManager.register('collection',function(module, exports, require, global) {
+
+    function valueEx(value) {
+        if(typeof value === 'function') {
+            return value();
+        }
+        return value;
+    }
+    function uniqueId (length = 32, firstLetter = true) {
+        var idStr = '';
+        if(length < 1) return idStr;
+        if(firstLetter) {
+            length && (idStr = (Math.floor((Math.random() * 25)) + 10).toString(36));
+            if (length === 1) return idStr;
+        }
+        do {
+            idStr += (Math.floor((Math.random() * 35))).toString(36);
+        } while (idStr.length < length);
+        return (idStr);
+    };
+
+    var ArrayCollection = function (data){
+        this.data = data;
+    };
+    ArrayCollection.prototype.all = function () {
+        return this.data;
+    };
+    ArrayCollection.prototype.put = function (key, value) {
+        this.data[key] = value;
+    };
+    ArrayCollection.prototype.push = function (value) {
+        this.data.push(value);
+    };
+    ArrayCollection.prototype.get = function (key, defValue = undefined) {
+        if(this.data.hasOwnProperty(key)) {
+            return this.data[key];
+        }
+        return valueEx(defValue);
+    };
+    ArrayCollection.prototype.has = function (key) {
+        return this.data.hasOwnProperty(key);
+    };
+
+
+    var ObjectCollection = function (data){
+        this.data = data;
+    };
+    ObjectCollection.prototype.all = ArrayCollection.prototype.all;
+    ObjectCollection.prototype.put = ArrayCollection.prototype.put;
+    ObjectCollection.prototype.push = function (value) {
+        this.data[uniqueId(8)] = value;
+    };
+    ObjectCollection.prototype.get = ArrayCollection.prototype.get;
+    ObjectCollection.prototype.has = ArrayCollection.prototype.has;
+
+    /**
+     * @memberof kitCore
+     * @instance
+     */
+    var Collection = function (data) {
+        if(typeof data === 'object') {
+            return new ObjectCollection(data);
+        }
+        if(Array.isArray(data)) {
+            return new ArrayCollection(data);
+        }
+        return new ArrayCollection([data]);
+    }
+
+
+    return module.exports = Collection;
+});

assets/config/config.js

@@ -1,5 +1,4 @@
 /**
- * @var kit
  * @type {kitCore}
  */
 window.kit = window.kit || {};

assets/config/toolkit.config.css

@@ -63,6 +63,8 @@
     --kit-color: #1a1a1a;
     --kit-color-text-hover: var(--kit-color-primary);
 
+    --kit-color-primary-w5: hsl(210, 100%, 85%);
+    --kit-color-primary-w4: hsl(210, 100%, 80%);
     --kit-color-primary-w3: hsl(210, 100%, 70%);
     --kit-color-primary-w2: hsl(210, 100%, 65%);
     --kit-color-primary-w1: hsl(210, 100%, 60%);
@@ -70,8 +72,12 @@
     --kit-color-primary-b1: hsl(210, 100%, 50%);
     --kit-color-primary-b2: hsl(210, 100%, 45%);
     --kit-color-primary-b3: hsl(210, 100%, 40%);
+    --kit-color-primary-b4: hsl(210, 100%, 35%);
+    --kit-color-primary-b5: hsl(210, 100%, 30%);
     --kit-color-primary-text: #FFF;
 
+    --kit-color-secondary-w5: hsl(0, 0%, 80%);
+    --kit-color-secondary-w4: hsl(0, 0%, 75%);
     --kit-color-secondary-w3: hsl(0, 0%, 70%);
     --kit-color-secondary-w2: hsl(0, 0%, 65%);
     --kit-color-secondary-w1: hsl(0, 0%, 60%);
@@ -79,6 +85,8 @@
     --kit-color-secondary-b1: hsl(0, 0%, 50%);
     --kit-color-secondary-b2: hsl(0, 0%, 45%);
     --kit-color-secondary-b3: hsl(0, 0%, 40%);
+    --kit-color-secondary-b4: hsl(0, 0%, 35%);
+    --kit-color-secondary-b5: hsl(0, 0%, 30%);
 
     --kit-color-secondary-text: #FFF;
 

assets/core/core.js

@@ -399,11 +399,10 @@ window.kit = window.kit || {};
                 if(data === undefined) {
                     return;
                 }
-                if(!this.global.hasOwnProperty(key)) {
+                if(this.global.hasOwnProperty(key)) {
-                    this.global[key] = data;
+                    console.warn(`PluginManager.install(${pluginId}): key ${key} overwritten in kit (${plugin.state}).`);
-                } else {
-                    console.warn('PluginManager.install: plugin ' + pluginId + ' already exist in kit ('+plugin.state+')');
                 }
+                this.global[key] = data;
                 if(Array.isArray(aliasList) && aliasList.length) {
                     aliasList.forEach(function (alias) {
                         setGlobalExtension(alias, [], data)
@@ -579,17 +578,16 @@ window.kit = window.kit || {};
         if(this.plugins.hasOwnProperty(pluginId)) {
             return this.plugins[pluginId];
         }
-        for (var _pluginId in this.plugins) {
+        var _pluginId;
+        for (_pluginId in this.plugins) {
             if(this.plugins.hasOwnProperty(_pluginId) && this.plugins[_pluginId].config.alias.indexOf(pluginId) !== -1) {
                 return this.plugins[_pluginId];
             }
         }
-
+        _pluginId = pluginId[0].toUpperCase() + pluginId.slice(1);
-        var _pluginId = pluginId[0].toUpperCase() + pluginId.slice(1);
         if(_pluginId !== pluginId) {
             return this.__getPlugin(_pluginId);
         }
-
         return undefined;
     };
 

assets/core/core.register.js

@@ -6,7 +6,7 @@ __PluginManager__.registerPlugins({
             '/menu.css'
         ],
         type: 'loader',
-        deps: ['lib', 'align', 'utils']
+        deps: ['lib', 'align', 'utils', 'animations']
     },
     lib: {
         path: __pmConfig__.assetsPath + '/lib',
@@ -141,6 +141,12 @@ __PluginManager__.registerPlugins({
         module: '/cookie.js',
         type: 'loader',
     },
+    animations: {
+        path: __pmConfig__.assetsPath + '/animations',
+        css: '/animations.css',
+        module: '/animations.js',
+        type: 'loader',
+    },
 
 });
 

assets/core/doc.js

@@ -15,6 +15,10 @@
  * @property {kitCookie} cookie
  * @property {kitConfig} config
  * @property {kitTooltip} tooltip
- * @property {kitPopover} popover
+ * @property {kitPopover} Popover
  * @property {kitPopper} popper
- */
+ */
+
+/**
+ * @namespace kit
+ */

assets/lib/lib.js

@@ -1,9 +1,18 @@
-kit.PluginManager.register('lib',function() {
+/** @module lib */
+kit.PluginManager.register('lib',function(module, exports, require, global) {
 
-    this.icon = {
+    /**
-        options: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><g><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g></svg>',
+     * @memberof kitCore
-        arrowMenu: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>',
+     * @instance
+     */
+    var lib = {
+        svg: {
+            options: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></svg>',
+            arrowMenu: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>',
+        }
     };
 
-    return this;
+    Object.assign(lib, global.lib || {});
+
+    return module.exports = lib;
 });

assets/menu/menu.css

@@ -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-align="left"] .kit-menu-item:before,
-.kit-menu[data-kit-align-horizontal="right"] .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

@@ -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,
+        alignOffset: [0, 0],
-        offsetVertical: 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 = '';
+            if(!this.bActive) {
-            this.node.classList.add('active');
+                this.node.style.display = '';
-            this.options.parent.classList.add('active');
+                this.node.classList.add('active');
-            this.calcStyle();
+                this.options.parent.classList.add('active');
-            this.bActive = true;
+                this.calcStyle();
-            document.addEventListener('click', this.documentListenerHandler, false);
+                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.offset = this.options.alignOffset;
-            this.align.offsetVertical = this.options.offsetVertical;
             this.align
                 .setNode(this.node)
                 .setParentNode(parentNode)
-                .setHorizontal(right, false)
+                .setHorizontal(hDirection, hAlign)
-                .setVertical(false, true);
+                .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().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass)
-                this.getParent().kitMenuItem.getMenu() && (this.getParent().kitMenuItem.getMenu() instanceof Menu)
             ) {
                 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() {
+        Menu.prototype.addNodeEventListener = function() {
-            if(this.node) {
+            if(!this.node) {
-                this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
+                return;
-                this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
             }
+
+            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 () {
+        Menu.prototype.reInit = function (recursiveCalcStyle = false) {
-            //console.log('Menu: reInit ' + this.id);
+            // 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();
+            //this.addDocumentEventListener();
-
-            //document.addEventListener('click', this.documentListenerHandler, false);
-
         };
+
+
         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)) {
+            if(this.options.eventType === 'click') {
-                this.toggle();
+                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,
+                    icon: libModule.svg.options,
-                    arrow: libModule.icon.arrowMenu,
+                    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;
 });

assets/toolkit/toolkit.css

@@ -34,7 +34,15 @@
 .kit-field--text {
 
 }
-
+input[type="color"] ~ .kit-field__color {
+    display: flex;
+}
+.kit-field__color {
+    display: none;
+}
+.kit-field__color {
+    display: none;
+}
 .kit-field__label {
     display: none;
 }
@@ -701,6 +709,9 @@
     -moz-transition: background 0.3s, box-shadow 0.3s, color 0.3s;
     transition: background 0.3s, box-shadow 0.3s, color 0.3s;
     position: relative;
+    /*box-shadow: 0px 2px 7px -6px var(--kit-color-button-content, var(--kit-color-text));*/
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 }
 .kit-button * {
     pointer-events: none;
@@ -726,13 +737,6 @@
     -moz-transition: none;
     transition: none;
 }
-.kit-button.kit-button--material {
-    padding-bottom: 2px;
-    box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
-}
-.kit-button.kit-button--material:hover {
-    box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
-}
 .kit-button__icon {
     display: inline-block;
     height: 1em;
@@ -782,11 +786,13 @@
     width: 100%;
 }
 .kit-button.kit-button--radius,
-.kit-button.kit-button--radius:after {
+.kit-button.kit-button--radius:before,
+.kit-button.kit-button--radius .kit-button__border {
     border-radius: 2px;
 }
 .kit-button.kit-button--round,
-.kit-button.kit-button--round:after {
+.kit-button.kit-button--round:before,
+.kit-button.kit-button--round .kit-button__border {
     border-radius: 1em;
 }
 
@@ -795,22 +801,50 @@
     color: var(--kit-color-button-content);
     background-color: transparent;
     position: relative;
-    box-shadow: none;
+    transition: inherit;
 }
-.kit-button.kit-button--bordered:after {
+
-    content: '';
+.kit-button__border {
+    pointer-events: none;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    border: 1px solid var(--kit-color-button-content);
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
+.kit-button.kit-button--bordered .kit-button__border {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--kit-color-button-content, var(--kit-color-text));
+}
 
 
+.kit-button.kit-button--material:before {
+    transition: inherit;
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 
+    box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text));
+}
+.kit-button.kit-button--material:hover:before,
+.kit-button.kit-button--material:active:before,
+.kit-button.kit-button--material:focus:before {
+    box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text));
+}
+.kit-button.kit-button--material .kit-button__border {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--kit-color-button-content, var(--kit-color-text));
+}
 
 .kit-button.kit-button--transparent {
     background: transparent !important;

assets/utils/utils.js

@@ -1,4 +1,5 @@
-kit.PluginManager.register('utils', function(module, exports, require){
+/** @module utils */
+__PluginManager__.register('utils', function(module, exports, require){
     var StackExecutionLimiter = (function () {
         var stack = function (context, callback, timeout = 1000) {
             this.counter = 0;
@@ -43,8 +44,6 @@ kit.PluginManager.register('utils', function(module, exports, require){
         };
         return stack;
     })();
-
-
     var str = {
         ucFirst: function (str) {
             if (!str) return str;
@@ -52,8 +51,15 @@ kit.PluginManager.register('utils', function(module, exports, require){
         }
     };
 
-    return module.exports = {
+
+    /**
+     * @memberof kitCore
+     * @instance
+     */
+    var utils = {
         StackExecutionLimiter: StackExecutionLimiter,
         str: str,
     };
+
+    return module.exports = utils;
 });

templates/button.php

@@ -24,5 +24,6 @@ $preloader = \Wt\Core\Tools::isTrue($arParams['PRELOADER']);
     <?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR']);?>
 ><div class="kit-button__icon kit-icon"><?=$arParams['ICON']?></div>
     <div class="kit-button__label kit-line-clamp"><?=$arParams['LABEL']?:$arParams['NAME']?:''?></div>
+    <div class="kit-button__border"></div>
 <?if($preloader){?><span class="circle-preloader"></span><?}?>
 </button><?

templates/input.php

@@ -78,6 +78,7 @@ if($isHint) {
         <?
         }
     ?></div>
+    <div class="kit-field__color"></div>
     <div class="kit-field__message"><?=$arParams['MESSAGE']?></div>
     <div class="kit-field__hr"></div>
 </label>

tests/cheatsheet.php

@@ -194,12 +194,12 @@ $APPLICATION->ShowHead();
     </div>
 
 
+    <h2>Modals</h2>
     <div class="d-flex justify-content-between flex-wrap">
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
             Vertically centered scrollable modal
         </button>
     </div>
-
     <?
     service()->templater()->render('kit:modal', [
         'ID' => 'exampleModalCenteredScrollable',
@@ -210,8 +210,22 @@ $APPLICATION->ShowHead();
         'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary">Save changes</button>',
     ]);
-
     ?>
+
+
+
+    <h2>Inputs</h2>
+    <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'color',
+                'HINT' => 'color picker by xu-ui',
+                'NAME' => 'color',
+                'VALUE' => '',
+                'LABEL' => 'color',
+            ]); ?>
+        </div>
+    </div>
     <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
@@ -420,6 +434,8 @@ $APPLICATION->ShowHead();
         </div>
     </div>
 
+
+    <h2>Buttons</h2>
     <div class="flex-list" style="--col-count: 7;">
         <div class="flex-list-item"></div>
         <div class="flex-list-item">bordered</div>
@@ -475,6 +491,62 @@ $APPLICATION->ShowHead();
 
 
 
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
 
 
 

tests/menu.php

@@ -0,0 +1,303 @@
+<?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  type="text/css">
+    .chat-message {
+        border: 1px solid;
+    }
+    .chat-message--manager-item {
+        min-width: 55px;
+        align-self: flex-start;
+        background: aliceblue;
+    }
+    .chat-message--manager-item-menu {
+        cursor: pointer;
+    }
+
+</style>
+
+<body>
+    <div class="kit-wrapper" style="background: beige; --width-wrapper: 800px;">
+        <div class="flex-col">
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-13">
+                <div class="chat-message--manager-item">
+                    <div>13</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div class="chat-message--manager-item-menu">|||</div>
+                </div>
+            </div>
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-14">
+                <div class="chat-message--manager-item">
+                    <div>14</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div>Q</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div class="chat-message--manager-item-menu">|||</div>
+                </div>
+            </div>
+
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-15">
+                <div class="chat-message--manager-item">
+                    <div>15</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div id="change-context-menu-r" style="font-size: 40px">R</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div>Q</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div id="change-context-menu-x" class="chat-message--manager-item-menu"><span style="
+                        font-size: 10px;
+                        text-align: center;
+                        color: red;
+                        font-weight: bold;
+                        ">click me</span></div>
+                </div>
+            </div>
+
+
+
+
+
+        </div>
+    </div>
+
+<script>
+kit.ready(['menu', 'animations'], function () {
+
+
+
+    console.log('menu init');
+    /**
+     *
+     * тут управление
+     *
+     * схема: menu - item
+     *
+     * возможность создавать меню через классы и через options
+     *
+     * для итема можно использовать слудующие колбеки:
+     * - click
+     * - dblclick
+     * аргументы:
+     * event - текущее событие,
+     * menuItem - объект итема,
+     * menu - объект меню в котором лежит итем
+     *
+     *
+     *
+     *
+     */
+    window.i = 0;
+    window.otherMenu = function() {
+        window.i++;
+        if(window.i > 20) {
+            return null;
+        }
+        var menu;
+        menu = kit.menu.getInstance({
+            alignOffset: [0, 5],
+            eventType: 'click',
+        }, [
+            {
+                label: 'еще (' + window.i + ')',
+                click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+                child: otherMenu()
+            }
+        ]);
+        menu.addItem({
+            label: '<b>деф</b> колбек',
+            href: window.location.href
+        });
+
+        //menu.init();
+        return menu;
+    };
+
+
+
+    window.menuBuilder = (function(){
+        console.log('menuBuilder');
+        window.menuBase = null;
+
+        var menuBase = new kit.menu.Class();
+        menuBase.setOptions({
+            animation: kit.animations.scaleIn,
+            alignOffset: [5, 5],
+            hideDelay: 1000,
+            parent: '#chat-message-15 .chat-message--manager-item-menu',
+            /**
+             * доступно 2 режима click / hover,
+             * понимать так: данное меню появляется по Клику на родитя (по дефолту hover)
+             */
+            eventType: 'click',
+        });
+
+        /**
+         * тут построение дерева через options
+         */
+        menuBase.addItem({
+            label: 'create by options - child: [{}, {}]',
+            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+            child: [
+                {
+                    label: 'example',
+                    child: [
+                        {
+                            label: 'LVL 3',
+                            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+                        },
+                        {
+                            label: 'LVL 3 (+)',
+                            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+                        }
+                    ],
+                },
+                {
+                    label: 'Малява',
+                    click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+                }
+            ],
+        });
+
+        /**
+         * тут в child отдаем класс Menu
+         */
+        menuBase.addItem({
+            label: 'открыть по клику',
+            click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+            child: otherMenu(),
+        });
+
+
+        menuBase.addItem({
+            label: 'Игнор',
+            click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+        });
+
+        /**
+         * пример
+         * по клику на себя инкримент (инк лежит в самом классе итема)
+         */
+        menuBase.addItem({
+            label: 'change label',
+            sort: 5,
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                !menuItem.customToggle && (menuItem.customToggle = 0);
+                menuItem.setLabel('change label (' + (++menuItem.customToggle) + ')');
+            },
+        });
+        /**
+         * пример
+         * добавить на лету итем с колбеком по клику удаляющий себя
+         */
+        window.i = 0;
+        menuBase.addItem({
+            label: 'Добавить сюда меню',
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                console.log(menu);
+                menu.addItem({
+                    label: '--- remove me (' + (++window.i) + ') ---',
+                    sort: 4000,
+                    click: function(e, menuItem, menu) {
+                        console.log('клик by ' + menuItem.options.label);
+                        menuItem.remove();
+                    },
+                });
+                menu.reInit();
+            },
+        });
+        /**
+         * пример
+         * переселяем меню к другому родителю
+         */
+            // var item1 = new menuBase.MenuItem(menuBase.id);
+            // item1.setLabel()
+            // var item2 = new menuBase.MenuItem(menuBase.id);
+        var item1 = menuBase.addItem({
+
+                label: 'меняем предка на R',
+                click: function(e, menuItem, menu) {
+                    console.log('клик by ' + menuItem.options.label);
+                    menu.setParent(document.querySelector('#change-context-menu-r'));
+                    menuItem.setVisible(false);
+                    var tMenu = menu.getItemById(item2.getId());
+                    if(tMenu) {
+                        tMenu.setVisible(true);
+                    }
+                    // kit.menu.reInitAllMenu();
+                    // todo перерасчет только внутренних меню
+                },
+            }, true);
+        var item2 = menuBase.addItem({
+            label: 'меняем предка на X',
+            visible: false,
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                menu.setParent(document.querySelector('#change-context-menu-x'));
+                menuItem.setVisible(false);
+                var tMenu = menu.getItemById(item1.getId());
+                if(tMenu) {
+                    tMenu.setVisible(true);
+                }
+                // kit.menu.reInitAllMenu();
+            },
+        }, true);
+
+        menuBase.init();
+
+    });
+
+
+    menuBuilder();
+})
+
+
+</script>
+
+</body>