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 --- .../PanelContainer.reel/PanelContainer.js | 432 ++++++--------------- 1 file changed, 111 insertions(+), 321 deletions(-) (limited to 'js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js') 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.
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; -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 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 --- .../PanelContainer.reel/PanelContainer.js | 180 --------------------- 1 file changed, 180 deletions(-) delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js (limited to 'js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js') 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