Refactoring layout changing

apps/common/main/lib/component/Layout.js

@@ -133,47 +133,8 @@ define([
             };
 
             var panel, resizer, stretch = false;
-            options.items.forEach(function(item) {
+            this.freeze = options.freeze;
-                item.el instanceof HTMLElement && (item.el = $(item.el));
+            this.changeLayout(options.items);
-                panel = _.extend(new LayoutPanel(), item);
-                if ( panel.stretch ) {
-                    stretch         = true;
-                    panel.rely      = false;
-                    panel.resize    = false;
-                }
-
-                this.panels.push(panel);
-
-                if (panel.resize) {
-                    resizer = {
-                        isresizer   : true,
-                        minpos      : panel.resize.min||0,
-                        maxpos      : panel.resize.max||0,
-                        fmin        : panel.resize.fmin,
-                        fmax        : panel.resize.fmax,
-                        behaviour   : panel.behaviour,
-                        index       : this.splitters.length,
-                        offset      : panel.resize.offset || 0
-                    };
-
-                    if (!stretch) {
-                        panel.resize.el =
-                        resizer.el = panel.el.after('<div class="layout-resizer after"></div>').next();
-                        this.panels.push(resizer);
-                    } else {
-                        panel.resize.el =
-                        resizer.el = panel.el.before('<div class="layout-resizer before"></div>').prev();
-                        this.panels.splice(this.panels.length - 1, 0, resizer);
-                    }
-
-                    this.splitters.push({resizer:resizer});
-
-                    panel.resize.hidden && resizer.el.hide();
-                    Common.Gateway.on('processmouse', this.resize.eventStop);
-                }
-            }, this);
-
-            this.freeze = options.freeze; this.freeze && this.freezePanels(this.freeze);
         },
 
         doLayout: function() {
@@ -181,6 +142,10 @@ define([
 
         changeLayout: function(items) {
             var panel, resizer, stretch = false;
+            this.splitters && this.splitters.forEach(function(item) {
+                item.resizer && item.resizer.el.remove();
+            }, this);
+            this.splitters = [];
             this.panels = [];
             items.forEach(function(item) {
                 item.el instanceof HTMLElement && (item.el = $(item.el));
@@ -221,6 +186,7 @@ define([
                     Common.Gateway.on('processmouse', this.resize.eventStop);
                 }
             }, this);
+            this.freezePanels(this.freeze);
         },
 
         getElementHeight: function(el) {
@@ -422,8 +388,10 @@ define([
         },
 
         setResizeValue: function (index, value) {
-            if (index >= this.splitters.length)
+            if (index >= this.splitters.length) {
+                this.doLayout();
                 return false;
+            }
 
             var panel = null, next = null, oldValue = 0,
                 resize = this.splitters[index].resizer,
@@ -472,16 +440,6 @@ define([
     Common.UI.VBoxLayout.prototype = _.extend(new BaseLayout(), {
         initialize: function(options){
             BaseLayout.prototype.initialize.call(this,options);
-
-            this.panels.forEach(function(panel){
-                !panel.stretch && !panel.height && (panel.height = this.getElementHeight(panel.el));
-
-                if (panel.isresizer) {
-                    panel.el.on('mousedown', {type: 'vertical', panel: panel}, _.bind(this.resizeStart, this));
-                }
-            }, this);
-
-            this.doLayout.call(this);
         },
 
         doLayout: function() {
@@ -518,6 +476,18 @@ define([
                     height += style.height || this.getElementHeight(panel.el);
                 }
             }, this);
+        },
+
+        changeLayout: function(items) {
+            BaseLayout.prototype.changeLayout.call(this, items);
+            this.panels.forEach(function(panel){
+                !panel.stretch && !panel.height && (panel.height = this.getElementHeight(panel.el));
+
+                if (panel.isresizer) {
+                    panel.el.on('mousedown', {type: 'vertical', panel: panel}, _.bind(this.resizeStart, this));
+                }
+            }, this);
+            this.doLayout.call(this);
         }
     });
 
@@ -529,16 +499,6 @@ define([
     Common.UI.HBoxLayout.prototype = _.extend(new BaseLayout(), {
         initialize: function(options){
             BaseLayout.prototype.initialize.call(this,options);
-
-            this.panels.forEach(function(panel){
-                !panel.stretch && !panel.width && (panel.width = this.getElementWidth(panel.el));
-
-                if (panel.isresizer) {
-                    panel.el.on('mousedown', {type: 'horizontal', panel: panel}, _.bind(this.resizeStart, this));
-                }
-            }, this);
-
-            this.doLayout.call(this);
         },
 
         doLayout: function(event) {
@@ -581,6 +541,18 @@ define([
                         width += this.getElementWidth(panel.el);
                 }
             },this);
+        },
+
+        changeLayout: function(items) {
+            BaseLayout.prototype.changeLayout.call(this, items);
+            this.panels.forEach(function(panel){
+                !panel.stretch && !panel.width && (panel.width = this.getElementWidth(panel.el));
+
+                if (panel.isresizer) {
+                    panel.el.on('mousedown', {type: 'horizontal', panel: panel}, _.bind(this.resizeStart, this));
+                }
+            }, this);
+            this.doLayout.call(this);
         }
     });