ax5ui-docker - npm Package Compare versions

Comparing version 1.3.105 to 1.3.106

bower.json

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

dist/ax5docker.js

@@ -14,5 +14,7 @@ "use strict";
 
+    var DOCKER = void 0;
+
     UI.addClass({
         className: "docker",
-        version: "1.3.105"
+        version: "1.3.106"
     }, function () {
@@ -44,3 +46,5 @@
                     more: '...'
-                }
+                },
+                disableClosePanel: false,
+                disableDragPanel: false
             };
@@ -250,3 +254,9 @@ this.xvar = {};
 
-                        $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>');
+                        $dom = jQuery(DOCKER.tmpl.get.call(this, "stack-panel", {
+                            name: myself.name,
+                            panelPath: myself.panelPath,
+                            icons: cfg.icons,
+                            disableClosePanel: cfg.disableClosePanel,
+                            disableDragPanel: cfg.disableDragPanel
+                        }, {}));
                         $parent.append($dom);
@@ -273,3 +283,10 @@
                         myself.panelPath = getPanelPath(parent, pIndex);
-                        myself.$label = jQuery('<li data-ax5docker-pane-tab="' + pIndex + '" data-ax5docker-path="' + myself.panelPath + '">' + '<div class="title">' + myself.name + '</div>' + '<div class="close-icon">' + cfg.icons.close + '</div>' + '</li>');
+                        myself.$label = jQuery(DOCKER.tmpl.get.call(this, "panel-label", {
+                            pIndex: pIndex,
+                            name: myself.name,
+                            panelPath: myself.panelPath,
+                            icons: cfg.icons,
+                            disableClosePanel: cfg.disableClosePanel,
+                            disableDragPanel: cfg.disableDragPanel
+                        }, {}));
 
@@ -288,3 +305,10 @@ if (!myself.$item) {
                         } 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-more="">' + cfg.icons.more + '</div>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
+                            $dom = jQuery(DOCKER.tmpl.get.call(this, "stack-panel", {
+                                name: myself.name,
+                                panelPath: myself.panelPath,
+                                flexGrow: myself.flexGrow,
+                                icons: cfg.icons,
+                                disableClosePanel: cfg.disableClosePanel,
+                                disableDragPanel: cfg.disableDragPanel
+                            }, {}));
 
@@ -374,3 +398,5 @@ if (!myself.builded) controlPanel(myself, "init");
                 _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);
+                    if (!cfg.disableDragPanel) {
+                        panelTabDragEvent.on(this);
+                    }
                 }).on("mousedown.ax5docker-pane-resize", "[data-ax5docker-resize-handle]", function (e) {
@@ -822,3 +848,34 @@ var datas = this.getAttribute("data-ax5docker-resize-handle").split(/\//g);
              * @param {Object} config
+             * @param {Element} config.target
              * @param {Array} config.panels
+             * @param {Object} [config.icons]
+             * @param {String} [config.icons.close]
+             * @param {String} [config.icons.more]
+             * @param {Boolean} [config.disableClosePanel=false]
+             * @param {Boolean} [config.disableDragPanel=false]
+             * @param {Object} [config.control]
+             * @param {Function} [config.control.before]
+             * @param {Function} [config.control.after]
+             * @param {Object} [config.menu]
+             * @param {String} [config.menu.theme="default"]
+             * @param {String} [config.menu.position="absolute"]
+             * @param {Object} [config.menu.icons]
+             * @param {String} [config.menu.icons.arrow]
+             * @example
+             * ```js
+             * var myDocker = new ax5.ui.docker();
+             * myDocker.setConfig({
+             *      target: $('[data-ax5docker="docker1"]'),
+             *      panels: [
+             *          {
+             *              type: "panel",
+             *              name: "panel name",
+             *              moduleName: "content",
+             *              moduleState:{
+             *                  data: "data1"
+             *              }
+             *          }
+             *      ]
+             * });
+             * ```
              */
@@ -1233,2 +1290,5 @@ this.init = function (_config) {
             this.main = function () {
+                UI.docker_instance = UI.docker_instance || [];
+                UI.docker_instance.push(this);
+
                 if (arguments && U.isObject(arguments[0])) {
@@ -1242,2 +1302,4 @@ this.setConfig(arguments[0]);
     }());
+
+    DOCKER = ax5.ui.docker;
 })();
@@ -1253,2 +1315,3 @@
 // todo : 패널 drag & drop
+// todo : update panels -- ok (setPanels)
 // ax5.ui.docker.tmpl
@@ -1259,3 +1322,13 @@ (function () {
 
+    var stack_panel = function stack_panel() {
+        return "<div data-ax5docker-pane=\"\" data-ax5docker-path=\"{{panelPath}}\" style=\"flex-grow: {{#flexGrow}}{{.}}{{/flexGrow}}{{^flexGrow}}1{{/flexGrow}};\">\n    <ul data-ax5docker-pane-tabs=\"\"></ul>\n    <div data-ax5docker-pane-tabs-more=\"\">{{{icons.more}}}</div>\n    <div data-ax5docker-pane-item-views=\"\"></div>\n</div>";
+    };
+
+    var panel_label = function panel_label() {
+        return "<li data-ax5docker-pane-tab=\"{{pIndex}}\" data-ax5docker-path=\"{{panelPath}}\">\n    <div class=\"title\">{{{name}}}</div>\n    {{^disableClosePanel}}<div class=\"close-icon\">{{{icons.close}}}</div>{{/disableClosePanel}}\n</li>";
+    };
+
     DOCKER.tmpl = {
+        "stack-panel": stack_panel,
+        "panel-label": panel_label,
 
@@ -1262,0 +1335,0 @@ get: function get(tmplName, data, columnKeys) {

dist/ax5docker.min.js

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

package.json

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

src/ax5docker.js

@@ -9,5 +9,8 @@ /*
 
+
     const UI = ax5.ui,
         U = ax5.util;
 
+    let DOCKER;
+
     UI.addClass({
@@ -40,3 +43,5 @@ className: "docker",
                     more: '...'
-                }
+                },
+                disableClosePanel: false,
+                disableDragPanel: false,
             };
@@ -251,7 +256,9 @@ this.xvar = {};
 
-                        $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>');
+                        $dom = jQuery(DOCKER.tmpl.get.call(this, "stack-panel", {
+                            name: myself.name,
+                            panelPath: myself.panelPath,
+                            icons: cfg.icons,
+                            disableClosePanel: cfg.disableClosePanel,
+                            disableDragPanel: cfg.disableDragPanel,
+                        }, {}));
                         $parent.append($dom);
@@ -278,6 +285,10 @@
                         myself.panelPath = getPanelPath(parent, pIndex);
-                        myself.$label = jQuery('<li data-ax5docker-pane-tab="' + pIndex + '" data-ax5docker-path="' + myself.panelPath + '">' +
-                            '<div class="title">' + myself.name + '</div>' +
-                            '<div class="close-icon">' + cfg.icons.close + '</div>' +
-                            '</li>');
+                        myself.$label = jQuery(DOCKER.tmpl.get.call(this, "panel-label", {
+                            pIndex: pIndex,
+                            name: myself.name,
+                            panelPath: myself.panelPath,
+                            icons: cfg.icons,
+                            disableClosePanel: cfg.disableClosePanel,
+                            disableDragPanel: cfg.disableDragPanel,
+                        }, {}));
 
@@ -296,7 +307,10 @@ if (!myself.$item) {
                         } 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-more="">' + cfg.icons.more + '</div>' +
-                                '<div data-ax5docker-pane-item-views=""></div>' +
-                                '</div>');
+                            $dom = jQuery(DOCKER.tmpl.get.call(this, "stack-panel", {
+                                name: myself.name,
+                                panelPath: myself.panelPath,
+                                flexGrow: myself.flexGrow,
+                                icons: cfg.icons,
+                                disableClosePanel: cfg.disableClosePanel,
+                                disableDragPanel: cfg.disableDragPanel,
+                            }, {}));
 
@@ -393,3 +407,5 @@ if (!myself.builded) controlPanel(myself, "init");
                     .on("dragstart.ax5docker-pane-resize", "[data-ax5docker-pane-tab]", function (e) {
-                        panelTabDragEvent.on(this);
+                        if(!cfg.disableDragPanel) {
+                            panelTabDragEvent.on(this);
+                        }
                     })
@@ -734,9 +750,8 @@ .on("mousedown.ax5docker-pane-resize", "[data-ax5docker-resize-handle]", function (e) {
                 "off": (isDrop) => {
-                    if(isDrop){
+                    if (isDrop) {
                         console.log(this.xvar.dragger);
 
 
+                    }
 
-                    }
-                    
                     this.$target
@@ -874,3 +889,34 @@ .off("dragover.ax5docker-" + this.instanceId)
              * @param {Object} config
+             * @param {Element} config.target
              * @param {Array} config.panels
+             * @param {Object} [config.icons]
+             * @param {String} [config.icons.close]
+             * @param {String} [config.icons.more]
+             * @param {Boolean} [config.disableClosePanel=false]
+             * @param {Boolean} [config.disableDragPanel=false]
+             * @param {Object} [config.control]
+             * @param {Function} [config.control.before]
+             * @param {Function} [config.control.after]
+             * @param {Object} [config.menu]
+             * @param {String} [config.menu.theme="default"]
+             * @param {String} [config.menu.position="absolute"]
+             * @param {Object} [config.menu.icons]
+             * @param {String} [config.menu.icons.arrow]
+             * @example
+             * ```js
+             * var myDocker = new ax5.ui.docker();
+             * myDocker.setConfig({
+             *      target: $('[data-ax5docker="docker1"]'),
+             *      panels: [
+             *          {
+             *              type: "panel",
+             *              name: "panel name",
+             *              moduleName: "content",
+             *              moduleState:{
+             *                  data: "data1"
+             *              }
+             *          }
+             *      ]
+             * });
+             * ```
              */
@@ -1288,2 +1334,5 @@ this.init = function (_config) {
             this.main = (function () {
+                UI.docker_instance = UI.docker_instance || [];
+                UI.docker_instance.push(this);
+
                 if (arguments && U.isObject(arguments[0])) {
@@ -1299,2 +1348,3 @@ this.setConfig(arguments[0]);
 
+    DOCKER = ax5.ui.docker;
 })();
@@ -1309,2 +1359,3 @@
 // todo : 탭 포커싱와 탭 목록 메뉴 처리 -- ok
-// todo : 패널 drag & drop
+// todo : 패널 drag & drop
+// todo : update panels -- ok (setPanels)

src/modules/ax5docker-tmpl.js

@@ -6,5 +6,20 @@ // ax5.ui.docker.tmpl
 
+    let stack_panel = function () {
+        return `<div data-ax5docker-pane="" data-ax5docker-path="{{panelPath}}" style="flex-grow: {{#flexGrow}}{{.}}{{/flexGrow}}{{^flexGrow}}1{{/flexGrow}};">
+    <ul data-ax5docker-pane-tabs=""></ul>
+    <div data-ax5docker-pane-tabs-more="">{{{icons.more}}}</div>
+    <div data-ax5docker-pane-item-views=""></div>
+</div>`;
+    };
 
+    let panel_label = function () {
+        return `<li data-ax5docker-pane-tab="{{pIndex}}" data-ax5docker-path="{{panelPath}}">
+    <div class="title">{{{name}}}</div>
+    {{^disableClosePanel}}<div class="close-icon">{{{icons.close}}}</div>{{/disableClosePanel}}
+</li>`;
+    };
 
     DOCKER.tmpl = {
+        "stack-panel": stack_panel,
+        "panel-label": panel_label,
 
@@ -11,0 +26,0 @@ get: function (tmplName, data, columnKeys) {

No alert changes

Improved metrics

Total package byte prevSize

273418

increased by3.83%

Lines of code

2551

increased by5.41%

No dependency changes