ax5ui-docker - npm Package Compare versions

Comparing version 1.3.90 to 1.3.91

bower.json

 {
 	"name": "ax5ui-docker",
-	"version": "1.3.90",
+	"version": "1.3.91",
 	"description": "A dashboard plugin that works with Bootstrap & jQuery",
@@ -5,0 +5,0 @@ "authors": [

dist/ax5docker.js

@@ -16,3 +16,3 @@ "use strict";
         className: "docker",
-        version: "1.3.90"
+        version: "1.3.91"
     }, function () {
@@ -75,2 +75,8 @@
 
+            /**
+             * 부모패널과 패널인덱스 값으로 패널 패스를 구합니다.
+             * @param parent
+             * @param pIndex
+             * @returns {string}
+             */
             var getPanelPath = function getPanelPath(parent, pIndex) {
@@ -86,2 +92,7 @@ var paths = [];
 
+            /**
+             * 패널패스를 이용하여 패널을 가져옵니다
+             * @param _panelPath
+             * @returns {*}
+             */
             var getPanel = function getPanel(_panelPath) {
@@ -102,17 +113,8 @@ var path = [],
 
-            var getParentPanel = function getParentPanel(_panelPath) {
-                var path = [],
-                    _path = U.isArray(_panelPath) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
-                _path.pop();
-                _path.forEach(function (n) {
-                    if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
-                });
-
-                try {
-                    return Function("", "return this" + path.join('') + ";").call(_this);
-                } catch (e) {
-                    return;
-                }
-            };
-
+            /**
+             * 패널패스를 이용하여 패널오브젝트에 값을 부여합니다.
+             * @param _panelPath
+             * @param _value
+             * @returns {*}
+             */
             var setPanel = function setPanel(_panelPath, _value) {
@@ -129,2 +131,7 @@ var path = [],
 
+            /**
+             * get mouse position
+             * @param e
+             * @returns {{clientX, clientY}}
+             */
             var getMousePosition = function getMousePosition(e) {
@@ -141,2 +148,8 @@ var mouseObj = void 0,
 
+            /**
+             * 패널의 모듈이 초기화, 활성화, 비활성, 제거 되는 일들을 제어하는 함수.
+             * 모든 컨트롤은 실행되기전에 사용자가 정의한 control.before 함수의 결과에 따라 실행 여부를 결정합니다. 사용자가 control.before를 정의하지 않으면 무조건 실행합니다.
+             * @param {Object} _panel
+             * @param {String} _control - "init","active","deactive","destroy"
+             */
             var controlPanel = function controlPanel(_panel, _control) {
@@ -263,3 +276,3 @@ var moduleState = jQuery.extend(_panel.moduleState, {
                         } else {
-                            $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '" style="flex-grow: ' + (myself.flexGrow || 1) + ';">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
+                            $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '" style="flex-grow: ' + (myself.flexGrow || 1) + ';">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-tabs-more="">' + cfg.icons.more + '</div>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
 
@@ -348,3 +361,5 @@ if (!myself.builded) controlPanel(myself, "init");
 
-                _this.$target.off("mousedown.ax5docker-pane-resize").off("dragstart.ax5docker-pane-resize").on("mousedown.ax5docker-pane-resize", "[data-ax5docker-resize-handle]", function (e) {
+                _this.$target.off("mousedown.ax5docker-pane-resize").off("dragstart.ax5docker-pane-resize").on("dragstart.ax5docker-pane-resize", "[data-ax5docker-pane-tab]", function (e) {
+                    panelTabDragEvent.on(this);
+                }).on("mousedown.ax5docker-pane-resize", "[data-ax5docker-resize-handle]", function (e) {
                     var datas = this.getAttribute("data-ax5docker-resize-handle").split(/\//g);
@@ -425,2 +440,8 @@
 
+            /**
+             * stackTab의 더보기 아이콘이 클릭되면~~~
+             * @param stackPane
+             * @param e
+             * @returns {ax5docker}
+             */
             var openStackPanelMore = function openStackPanelMore(stackPane, e) {
@@ -460,2 +481,6 @@ var $stackPane = jQuery(stackPane),
 
+            /**
+             * repaintPanels이 작동할 때. 리사이저에 mousedown 이벤트를 연결합니다.
+             * 발생된 이벤트가 panelResizerEvent.on 을 작동시켜 리사이저를 움직이게 합니다
+             */
             var panelResizerEvent = {
@@ -467,3 +492,3 @@ "on": function on(_resizer) {
 
-                    jQuery(document.body).bind("mousemove.ax5docker-" + _this.instanceId, function (e) {
+                    jQuery(document.body).on("mousemove.ax5docker-" + _this.instanceId, function (e) {
                         var mouseObj = getMousePosition(e);
@@ -491,7 +516,7 @@ var da_grow = void 0;
                         da_grow = null;
-                    }).bind("mouseup.ax5docker-" + _this.instanceId, function (e) {
-                        panelResizerEvent.off.call(self);
+                    }).on("mouseup.ax5docker-" + _this.instanceId, function (e) {
+                        panelResizerEvent.off();
                         U.stopEvent(e);
-                    }).bind("mouseleave.ax5docker-" + _this.instanceId, function (e) {
-                        panelResizerEvent.off.call(self);
+                    }).on("mouseleave.ax5docker-" + _this.instanceId, function (e) {
+                        panelResizerEvent.off();
                         U.stopEvent(e);
@@ -520,3 +545,3 @@ });
 
-                    jQuery(document.body).unbind("mousemove.ax5docker-" + _this.instanceId).unbind("mouseup.ax5docker-" + _this.instanceId).unbind("mouseleave.ax5docker-" + _this.instanceId);
+                    jQuery(document.body).off("mousemove.ax5docker-" + _this.instanceId).off("mouseup.ax5docker-" + _this.instanceId).off("mouseleave.ax5docker-" + _this.instanceId);
 
@@ -528,2 +553,83 @@ jQuery(document.body).removeAttr('unselectable').css('user-select', 'auto').off('selectstart');
             /**
+             * repaintPanels이 작동할 때. 패널탭에 dragStart 이벤트를 연결합니다.
+             * 발생된 이벤트가 panelTabDragEvent.on를 작동.
+             */
+            var panelTabDragEvent = {
+                "on": function on() {
+                    if (_this.panels[0] && _this.panels[0].panels && _this.panels[0].panels.length) {
+
+                        _this.xvar.drager = {
+                            target: null,
+                            dragOverVertical: null,
+                            dragOverHorizontal: null
+                        };
+
+                        _this.$target.on("dragover.ax5docker-" + _this.instanceId, '[data-ax5docker-path]', function (e) {
+                            // todo : dragover 구현
+                            // console.log("dargover", getMousePosition(e));
+                            // console.log(e.target);
+                            panelTabDragEvent.dragover(this, e);
+                            U.stopEvent(e);
+                        }).on("drop.ax5docker-" + _this.instanceId, function (e) {
+                            panelTabDragEvent.off();
+                            U.stopEvent(e);
+                        }).on("dragend.ax5docker-" + _this.instanceId, function (e) {
+                            panelTabDragEvent.off();
+                            U.stopEvent(e);
+                        });
+                    }
+                },
+                "dragover": function dragover(dragoverDom, e) {
+                    var $dragoverDom = jQuery(dragoverDom);
+                    if (_this.xvar.drager.target == null || _this.xvar.drager.target.get(0) != $dragoverDom.get(0)) {
+                        _this.xvar.drager.target = $dragoverDom;
+                        _this.xvar.drager.dragOverVertical = null;
+                        _this.xvar.drager.dragOverHorizontal = null;
+                    }
+
+                    // e.target
+                    var box = {};
+                    box = $dragoverDom.offset();
+                    box.width = $dragoverDom.width();
+                    box.height = $dragoverDom.height();
+
+                    var mouse = getMousePosition(e);
+                    var dragOverVertical = void 0,
+                        dragOverHorizontal = void 0;
+                    if ($dragoverDom.attr("data-ax5docker-pane-tab")) {} else if ($dragoverDom.attr("data-ax5docker-pane-item")) {
+                        // panel dragover 포지션 구하기
+                        var threeQuarterHeight = box.height / 3;
+                        var threeQuarterWidth = box.width / 3;
+
+                        if (box.top <= mouse.clientY && box.top + threeQuarterHeight >= mouse.clientY) {
+                            dragOverVertical = "top";
+                        } else if (box.top + threeQuarterHeight <= mouse.clientY && box.top + threeQuarterHeight * 2 >= mouse.clientY) {
+                            dragOverVertical = "middle";
+                        } else if (box.top + threeQuarterHeight * 2 <= mouse.clientY && box.top + threeQuarterHeight * 3 >= mouse.clientY) {
+                            dragOverVertical = "bottom";
+                        }
+
+                        if (box.left <= mouse.clientX && box.left + threeQuarterWidth >= mouse.clientX) {
+                            dragOverHorizontal = "left";
+                        } else if (box.left + threeQuarterWidth <= mouse.clientX && box.left + threeQuarterWidth * 2 >= mouse.clientX) {
+                            dragOverHorizontal = "center";
+                        } else if (box.left + threeQuarterWidth * 2 <= mouse.clientX && box.left + threeQuarterWidth * 3 >= mouse.clientX) {
+                            dragOverHorizontal = "right";
+                        }
+                    }
+
+                    if (_this.xvar.drager.dragOverVertical != dragOverVertical || _this.xvar.drager.dragOverHorizontal != dragOverHorizontal) {
+                        _this.xvar.drager.dragOverVertical = dragOverVertical;
+                        _this.xvar.drager.dragOverHorizontal = dragOverHorizontal;
+                        console.log(_this.xvar.drager);
+                    }
+
+                    //console.log(box, mouse);
+                },
+                "off": function off() {
+                    _this.$target.off("dragover.ax5docker-" + _this.instanceId).off("drop.ax5docker-" + _this.instanceId).off("dragend.ax5docker-" + _this.instanceId);
+                }
+            };
+
+            /**
              * stack type panel resize되면 탭 스크롤 처리 관련 처리
@@ -535,2 +641,5 @@ */
 
+            /**
+             * stackPane이 리사이즈 되면 탭을 스크롤여부를 판단해야 합니다.
+             */
             var alignStackPane = function alignStackPane() {
@@ -1058,3 +1167,3 @@ debounceFn(function () {
 // todo : stack tab overflow 처리. -- ok
-// todo : 탭 포커싱와 탭 목록 메뉴 처리전
+// todo : 탭 포커싱와 탭 목록 메뉴 처리 -- ok
 // todo : 패널 drag & drop
@@ -1066,8 +1175,4 @@ // ax5.ui.docker.tmpl
 
-    var panels = function panels(columnKeys) {
-        return " \n{{#panels}}\n{{#panels}}\n{{/panels}}\n{{^panels}}\n{{/panels}}\n{{/panels}}\n        ";
-    };
+    DOCKER.tmpl = {
 
-    DOCKER.tmpl = {
-        "panels": panels,
         get: function get(tmplName, data, columnKeys) {
@@ -1074,0 +1179,0 @@ return ax5.mustache.render(DOCKER.tmpl[tmplName].call(this, columnKeys), data);

dist/ax5docker.min.js

@@ -1,1 +0,1 @@
-"use strict";!function(){var e=ax5.ui,n=ax5.util;e.addClass({className:"docker",version:"1.3.90"},function(){var e=function(){var e=this,a=this,t=void 0;this.instanceId=ax5.getGuid(),this.config={theme:"default",animateTime:250,columnKeys:{},control:{},icons:{close:"X",more:"..."}},this.xvar={},this.menu=null,this.panels=[],this.panelId=0,this.modules={},t=this.config;var l=function(){return e.panelId++},r={init:function(e,n){e.$element.html(n.name)},active:function(e,n){},deactive:function(e,n){},destroy:function(e,n){}},s=function(e,n){var a=[];return e&&"undefined"!=typeof e.panelPath&&a.push(e.panelPath),a.push("panels["+(n||0)+"]"),a.join(".")},i=function(a){var t=[],l=n.isArray(a)?[].concat(a):[].concat(a.split(/[\.\[\]]/g));l.forEach(function(e){""!==e&&t.push('["'+e.replace(/['\"]/g,"")+'"]')});try{return Function("","return this"+t.join("")+";").call(e)}catch(r){return}},o=function(a,t){var l=[],r=n.isArray(a)?[].concat(a):[].concat(a.split(/[\.\[\]]/g));return r.forEach(function(e){""!==e&&l.push('["'+e.replace(/['\"]/g,"")+'"]')}),Function("val","return this"+l.join("")+" = val;").call(e,t)},d=function(e){var n=void 0,a=e.originalEvent?e.originalEvent:e;return n="changedTouches"in a?a.changedTouches[0]:a,{clientX:n.pageX,clientY:n.pageY}},u=function(a,l){var s=jQuery.extend(a.moduleState,{name:a.name}),i={$element:a.$item},d=void 0,u={init:function(){a.builded=!0,d=a.moduleName in e.modules&&"init"in e.modules[a.moduleName]?e.modules[a.moduleName]:r,d.init(i,s)},active:function(){a.active=!0,a.$label.addClass("active"),a.$item.addClass("active");var n=a.$label.parent();n.get(0)&&n.get(0).clientWidth!==n.get(0).scrollWidth&&n.animate({scrollLeft:a.$label.position().left},300),d=a.moduleName in e.modules&&"active"in e.modules[a.moduleName]?e.modules[a.moduleName]:r,d.active(i,s),n=null},deactive:function(){a.active=!1,a.$label.removeClass("active"),a.$item.removeClass("active"),d=a.moduleName in e.modules&&"deactive"in e.modules[a.moduleName]?e.modules[a.moduleName]:r,d.deactive(i,s)},destroy:function(){d=a.moduleName in e.modules&&"destroy"in e.modules[a.moduleName]?e.modules[a.moduleName]:r,d.destroy(i,s),o(a.panelPath,null),y()}},p={panel:a,controlType:l},c=function(){u[l](),d=null,n.isFunction(t.control.after)&&t.control.after.call(p,p)};u[l]&&(n.isFunction(t.control.before)?t.control.before.call(p,p,function(){c()}):c())},p=function(){var r={stack:function(e,a,l,i){var o=void 0,d=-1;l.panelPath=s(a,i),o=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+l.panelPath+'" style="flex-grow: '+(l.flexGrow||1)+';"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-more="">'+t.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),e.append(o),n.isArray(l.panels)&&(l.panels.forEach(function(e,n){e.active&&(d=n)}),d===-1&&(d=0),l.panels[d].active=!0,l.panels.forEach(function(e,n){e.panelIndex=n,r[e.type](o,l,e,n)})),o=null,d=null},panel:function(e,n,a,r){var i=void 0;a.panelPath=s(n,r),a.$label=jQuery('<li data-ax5docker-pane-tab="'+r+'" data-ax5docker-path="'+a.panelPath+'"><div class="title">'+a.name+'</div><div class="close-icon">'+t.icons.close+"</div></li>"),a.$item||(a.$item=jQuery('<div data-ax5docker-pane-item="'+r+'" data-ax5docker-pane-id="'+l()+'" data-ax5docker-path="'+a.panelPath+'"></div>')),n&&"stack"==n.type?(a.active&&(a.builded||u(a,"init"),u(a,"active")),e.find("[data-ax5docker-pane-tabs]").append(a.$label),e.find("[data-ax5docker-pane-item-views]").append(a.$item)):(i=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+a.panelPath+'" style="flex-grow: '+(a.flexGrow||1)+';"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-aside="">'+t.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),a.builded||u(a,"init"),u(a,"active"),i.find("[data-ax5docker-pane-tabs]").append(a.$label),i.find("[data-ax5docker-pane-item-views]").append(a.$item),e.append(i)),i=null},resizeHandle:function(e,n,a,t){var l=jQuery('<div data-ax5docker-resize-handle="'+n.type+"/"+n.panelPath+"/"+t+'"></div>');e.append(l),l=null},row:function(e,a,t,l){var i=void 0;if(t.panelPath=s(a,l),a&&"stack"==a.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";i=jQuery('<div data-ax5docker-pane-axis="row" data-ax5docker-path="'+t.panelPath+'" style="flex-grow: '+(t.flexGrow||1)+';"></div>'),e.append(i),n.isArray(t.panels)&&t.panels.forEach(function(e,n){n>0&&r.resizeHandle(i,t,e,n),e.panelIndex=n,r[e.type](i,t,e,n)}),i=null},column:function(e,a,t,l){var i=void 0;if(t.panelPath=s(a,l),a&&"stack"==a.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";i=jQuery('<div data-ax5docker-pane-axis="column" data-ax5docker-path="'+t.panelPath+'" style="flex-grow: '+(t.flexGrow||1)+';"></div>'),e.append(i),n.isArray(t.panels)&&t.panels.forEach(function(e,n){n>0&&r.resizeHandle(i,t,e,n),e.panelIndex=n,r[e.type](i,t,e,n)}),i=null}},o=jQuery('<div data-ax5docker-panes=""></div>');e.panels[0]&&r[e.panels[0].type](o,null,e.panels[0],0),e.$target.html(o),e.$target.off("click.ax5docker-pane").on("click.ax5docker-pane","[data-ax5docker-pane-tab] .close-icon",function(e){h($(this).parents("[data-ax5docker-pane-tab]")),n.stopEvent(e)}).on("click.ax5docker-pane","[data-ax5docker-pane-tab]",function(e){var a=jQuery(this),t=i(a.parents("[data-ax5docker-pane]").attr("data-ax5docker-path")),l=a.attr("data-ax5docker-pane-tab");a.hasClass("active")||c(t,l),a=null,t=null,l=null,n.stopEvent(e)}).on("click.ax5docker-pane","[data-ax5docker-pane-tabs-more]",function(e){v($(this).parents("[data-ax5docker-pane]"),e),n.stopEvent(e)}),e.$target.off("mousedown.ax5docker-pane-resize").off("dragstart.ax5docker-pane-resize").on("mousedown.ax5docker-pane-resize","[data-ax5docker-resize-handle]",function(e){var t=this.getAttribute("data-ax5docker-resize-handle").split(/\//g);a.xvar.mousePosition=d(e),a.xvar.resizerType=t[0],a.xvar.resizerPath=t[1],a.xvar.resizerIndex=t[2],a.xvar.resizer$dom=$(this),a.xvar.resizerParent$dom=a.xvar.resizer$dom.parent(),a.xvar.resizerPrevGrow=n.number(a.xvar.resizer$dom.prev().css("flex-grow")),a.xvar.resizerNextGrow=n.number(a.xvar.resizer$dom.next().css("flex-grow")),"row"==a.xvar.resizerType?a.xvar.resizerCanvasWidth=a.xvar.resizer$dom.prev().innerWidth()+a.xvar.resizer$dom.next().innerWidth()+a.xvar.resizer$dom.width():a.xvar.resizerCanvasHeight=a.xvar.resizer$dom.prev().innerHeight()+a.xvar.resizer$dom.next().innerHeight()+a.xvar.resizer$dom.height(),f.on(this),n.stopEvent(e)}).on("dragstart.ax5docker-pane-resize","[data-ax5docker-resize-handle]",function(e){return n.stopEvent(e),!1}),m(),o=null},c=function(n,a){for(var t=n.panels[a],l=0,r=n.panels.length;l<r;l++)n.panels[l].active&&u(n.panels[l],"deactive");return t.builded||u(t,"init"),u(t,"active"),n=null,a=null,t=null,e},h=function(n){var a=jQuery(n),t=a.attr("data-ax5docker-path"),l=i(t);return u(l,"destroy"),a=null,t=null,l=null,e},v=function(a,t){var l=jQuery(a),r=l.attr("data-ax5docker-path"),s=i(r);if(!e.menu)throw console.log(s.panels),"'ax5ui-menu' is required to implement the function.";var o=n.map(s.panels,function(e){return{label:this.name,index:e,panePath:r}});return e.menu.setConfig({items:o,onClick:function(){c(i(this.panePath),this.index)}}),e.menu.popup(t),l=null,r=null,s=null,e},f={on:function(t){var l=$(t);l.offset().left,e.$target.offset().left;jQuery(document.body).bind("mousemove.ax5docker-"+e.instanceId,function(e){var t=d(e),l=void 0;a.xvar.resizerLived?"row"==a.xvar.resizerType?(a.xvar.__da=t.clientX-a.xvar.mousePosition.clientX,l=n.number(2*a.xvar.__da/a.xvar.resizerCanvasWidth,{round:6}),a.xvar.resizer$dom.prev().css({"flex-grow":a.xvar.resizerPrevGrow+l}),a.xvar.resizer$dom.next().css({"flex-grow":a.xvar.resizerNextGrow-l})):(a.xvar.__da=t.clientY-a.xvar.mousePosition.clientY,l=n.number(2*a.xvar.__da/a.xvar.resizerCanvasHeight,{round:6}),a.xvar.resizer$dom.prev().css({"flex-grow":a.xvar.resizerPrevGrow+l}),a.xvar.resizer$dom.next().css({"flex-grow":a.xvar.resizerNextGrow-l})):a.xvar.resizerLived=!0,t=null,l=null}).bind("mouseup.ax5docker-"+e.instanceId,function(e){f.off.call(a),n.stopEvent(e)}).bind("mouseleave.ax5docker-"+e.instanceId,function(e){f.off.call(a),n.stopEvent(e)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(){if(a.xvar.resizerLived=!1,"undefined"==typeof e.xvar.__da);else{var t=a.xvar.resizer$dom.prev(),l=a.xvar.resizer$dom.next(),r=i(t.attr("data-ax5docker-path")),s=i(l.attr("data-ax5docker-path"));r.flexGrow=n.number(t.css("flex-grow")),s.flexGrow=n.number(l.css("flex-grow")),t=null,l=null,r=null,s=null}jQuery(document.body).unbind("mousemove.ax5docker-"+e.instanceId).unbind("mouseup.ax5docker-"+e.instanceId).unbind("mouseleave.ax5docker-"+e.instanceId),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}},x=ax5.util.debounce(function(e){e()},t.animateTime),m=function(){x(function(){this.$target.find("[data-ax5docker-pane-tabs]").each(function(){var e=jQuery(this).parent();this.scrollWidth>this.clientWidth?e.addClass("tabs-scrolled"):e.removeClass("tabs-scrolled"),e=null})}.bind(e))},y=function(){var a={stack:function(e){if(!n.isArray(e.panels))return!1;var t={type:"stack",panels:[]};return e.panels.forEach(function(e,n){if(e){var l=a[e.type](e);l&&t.panels.push(l),l=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)},panel:function(e){return e},row:function(e){if(!n.isArray(e.panels))return!1;var t={type:"row",panels:[]};return e.panels.forEach(function(e,n){if(e){var l=a[e.type](e);l&&t.panels.push(l),l=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)},column:function(e){if(!n.isArray(e.panels))return!1;var t={type:"column",panels:[]};return e.panels.forEach(function(e,n){if(e){var l=a[e.type](e);l&&t.panels.push(l),l=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)}};e.panels[0]?e.panels[0]=a[e.panels[0].type](e.panels[0]):e.panels=[],p()};this.init=function(e){return t=jQuery.extend(!0,{},t,e),t.target?(this.$target=jQuery(t.target),this.panels=t.panels||[],this.onStateChanged=t.onStateChanged,this.onClick=t.onClick,this.onLoad=t.onLoad,this.onDataChanged=t.onDataChanged,ax5.ui.menu&&(this.menu=new ax5.ui.menu({theme:"default",position:"absolute",icons:{arrow:"▸"}})),void jQuery(window).bind("resize.ax5docker-"+this.id,function(){m()})):(console.log(ax5.info.getError("ax5docker","401","init")),this)},this.setPanels=function(e){return this.panels=e||[],p(),this},this.addModule=function(e){return n.isObject(e)&&jQuery.extend(!0,this.modules,e),this},this.repaint=function(){return p(),this},this.addPanel=function(e,n,a,t){"undefined"==e&&(e="0"),e=e.replace(/[a-zA-Z\[\]]+/g,"").replace(/(\d+)/g,function(e,n){return"panels["+e+"]"});var l=i(e);console.log(l);var r={stack:function(n,a,t){var l=jQuery.extend({},n),r={stack:function(e,n){e.panels.push(n),y()},"row-left":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(t),n.panels.push(l),y())},"row-right":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(l),n.panels.push(t),y())},"column-top":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"column"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(t),n.panels.push(l),y())},"column-bottom":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"column"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(l),n.panels.push(t),y())}};a in r&&r[a].call(this,n,t),l=null,r=null},row:function(n,a,t,l){var r=jQuery.extend({},n),s={stack:function(e,n){e.panels[0]&&e.panels[0].panelPath&&this.addPanel(e.panels[0].panelPath,a,n)},"row-left":function(n,a,t){var l=e.substr(0,e.lastIndexOf(".")),s=i(l);"row"==s.type?(n.panels.splice(t,0,a),y()):(n=o(e,{type:"row",panels:[]}),n.panels.push(a),n.panels.push(r),y())},"row-right":function(n,a,t){var l=e.substr(0,e.lastIndexOf(".")),s=i(l);"row"==s.type?(n.panels.splice(t+1,0,a),y()):(n=o(e,{type:"row",panels:[]}),n.panels.push(r),n.panels.push(a),y())},"column-top":function(n,t,l){var s=e.substr(0,e.lastIndexOf(".")),d=i(s);"column"==d.type?this.addPanel(d.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(t),n.panels.push(r),y())},"column-bottom":function(n,t,l){var s=e.substr(0,e.lastIndexOf(".")),d=i(s);"column"==d.type?this.addPanel(d.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(r),n.panels.push(t),y())}};a in s&&s[a].call(this,n,t,l),s=null,r=null},column:function(n,a,t,l){var r=jQuery.extend({},n),s={stack:function(e,n){e.panels[0]&&e.panels[0].panelPath&&this.addPanel(e.panels[0].panelPath,a,n)},"row-left":function(n,t){var l=e.substr(0,e.lastIndexOf(".")),s=i(l);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(t),n.panels.push(r),y())},"row-right":function(n,t){var l=e.substr(0,e.lastIndexOf(".")),s=i(l);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(r),n.panels.push(t),y())},"column-top":function(e,n){e.panels.splice(l,0,n),y()},"column-bottom":function(e,n){e.panels.splice(l+1,0,n),y()}};a in s&&s[a].call(this,n,t),s=null,r=null},panel:function(n,a,t){var l=jQuery.extend({},n),r={stack:function(n,a){n=o(e,{type:"stack",panels:[]}),n.panels.push(l),n.panels.push(a),y()},"row-left":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(t),n.panels.push(l),y())},"row-right":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"row"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"row",panels:[]}),n.panels.push(l),n.panels.push(t),y())},"column-top":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"column"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(t),n.panels.push(l),y())},"column-bottom":function(n,t){var r=e.substr(0,e.lastIndexOf(".")),s=i(r);"column"==s.type?this.addPanel(s.panelPath,a,t,n.panelIndex):(n=o(e,{type:"column",panels:[]}),n.panels.push(l),n.panels.push(t),y())}};a in r&&r[a].call(this,n,t),l=null,r=null}};return r[l.type].call(this,l,n,a,t),this},this.main=function(){arguments&&n.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return e}())}(),function(){var e=ax5.ui.docker,n=function(e){return" \n{{#panels}}\n{{#panels}}\n{{/panels}}\n{{^panels}}\n{{/panels}}\n{{/panels}}\n        "};e.tmpl={panels:n,get:function(n,a,t){return ax5.mustache.render(e.tmpl[n].call(this,t),a)}}}();
+"use strict";!function(){var e=ax5.ui,a=ax5.util;e.addClass({className:"docker",version:"1.3.91"},function(){var e=function(){var e=this,n=this,t=void 0;this.instanceId=ax5.getGuid(),this.config={theme:"default",animateTime:250,columnKeys:{},control:{},icons:{close:"X",more:"..."}},this.xvar={},this.menu=null,this.panels=[],this.panelId=0,this.modules={},t=this.config;var r=function(){return e.panelId++},l={init:function(e,a){e.$element.html(a.name)},active:function(e,a){},deactive:function(e,a){},destroy:function(e,a){}},o=function(e,a){var n=[];return e&&"undefined"!=typeof e.panelPath&&n.push(e.panelPath),n.push("panels["+(a||0)+"]"),n.join(".")},s=function(n){var t=[],r=a.isArray(n)?[].concat(n):[].concat(n.split(/[\.\[\]]/g));r.forEach(function(e){""!==e&&t.push('["'+e.replace(/['\"]/g,"")+'"]')});try{return Function("","return this"+t.join("")+";").call(e)}catch(l){return}},i=function(n,t){var r=[],l=a.isArray(n)?[].concat(n):[].concat(n.split(/[\.\[\]]/g));return l.forEach(function(e){""!==e&&r.push('["'+e.replace(/['\"]/g,"")+'"]')}),Function("val","return this"+r.join("")+" = val;").call(e,t)},d=function(e){var a=void 0,n=e.originalEvent?e.originalEvent:e;return a="changedTouches"in n?n.changedTouches[0]:n,{clientX:a.pageX,clientY:a.pageY}},p=function(n,r){var o=jQuery.extend(n.moduleState,{name:n.name}),s={$element:n.$item},d=void 0,p={init:function(){n.builded=!0,d=n.moduleName in e.modules&&"init"in e.modules[n.moduleName]?e.modules[n.moduleName]:l,d.init(s,o)},active:function(){n.active=!0,n.$label.addClass("active"),n.$item.addClass("active");var a=n.$label.parent();a.get(0)&&a.get(0).clientWidth!==a.get(0).scrollWidth&&a.animate({scrollLeft:n.$label.position().left},300),d=n.moduleName in e.modules&&"active"in e.modules[n.moduleName]?e.modules[n.moduleName]:l,d.active(s,o),a=null},deactive:function(){n.active=!1,n.$label.removeClass("active"),n.$item.removeClass("active"),d=n.moduleName in e.modules&&"deactive"in e.modules[n.moduleName]?e.modules[n.moduleName]:l,d.deactive(s,o)},destroy:function(){d=n.moduleName in e.modules&&"destroy"in e.modules[n.moduleName]?e.modules[n.moduleName]:l,d.destroy(s,o),i(n.panelPath,null),y()}},c={panel:n,controlType:r},u=function(){p[r](),d=null,a.isFunction(t.control.after)&&t.control.after.call(c,c)};p[r]&&(a.isFunction(t.control.before)?t.control.before.call(c,c,function(){u()}):u())},c=function(){var l={stack:function(e,n,r,s){var i=void 0,d=-1;r.panelPath=o(n,s),i=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+r.panelPath+'" style="flex-grow: '+(r.flexGrow||1)+';"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-more="">'+t.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),e.append(i),a.isArray(r.panels)&&(r.panels.forEach(function(e,a){e.active&&(d=a)}),d===-1&&(d=0),r.panels[d].active=!0,r.panels.forEach(function(e,a){e.panelIndex=a,l[e.type](i,r,e,a)})),i=null,d=null},panel:function(e,a,n,l){var s=void 0;n.panelPath=o(a,l),n.$label=jQuery('<li data-ax5docker-pane-tab="'+l+'" data-ax5docker-path="'+n.panelPath+'"><div class="title">'+n.name+'</div><div class="close-icon">'+t.icons.close+"</div></li>"),n.$item||(n.$item=jQuery('<div data-ax5docker-pane-item="'+l+'" data-ax5docker-pane-id="'+r()+'" data-ax5docker-path="'+n.panelPath+'"></div>')),a&&"stack"==a.type?(n.active&&(n.builded||p(n,"init"),p(n,"active")),e.find("[data-ax5docker-pane-tabs]").append(n.$label),e.find("[data-ax5docker-pane-item-views]").append(n.$item)):(s=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+n.panelPath+'" style="flex-grow: '+(n.flexGrow||1)+';"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-more="">'+t.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),n.builded||p(n,"init"),p(n,"active"),s.find("[data-ax5docker-pane-tabs]").append(n.$label),s.find("[data-ax5docker-pane-item-views]").append(n.$item),e.append(s)),s=null},resizeHandle:function(e,a,n,t){var r=jQuery('<div data-ax5docker-resize-handle="'+a.type+"/"+a.panelPath+"/"+t+'"></div>');e.append(r),r=null},row:function(e,n,t,r){var s=void 0;if(t.panelPath=o(n,r),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";s=jQuery('<div data-ax5docker-pane-axis="row" data-ax5docker-path="'+t.panelPath+'" style="flex-grow: '+(t.flexGrow||1)+';"></div>'),e.append(s),a.isArray(t.panels)&&t.panels.forEach(function(e,a){a>0&&l.resizeHandle(s,t,e,a),e.panelIndex=a,l[e.type](s,t,e,a)}),s=null},column:function(e,n,t,r){var s=void 0;if(t.panelPath=o(n,r),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";s=jQuery('<div data-ax5docker-pane-axis="column" data-ax5docker-path="'+t.panelPath+'" style="flex-grow: '+(t.flexGrow||1)+';"></div>'),e.append(s),a.isArray(t.panels)&&t.panels.forEach(function(e,a){a>0&&l.resizeHandle(s,t,e,a),e.panelIndex=a,l[e.type](s,t,e,a)}),s=null}},i=jQuery('<div data-ax5docker-panes=""></div>');e.panels[0]&&l[e.panels[0].type](i,null,e.panels[0],0),e.$target.html(i),e.$target.off("click.ax5docker-pane").on("click.ax5docker-pane","[data-ax5docker-pane-tab] .close-icon",function(e){f($(this).parents("[data-ax5docker-pane-tab]")),a.stopEvent(e)}).on("click.ax5docker-pane","[data-ax5docker-pane-tab]",function(e){var n=jQuery(this),t=s(n.parents("[data-ax5docker-pane]").attr("data-ax5docker-path")),r=n.attr("data-ax5docker-pane-tab");n.hasClass("active")||u(t,r),n=null,t=null,r=null,a.stopEvent(e)}).on("click.ax5docker-pane","[data-ax5docker-pane-tabs-more]",function(e){h($(this).parents("[data-ax5docker-pane]"),e),a.stopEvent(e)}),e.$target.off("mousedown.ax5docker-pane-resize").off("dragstart.ax5docker-pane-resize").on("dragstart.ax5docker-pane-resize","[data-ax5docker-pane-tab]",function(e){x.on(this)}).on("mousedown.ax5docker-pane-resize","[data-ax5docker-resize-handle]",function(e){var t=this.getAttribute("data-ax5docker-resize-handle").split(/\//g);n.xvar.mousePosition=d(e),n.xvar.resizerType=t[0],n.xvar.resizerPath=t[1],n.xvar.resizerIndex=t[2],n.xvar.resizer$dom=$(this),n.xvar.resizerParent$dom=n.xvar.resizer$dom.parent(),n.xvar.resizerPrevGrow=a.number(n.xvar.resizer$dom.prev().css("flex-grow")),n.xvar.resizerNextGrow=a.number(n.xvar.resizer$dom.next().css("flex-grow")),"row"==n.xvar.resizerType?n.xvar.resizerCanvasWidth=n.xvar.resizer$dom.prev().innerWidth()+n.xvar.resizer$dom.next().innerWidth()+n.xvar.resizer$dom.width():n.xvar.resizerCanvasHeight=n.xvar.resizer$dom.prev().innerHeight()+n.xvar.resizer$dom.next().innerHeight()+n.xvar.resizer$dom.height(),v.on(this),a.stopEvent(e)}).on("dragstart.ax5docker-pane-resize","[data-ax5docker-resize-handle]",function(e){return a.stopEvent(e),!1}),g(),i=null},u=function(a,n){for(var t=a.panels[n],r=0,l=a.panels.length;r<l;r++)a.panels[r].active&&p(a.panels[r],"deactive");return t.builded||p(t,"init"),p(t,"active"),a=null,n=null,t=null,e},f=function(a){var n=jQuery(a),t=n.attr("data-ax5docker-path"),r=s(t);return p(r,"destroy"),n=null,t=null,r=null,e},h=function(n,t){var r=jQuery(n),l=r.attr("data-ax5docker-path"),o=s(l);if(!e.menu)throw console.log(o.panels),"'ax5ui-menu' is required to implement the function.";var i=a.map(o.panels,function(e){return{label:this.name,index:e,panePath:l}});return e.menu.setConfig({items:i,onClick:function(){u(s(this.panePath),this.index)}}),e.menu.popup(t),r=null,l=null,o=null,e},v={on:function(t){var r=$(t);r.offset().left,e.$target.offset().left;jQuery(document.body).on("mousemove.ax5docker-"+e.instanceId,function(e){var t=d(e),r=void 0;n.xvar.resizerLived?"row"==n.xvar.resizerType?(n.xvar.__da=t.clientX-n.xvar.mousePosition.clientX,r=a.number(2*n.xvar.__da/n.xvar.resizerCanvasWidth,{round:6}),n.xvar.resizer$dom.prev().css({"flex-grow":n.xvar.resizerPrevGrow+r}),n.xvar.resizer$dom.next().css({"flex-grow":n.xvar.resizerNextGrow-r})):(n.xvar.__da=t.clientY-n.xvar.mousePosition.clientY,r=a.number(2*n.xvar.__da/n.xvar.resizerCanvasHeight,{round:6}),n.xvar.resizer$dom.prev().css({"flex-grow":n.xvar.resizerPrevGrow+r}),n.xvar.resizer$dom.next().css({"flex-grow":n.xvar.resizerNextGrow-r})):n.xvar.resizerLived=!0,t=null,r=null}).on("mouseup.ax5docker-"+e.instanceId,function(e){v.off(),a.stopEvent(e)}).on("mouseleave.ax5docker-"+e.instanceId,function(e){v.off(),a.stopEvent(e)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(){if(n.xvar.resizerLived=!1,"undefined"==typeof e.xvar.__da);else{var t=n.xvar.resizer$dom.prev(),r=n.xvar.resizer$dom.next(),l=s(t.attr("data-ax5docker-path")),o=s(r.attr("data-ax5docker-path"));l.flexGrow=a.number(t.css("flex-grow")),o.flexGrow=a.number(r.css("flex-grow")),t=null,r=null,l=null,o=null}jQuery(document.body).off("mousemove.ax5docker-"+e.instanceId).off("mouseup.ax5docker-"+e.instanceId).off("mouseleave.ax5docker-"+e.instanceId),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}},x={on:function(){e.panels[0]&&e.panels[0].panels&&e.panels[0].panels.length&&(e.xvar.drager={target:null,dragOverVertical:null,dragOverHorizontal:null},e.$target.on("dragover.ax5docker-"+e.instanceId,"[data-ax5docker-path]",function(e){x.dragover(this,e),a.stopEvent(e)}).on("drop.ax5docker-"+e.instanceId,function(e){x.off(),a.stopEvent(e)}).on("dragend.ax5docker-"+e.instanceId,function(e){x.off(),a.stopEvent(e)}))},dragover:function(a,n){var t=jQuery(a);null!=e.xvar.drager.target&&e.xvar.drager.target.get(0)==t.get(0)||(e.xvar.drager.target=t,e.xvar.drager.dragOverVertical=null,e.xvar.drager.dragOverHorizontal=null);var r={};r=t.offset(),r.width=t.width(),r.height=t.height();var l=d(n),o=void 0,s=void 0;if(t.attr("data-ax5docker-pane-tab"));else if(t.attr("data-ax5docker-pane-item")){var i=r.height/3,p=r.width/3;r.top<=l.clientY&&r.top+i>=l.clientY?o="top":r.top+i<=l.clientY&&r.top+2*i>=l.clientY?o="middle":r.top+2*i<=l.clientY&&r.top+3*i>=l.clientY&&(o="bottom"),r.left<=l.clientX&&r.left+p>=l.clientX?s="left":r.left+p<=l.clientX&&r.left+2*p>=l.clientX?s="center":r.left+2*p<=l.clientX&&r.left+3*p>=l.clientX&&(s="right")}e.xvar.drager.dragOverVertical==o&&e.xvar.drager.dragOverHorizontal==s||(e.xvar.drager.dragOverVertical=o,e.xvar.drager.dragOverHorizontal=s,console.log(e.xvar.drager))},off:function(){e.$target.off("dragover.ax5docker-"+e.instanceId).off("drop.ax5docker-"+e.instanceId).off("dragend.ax5docker-"+e.instanceId)}},m=ax5.util.debounce(function(e){e()},t.animateTime),g=function(){m(function(){this.$target.find("[data-ax5docker-pane-tabs]").each(function(){var e=jQuery(this).parent();this.scrollWidth>this.clientWidth?e.addClass("tabs-scrolled"):e.removeClass("tabs-scrolled"),e=null})}.bind(e))},y=function(){var n={stack:function(e){if(!a.isArray(e.panels))return!1;var t={type:"stack",panels:[]};return e.panels.forEach(function(e,a){if(e){var r=n[e.type](e);r&&t.panels.push(r),r=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)},panel:function(e){return e},row:function(e){if(!a.isArray(e.panels))return!1;var t={type:"row",panels:[]};return e.panels.forEach(function(e,a){if(e){var r=n[e.type](e);r&&t.panels.push(r),r=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)},column:function(e){if(!a.isArray(e.panels))return!1;var t={type:"column",panels:[]};return e.panels.forEach(function(e,a){if(e){var r=n[e.type](e);r&&t.panels.push(r),r=null}}),0==t.panels.length?null:(t.panels.length<2&&(t=t.panels[0]),t)}};e.panels[0]?e.panels[0]=n[e.panels[0].type](e.panels[0]):e.panels=[],c()};this.init=function(e){return t=jQuery.extend(!0,{},t,e),t.target?(this.$target=jQuery(t.target),this.panels=t.panels||[],this.onStateChanged=t.onStateChanged,this.onClick=t.onClick,this.onLoad=t.onLoad,this.onDataChanged=t.onDataChanged,ax5.ui.menu&&(this.menu=new ax5.ui.menu({theme:"default",position:"absolute",icons:{arrow:"▸"}})),void jQuery(window).bind("resize.ax5docker-"+this.id,function(){g()})):(console.log(ax5.info.getError("ax5docker","401","init")),this)},this.setPanels=function(e){return this.panels=e||[],c(),this},this.addModule=function(e){return a.isObject(e)&&jQuery.extend(!0,this.modules,e),this},this.repaint=function(){return c(),this},this.addPanel=function(e,a,n,t){"undefined"==e&&(e="0"),e=e.replace(/[a-zA-Z\[\]]+/g,"").replace(/(\d+)/g,function(e,a){return"panels["+e+"]"});var r=s(e);console.log(r);var l={stack:function(a,n,t){var r=jQuery.extend({},a),l={stack:function(e,a){e.panels.push(a),y()},"row-left":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(t),a.panels.push(r),y())},"row-right":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(r),a.panels.push(t),y())},"column-top":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"column"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(t),a.panels.push(r),y())},"column-bottom":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"column"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(r),a.panels.push(t),y())}};n in l&&l[n].call(this,a,t),r=null,l=null},row:function(a,n,t,r){var l=jQuery.extend({},a),o={stack:function(e,a){e.panels[0]&&e.panels[0].panelPath&&this.addPanel(e.panels[0].panelPath,n,a)},"row-left":function(a,n,t){var r=e.substr(0,e.lastIndexOf(".")),o=s(r);"row"==o.type?(a.panels.splice(t,0,n),y()):(a=i(e,{type:"row",panels:[]}),a.panels.push(n),a.panels.push(l),y())},"row-right":function(a,n,t){var r=e.substr(0,e.lastIndexOf(".")),o=s(r);"row"==o.type?(a.panels.splice(t+1,0,n),y()):(a=i(e,{type:"row",panels:[]}),a.panels.push(l),a.panels.push(n),y())},"column-top":function(a,t,r){var o=e.substr(0,e.lastIndexOf(".")),d=s(o);"column"==d.type?this.addPanel(d.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(t),a.panels.push(l),y())},"column-bottom":function(a,t,r){var o=e.substr(0,e.lastIndexOf(".")),d=s(o);"column"==d.type?this.addPanel(d.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(l),a.panels.push(t),y())}};n in o&&o[n].call(this,a,t,r),o=null,l=null},column:function(a,n,t,r){var l=jQuery.extend({},a),o={stack:function(e,a){e.panels[0]&&e.panels[0].panelPath&&this.addPanel(e.panels[0].panelPath,n,a)},"row-left":function(a,t){var r=e.substr(0,e.lastIndexOf(".")),o=s(r);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(t),a.panels.push(l),y())},"row-right":function(a,t){var r=e.substr(0,e.lastIndexOf(".")),o=s(r);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(l),a.panels.push(t),y())},"column-top":function(e,a){e.panels.splice(r,0,a),y()},"column-bottom":function(e,a){e.panels.splice(r+1,0,a),y()}};n in o&&o[n].call(this,a,t),o=null,l=null},panel:function(a,n,t){var r=jQuery.extend({},a),l={stack:function(a,n){a=i(e,{type:"stack",panels:[]}),a.panels.push(r),a.panels.push(n),y()},"row-left":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(t),a.panels.push(r),y())},"row-right":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"row"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"row",panels:[]}),a.panels.push(r),a.panels.push(t),y())},"column-top":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"column"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(t),a.panels.push(r),y())},"column-bottom":function(a,t){var l=e.substr(0,e.lastIndexOf(".")),o=s(l);"column"==o.type?this.addPanel(o.panelPath,n,t,a.panelIndex):(a=i(e,{type:"column",panels:[]}),a.panels.push(r),a.panels.push(t),y())}};n in l&&l[n].call(this,a,t),r=null,l=null}};return l[r.type].call(this,r,a,n,t),this},this.main=function(){arguments&&a.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return e}())}(),function(){var e=ax5.ui.docker;e.tmpl={get:function(a,n,t){return ax5.mustache.render(e.tmpl[a].call(this,t),n)}}}();

package.json

 {
   "name": "ax5ui-docker",
-  "version": "1.3.90",
+  "version": "1.3.91",
   "description": "A dashboard plugin that works with Bootstrap & jQuery",
@@ -5,0 +5,0 @@ "license": "MIT",

src/ax5docker.js

@@ -9,3 +9,3 @@ /*
 
-    let UI = ax5.ui,
+    const UI = ax5.ui,
         U = ax5.util;
@@ -77,2 +77,8 @@
 
+            /**
+             * 부모패널과 패널인덱스 값으로 패널 패스를 구합니다.
+             * @param parent
+             * @param pIndex
+             * @returns {string}
+             */
             const getPanelPath = (parent, pIndex) => {
@@ -88,2 +94,7 @@ let paths = [];
 
+            /**
+             * 패널패스를 이용하여 패널을 가져옵니다
+             * @param _panelPath
+             * @returns {*}
+             */
             const getPanel = (_panelPath) => {
@@ -104,17 +115,8 @@ let path = [],
 
-            const getParentPanel = (_panelPath) => {
-                let path = [],
-                    _path = (U.isArray(_panelPath)) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
-                _path.pop();
-                _path.forEach(function (n) {
-                    if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
-                });
-
-                try {
-                    return (Function("", "return this" + path.join('') + ";")).call(this);
-                } catch (e) {
-                    return;
-                }
-            };
-
+            /**
+             * 패널패스를 이용하여 패널오브젝트에 값을 부여합니다.
+             * @param _panelPath
+             * @param _value
+             * @returns {*}
+             */
             const setPanel = (_panelPath, _value) => {
@@ -131,2 +133,7 @@ let path = [],
 
+            /**
+             * get mouse position
+             * @param e
+             * @returns {{clientX, clientY}}
+             */
             const getMousePosition = (e) => {
@@ -142,2 +149,8 @@ let mouseObj, originalEvent = (e.originalEvent) ? e.originalEvent : e;
 
+            /**
+             * 패널의 모듈이 초기화, 활성화, 비활성, 제거 되는 일들을 제어하는 함수.
+             * 모든 컨트롤은 실행되기전에 사용자가 정의한 control.before 함수의 결과에 따라 실행 여부를 결정합니다. 사용자가 control.before를 정의하지 않으면 무조건 실행합니다.
+             * @param {Object} _panel
+             * @param {String} _control - "init","active","deactive","destroy"
+             */
             const controlPanel = (_panel, _control) => {
@@ -273,3 +286,3 @@ let moduleState = jQuery.extend(_panel.moduleState, {
                                 '<ul data-ax5docker-pane-tabs=""></ul>' +
-                                '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' +
+                                '<div data-ax5docker-pane-tabs-more="">' + cfg.icons.more + '</div>' +
                                 '<div data-ax5docker-pane-item-views=""></div>' +
@@ -367,2 +380,5 @@ '</div>');
                     .off("dragstart.ax5docker-pane-resize")
+                    .on("dragstart.ax5docker-pane-resize", "[data-ax5docker-pane-tab]", function (e) {
+                        panelTabDragEvent.on(this);
+                    })
                     .on("mousedown.ax5docker-pane-resize", "[data-ax5docker-resize-handle]", function (e) {
@@ -445,2 +461,8 @@ let datas = this.getAttribute("data-ax5docker-resize-handle").split(/\//g);
 
+            /**
+             * stackTab의 더보기 아이콘이 클릭되면~~~
+             * @param stackPane
+             * @param e
+             * @returns {ax5docker}
+             */
             const openStackPanelMore = (stackPane, e) => {
@@ -480,2 +502,6 @@ let $stackPane = jQuery(stackPane),
 
+            /**
+             * repaintPanels이 작동할 때. 리사이저에 mousedown 이벤트를 연결합니다.
+             * 발생된 이벤트가 panelResizerEvent.on 을 작동시켜 리사이저를 움직이게 합니다
+             */
             const panelResizerEvent = {
@@ -488,3 +514,3 @@ "on": (_resizer) => {
                     jQuery(document.body)
-                        .bind("mousemove.ax5docker-" + this.instanceId, function (e) {
+                        .on("mousemove.ax5docker-" + this.instanceId, function (e) {
                             let mouseObj = getMousePosition(e);
@@ -513,8 +539,8 @@ let da_grow;
                         })
-                        .bind("mouseup.ax5docker-" + this.instanceId, function (e) {
-                            panelResizerEvent.off.call(self);
+                        .on("mouseup.ax5docker-" + this.instanceId, function (e) {
+                            panelResizerEvent.off();
                             U.stopEvent(e);
                         })
-                        .bind("mouseleave.ax5docker-" + this.instanceId, function (e) {
-                            panelResizerEvent.off.call(self);
+                        .on("mouseleave.ax5docker-" + this.instanceId, function (e) {
+                            panelResizerEvent.off();
                             U.stopEvent(e);
@@ -550,5 +576,5 @@ });
                     jQuery(document.body)
-                        .unbind("mousemove.ax5docker-" + this.instanceId)
-                        .unbind("mouseup.ax5docker-" + this.instanceId)
-                        .unbind("mouseleave.ax5docker-" + this.instanceId);
+                        .off("mousemove.ax5docker-" + this.instanceId)
+                        .off("mouseup.ax5docker-" + this.instanceId)
+                        .off("mouseleave.ax5docker-" + this.instanceId);
 
@@ -563,2 +589,95 @@ jQuery(document.body)
             /**
+             * repaintPanels이 작동할 때. 패널탭에 dragStart 이벤트를 연결합니다.
+             * 발생된 이벤트가 panelTabDragEvent.on를 작동.
+             */
+            const panelTabDragEvent = {
+                "on": () => {
+                    if (this.panels[0] && this.panels[0].panels && this.panels[0].panels.length) {
+
+                        this.xvar.drager = {
+                            target: null,
+                            dragOverVertical: null,
+                            dragOverHorizontal: null
+                        };
+
+                        this.$target
+                            .on("dragover.ax5docker-" + this.instanceId, '[data-ax5docker-path]', function (e) {
+                                // todo : dragover 구현
+                                // console.log("dargover", getMousePosition(e));
+                                // console.log(e.target);
+                                panelTabDragEvent.dragover(this, e);
+                                U.stopEvent(e);
+                            })
+                            .on("drop.ax5docker-" + this.instanceId, function (e) {
+                                panelTabDragEvent.off();
+                                U.stopEvent(e);
+                            })
+                            .on("dragend.ax5docker-" + this.instanceId, function (e) {
+                                panelTabDragEvent.off();
+                                U.stopEvent(e);
+                            });
+                    }
+                },
+                "dragover": (dragoverDom, e) => {
+                    let $dragoverDom = jQuery(dragoverDom);
+                    if (this.xvar.drager.target == null || this.xvar.drager.target.get(0) != $dragoverDom.get(0)) {
+                        this.xvar.drager.target = $dragoverDom;
+                        this.xvar.drager.dragOverVertical = null;
+                        this.xvar.drager.dragOverHorizontal = null;
+                    }
+
+                    // e.target
+                    let box = {};
+                    box = $dragoverDom.offset();
+                    box.width = $dragoverDom.width();
+                    box.height = $dragoverDom.height();
+
+                    let mouse = getMousePosition(e);
+                    let dragOverVertical, dragOverHorizontal;
+                    if ($dragoverDom.attr("data-ax5docker-pane-tab")) {
+
+                    }
+                    else if ($dragoverDom.attr("data-ax5docker-pane-item")) {
+                        // panel dragover 포지션 구하기
+                        let threeQuarterHeight = box.height / 3;
+                        let threeQuarterWidth = box.width / 3;
+
+                        if (box.top <= mouse.clientY && (box.top + threeQuarterHeight) >= mouse.clientY) {
+                            dragOverVertical = "top";
+                        }
+                        else if ((box.top + threeQuarterHeight) <= mouse.clientY && (box.top + threeQuarterHeight * 2) >= mouse.clientY) {
+                            dragOverVertical = "middle";
+                        }
+                        else if ((box.top + threeQuarterHeight * 2) <= mouse.clientY && (box.top + threeQuarterHeight * 3) >= mouse.clientY) {
+                            dragOverVertical = "bottom";
+                        }
+
+                        if (box.left <= mouse.clientX && (box.left + threeQuarterWidth) >= mouse.clientX) {
+                            dragOverHorizontal = "left";
+                        }
+                        else if ((box.left + threeQuarterWidth) <= mouse.clientX && (box.left + threeQuarterWidth * 2) >= mouse.clientX) {
+                            dragOverHorizontal = "center";
+                        }
+                        else if ((box.left + threeQuarterWidth * 2) <= mouse.clientX && (box.left + threeQuarterWidth * 3) >= mouse.clientX) {
+                            dragOverHorizontal = "right";
+                        }
+                    }
+
+                    if (this.xvar.drager.dragOverVertical != dragOverVertical || this.xvar.drager.dragOverHorizontal != dragOverHorizontal) {
+                        this.xvar.drager.dragOverVertical = dragOverVertical;
+                        this.xvar.drager.dragOverHorizontal = dragOverHorizontal;
+                        console.log(this.xvar.drager);
+                    }
+
+                    //console.log(box, mouse);
+                },
+                "off": () => {
+                    this.$target
+                        .off("dragover.ax5docker-" + this.instanceId)
+                        .off("drop.ax5docker-" + this.instanceId)
+                        .off("dragend.ax5docker-" + this.instanceId);
+                }
+            };
+
+            /**
              * stack type panel resize되면 탭 스크롤 처리 관련 처리
@@ -570,2 +689,5 @@ */
 
+            /**
+             * stackPane이 리사이즈 되면 탭을 스크롤여부를 판단해야 합니다.
+             */
             const alignStackPane = () => {
@@ -1098,3 +1220,3 @@ debounceFn((function () {
 // todo : stack tab overflow 처리. -- ok
-// todo : 탭 포커싱와 탭 목록 메뉴 처리전
+// todo : 탭 포커싱와 탭 목록 메뉴 처리 -- ok
 // todo : 패널 drag & drop

src/modules/ax5docker-tmpl.js

@@ -6,15 +6,6 @@ // ax5.ui.docker.tmpl
 
-    let panels = function (columnKeys) {
-        return ` 
-{{#panels}}
-{{#panels}}
-{{/panels}}
-{{^panels}}
-{{/panels}}
-{{/panels}}
-        `;
-    };
 
+
     DOCKER.tmpl = {
-        "panels": panels,
+
         get: function (tmplName, data, columnKeys) {
@@ -21,0 +12,0 @@ return ax5.mustache.render(DOCKER.tmpl[tmplName].call(this, columnKeys), data);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

299839

increased by10.02%

Lines of code

2249

increased by9.81%

No dependency changes