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