From 3dbe798285f95dc63ae33739df5daadb8c432f24 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 28 Feb 2012 16:20:25 -0800
Subject: putting the color panel on top when opening ninja

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/PanelContainer')

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 3cbd4369..003724bb 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -45,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
+        value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
-- 
cgit v1.2.3


From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 15:00:48 -0800
Subject: Squashed commit of the workspace-bugs

- Panels fixes.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../PanelContainer.reel/PanelContainer.html        | 116 +++++-
 .../PanelContainer.reel/PanelContainer.js          | 432 ++++++---------------
 2 files changed, 211 insertions(+), 337 deletions(-)

(limited to 'js/panels/PanelContainer')

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
index 5c6ac227..76f6b9c4 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
@@ -9,35 +9,103 @@
 
     <script type="text/montage-serialization">
         {
-            "panel": {
-                "module": "js/panels/Panel.reel",
-                "name": "Panel",
+            "panelData": {
+                "module": "js/data/panels-data",
+                "name": "PanelsData"
+            },
+
+            "PanelController": {
+                "module": "montage/ui/controller/array-controller",
+                "name"  : "ArrayController",
                 "properties": {
-                    "element": {"#": "panel"}
+                    "automaticallyOrganizeObjects": true
                 },
                 "bindings": {
-                    "panelBase": {
-                        "boundObject": {"@": "repetition1"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "panels",
                         "oneway": true
                     }
                 }
             },
 
-
             "repetition1": {
                 "module": "montage/ui/repetition.reel",
                 "name": "Repetition",
                 "properties": {
-                    "element": {"#": "panels"}
+                    "element": {"#": "panels"},
+                    "contentController": {"@" : "PanelController"}
+                }
+            },
+
+            "panel": {
+                "module": "js/panels/Panel.reel",
+                "name": "Panel",
+                "properties": {
+                    "element": {"#": "panel"},
+                    "identifier" : "panels"
                 },
                 "bindings": {
-                    "objects": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "_panels",
+                    "name": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.name",
+                        "oneway": true
+                    },
+                    "height": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.height",
+                        "oneway": false
+                    },
+                    "minHeight": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.minHeight",
+                        "oneway": true
+                    },
+                    "maxHeight": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.maxHeight",
+                        "oneway": true
+                    },
+                    "flexible": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.flexible",
+                        "oneway": true
+                    },
+                    "collapsed": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.collapsed",
+                        "oneway": false
+                    },
+                    "modulePath": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.modulePath",
                         "oneway": true
+                    },
+                    "moduleName": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.moduleName",
+                        "oneway": true
+                    },
+                    "contentComponent": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.contentComponent",
+                        "oneway": false
                     }
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "resizeStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "owner": {
@@ -45,8 +113,24 @@
                 "name": "PanelContainer",
                 "properties": {
                     "element": {"#": "panelContainer"},
-                    "repeater": {"@": "repetition1"}
-                }
+                    "repeater": {"@": "repetition1"},
+                    "panelData": {"@": "panelData" },
+                    "panelController" : {"@" : "PanelController"}
+                },
+                "listeners": [
+                    {
+                        "type": "panelResizing",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropped",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
         }
     </script>
@@ -55,7 +139,7 @@
 <body>
     <section id="panelContainer">
 		<article id="panels" class="panels">
-            <article id="panel" class="panel"></article>
+            <article id="panel"></article>
 		</article>
     </section>
 </body>
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 003724bb..3a141b05 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -3,388 +3,178 @@ 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;
-var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
-
+ 
 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: {
+    panelData: {
         value: null
     },
 
-    initPanelOrder: {
-        value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
-    },
-
-    panelOrder: {
+    panels: {
         value: []
     },
 
-    deserializedFromTemplate : {
-        value: function() {
-           this.eventManager.addEventListener( "appLoaded", this, false);
+    panelController: {
+        value: null
+    },
 
-        }
+    currentPanelState: {
+        value: {}
     },
 
-    handleAppLoaded: {
+    templateDidLoad: {
         value: function() {
-            //Panels Loading
-            this.lastOffset = this.element.offsetHeight;
-
-            /* Old Settings
-            if( this.application.ninja.settings.getSetting(this.element.id, "panelOrder") != null) {
-                this.initPanelOrder = this.application.ninja.settings.getSetting(this.element.id, "panelOrder")
-            }
-            */
+            var pLen, storedData;
 
-            // 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]);
+            // Loop through the panels to add to the repetition and get the saved state
+            pLen = this.panelData.panels.length;
 
-//              this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
-            }
-
-            var hideSplitter = true;
+            // Get the saved panel state
+            storedData = this.application.localStorage.getItem("panels");
 
-            var that = this;
-            this._panels.forEach(function(obj) {
+            for(var i = 0; i < pLen; i++) {
 
-                var panelMenuName = obj.panelName.substring(0,  obj.panelName.indexOf('/') !== -1 ?  obj.panelName.indexOf('/'):  obj.panelName.length) + "Panel";
+                var p = this.panelData.panels[i];
 
-                that.application.ninja.appModel[panelMenuName] = obj.visible;
+                this.currentPanelState[p.name] = {};
+                this.currentPanelState.version = "1.0";
 
-                if (obj.visible) {
-                    hideSplitter = false;
+                if(storedData && storedData[p.name]) {
+                    p.collapsed = storedData[p.name].collapsed;
                 }
-            });
 
-            if (hideSplitter) {
-                this.panelSplitter.toggle();
-                this.panelSplitter.disabled = true;
-            }
+                this.currentPanelState[p.name].collapsed = p.collapsed;
 
-//            this.needsDraw = true;
+                this.panels.push(p);
+            }
 
-            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);
-            this.addEventListener("change@appModel.PresetsPanel", this, false);
+            this.application.localStorage.setItem("panels", this.currentPanelState);
         }
     },
-
-    handleEvent: {
-        value: function(e) {
-            this.togglePanel(e.propertyName);
+ 
+    prepareForDraw: {
+        value: function() {
+            window.addEventListener("resize", this, false);
         }
     },
-    
-    addPanel: {
-        value: function(panel) {
-            if (panel.init) {
-                panel.init();
-            }
-            this._panels.push(panel);
-            if (this.panelSplitter.disabled) {
-                this.panelSplitter.disabled = false;
-                this.panelSplitter.toggle();
-            }
+ 
+    handlePanelResizing: {
+        value: function(e) {
+            this._setPanelsSizes(e.target);
         }
     },
-    handlePanelCollapsed: {
+     
+    handleResize: {
          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);
+            this._setPanelsSizes(null);
                 }
-            }
-        }
     },
-
-    handlePanelResizedStart : {
+ 
+    handleDropped: {
         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);
+            var draggedIndex, droppedIndex = 0;
+            for(var i = 0; i< this.repeater.childComponents.length; i++ ) {
+                if (this.repeater.childComponents[i] === e._event.draggedComponent) {
+                    draggedIndex = 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();
+                if (this.repeater.childComponents[i] === e._event.droppedComponent) {
+                    droppedIndex = i;
                 }
             }
+
+            var panelRemoved = this.panelController.content.splice(draggedIndex,1);
+            this.panelController.content.splice(droppedIndex,0, panelRemoved[0]);
+            //console.log(draggedIndex, droppedIndex);
+            this._setPanelsSizes(null);
         }
     },
+ 
+    _setPanelsSizes: {
+        value: function(panelActivated) {
+            var setLocked = true;
+            this.repeater.childComponents.forEach(function(obj) {
+                if (obj === panelActivated || panelActivated === null) {
+                    setLocked = false;
+                }
 
-    handlePanelResizing: {
-        value:function(e) {
-            this.resizedRedraw();
+                obj.locked = setLocked;
+                obj.needsDraw = true;
+            });
         }
     },
 
-    canFlex: {
-        value: function(panel) {
-            if (panel.isStatic) {
-                return false;
+    _redrawPanels: {
+        value: function(panelActivated, unlockPanels) {
+            var maxHeight = this.element.offsetHeight;
+            var setLocked = true;
+            if(unlockPanels === true) {
+                setLocked = false;
             }
 
-            return !(panel.collapsed || panel.forcedCollapse);
+            var childrensMinHeights = ((this.repeater.childComponents.length - 1) * 26) + panelActivated.minHeight;
 
-        }
-    },
-
-    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;
+            this.repeater.childComponents.forEach(function(obj) {
+                if(obj === panelActivated) {
+                    setLocked = false;
+                } else if(obj.collapsed) {
+                    //Collapsed Ignore the rest of the code
                 } else {
-                        if (i < selectedPanelIndex && needsLocks) {
-                            this._panels[i].isLocked = true;
-                            this.repeater.childComponents[i].needsDraw = true;
-                            minHeights += this.repeater.childComponents[i].element.offsetHeight;
+                    if (setLocked) {
+                        if((maxHeight - childrensMinHeights) - obj.height > 0 ) {
+                            childrensMinHeights += obj.height - 26;
                         } else {
-                            this._panels[i].isLocked = false;
-                            if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true;
-                            minHeights += this._panels[i].minHeight;
+                            this.currentPanelState[obj.name].collapsed = obj.collapsed = true;
+                            this.application.localStorage.setItem("panels", this.currentPanelState);
                         }
-                }
-            }
-            // 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) {
-                var panelCount = this._panels.length;
-                var lastPanel = null;
-                for( var i = 0; i < panelCount; i++ ) {
-                    if (i != this.skipPanelIndex) {
-                        if (!this._panels[i].forcedCollapse && !this._panels[i].collapsed) {
-                            lastPanel = i;
-                        }
-                    }
-                }
-                minHeights -= this._panels[lastPanel].minHeight - this._collapsedHeight;
-                this._panels[lastPanel].collapsed = true;
-                //this.repeater.childComponents[lastPanel].needsDraw = true;
-
-
-            }
-            this.skipPanelIndex = null;
-        }
-    },
-
-    resizedRedrawTimer: {
-        value: null
-    },
-
-    resizedRedraw: {
-        value:function() {
-            for (var i = 0; i < this._panels.length; i++) {
-                var rptEl = this.repeater.childComponents[i].element;
-                var offset = rptEl.offsetHeight;
-                this._panels[i].contentHeight = offset;
-                rptEl.style.height = offset;
-                this.repeater.childComponents[i].needsDraw = true;
-            }
-        }
-    },
-
-    togglePanel: {
-        value: function(e) {
-            var panelName = e._event ? e._event.detail : e;
-            for(var i=0; i < this.panelOrder.length; i++) {
-                if (this.panelOrder[i] == panelName) {
-                    if(this._panels[i].visible) {
-                        this.hidePanel(i);
                     } else {
-                        this._panels[i].visible = true;
-                        this.repeater.childComponents[i].needsDraw = true;
-//                        NJevent("panelAdded",this._panels[i]);
-                        if (this.panelSplitter.disabled) {
-                            this.panelSplitter.disabled = false;
-                            this.panelSplitter.toggle();
+                        if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) {
+                            childrensMinHeights += obj.minHeight - 26;
+                        } else {
+                            this.currentPanelState[obj.name].collapsed = obj.collapsed = true;
+                            this.application.localStorage.setItem("panels", this.currentPanelState);
                         }
                     }
                 }
-            }
-            this.handlePanelResized();
+                obj.locked = setLocked;
+            }, this);
         }
     },
-
-    handlePanelSelected: {
+ 
+    handleAction: {
         value: function(e) {
-            this._panelSelected = e._event.detail;
-        }
-    },
-
-    handlePanelClose: {
-        value:function(e) {
-            if( e._event.detail != null) {
-                for(var i=0; i < this._panels.length; i++) {
-                    if (e._event.detail._panelBase._uuid == this._panels[i]._uuid) {
-                        var panelMenuName = this._panels[i].panelName.substring(0,  this._panels[i].panelName.indexOf('/') !== -1 ?  this._panels[i].panelName.indexOf('/'):  this._panels[i].panelName.length) + "Panel";
-                        this.application.ninja.appModel[panelMenuName] = false;
-                        this.hidePanel(i);
-                    }
-                }
-            }
-        }
-    },
-
-    hidePanel: {
-        value: function(panelIndex) {
-            var panel = this._panels[panelIndex];
-            distHeight = 0;
-            if (panel.collapsed || panel.forcedCollapse) distHeight = this._collapsedHeight;
-            else distHeight = panel.contentHeight;
-            this._spaceAvailable += distHeight;
-//            NJevent("panelClosed", panel.panelName);
-            panel.visible = false;
-            this.repeater.childComponents[panelIndex].needsDraw = true;
-
-            //Validate all panels are closed
-            var hideSplitter = true;
-            this._panels.forEach(function(obj) {
-                if (obj.visible) {
-                    hideSplitter = false;
-                }
-            })
-            if (hideSplitter) {
-                this.panelSplitter.toggle();
-                this.panelSplitter.disabled = true;
-            }
-        }
-    },
-
-    handlePanelOrderChanged: {
-        value:function(e) {
-            overed = null;
-            selected = null;
-            for(var i=0; i < this._panels.length; i++) {
-                if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) {
-                    overed = i;
-                }
-                if (this._panelSelected.panelBase._uuid == this._panels[i]._uuid) {
-                    selected = i;
-                }
-            }
-            if (overed != selected) {
-                var panelRemoved = this._panels.splice(selected,1);
-                this._panels.splice(overed,0, panelRemoved[0]);
-                var panelOrderRemoved = this.panelOrder.splice(selected,1);
-                this.panelOrder.splice(overed,0, panelOrderRemoved[0]);
-
-                //this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
-            }
-        }
-    },
-
-    prepareForDraw: {
-        value: function() {
-            //console.log("drawing:" + this._panels.length);
-            if (!this._isFirstDraw) {
-                this._isFirstDraw = true;
-                this.eventManager.addEventListener("panelOrderChanged", this, false);
-                this.eventManager.addEventListener("panelClose", this, false);
-                this.eventManager.addEventListener("panelCollapsed", this, false);
-                this.eventManager.addEventListener("panelSelected", this, false);
-
-                this.eventManager.addEventListener("panelResizing", this, false);
-                this.eventManager.addEventListener("panelResizedStart", this, false);
-                this.eventManager.addEventListener("panelResizedEnd", this, false);
-                window.addEventListener("resize", this.handlePanelResized.bind(this), false);
+            var unlockPanels = true;
+            var afterPanel = false;
+            var panelName = e.target.parentComponent.name;
+            switch(e.target.identifier) {
+                case "btnCollapse":
+                    this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed;
+                    this.application.localStorage.setItem("panels", this.currentPanelState);
+                    this._setPanelsSizes(e.target.parentComponent);
+                    this._redrawPanels(e.target.parentComponent, unlockPanels);
+                    break;
+                case "btnClose":
+                    this.panelController.content.forEach(function(obj) {
+                        if(afterPanel) {
+                            if(obj.flexible) {
+                                unlockPanels = false;
+                            }
+                        }
+                        if (obj.name === panelName) {
+                            afterPanel = true;
+                            this.panelController.removeObjects(obj);
+                        }
+                    });
+                    this._redrawPanels(e.target.parentComponent, unlockPanels);
+                    break;
             }
         }
-    },
-
-    didDraw: {
-        value: function() {
-            this.handlePanelResized();
-        }
-    },
-    //External Objects
-    _repeater: {
-        value:null
-    },
-    repeater: {
-        get: function() {
-            return this._repeater;
-        },
-        set: function(val) {
-            this._repeater = val;
-        }
-    },
-    _panelSplitter: {
-        value:null
-    },
-    panelSplitter: {
-        get: function() {
-            return this._panelSplitter;
-        },
-        set: function(val) {
-            this._panelSplitter = val;
-        }
     }
-
+ 
 });
\ No newline at end of file
-- 
cgit v1.2.3