1 files changed, 382 insertions, 0 deletions

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
new file mode 100644
index 00000000..57187af1
--- /dev/null
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -0,0 +1,382 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+/*
+Panel Container - A container for other panels
+*/
+var Montage         = require("montage/core/core").Montage;
+var Component       = require("montage/ui/component").Component;
+var PropertiesPanel = require("js/panels/Properties/properties-panel").PropertiesPanel;
+var ColorPanel      = require("js/panels/Color/ColorPanel").ColorPanel;
+var CSSPanel        = require("js/panels/CSSPanel/CSSPanel").CSSPanel;
+var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel;
+var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
+var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
+
+exports.PanelContainer = Montage.create(Component, {
+    lastOffset: {
+        value:null
+    },
+    _collapsedHeight: {
+        value: 26
+    },
+    _isFirstAdjustableNonCollapsed: {
+        value:true
+    },
+    _spaceAvailable: {
+        value:null
+    },
+    _panelSelected : {
+        value: null
+    },
+    _isFirstDraw: {
+        value: false
+    },
+    _panels: {
+        value: []
+    },
+
+    skipPanelIndex: {
+        value: null
+    },
+
+    initPanelOrder: {
+        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel']
+    },
+
+    panelOrder: {
+        value: []
+    },
+
+    deserializedFromTemplate : {
+        value: function() {
+           this.eventManager.addEventListener( "appLoaded", this, false);
+
+        }
+    },
+
+    handleAppLoaded: {
+        value: function() {
+            //Panels Loading
+            this.lastOffset = this.element.offsetHeight;
+            if( this.application.ninja.settings.getSetting(this.element.id, "panelOrder") != null) {
+                this.initPanelOrder = this.application.ninja.settings.getSetting(this.element.id, "panelOrder")
+            }
+            // if Panels already loaded no need to load again.
+            for(var i = 0; i < this.initPanelOrder.length; i++) {
+                this.addPanel(eval(this.initPanelOrder[i]));
+                this.panelOrder.push(this.initPanelOrder[i]);
+                this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
+            }
+
+            var hideSplitter = true;
+
+            var that = this;
+            this._panels.forEach(function(obj) {
+
+                var panelMenuName = obj.panelName.substring(0,  obj.panelName.indexOf('/') !== -1 ?  obj.panelName.indexOf('/'):  obj.panelName.length) + "Panel";
+
+                that.application.ninja.appModel[panelMenuName] = obj.visible;
+
+                if (obj.visible) {
+                    hideSplitter = false;
+                }
+            });
+
+            if (hideSplitter) {
+                this.panelSplitter.toggle();
+                this.panelSplitter.disabled = true;
+            }
+
+            this.needsDraw = true;
+
+            this.addEventListener("change@appModel.PropertiesPanel", this, false);
+            this.addEventListener("change@appModel.ProjectPanel", this, false);
+            this.addEventListener("change@appModel.ColorPanel", this, false);
+            this.addEventListener("change@appModel.ComponentsPanel", this, false);
+            this.addEventListener("change@appModel.CSSPanel", this, false);
+            this.addEventListener("change@appModel.MaterialsPanel", this, false);
+        }
+    },
+
+    handleEvent: {
+        value: function(e) {
+            this.togglePanel(e.propertyName);
+        }
+    },
+    
+    addPanel: {
+        value: function(panel) {
+            if (panel.init) {
+                panel.init();
+            }
+            this._panels.push(panel);
+            if (this.panelSplitter.disabled) {
+                this.panelSplitter.disabled = false;
+                this.panelSplitter.toggle();
+            }
+        }
+    },
+    handlePanelCollapsed: {
+         value: function(e) {
+
+            for(var i=0; i < this._panels.length; i++) {
+                if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) {
+                    this.skipPanelIndex = i;
+                    this.handlePanelResized(i, true);
+                }
+            }
+        }
+    },
+
+    handlePanelResizedStart : {
+        value: function(e) {
+            for (var i = 0; i < this._panels.length; i++) {
+                if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) {
+                    this.handlePanelResized(i);
+                }
+            }
+        }
+    },
+
+    handlePanelResizedEnd : {
+        value: function(e) {
+            for (var i = 0; i < this._panels.length; i++) {
+                if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) {
+                    this.handlePanelResized();
+                }
+            }
+        }
+    },
+
+    handlePanelResizing: {
+        value:function(e) {
+            this.resizedRedraw();
+        }
+    },
+
+    canFlex: {
+        value: function(panel) {
+            if (panel.isStatic) {
+                return false;
+            }
+
+            return !(panel.collapsed || panel.forcedCollapse);
+
+        }
+    },
+
+    handlePanelResized: {
+        value: function(selectedPanelIndex, collapsing) {
+            minHeights = 0;
+            needsLocks = true;
+
+            if (collapsing) {
+                if (this._panels.length -1 == selectedPanelIndex) {
+                    needsLocks = false;
+                } else {
+                    needsLocks = false;
+                    for (var i = 0; i < this._panels.length; i++) {
+                        if ( i > selectedPanelIndex) {
+                            if (this.canFlex(this._panels[i])) {
+                                needsLocks = true;
+                            }
+                        }
+                    }
+                }
+            }
+            for (var i = 0; i < this._panels.length; i++) {
+                if (this._panels[i].collapsed || this._panels[i].forcedCollapse) {
+                    minHeights += this._collapsedHeight;
+                } else {
+                        if (i < selectedPanelIndex && needsLocks) {
+                            this._panels[i].isLocked = true;
+                            this.repeater.childComponents[i].needsDraw = true;
+                            minHeights += this.repeater.childComponents[i].element.offsetHeight;
+                        } else {
+                            this._panels[i].isLocked = false;
+                            this.repeater.childComponents[i].needsDraw = true;
+                            minHeights += this._panels[i].minHeight;
+                        }
+                }
+            }
+            // Theres got to be a better way to do this. Look into initiating a redraw when flex box is done redrawing its element sizes. Set them as offset height
+            // Look into new css possibilities as flex box gets better integrated.
+
+            setTimeout(this.resizedRedraw.bind(this), 300);
+            while( minHeights > this.element.children[0].offsetHeight) {
+