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/panels/PanelContainer.reel/PanelContainer.html | 110 ++++++++++++ js/panels/PanelContainer.reel/PanelContainer.js | 193 ++++++++++++++++++++++ 2 files changed, 303 insertions(+) create mode 100755 js/panels/PanelContainer.reel/PanelContainer.html create mode 100755 js/panels/PanelContainer.reel/PanelContainer.js (limited to 'js/panels/PanelContainer.reel') 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 -- 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 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'js/panels/PanelContainer.reel') 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); } }, -- cgit v1.2.3 From c7b07a9663ac1553fb10d8541b25274e522e07f7 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 10:39:23 -0800 Subject: Fixed Collapsing and resizing window with panels Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 35 ++++++++++++++----------- 1 file changed, 19 insertions(+), 16 deletions(-) (limited to 'js/panels/PanelContainer.reel') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index dd720bd3..8cc303dc 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -81,7 +81,7 @@ exports.PanelContainer = Montage.create(Component, { handleResize: { value: function(e) { - this._setPanelsSizes(null); + this._redrawPanels(null, true); } }, @@ -104,8 +104,6 @@ exports.PanelContainer = Montage.create(Component, { // switch panels this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); } - - this._setPanelsSizes(null); } }, @@ -133,7 +131,10 @@ exports.PanelContainer = Montage.create(Component, { setLocked = false; } - var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; + var childrensMinHeights = (len * 26); + if (panelActivated) { + childrensMinHeights+= panelActivated.minHeight -26; + } for(var i = 0; i < len; i++) { var obj = this['panel_'+i]; @@ -169,25 +170,27 @@ exports.PanelContainer = Montage.create(Component, { var unlockPanels = true; var afterPanel = false; var panelName = e.target.parentComponent.name; + + this.panels.forEach(function(obj) { + if(afterPanel) { + if(obj.flexible && obj.collapsed === false) { + unlockPanels = false; + } + } + if (obj.name === panelName) { + afterPanel = true; + } + }); + 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._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.panelController.removeObjects(obj); this._redrawPanels(e.target.parentComponent, unlockPanels); break; } -- cgit v1.2.3 From e3a5626b21ac8b906638bed9eb96aca5fadd26d8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 11:41:10 -0800 Subject: Fixed: Collapsed panels would collapse panels below Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/PanelContainer.reel') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8cc303dc..3da9b44c 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -133,7 +133,9 @@ exports.PanelContainer = Montage.create(Component, { var childrensMinHeights = (len * 26); if (panelActivated) { - childrensMinHeights+= panelActivated.minHeight -26; + if (!panelActivated.collapsed) { + childrensMinHeights+= panelActivated.minHeight -26; + } } for(var i = 0; i < len; i++) { -- cgit v1.2.3 From d18d91946627c53c646a6f167855551a1891f8f4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 14:33:09 -0800 Subject: Reordering and resizing now works Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'js/panels/PanelContainer.reel') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 3da9b44c..b285b49d 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -47,6 +47,7 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].flexible = p.flexible; this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; + this['panel_'+i].index = i; this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -102,8 +103,21 @@ exports.PanelContainer = Montage.create(Component, { if(draggedIndex !== droppedIndex) { // switch panels - this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + if (droppedIndex === draggedIndex +1) { + if(this.panels[droppedIndex].element.nextSibling) { + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element.nextSibling); + } else { + return this.appendChild(this.panels[draggedIndex].element); + } + } else { + + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + } + var panelRemoved = this.panels.splice(draggedIndex, 1); + this.panels.splice(droppedIndex, 0, panelRemoved[0]); + } + } }, @@ -112,12 +126,12 @@ exports.PanelContainer = Montage.create(Component, { var len = this.panels.length, setLocked = true; for(var i = 0; i < len; i++) { - if(this['panel_'+i] === panelActivated || panelActivated === null) { + if(this.panels[i] === panelActivated || panelActivated === null) { setLocked = false; } - this['panel_'+i].locked = setLocked; - this['panel_'+i].needsDraw = true; + this.panels[i].locked = setLocked; + this.panels[i].needsDraw = true; } } }, -- cgit v1.2.3 From 84931583f1da8da29784074978f146b281b8efa3 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 16:08:36 -0800 Subject: Disabled state for panels Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'js/panels/PanelContainer.reel') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index b285b49d..c40bbc21 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -47,7 +47,7 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].flexible = p.flexible; this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; - this['panel_'+i].index = i; + this['panel_'+i].disabled = true; this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -65,6 +65,8 @@ exports.PanelContainer = Montage.create(Component, { this.application.localStorage.setItem("panels", this.currentPanelState); + this.eventManager.addEventListener( "onOpenDocument", this, false); + this.eventManager.addEventListener( "closeDocument", this, false); } }, @@ -85,6 +87,24 @@ exports.PanelContainer = Montage.create(Component, { this._redrawPanels(null, true); } }, + + handleOnOpenDocument: { + value: function(){ + this.panels.forEach(function(obj) { + obj.disabled = false; + }); + } + }, + + handleCloseDocument: { + value: function(){ + if(!this.application.ninja.documentController.activeDocument) { + this.panels.forEach(function(obj) { + obj.disabled = true; + }); + } + } + }, handleDropped: { value: function(e) { -- cgit v1.2.3