Merge branch 'master' of https://bitbucket.org/bellord13/kit

assets/align/align.js

@@ -467,14 +467,31 @@ kit.PluginManager.register('align',function(module, exports, require) {
     };
 
 
+    /**
+     * @class AlignDefault
+     */
+    const Default = {
+        hAlign: 'center',
+        vAlign: 'top',
+        hDirection: 'center',
+        vDirection: 'top',
+    };
+
+
     /**
      * @param node {HTMLElement|String}
      * @param parentNode {HTMLElement|String}
      * @param limiterNode {HTMLElement|String}
+     * @param options {AlignDefault}
      * @constructor
      */
-    var AlignClass = function(node, parentNode, limiterNode = window)
+    var AlignClass = function(node, parentNode, limiterNode = window, options = {})
     {
+        /**
+         * @type {AlignDefault}
+         */
+        this.options = Object.assign({}, Default, options);
+
         this.changeOfDirection = true;
         this.withinTheScreen = true;
         this.offset = [0, 0];
@@ -495,6 +512,9 @@ kit.PluginManager.register('align',function(module, exports, require) {
     AlignClass.prototype.setNode = function(node){
         this.unset();
         this.node = support.getNode(node);
+        if(!support.isElement(this.node)){
+            console.warn('Align: node is not valid');
+        }
         this.reset();
         if(this.node instanceof HTMLElement) {
             this.node.kit = this.node.kit || {};
@@ -512,6 +532,9 @@ kit.PluginManager.register('align',function(module, exports, require) {
      */
     AlignClass.prototype.setParentNode = function(node){
         this.parentNode = support.getNode(node);
+        if(!support.isElement(this.parentNode)){
+            console.warn('Align: parentNode is not valid');
+        }
         if(this.__calc) {
             this.__calc.setParentNode(this.parentNode);
         }
@@ -520,6 +543,9 @@ kit.PluginManager.register('align',function(module, exports, require) {
 
     AlignClass.prototype.setLimiterNode = function(node){
         this.limiterNode = support.getNode(node) || window;
+        if(!support.isElement(this.limiterNode) && this.limiterNode !== window){
+            console.warn('Align: limiterNode is not valid');
+        }
         if(this.__calc) {
             this.__calc.setLimiterNode(this.limiterNode);
         }
@@ -569,17 +595,35 @@ kit.PluginManager.register('align',function(module, exports, require) {
      * @return {AlignClass}
      */
     AlignClass.prototype.set = function(hAlign, vAlign, hDirection, vDirection){
+
+        this.options.hAlign = hAlign;
+        this.options.vAlign = vAlign;
+        this.options.hDirection = hDirection;
+        this.options.vDirection = vDirection;
+
         this.setEx('vertical', vAlign, vDirection);
         this.setEx('horizontal', hAlign, hDirection);
         return this;
     };
 
+
+    AlignClass.prototype.setOptions = function(options){
+        Object.assign(this.options, options);
+        this.setEx('vertical', this.options.vAlign, this.options.vDirection);
+        this.setEx('horizontal', this.options.hAlign, this.options.hDirection);
+        return this;
+    };
+
     AlignClass.prototype.setVertical = function(align, direction){
+        this.options.vAlign = align;
+        this.options.vDirection = direction;
         this.setEx('vertical', align, direction);
         return this;
     };
 
     AlignClass.prototype.setHorizontal = function(align, direction){
+        this.options.hAlign = align;
+        this.options.hDirection = direction;
         this.setEx('horizontal', align, direction);
         return this;
     };

assets/core/core.register.js

@@ -85,7 +85,7 @@ __PluginManager__.registerPlugins({
         onInstall: function(){
 
         },
-        deps: ['Viewer', 'support', 'ActionCollection', 'Action', 'userAction', 'align'],
+        deps: ['Viewer', 'support', 'ActionCollection', 'Action', 'userAction', 'align', 'Collection', 'animations'],
     },
     Popover: {
         path: __pmConfig__.assetsPath + '/popover',

assets/support/support.js

@@ -137,7 +137,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
         var nodeWrap = document.createElement('div');
         nodeWrap.innerHTML = html;
         var r = nodeWrap.firstChild;
-        r.remove();
+        r && r.remove();
         return r;
     }
     function makeNodeList(html = '') {

assets/tooltip2/tooltip2.js

@@ -3,6 +3,7 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
 
     var Viewer = require('Viewer');
     var support = require('support');
+    var Collection = require('Collection');
     var ActionCollection = require('ActionCollection');
     var Action = require('Action');
     var userAction = require('userAction');
@@ -11,7 +12,15 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
 
     const PLUGIN_NAME = 'tooltip2';
 
+    /**
+     * @class Tooltip2Default
+     */
     const Default = {
+        hAlign: 'center',
+        vAlign: 'top',
+        hDirection: 'center',
+        vDirection: 'top',
+        offset: 10,
         template: '<div class="tooltip" role="tooltip" style="display: none">' +
             //'<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
             '<div class="tooltip-inner"></div>' +
@@ -23,21 +32,32 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
      * @memberOf kit
      * @param masterNode
      * @param hintNode
+     * @param options
      * @constructor
      */
-    var Tooltip2 = function(masterNode, hintNode) {
+    var Tooltip2 = function(masterNode, hintNode, options = {}) {
         var self = this;
+        var masterOptions = {};
+        /**
+         * @type {Tooltip2Default}
+         */
+        this.options = Object.assign({}, Default, masterOptions, options);
         this.masterNode = support.getNode(masterNode);
+        if(!support.isElement(this.masterNode)){
+            console.warn('Tooltip2: masterNode not valid', this.masterNode);
+        }
         this.hintNode = support.getNode(hintNode);
         if(!this.hintNode) {
-            this.hintNode = support.makeNode(Default.template);
+            this.hintNode = support.makeNode(this.options.template);
+        }
+        if(!support.isElement(this.hintNode)){
+            console.warn('Tooltip2: masterNode not valid', this.hintNode);
         }
         this.hintNode.remove();
         this.masterNode.appendChild(this.hintNode);
-        support.setNodeData(this.masterNode, PLUGIN_NAME, this);
+        //support.setNodeData(this.masterNode, PLUGIN_NAME, this);
 
         this.align = new align.Class(this.hintNode, this.masterNode);
-        this.align.offset = [0, 10];
         var hint = new userAction.Hint(this.masterNode, this.hintNode);
         this.viewer = hint.viewer;
         this.viewer.delayHide = 400;
@@ -53,6 +73,19 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
 
     var __proto = Tooltip2.prototype;
 
+    var vDirection = new Collection(['top', 'bottom']);
+    var hDirection = new Collection(['left', 'right']);
+
+    __proto.__setOffset = function(){
+        var offset = this.options.offset;
+        this.align.offset = [0, 0];
+        var directions = new Collection([this.options.hDirection, this.options.vDirection]);
+        if(hDirection.includes(this.options.hDirection) || directions.includes('start'))
+        this.align.offset[0] = offset;
+        if(vDirection.includes(this.options.vDirection) || directions.includes('end'))
+        this.align.offset[1] = offset;
+    };
+
     __proto.setContent = function(html = ''){
         var titleNode = this.hintNode.querySelector('.tooltip-inner');
         support.innerHtml(titleNode, html);
@@ -70,7 +103,17 @@ kit.PluginManager.register('Tooltip2',function(module, exports, require, global)
         support.setNodeData(this.masterNode, PLUGIN_NAME, null);
     };
     __proto.render = function(){
-        this.align.set('center', 'top', 'center', 'top');
+        if(this.viewer.isShown()) {
+            this.__setOffset();
+            this.align.set(this.options.hAlign, this.options.vAlign, this.options.hDirection, this.options.vDirection);
+        }
+    };
+    /**
+     * @param options {Tooltip2Default}
+     */
+    __proto.setOptions = function(options){
+        Object.assign(this.options, options);
+        this.render();
     };
 
     module.exports = Tooltip2;

tests/CollectionTest.php

@@ -224,6 +224,12 @@ kit.ready(['collection', 'testing', 'flexKit'], function () {
     y = x.pluck('age');
     assertSame('20-19-18', y.toArray().join('-'), 'pluck с проверкой сохранения порядка');
 
+
+    c = new kit.Collection(['start', 'end']);
+    assertSame(true, c.includes('end'), 'includes');
+    assertSame(true, c.includes('start'), 'includes');
+    assertSame(false, c.includes('center'), 'includes');
+
 });
 
 </script>

tests/bsToastsTest.php

@@ -30,7 +30,7 @@ $APPLICATION->ShowHead();
             unit.assertSame('message', toast.data.message, 'Проверка toast.data.message в событии onShow');
             unit.assertSame('desc', toast.data.desc, 'Проверка toast.data.desc в событии onShow');
             unit.assertSame(node, toast._element, 'Проверка node в событии onShow');
-            unit.assertSame(support.getKit(node, 'toast'), toast, 'Проверка node.kit.toast в событии onShow');
+            unit.assertSame(support.getNodeData(node, 'toast'), toast, 'Проверка node.kit.toast в событии onShow');
         });
         kit.service.toast.info('title', 'message', 'desc');
         kit.service.toast.onShow.forget('test');

tests/tooltip2Test.php

@@ -17,7 +17,7 @@ $APPLICATION->ShowHead();
 ?>
 
 <script>
-    kit.ready(['Tooltip2', 'testing', 'Tooltip', 'animations'], function () {
+    kit.ready(['Tooltip2', 'testing'], function () {
 
         var unit = new kit.testing.Unit();
 
@@ -28,12 +28,15 @@ $APPLICATION->ShowHead();
         hint.run();
 
 
+        var hint1m = new kit.align.Class('#master > mark', '#master');
+        hint1m.setOptions({hDirection: 'center', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
 
         unit.assertSame(true, !!hint, 'Проверка наличия класса');
         unit.assertSame(true, !!hint.viewer, 'Проверка наличия viewer');
         unit.assertSame(true, !!hint.align, 'Проверка наличия align');
         unit.assertSame(true, !!hint.action, 'Проверка наличия action');
-        unit.assertSame(hint, hint.masterNode.kit['tooltip2'], 'set kit data');
+        //unit.assertSame(hint, hint.masterNode.kit['tooltip2'], 'set kit data');
 
         var hint2 = new kit.Tooltip2('#master2');
         hint2.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
@@ -52,12 +55,127 @@ $APPLICATION->ShowHead();
         hint2.viewer.onHideBefore.push(function () {
             clearInterval(x);x = 0;
         });
+
+        var hint2m = new kit.align.Class('#master2 > mark', '#master2');
+        hint2m.setOptions({hDirection: 'center', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+
+        var hint3 = new kit.Tooltip2('#master3');
+        hint3.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint3.run();
+        hint3.setOptions({vAlign: 'bottom', vDirection: 'bottom'});
+
+        var hint3m = new kit.align.Class('#master3 > mark', '#master3');
+        hint3m.setOptions({hDirection: 'center', hAlign: 'center', vAlign: 'bottom', vDirection: 'bottom'});
+
+
+        var hint4 = new kit.Tooltip2('#master4');
+        hint4.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint4.run();
+        hint4.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'center', vDirection: 'center'});
+
+        var hint4m = new kit.align.Class('#master4 > mark', '#master4');
+        hint4m.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'center', vDirection: 'center'});
+
+
+        var hint5 = new kit.Tooltip2('#master5');
+        hint5.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint5.run();
+        hint5.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'top', vDirection: 'top'});
+
+        var hint5m = new kit.align.Class('#master5 > mark', '#master5');
+        hint5m.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'top', vDirection: 'top'});
+
+
+        var hint6 = new kit.Tooltip2('#master6');
+        hint6.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint6.run();
+        hint6.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'bottom', vDirection: 'bottom'});
+
+        var hint6m = new kit.align.Class('#master6 > mark', '#master6');
+        hint6m.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'bottom', vDirection: 'bottom'});
+
+
+        var hint7 = new kit.Tooltip2('#master7');
+        hint7.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint7.run();
+        hint7.setOptions({hDirection: 'right', hAlign: 'left', vAlign: 'bottom', vDirection: 'top'});
+
+        var hint7m = new kit.align.Class('#master7 > mark', '#master7');
+        hint7m.setOptions({hDirection: 'right', hAlign: 'left', vAlign: 'bottom', vDirection: 'top'});
+
+
+
+
+        var hint8 = new kit.Tooltip2('#master8');
+        hint8.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint8.run();
+        hint8.setOptions({hDirection: 'right', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+        var hint8_2 = new kit.Tooltip2('#master8');
+        hint8_2.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint8_2.run();
+        hint8_2.setOptions({hDirection: 'left', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+        var hint8m = new kit.align.Class('#master8 > mark', '#master8');
+        hint8m.offset = [1, 1];
+        hint8m.setOptions({hDirection: 'left', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+        var hint8m2 = new kit.align.Class('#master8 > mark2', '#master8');
+        hint8m2.offset = [1, 1];
+        hint8m2.setOptions({hDirection: 'right', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+
+
+        var hint9 = new kit.Tooltip2('#master9');
+        hint9.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint9.run();
+        hint9.setOptions({hDirection: 'right', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+        var hint9_2 = new kit.Tooltip2('#master9');
+        hint9_2.setContent('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit');
+        hint9_2.run();
+        hint9_2.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'top', vDirection: 'bottom'});
+
+        var hint9m = new kit.align.Class('#master9 > mark', '#master9');
+        hint9m.offset = [1, 1];
+        hint9m.setOptions({hDirection: 'right', hAlign: 'right', vAlign: 'top', vDirection: 'bottom'});
+
+        var hint9m2 = new kit.align.Class('#master9 > mark2', '#master9');
+        hint9m2.offset = [1, 1];
+        hint9m2.setOptions({hDirection: 'right', hAlign: 'center', vAlign: 'top', vDirection: 'top'});
+
+
     });
 </script>
-
+<style>
+    .test-block {
+        padding: 100px;
+        float: left;
+    }
+    .test-mater {
+        width: 40px;height: 40px;background-color: #0a51ae;
+    }
+    mark, mark2 {
+        display: block;
+        width: 6px;
+        height: 6px;
+        background-color: red;
+    }
+</style>
 <div  class="kit-wrapper">
-    <div style="padding: 100px;"><div id="master" style="width: 40px;height: 40px;background-color: #0a51ae;"></div></div>
+    <div>
-    <div style="padding: 100px;"><div id="master2" style="width: 40px;height: 40px;background-color: #0a51ae;"></div></div>
+        <div class="test-block"><div id="master" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master2" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master3" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master4" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master5" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master6" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master7" class="test-mater"><mark></mark></div></div>
+        <div class="test-block"><div id="master8" class="test-mater"><mark></mark><mark2></mark2></div></div>
+        <div class="test-block"><div id="master9" class="test-mater"><mark></mark><mark2></mark2></div></div>
+        <div style="clear: both"></div>
+    </div>
 
     <div class="kit-logger"></div>
 </div>