ax5ui-docker - npm Package Compare versions

Comparing version 1.3.86 to 1.3.87

bower.json

 {
 	"name": "ax5ui-docker",
-	"version": "1.3.86",
+	"version": "1.3.87",
 	"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.86"
+        version: "1.3.87"
     }, function () {
@@ -40,3 +40,7 @@
                 columnKeys: {},
-                control: {}
+                control: {},
+                icons: {
+                    close: 'X',
+                    more: '...'
+                }
             };
@@ -74,3 +78,4 @@ // 패널 정보
                 var path = [],
-                    _path = [].concat(_panelPath.split(/[\.\[\]]/g));
+                    _path = U.isArray(_panelPath) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
+
                 _path.forEach(function (n) {
@@ -80,8 +85,26 @@ if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
 
-                return Function("", "return this" + path.join('') + ";").call(_this);
-                // return (Function("val", "this" + _path.join('') + " = val;")).call(this.model, value);
+                try {
+                    return Function("", "return this" + path.join('') + ";").call(_this);
+                } catch (e) {
+                    return;
+                }
             },
+                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;
+                }
+            },
                 setPanel = function setPanel(_panelPath, _value) {
                 var path = [],
-                    _path = [].concat(_panelPath.split(/[\.\[\]]/g));
+                    _path = U.isArray(_panelPath) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
+
                 _path.forEach(function (n) {
@@ -91,3 +114,3 @@ if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
 
-                return Function("val", "this" + path.join('') + " = val;").call(_this, _value);
+                return Function("val", "return this" + path.join('') + " = val;").call(_this, _value);
             };
@@ -170,3 +193,3 @@
 
-                        $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
+                        $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
                         $parent.append($dom);
@@ -182,2 +205,3 @@
                             myself.panels.forEach(function (P, _pIndex) {
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -207,3 +231,3 @@ });
                         } else {
-                            $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
+                            $dom = jQuery('<div data-ax5docker-pane="" data-ax5docker-path="' + myself.panelPath + '">' + '<ul data-ax5docker-pane-tabs=""></ul>' + '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' + '<div data-ax5docker-pane-item-views=""></div>' + '</div>');
 
@@ -221,3 +245,3 @@ if (!myself.builded) controlPanel(myself, "init");
                     },
-                    resizeHandel: function resizeHandel($parent, parent, myself) {
+                    resizeHandle: function resizeHandle($parent, parent, myself) {
                         var $dom = jQuery('<div data-ax5docker-resize-handle=""></div>');
@@ -238,3 +262,4 @@ $parent.append($dom);
                             myself.panels.forEach(function (P, _pIndex) {
-                                if (_pIndex > 0) appendProcessor["resizeHandel"]($dom, P, myself, _pIndex);
+                                if (_pIndex > 0) appendProcessor["resizeHandle"]($dom, P, myself, _pIndex);
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -257,3 +282,4 @@ });
                             myself.panels.forEach(function (P, _pIndex) {
-                                if (pIndex > 0) appendProcessor["resizeHandel"]($dom, P, myself, _pIndex);
+                                if (pIndex > 0) appendProcessor["resizeHandle"]($dom, P, myself, _pIndex);
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -278,2 +304,5 @@ });
                 });
+
+                // stackPane tabs 스크롤처리
+                alignStackPane();
                 $root = null;
@@ -324,2 +353,23 @@ };
             /**
+             * stack type panel resize되면 탭 스크롤 처리 관련 처리
+             */
+            var debounceFn = ax5.util.debounce(function (fn) {
+                fn();
+            }, cfg.animateTime);
+
+            var alignStackPane = function alignStackPane() {
+                debounceFn(function () {
+                    this.$target.find('[data-ax5docker-pane-tabs]').each(function () {
+                        var $this = jQuery(this).parent();
+                        if (this.scrollWidth > this.clientWidth) {
+                            $this.addClass("tabs-scrolled");
+                        } else {
+                            $this.removeClass("tabs-scrolled");
+                        }
+                        $this = null;
+                    });
+                }.bind(_this));
+            };
+
+            /**
              * 패널중에 null이 된 요소를 찾아 panels를 정리 합니다.
@@ -446,2 +496,7 @@ * @returns {*}
                 this.onDataChanged = cfg.onDataChanged;
+
+                jQuery(window).bind("resize.ax5docker-" + this.id, function () {
+                    // stackPane tabs 스크롤처리
+                    alignStackPane();
+                });
             };
@@ -487,9 +542,318 @@
              * @method ax5docker.addPanel
-             * @param _addPath
-             * @param _appPosition
+             * @param {String} _addPath - Position path to add panel
+             * @param _addType
              * @param _panel
+             * @param _panelIndex
              * @returns {ax5docker}
+             * @example
+             * ```js
+             * myDocker.addPanel('0.1', 'stack', {type:'panel', name:'addPanel', moduleName: 'content'});
+             *
+             * ```
              */
-            this.addPanel = function (_addPath, _appPosition, _panel) {
+            this.addPanel = function (_addPath, _addType, _panel, _panelIndex) {
+                if (_addPath == "undefined") _addPath = "0";
+                _addPath = _addPath.replace(/[a-zA-Z\[\]]+/g, "").replace(/(\d+)/g, function (a, b) {
+                    return "panels[" + a + "]";
+                });
 
+                //_addPath = [].concat(_addPath.split(/[\.]/g));
+                var pane = getPanel(_addPath);
+
+                console.log(pane);
+
+                var panelProcessor = {
+                    "stack": function stack(_pane, _addType, _panel) {
+                        var copyPanel = jQuery.extend({}, _pane),
+                            addProcessor = {
+                            "stack": function stack(_pane, _panel) {
+                                _pane.panels.push(_panel);
+                                arrangePanel();
+                            },
+                            "row-left": function rowLeft(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right": function rowRight(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top": function columnTop(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-bottom": function columnBottom(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            }
+                        };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+                        }
+
+                        copyPanel = null;
+                        addProcessor = null;
+                    },
+                    "row": function row(_pane, _addType, _panel, _panelIndex) {
+                        var copyPanel = jQuery.extend({}, _pane);
+                        var addProcessor = {
+                            "stack": function stack(_pane, _panel) {
+                                // 처리 할 수 없는 상황 첫번째 자식을 찾아 재 요청
+                                if (_pane.panels[0] && _pane.panels[0].panelPath) {
+                                    this.addPanel(_pane.panels[0].panelPath, _addType, _panel);
+                                }
+                            },
+                            "row-left": function rowLeft(_pane, _panel, _panelIndex) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    _pane.panels.splice(_panelIndex, 0, _panel);
+                                    arrangePanel();
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right": function rowRight(_pane, _panel, _panelIndex) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    _pane.panels.splice(_panelIndex + 1, 0, _panel);
+                                    arrangePanel();
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top": function columnTop(_pane, _panel, _panelIndex) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-bottom": function columnBottom(_pane, _panel, _panelIndex) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            }
+                        };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel, _panelIndex);
+                        }
+
+                        addProcessor = null;
+                        copyPanel = null;
+                    },
+                    "column": function column(_pane, _addType, _panel, _panelIndex) {
+                        var copyPanel = jQuery.extend({}, _pane);
+                        var addProcessor = {
+                            "stack": function stack(_pane, _panel) {
+                                if (_pane.panels[0] && _pane.panels[0].panelPath) {
+                                    this.addPanel(_pane.panels[0].panelPath, _addType, _panel);
+                                }
+                            },
+                            "row-left": function rowLeft(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right": function rowRight(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top": function columnTop(_pane, _panel) {
+                                _pane.panels.splice(_panelIndex, 0, _panel);
+                                arrangePanel();
+                            },
+                            "column-bottom": function columnBottom(_pane, _panel) {
+                                _pane.panels.splice(_panelIndex + 1, 0, _panel);
+                                arrangePanel();
+                            }
+                        };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+                        }
+
+                        addProcessor = null;
+                        copyPanel = null;
+                    },
+                    "panel": function panel(_pane, _addType, _panel) {
+                        var copyPanel = jQuery.extend({}, _pane),
+                            addProcessor = {
+                            "stack": function stack(_pane, _panel) {
+                                // _pane stack으로 재구성
+                                _pane = setPanel(_addPath, {
+                                    type: "stack",
+                                    panels: []
+                                });
+                                _pane.panels.push(copyPanel);
+                                _pane.panels.push(_panel);
+                                arrangePanel();
+                            },
+                            "row-left": function rowLeft(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right": function rowRight(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top": function columnTop(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-bottom": function columnBottom(_pane, _panel) {
+                                var parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                var parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            }
+                        };
+
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+                        }
+
+                        copyPanel = null;
+                        addProcessor = null;
+                    }
+                };
+
+                panelProcessor[pane.type].call(this, pane, _addType, _panel, _panelIndex);
                 return this;
@@ -514,3 +878,5 @@ };
 // todo : 패널삭제하기 -- ok ~ active 패널 정리.. -- ok
-// todo : 패널추가하기
+// todo : 패널추가하기 -- ok
+// todo : 패널 스플릿 리사이즈
+// todo : stack tab overflow 처리. -- ok (탭 포커싱와 탭 목록 메뉴 처리전)
 // todo : 패널 drag & drop
@@ -517,0 +883,0 @@

dist/ax5docker.min.js

@@ -1,1 +0,1 @@
-"use strict";!function(){var a=ax5.ui,e=ax5.util;a.addClass({className:"docker",version:"1.3.86"},function(){var a=function(){var a=this,n=void 0;this.instanceId=ax5.getGuid(),this.config={theme:"default",animateTime:250,columnKeys:{},control:{}},this.panels=[],this.panelId=0,this.modules={},n=this.config;var t=function(){return a.panelId++},i={init:function(a,e){a.$element.html(e.name)},active:function(a,e){},deactive:function(a,e){},destroy:function(a,e){}},l=function(a,e){var n=[];return a&&"undefined"!=typeof a.panelPath&&n.push(a.panelPath),n.push("panels["+(e||0)+"]"),n.join(".")},o=function(e){var n=[],t=[].concat(e.split(/[\.\[\]]/g));return t.forEach(function(a){""!==a&&n.push('["'+a.replace(/['\"]/g,"")+'"]')}),Function("","return this"+n.join("")+";").call(a)},r=function(e,n){var t=[],i=[].concat(e.split(/[\.\[\]]/g));return i.forEach(function(a){""!==a&&t.push('["'+a.replace(/['\"]/g,"")+'"]')}),Function("val","this"+t.join("")+" = val;").call(a,n)},s=function(t,l){var o=jQuery.extend(t.moduleState,{name:t.name}),s={$element:t.$item},d=void 0,c={init:function(){t.builded=!0,d=t.moduleName in a.modules&&"init"in a.modules[t.moduleName]?a.modules[t.moduleName]:i,d.init(s,o)},active:function(){t.active=!0,t.$label.addClass("active"),t.$item.addClass("active"),d=t.moduleName in a.modules&&"active"in a.modules[t.moduleName]?a.modules[t.moduleName]:i,d.active(s,o)},deactive:function(){t.active=!1,t.$label.removeClass("active"),t.$item.removeClass("active"),d=t.moduleName in a.modules&&"deactive"in a.modules[t.moduleName]?a.modules[t.moduleName]:i,d.deactive(s,o)},destroy:function(){d=t.moduleName in a.modules&&"destroy"in a.modules[t.moduleName]?a.modules[t.moduleName]:i,d.destroy(s,o),r(t.panelPath,null),u()}},p={panel:t,controlType:l},h=function(){c[l](),d=null,e.isFunction(n.control.after)&&n.control.after.call(p,p)};c[l]&&(e.isFunction(n.control.before)?n.control.before.call(p,p,function(){h()}):h())},d=function(){var i={stack:function(a,n,t,o){var r=void 0,s=-1;t.panelPath=l(n,o),r=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+t.panelPath+'"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-item-views=""></div></div>'),a.append(r),e.isArray(t.panels)&&(t.panels.forEach(function(a,e){a.active&&(s=e)}),s===-1&&(s=0),t.panels[s].active=!0,t.panels.forEach(function(a,e){i[a.type](r,t,a,e)})),r=null,s=null},panel:function(a,e,i,o){var r=void 0;i.panelPath=l(e,o),i.$label=jQuery('<li data-ax5docker-pane-tab="'+o+'" data-ax5docker-path="'+i.panelPath+'"><div class="title">'+i.name+'</div><div class="close-icon">'+n.icons.close+"</div></li>"),i.$item||(i.$item=jQuery('<div data-ax5docker-pane-item="'+o+'" data-ax5docker-pane-id="'+t()+'" data-ax5docker-path="'+i.panelPath+'"></div>')),e&&"stack"==e.type?(i.active&&(i.builded||s(i,"init"),s(i,"active")),a.find("[data-ax5docker-pane-tabs]").append(i.$label),a.find("[data-ax5docker-pane-item-views]").append(i.$item)):(r=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+i.panelPath+'"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-item-views=""></div></div>'),i.builded||s(i,"init"),s(i,"active"),r.find("[data-ax5docker-pane-tabs]").append(i.$label),r.find("[data-ax5docker-pane-item-views]").append(i.$item),a.append(r)),r=null},resizeHandel:function(a,e,n){var t=jQuery('<div data-ax5docker-resize-handle=""></div>');a.append(t),t=null},row:function(a,n,t,o){var r=void 0;if(t.panelPath=l(n,o),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";r=jQuery('<div data-ax5docker-pane-axis="row" data-ax5docker-path="'+t.panelPath+'"></div>'),a.append(r),e.isArray(t.panels)&&t.panels.forEach(function(a,e){e>0&&i.resizeHandel(r,a,t,e),i[a.type](r,t,a,e)}),r=null},column:function(a,n,t,o){var r=void 0;if(t.panelPath=l(n,o),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";r=jQuery('<div data-ax5docker-pane-axis="column" data-ax5docker-path="'+t.panelPath+'"></div>'),a.append(r),e.isArray(t.panels)&&t.panels.forEach(function(a,e){o>0&&i.resizeHandel(r,a,t,e),i[a.type](r,t,a,e)}),r=null}},o=jQuery('<div data-ax5docker-panes=""></div>');a.panels[0]&&i[a.panels[0].type](o,null,a.panels[0],0),a.$target.html(o),a.$target.off("click").on("click","[data-ax5docker-pane-tab] .close-icon",function(a){p($(this).parents("[data-ax5docker-pane-tab]")),e.stopEvent(a)}).on("click","[data-ax5docker-pane-tab]",function(a){c(this),e.stopEvent(a)}),o=null},c=function(e){var n=jQuery(e),t=n.parents("[data-ax5docker-pane]"),i=(n.attr("data-ax5docker-pane-tab"),o(t.attr("data-ax5docker-path"))),l=o(n.attr("data-ax5docker-path"));if(n.hasClass("active"))return!1;for(var r=0,d=i.panels.length;r<d;r++)i.panels[r].active&&s(i.panels[r],"deactive");return l.builded||s(l,"init"),s(l,"active"),a},p=function(e){var n=jQuery(e),t=n.attr("data-ax5docker-path"),i=o(t);return s(i,"destroy"),a},u=function(){var n={stack:function(a){if(!e.isArray(a.panels))return!1;var t={type:"stack",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var i=0,l=t.panels.length;i<l;i++)t.panels[i]=n[t.panels[i].type](t.panels[i]);return t},panel:function(a){return a},row:function(a){if(!e.isArray(a.panels))return!1;var t={type:"row",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var i=0,l=t.panels.length;i<l;i++)t.panels[i]=n[t.panels[i].type](t.panels[i]);return t},column:function(a){if(!e.isArray(a.panels))return!1;var t={type:"column",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var i=0,l=t.panels.length;i<l;i++)t.panels[i]=n[t.panels[i].type](t.panels[i]);return t}};a.panels[0]?a.panels[0]=n[a.panels[0].type](a.panels[0]):a.panels=[],d()};this.init=function(a){return n=jQuery.extend(!0,{},n,a),n.target?(this.$target=jQuery(n.target),this.panels=n.panels||[],this.onStateChanged=n.onStateChanged,this.onClick=n.onClick,this.onLoad=n.onLoad,void(this.onDataChanged=n.onDataChanged)):(console.log(ax5.info.getError("ax5docker","401","init")),this)},this.setPanels=function(a){return this.panels=a||[],d(),this},this.addModule=function(a){return e.isObject(a)&&jQuery.extend(!0,this.modules,a),this},this.repaint=function(){return d(),this},this.addPanel=function(a,e,n){return this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return a}())}(),function(){var a=ax5.ui.docker,e=function(a){return" \n{{#panels}}\n{{#panels}}\n{{/panels}}\n{{^panels}}\n{{/panels}}\n{{/panels}}\n        "};a.tmpl={panels:e,get:function(e,n,t){return ax5.mustache.render(a.tmpl[e].call(this,t),n)}}}();
+"use strict";!function(){var a=ax5.ui,e=ax5.util;a.addClass({className:"docker",version:"1.3.87"},function(){var a=function(){var a=this,n=void 0;this.instanceId=ax5.getGuid(),this.config={theme:"default",animateTime:250,columnKeys:{},control:{},icons:{close:"X",more:"..."}},this.panels=[],this.panelId=0,this.modules={},n=this.config;var t=function(){return a.panelId++},l={init:function(a,e){a.$element.html(e.name)},active:function(a,e){},deactive:function(a,e){},destroy:function(a,e){}},s=function(a,e){var n=[];return a&&"undefined"!=typeof a.panelPath&&n.push(a.panelPath),n.push("panels["+(e||0)+"]"),n.join(".")},i=function(n){var t=[],l=e.isArray(n)?[].concat(n):[].concat(n.split(/[\.\[\]]/g));l.forEach(function(a){""!==a&&t.push('["'+a.replace(/['\"]/g,"")+'"]')});try{return Function("","return this"+t.join("")+";").call(a)}catch(s){return}},p=function(n,t){var l=[],s=e.isArray(n)?[].concat(n):[].concat(n.split(/[\.\[\]]/g));return s.forEach(function(a){""!==a&&l.push('["'+a.replace(/['\"]/g,"")+'"]')}),Function("val","return this"+l.join("")+" = val;").call(a,t)},o=function(t,s){var i=jQuery.extend(t.moduleState,{name:t.name}),o={$element:t.$item},r=void 0,d={init:function(){t.builded=!0,r=t.moduleName in a.modules&&"init"in a.modules[t.moduleName]?a.modules[t.moduleName]:l,r.init(o,i)},active:function(){t.active=!0,t.$label.addClass("active"),t.$item.addClass("active"),r=t.moduleName in a.modules&&"active"in a.modules[t.moduleName]?a.modules[t.moduleName]:l,r.active(o,i)},deactive:function(){t.active=!1,t.$label.removeClass("active"),t.$item.removeClass("active"),r=t.moduleName in a.modules&&"deactive"in a.modules[t.moduleName]?a.modules[t.moduleName]:l,r.deactive(o,i)},destroy:function(){r=t.moduleName in a.modules&&"destroy"in a.modules[t.moduleName]?a.modules[t.moduleName]:l,r.destroy(o,i),p(t.panelPath,null),f()}},u={panel:t,controlType:s},c=function(){d[s](),r=null,e.isFunction(n.control.after)&&n.control.after.call(u,u)};d[s]&&(e.isFunction(n.control.before)?n.control.before.call(u,u,function(){c()}):c())},r=function(){var l={stack:function(a,t,i,p){var o=void 0,r=-1;i.panelPath=s(t,p),o=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+i.panelPath+'"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-aside="">'+n.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),a.append(o),e.isArray(i.panels)&&(i.panels.forEach(function(a,e){a.active&&(r=e)}),r===-1&&(r=0),i.panels[r].active=!0,i.panels.forEach(function(a,e){a.panelIndex=e,l[a.type](o,i,a,e)})),o=null,r=null},panel:function(a,e,l,i){var p=void 0;l.panelPath=s(e,i),l.$label=jQuery('<li data-ax5docker-pane-tab="'+i+'" data-ax5docker-path="'+l.panelPath+'"><div class="title">'+l.name+'</div><div class="close-icon">'+n.icons.close+"</div></li>"),l.$item||(l.$item=jQuery('<div data-ax5docker-pane-item="'+i+'" data-ax5docker-pane-id="'+t()+'" data-ax5docker-path="'+l.panelPath+'"></div>')),e&&"stack"==e.type?(l.active&&(l.builded||o(l,"init"),o(l,"active")),a.find("[data-ax5docker-pane-tabs]").append(l.$label),a.find("[data-ax5docker-pane-item-views]").append(l.$item)):(p=jQuery('<div data-ax5docker-pane="" data-ax5docker-path="'+l.panelPath+'"><ul data-ax5docker-pane-tabs=""></ul><div data-ax5docker-pane-tabs-aside="">'+n.icons.more+'</div><div data-ax5docker-pane-item-views=""></div></div>'),l.builded||o(l,"init"),o(l,"active"),p.find("[data-ax5docker-pane-tabs]").append(l.$label),p.find("[data-ax5docker-pane-item-views]").append(l.$item),a.append(p)),p=null},resizeHandle:function(a,e,n){var t=jQuery('<div data-ax5docker-resize-handle=""></div>');a.append(t),t=null},row:function(a,n,t,i){var p=void 0;if(t.panelPath=s(n,i),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";p=jQuery('<div data-ax5docker-pane-axis="row" data-ax5docker-path="'+t.panelPath+'"></div>'),a.append(p),e.isArray(t.panels)&&t.panels.forEach(function(a,e){e>0&&l.resizeHandle(p,a,t,e),a.panelIndex=e,l[a.type](p,t,a,e)}),p=null},column:function(a,n,t,i){var p=void 0;if(t.panelPath=s(n,i),n&&"stack"==n.type)throw"The 'stack' type child nodes are allowed only for the 'panel' type.";p=jQuery('<div data-ax5docker-pane-axis="column" data-ax5docker-path="'+t.panelPath+'"></div>'),a.append(p),e.isArray(t.panels)&&t.panels.forEach(function(a,e){i>0&&l.resizeHandle(p,a,t,e),a.panelIndex=e,l[a.type](p,t,a,e)}),p=null}},i=jQuery('<div data-ax5docker-panes=""></div>');a.panels[0]&&l[a.panels[0].type](i,null,a.panels[0],0),a.$target.html(i),a.$target.off("click").on("click","[data-ax5docker-pane-tab] .close-icon",function(a){u($(this).parents("[data-ax5docker-pane-tab]")),e.stopEvent(a)}).on("click","[data-ax5docker-pane-tab]",function(a){d(this),e.stopEvent(a)}),h(),i=null},d=function(e){var n=jQuery(e),t=n.parents("[data-ax5docker-pane]"),l=(n.attr("data-ax5docker-pane-tab"),i(t.attr("data-ax5docker-path"))),s=i(n.attr("data-ax5docker-path"));if(n.hasClass("active"))return!1;for(var p=0,r=l.panels.length;p<r;p++)l.panels[p].active&&o(l.panels[p],"deactive");return s.builded||o(s,"init"),o(s,"active"),a},u=function(e){var n=jQuery(e),t=n.attr("data-ax5docker-path"),l=i(t);return o(l,"destroy"),a},c=ax5.util.debounce(function(a){a()},n.animateTime),h=function(){c(function(){this.$target.find("[data-ax5docker-pane-tabs]").each(function(){var a=jQuery(this).parent();this.scrollWidth>this.clientWidth?a.addClass("tabs-scrolled"):a.removeClass("tabs-scrolled"),a=null})}.bind(a))},f=function(){var n={stack:function(a){if(!e.isArray(a.panels))return!1;var t={type:"stack",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var l=0,s=t.panels.length;l<s;l++)t.panels[l]=n[t.panels[l].type](t.panels[l]);return t},panel:function(a){return a},row:function(a){if(!e.isArray(a.panels))return!1;var t={type:"row",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var l=0,s=t.panels.length;l<s;l++)t.panels[l]=n[t.panels[l].type](t.panels[l]);return t},column:function(a){if(!e.isArray(a.panels))return!1;var t={type:"column",panels:[]};if(a.panels.forEach(function(a,e){a&&t.panels.push(a)}),t.panels.length<2&&(t=t.panels[0]),e.isArray(t.panels))for(var l=0,s=t.panels.length;l<s;l++)t.panels[l]=n[t.panels[l].type](t.panels[l]);return t}};a.panels[0]?a.panels[0]=n[a.panels[0].type](a.panels[0]):a.panels=[],r()};this.init=function(a){return n=jQuery.extend(!0,{},n,a),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,void jQuery(window).bind("resize.ax5docker-"+this.id,function(){h()})):(console.log(ax5.info.getError("ax5docker","401","init")),this)},this.setPanels=function(a){return this.panels=a||[],r(),this},this.addModule=function(a){return e.isObject(a)&&jQuery.extend(!0,this.modules,a),this},this.repaint=function(){return r(),this},this.addPanel=function(a,e,n,t){"undefined"==a&&(a="0"),a=a.replace(/[a-zA-Z\[\]]+/g,"").replace(/(\d+)/g,function(a,e){return"panels["+a+"]"});var l=i(a);console.log(l);var s={stack:function(e,n,t){var l=jQuery.extend({},e),s={stack:function(a,e){a.panels.push(e),f()},"row-left":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(t),e.panels.push(l),f())},"row-right":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(l),e.panels.push(t),f())},"column-top":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"column"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(t),e.panels.push(l),f())},"column-bottom":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"column"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(l),e.panels.push(t),f())}};n in s&&s[n].call(this,e,t),l=null,s=null},row:function(e,n,t,l){var s=jQuery.extend({},e),o={stack:function(a,e){a.panels[0]&&a.panels[0].panelPath&&this.addPanel(a.panels[0].panelPath,n,e)},"row-left":function(e,n,t){var l=a.substr(0,a.lastIndexOf(".")),o=i(l);"row"==o.type?(e.panels.splice(t,0,n),f()):(e=p(a,{type:"row",panels:[]}),e.panels.push(n),e.panels.push(s),f())},"row-right":function(e,n,t){var l=a.substr(0,a.lastIndexOf(".")),o=i(l);"row"==o.type?(e.panels.splice(t+1,0,n),f()):(e=p(a,{type:"row",panels:[]}),e.panels.push(s),e.panels.push(n),f())},"column-top":function(e,t,l){var o=a.substr(0,a.lastIndexOf(".")),r=i(o);"column"==r.type?this.addPanel(r.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(t),e.panels.push(s),f())},"column-bottom":function(e,t,l){var o=a.substr(0,a.lastIndexOf(".")),r=i(o);"column"==r.type?this.addPanel(r.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(s),e.panels.push(t),f())}};n in o&&o[n].call(this,e,t,l),o=null,s=null},column:function(e,n,t,l){var s=jQuery.extend({},e),o={stack:function(a,e){a.panels[0]&&a.panels[0].panelPath&&this.addPanel(a.panels[0].panelPath,n,e)},"row-left":function(e,t){var l=a.substr(0,a.lastIndexOf(".")),o=i(l);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(t),e.panels.push(s),f())},"row-right":function(e,t){var l=a.substr(0,a.lastIndexOf(".")),o=i(l);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(s),e.panels.push(t),f())},"column-top":function(a,e){a.panels.splice(l,0,e),f()},"column-bottom":function(a,e){a.panels.splice(l+1,0,e),f()}};n in o&&o[n].call(this,e,t),o=null,s=null},panel:function(e,n,t){var l=jQuery.extend({},e),s={stack:function(e,n){e=p(a,{type:"stack",panels:[]}),e.panels.push(l),e.panels.push(n),f()},"row-left":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(t),e.panels.push(l),f())},"row-right":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"row"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"row",panels:[]}),e.panels.push(l),e.panels.push(t),f())},"column-top":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"column"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(t),e.panels.push(l),f())},"column-bottom":function(e,t){var s=a.substr(0,a.lastIndexOf(".")),o=i(s);"column"==o.type?this.addPanel(o.panelPath,n,t,e.panelIndex):(e=p(a,{type:"column",panels:[]}),e.panels.push(l),e.panels.push(t),f())}};n in s&&s[n].call(this,e,t),l=null,s=null}};return s[l.type].call(this,l,e,n,t),this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return a}())}(),function(){var a=ax5.ui.docker,e=function(a){return" \n{{#panels}}\n{{#panels}}\n{{/panels}}\n{{^panels}}\n{{/panels}}\n{{/panels}}\n        "};a.tmpl={panels:e,get:function(e,n,t){return ax5.mustache.render(a.tmpl[e].call(this,t),n)}}}();

package.json

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

src/ax5docker.js

@@ -35,3 +35,7 @@ /*
                 columnKeys: {},
-                control: {}
+                control: {},
+                icons: {
+                    close: 'X',
+                    more: '...'
+                }
             };
@@ -74,3 +78,5 @@ // 패널 정보
                 getPanel = (_panelPath) => {
-                    let path = [], _path = [].concat(_panelPath.split(/[\.\[\]]/g));
+                    let path = [],
+                        _path = (U.isArray(_panelPath)) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
+
                     _path.forEach(function (n) {
@@ -80,7 +86,26 @@ if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
 
-                    return (Function("", "return this" + path.join('') + ";")).call(this);
-                    // return (Function("val", "this" + _path.join('') + " = val;")).call(this.model, value);
+                    try {
+                        return (Function("", "return this" + path.join('') + ";")).call(this);
+                    } catch (e) {
+                        return;
+                    }
                 },
+                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;
+                    }
+                },
                 setPanel = (_panelPath, _value) => {
-                    let path = [], _path = [].concat(_panelPath.split(/[\.\[\]]/g));
+                    let path = [],
+                        _path = (U.isArray(_panelPath)) ? [].concat(_panelPath) : [].concat(_panelPath.split(/[\.\[\]]/g));
+
                     _path.forEach(function (n) {
@@ -90,3 +115,3 @@ if (n !== "") path.push("[\"" + n.replace(/['\"]/g, "") + "\"]");
 
-                    return (Function("val", "this" + path.join('') + " = val;")).call(this, _value);
+                    return (Function("val", "return this" + path.join('') + " = val;")).call(this, _value);
                 };
@@ -171,2 +196,3 @@
                             '<ul data-ax5docker-pane-tabs=""></ul>' +
+                            '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' +
                             '<div data-ax5docker-pane-item-views=""></div>' +
@@ -184,2 +210,3 @@ '</div>');
                             myself.panels.forEach(function (P, _pIndex) {
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -214,2 +241,3 @@ });
                                 '<ul data-ax5docker-pane-tabs=""></ul>' +
+                                '<div data-ax5docker-pane-tabs-aside="">' + cfg.icons.more + '</div>' +
                                 '<div data-ax5docker-pane-item-views=""></div>' +
@@ -229,3 +257,3 @@ '</div>');
                     },
-                    resizeHandel($parent, parent, myself){
+                    resizeHandle($parent, parent, myself){
                         let $dom = jQuery('<div data-ax5docker-resize-handle=""></div>');
@@ -246,3 +274,4 @@ $parent.append($dom);
                             myself.panels.forEach(function (P, _pIndex) {
-                                if (_pIndex > 0) appendProcessor["resizeHandel"]($dom, P, myself, _pIndex);
+                                if (_pIndex > 0) appendProcessor["resizeHandle"]($dom, P, myself, _pIndex);
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -265,3 +294,4 @@ });
                             myself.panels.forEach(function (P, _pIndex) {
-                                if (pIndex > 0) appendProcessor["resizeHandel"]($dom, P, myself, _pIndex);
+                                if (pIndex > 0) appendProcessor["resizeHandle"]($dom, P, myself, _pIndex);
+                                P.panelIndex = _pIndex;
                                 appendProcessor[P.type]($dom, myself, P, _pIndex);
@@ -289,2 +319,5 @@ });
                     });
+
+                // stackPane tabs 스크롤처리
+                alignStackPane();
                 $root = null;
@@ -335,2 +368,23 @@ };
             /**
+             * stack type panel resize되면 탭 스크롤 처리 관련 처리
+             */
+            const debounceFn = ax5.util.debounce(function (fn) {
+                fn();
+            }, cfg.animateTime);
+
+            const alignStackPane = () => {
+                debounceFn((function () {
+                    this.$target.find('[data-ax5docker-pane-tabs]').each(function () {
+                        let $this = jQuery(this).parent();
+                        if (this.scrollWidth > this.clientWidth) {
+                            $this.addClass("tabs-scrolled");
+                        } else {
+                            $this.removeClass("tabs-scrolled");
+                        }
+                        $this = null;
+                    });
+                }).bind(this));
+            };
+
+            /**
              * 패널중에 null이 된 요소를 찾아 panels를 정리 합니다.
@@ -457,2 +511,7 @@ * @returns {*}
                 this.onDataChanged = cfg.onDataChanged;
+
+                jQuery(window).bind("resize.ax5docker-" + this.id, function () {
+                    // stackPane tabs 스크롤처리
+                    alignStackPane();
+                });
             };
@@ -498,9 +557,321 @@
              * @method ax5docker.addPanel
-             * @param _addPath
-             * @param _appPosition
+             * @param {String} _addPath - Position path to add panel
+             * @param _addType
              * @param _panel
+             * @param _panelIndex
              * @returns {ax5docker}
+             * @example
+             * ```js
+             * myDocker.addPanel('0.1', 'stack', {type:'panel', name:'addPanel', moduleName: 'content'});
+             *
+             * ```
              */
-            this.addPanel = function (_addPath, _appPosition, _panel) {
+            this.addPanel = function (_addPath, _addType, _panel, _panelIndex) {
+                if (_addPath == "undefined") _addPath = "0";
+                _addPath = _addPath
+                    .replace(/[a-zA-Z\[\]]+/g, "")
+                    .replace(/(\d+)/g, function (a, b) {
+                        return "panels[" + a + "]";
+                    });
 
+                //_addPath = [].concat(_addPath.split(/[\.]/g));
+                let pane = getPanel(_addPath);
+
+                console.log(pane);
+
+                let panelProcessor = {
+                    "stack"(_pane, _addType, _panel){
+                        let copyPanel = jQuery.extend({}, _pane),
+                            addProcessor = {
+                                "stack"(_pane, _panel){
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                },
+                                "row-left"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "row") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "row",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(_panel);
+                                        _pane.panels.push(copyPanel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "row-right"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "row") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "row",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(copyPanel);
+                                        _pane.panels.push(_panel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "column-top"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "column") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "column",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(_panel);
+                                        _pane.panels.push(copyPanel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "column-bottom"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "column") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "column",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(copyPanel);
+                                        _pane.panels.push(_panel);
+                                        arrangePanel();
+                                    }
+                                }
+                            };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+                        }
+
+                        copyPanel = null;
+                        addProcessor = null;
+                    },
+                    "row"(_pane, _addType, _panel, _panelIndex){
+                        let copyPanel = jQuery.extend({}, _pane);
+                        let addProcessor = {
+                            "stack"(_pane, _panel){
+                                // 처리 할 수 없는 상황 첫번째 자식을 찾아 재 요청
+                                if (_pane.panels[0] && _pane.panels[0].panelPath) {
+                                    this.addPanel(_pane.panels[0].panelPath, _addType, _panel);
+                                }
+                            },
+                            "row-left"(_pane, _panel, _panelIndex){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    _pane.panels.splice(_panelIndex, 0, _panel);
+                                    arrangePanel();
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right"(_pane, _panel, _panelIndex){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    _pane.panels.splice(_panelIndex + 1, 0, _panel);
+                                    arrangePanel();
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top"(_pane, _panel, _panelIndex){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-bottom"(_pane, _panel, _panelIndex){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "column") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "column",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            }
+                        };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel, _panelIndex);
+                        }
+
+                        addProcessor = null;
+                        copyPanel = null;
+                    },
+                    "column"(_pane, _addType, _panel, _panelIndex){
+                        let copyPanel = jQuery.extend({}, _pane);
+                        let addProcessor = {
+                            "stack"(_pane, _panel){
+                                if (_pane.panels[0] && _pane.panels[0].panelPath) {
+                                    this.addPanel(_pane.panels[0].panelPath, _addType, _panel);
+                                }
+                            },
+                            "row-left"(_pane, _panel){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(_panel);
+                                    _pane.panels.push(copyPanel);
+                                    arrangePanel();
+                                }
+                            },
+                            "row-right"(_pane, _panel){
+                                let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                let parentPane = getPanel(parentPath);
+                                if (parentPane.type == "row") {
+                                    this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                } else {
+                                    _pane = setPanel(_addPath, {
+                                        type: "row",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                }
+                            },
+                            "column-top"(_pane, _panel){
+                                _pane.panels.splice(_panelIndex, 0, _panel);
+                                arrangePanel();
+                            },
+                            "column-bottom"(_pane, _panel){
+                                _pane.panels.splice(_panelIndex + 1, 0, _panel);
+                                arrangePanel();
+                            }
+                        };
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+                        }
+
+                        addProcessor = null;
+                        copyPanel = null;
+                    },
+                    "panel"(_pane, _addType, _panel){
+                        let copyPanel = jQuery.extend({}, _pane),
+                            addProcessor = {
+                                "stack"(_pane, _panel){
+                                    // _pane stack으로 재구성
+                                    _pane = setPanel(_addPath, {
+                                        type: "stack",
+                                        panels: []
+                                    });
+                                    _pane.panels.push(copyPanel);
+                                    _pane.panels.push(_panel);
+                                    arrangePanel();
+                                },
+                                "row-left"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "row") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "row",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(_panel);
+                                        _pane.panels.push(copyPanel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "row-right"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "row") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "row",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(copyPanel);
+                                        _pane.panels.push(_panel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "column-top"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "column") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "column",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(_panel);
+                                        _pane.panels.push(copyPanel);
+                                        arrangePanel();
+                                    }
+                                },
+                                "column-bottom"(_pane, _panel){
+                                    let parentPath = _addPath.substr(0, _addPath.lastIndexOf("."));
+                                    let parentPane = getPanel(parentPath);
+                                    if (parentPane.type == "column") {
+                                        this.addPanel(parentPane.panelPath, _addType, _panel, _pane.panelIndex);
+                                    } else {
+                                        _pane = setPanel(_addPath, {
+                                            type: "column",
+                                            panels: []
+                                        });
+                                        _pane.panels.push(copyPanel);
+                                        _pane.panels.push(_panel);
+                                        arrangePanel();
+                                    }
+                                }
+                            };
+
+                        if (_addType in addProcessor) {
+                            addProcessor[_addType].call(this, _pane, _panel);
+
+                        }
+
+                        copyPanel = null;
+                        addProcessor = null;
+                    }
+                };
+
+                panelProcessor[pane.type].call(this, pane, _addType, _panel, _panelIndex);
                 return this;
@@ -527,3 +898,5 @@ };
 // todo : 패널삭제하기 -- ok ~ active 패널 정리.. -- ok
-// todo : 패널추가하기
+// todo : 패널추가하기 -- ok
+// todo : 패널 스플릿 리사이즈
+// todo : stack tab overflow 처리. -- ok (탭 포커싱와 탭 목록 메뉴 처리전)
 // todo : 패널 drag & drop

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

224351

increased by73.09%

Lines of code

1731

increased by70.04%

No dependency changes