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.js | 193 ++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100755 js/panels/PanelContainer.reel/PanelContainer.js (limited to 'js/panels/PanelContainer.reel/PanelContainer.js') 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/PanelContainer.js') 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