From bb9adf8a3162a5bbed5a4a8f0d63deeb75f76e61 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:27:19 -0800 Subject: removing repetition from the panel container and using a static list of panels. - Fixing the bugs associated with the repetition of component and PI problems. Signed-off-by: Valerio Virgillito --- js/data/panels-data.js | 25 --- js/ninja.reel/ninja.html | 2 +- .../ComponentsPanelBase.js | 2 +- js/panels/Panel.reel/Panel.js | 101 ++++++----- js/panels/PanelContainer.reel/PanelContainer.html | 110 ++++++++++++ js/panels/PanelContainer.reel/PanelContainer.js | 193 +++++++++++++++++++++ .../PanelContainer.reel/PanelContainer.html | 146 ---------------- .../PanelContainer.reel/PanelContainer.js | 180 ------------------- 8 files changed, 366 insertions(+), 393 deletions(-) create mode 100755 js/panels/PanelContainer.reel/PanelContainer.html create mode 100755 js/panels/PanelContainer.reel/PanelContainer.js delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js diff --git a/js/data/panels-data.js b/js/data/panels-data.js index aa5057a2..2422f5e7 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -19,7 +19,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: false, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/Color/colorpanelbase.reel", moduleName: "ColorPanelBase" }, @@ -32,7 +31,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/properties.reel", moduleName: "Properties" }, @@ -45,7 +43,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/Materials/materials-library-panel.reel", moduleName: "MaterialsLibraryPanel" }, @@ -58,7 +55,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/Components/ComponentsPanelBase.reel", moduleName: "ComponentsPanelBase" }, @@ -71,7 +67,6 @@ exports.PanelsData = Montage.create(Montage, { // scrollable: true, // collapsed: false, // open: true, -// content: null, // modulePath: "js/panels/Project/projectpanelbase.reel", // moduleName: "ProjectPanelBase" // }, @@ -84,7 +79,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/CSSPanel/CSSPanelBase.reel", moduleName: "CSSPanelBase" }, @@ -97,7 +91,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/presets/content.reel", moduleName: "content" } @@ -118,24 +111,6 @@ exports.PanelsData = Montage.create(Montage, { this._panelOrder = val; } } - - - panels: { - get: function() { - var filtered = this._panels.filter(function(item) { - return item.open; - }); - - filtered.sort(function(a,b) { - a.name - }); - - return filtered; - }, - set : function() { - - } - } */ }); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 112f844e..430b8aa0 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -167,7 +167,7 @@ }, "panelContainer": { - "module": "js/panels/PanelContainer/PanelContainer.reel", + "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", "properties": { "element": {"#": "rightPanelContent"}, diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index b4eec771..b6bee37d 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -118,7 +118,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component didCreate: { value: function() { // Setup the drop delegate - this.application.ninja.dragDropMediator.dropDelegate = this; +// this.application.ninja.dragDropMediator.dropDelegate = this; // Loop through the component and load the JSON data for them this._loadComponents(); } diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index e0bf3f18..be03d019 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -9,31 +9,52 @@ var Component = require("montage/ui/component").Component; exports.Panel = Montage.create(Component, { - name: { value: "Panel" }, - collapsedHeight: {value: 26}, - _collapsed: {value: false}, - _height: { value: 200 }, - minHeight: {value: 200 }, - maxHeight: { value: null}, - flexible: {value: true}, - _locked: { value: false}, - isResizing: {value: false }, - resizer: {value: null }, - modulePath: {value: null}, - moduleName: {value: null}, - _contentComponent: {value: null}, - - contentComponent: { - get: function() { - return this._contentComponent; - }, - set: function(val) { - if (val !== null && val !== this._contentComponent) { - this.panelContent.content = val; - this.panelContent.needsDraw = true; - this._contentComponent = val; - } - } + name: { + value: "Panel" + }, + + _collapsed: { + value: false + }, + + _height: { + value: 200 + }, + + minHeight: { + value: 200 + }, + + maxHeight: { + value: null + }, + + flexible: { + value: true + }, + + _locked: { + value: false + }, + + isResizing: { + value: false + }, + + _resizedHeight: { + value: 0 + }, + + resizer: { + value: null + }, + + modulePath: { + value: null + }, + + moduleName: { + value: null }, collapsed: { @@ -63,10 +84,6 @@ exports.Panel = Montage.create(Component, { } }, - _resizedHeight: { - value: 0 - }, - locked: { get: function() { return this._locked; @@ -94,17 +111,21 @@ exports.Panel = Montage.create(Component, { prepareForDraw: { value: function() { - //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call; - this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); - var myContent; - var that = this; - - myContent = require.async(this.modulePath) - .then(function(panelContent) { - var componentRequire = panelContent[that.moduleName]; - that.contentComponent = componentRequire.create(); - }) - .end(); + if(this.name === "Color") { + this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + } + + if(this.modulePath && this.moduleName) { + console.log("load content"); + // Load the slot content + var that = this; + require.async(this.modulePath) + .then(function(panelContent) { + var componentRequire = panelContent[that.moduleName]; + that.panelContent.content = componentRequire.create(); + }) + .end(); + } } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html new file mode 100755 index 00000000..251e86e4 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -0,0 +1,110 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js new file mode 100755 index 00000000..51bd2df9 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -0,0 +1,193 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/* +Panel Container - A container for other panels +*/ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.PanelContainer = Montage.create(Component, { + + panelData: { + value: null + }, + + // This will hold the current loaded panels. + panels: { + value: [] + }, + + currentPanelState: { + value: {} + }, + + templateDidLoad: { + value: function() { + + var pLen, storedData; + + // Loop through the panels to add to the repetition and get the saved state + pLen = this.panelData.panels.length; + + // Get the saved panel state + storedData = this.application.localStorage.getItem("panels"); + + for(var i = 0; i < pLen; i++) { + + var p = this.panelData.panels[i]; + + this['panel_'+i].name = p.name; + this['panel_'+i].height = p.height; + this['panel_'+i].minHeight= p.minHeight; + this['panel_'+i].maxHeight = p.maxHeight; + this['panel_'+i].flexible = p.flexible; + this['panel_'+i].modulePath = p.modulePath; + this['panel_'+i].moduleName = p.moduleName; + + this.currentPanelState[p.name] = {}; + this.currentPanelState.version = "1.0"; + + if(storedData && storedData[p.name]) { + this['panel_'+i].collapsed = storedData[p.name].collapsed; + } + + this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; + + // Check if current panel is open when feature is enabled + this.panels.push(p); + } + + this.application.localStorage.setItem("panels", this.currentPanelState); + + + } + }, + + prepareForDraw: { + value: function() { + window.addEventListener("resize", this, false); + } + }, + + handlePanelResizing: { + value: function(e) { + this._setPanelsSizes(e.target); + } + }, + + handleResize: { + value: function(e) { + this._setPanelsSizes(null); + } + }, + + handleDropped: { + value: function(e) { + var draggedIndex, droppedIndex = 0; + for(var i = 0; i< this.repeater.childComponents.length; i++ ) { + if (this.repeater.childComponents[i] === e._event.draggedComponent) { + draggedIndex = i; + } + + 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 len = this.panels.length, setLocked = true; + + for(var i = 0; i < len; i++) { + if(this['panel_'+i] === panelActivated || panelActivated === null) { + setLocked = false; + } + + this['panel_'+i].locked = setLocked; + this['panel_'+i].needsDraw = true; + } + } + }, + + _redrawPanels: { + value: function(panelActivated, unlockPanels) { + var maxHeight = this.element.offsetHeight, setLocked = true; + var len = this.panels.length; + + if(unlockPanels === true) { + setLocked = false; + } + + var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; + + for(var i = 0; i < len; i++) { + var obj = this['panel_'+i]; + + if(obj === panelActivated) { + setLocked = false; + } else if(obj.collapsed) { + //Collapsed Ignore the rest of the code + } else { + if (setLocked) { + if((maxHeight - childrensMinHeights) - obj.height > 0 ) { + childrensMinHeights += obj.height - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); + } + } else { + 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); + } + } + } + obj.locked = setLocked; + } + } + }, + + handleAction: { + value: function(e) { + 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; + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html deleted file mode 100755 index 76f6b9c4..00000000 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - - - - - -
-
-
-
-
- - \ No newline at end of file diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js deleted file mode 100755 index 3a141b05..00000000 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ /dev/null @@ -1,180 +0,0 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -/* -Panel Container - A container for other panels -*/ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -exports.PanelContainer = Montage.create(Component, { - - panelData: { - value: null - }, - - panels: { - value: [] - }, - - panelController: { - value: null - }, - - currentPanelState: { - value: {} - }, - - templateDidLoad: { - value: function() { - var pLen, storedData; - - // Loop through the panels to add to the repetition and get the saved state - pLen = this.panelData.panels.length; - - // Get the saved panel state - storedData = this.application.localStorage.getItem("panels"); - - for(var i = 0; i < pLen; i++) { - - var p = this.panelData.panels[i]; - - this.currentPanelState[p.name] = {}; - this.currentPanelState.version = "1.0"; - - if(storedData && storedData[p.name]) { - p.collapsed = storedData[p.name].collapsed; - } - - this.currentPanelState[p.name].collapsed = p.collapsed; - - this.panels.push(p); - } - - this.application.localStorage.setItem("panels", this.currentPanelState); - } - }, - - prepareForDraw: { - value: function() { - window.addEventListener("resize", this, false); - } - }, - - handlePanelResizing: { - value: function(e) { - this._setPanelsSizes(e.target); - } - }, - - handleResize: { - value: function(e) { - this._setPanelsSizes(null); - } - }, - - handleDropped: { - value: function(e) { - var draggedIndex, droppedIndex = 0; - for(var i = 0; i< this.repeater.childComponents.length; i++ ) { - if (this.repeater.childComponents[i] === e._event.draggedComponent) { - draggedIndex = i; - } - - 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; - } - - obj.locked = setLocked; - obj.needsDraw = true; - }); - } - }, - - _redrawPanels: { - value: function(panelActivated, unlockPanels) { - var maxHeight = this.element.offsetHeight; - var setLocked = true; - if(unlockPanels === true) { - setLocked = false; - } - - var childrensMinHeights = ((this.repeater.childComponents.length - 1) * 26) + panelActivated.minHeight; - - this.repeater.childComponents.forEach(function(obj) { - if(obj === panelActivated) { - setLocked = false; - } else if(obj.collapsed) { - //Collapsed Ignore the rest of the code - } else { - if (setLocked) { - if((maxHeight - childrensMinHeights) - obj.height > 0 ) { - childrensMinHeights += obj.height - 26; - } else { - this.currentPanelState[obj.name].collapsed = obj.collapsed = true; - this.application.localStorage.setItem("panels", this.currentPanelState); - } - } else { - 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); - } - } - } - obj.locked = setLocked; - }, this); - } - }, - - handleAction: { - value: function(e) { - 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; - } - } - } - -}); \ No newline at end of file -- cgit v1.2.3 From 4c16cf1d8085c70e1ed8fb2098954311bc22f81f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:33:51 -0800 Subject: remove console log Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index be03d019..2b308258 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -116,7 +116,6 @@ exports.Panel = Montage.create(Component, { } if(this.modulePath && this.moduleName) { - console.log("load content"); // Load the slot content var that = this; require.async(this.modulePath) -- cgit v1.2.3 From 4e35725e6c9044c37bef28b8c8d36f4b5c89bfd9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 23:18:31 -0800 Subject: Adding drag and drop Signed-off-by: Valerio Virgillito --- js/panels/PanelContainer.reel/PanelContainer.js | 22 +++++++++++++--------- js/panels/drag-drop-composer.js | 2 +- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 51bd2df9..dd720bd3 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -58,7 +58,7 @@ exports.PanelContainer = Montage.create(Component, { this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; // Check if current panel is open when feature is enabled - this.panels.push(p); + this.panels.push(this['panel_'+i]); } this.application.localStorage.setItem("panels", this.currentPanelState); @@ -87,20 +87,24 @@ exports.PanelContainer = Montage.create(Component, { handleDropped: { value: function(e) { - var draggedIndex, droppedIndex = 0; - for(var i = 0; i< this.repeater.childComponents.length; i++ ) { - if (this.repeater.childComponents[i] === e._event.draggedComponent) { - draggedIndex = i; + var draggedIndex, droppedIndex = 0, len = this.panels.length; + +// console.log(e._event.draggedComponent); + for(var i = 0; i < len; i++) { + if(this.panels[i].name === e._event.draggedComponent.name) { + draggedIndex = i; // Actual component being dragged } - if (this.repeater.childComponents[i] === e._event.droppedComponent) { + if(this.panels[i].name === e._target.name) { droppedIndex = i; } } - var panelRemoved = this.panelController.content.splice(draggedIndex,1); - this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); - //console.log(draggedIndex, droppedIndex); + if(draggedIndex !== droppedIndex) { + // switch panels + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + } + this._setPanelsSizes(null); } }, diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index e09f601d..b36c8334 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -10,7 +10,7 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.DragDropComposer = Montage.create(Composer, { draggable: { - value: false // TODO: Turning this off until color Panel bug fixes are in + value: true }, droppable: { -- cgit v1.2.3