From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- .../PanelContainer.reel/PanelContainer.js | 382 +++++++++++++++++++++ 1 file changed, 382 insertions(+) create mode 100644 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 new file mode 100644 index 00000000..57187af1 --- /dev/null +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -0,0 +1,382 @@ +/* +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; + +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: { + value: null + }, + + initPanelOrder: { + value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel'] + }, + + panelOrder: { + value: [] + }, + + deserializedFromTemplate : { + value: function() { + this.eventManager.addEventListener( "appLoaded", this, false); + + } + }, + + handleAppLoaded: { + value: function() { + //Panels Loading + this.lastOffset = this.element.offsetHeight; + if( this.application.ninja.settings.getSetting(this.element.id, "panelOrder") != null) { + this.initPanelOrder = this.application.ninja.settings.getSetting(this.element.id, "panelOrder") + } + // 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]); + this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder); + } + + var hideSplitter = true; + + var that = this; + this._panels.forEach(function(obj) { + + var panelMenuName = obj.panelName.substring(0, obj.panelName.indexOf('/') !== -1 ? obj.panelName.indexOf('/'): obj.panelName.length) + "Panel"; + + that.application.ninja.appModel[panelMenuName] = obj.visible; + + if (obj.visible) { + hideSplitter = false; + } + }); + + if (hideSplitter) { + this.panelSplitter.toggle(); + this.panelSplitter.disabled = true; + } + + this.needsDraw = true; + + 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); + } + }, + + handleEvent: { + value: function(e) { + this.togglePanel(e.propertyName); + } + }, + + addPanel: { + value: function(panel) { + if (panel.init) { + panel.init(); + } + this._panels.push(panel); + if (this.panelSplitter.disabled) { + this.panelSplitter.disabled = false; + this.panelSplitter.toggle(); + } + } + }, + handlePanelCollapsed: { + 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); + } + } + } + }, + + handlePanelResizedStart : { + 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); + } + } + } + }, + + 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(); + } + } + } + }, + + handlePanelResizing: { + value:function(e) { + this.resizedRedraw(); + } + }, + + canFlex: { + value: function(panel) { + if (panel.isStatic) { + return false; + } + + return !(panel.collapsed || panel.forcedCollapse); + + } + }, + + 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; + } else { + if (i < selectedPanelIndex && needsLocks) { + this._panels[i].isLocked = true; + this.repeater.childComponents[i].needsDraw = true; + minHeights += this.repeater.childComponents[i].element.offsetHeight; + } else { + this._panels[i].isLocked = false; + this.repeater.childComponents[i].needsDraw = true; + minHeights += this._panels[i].minHeight; + } + } + } + // 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(); + } + } + } + } + this.handlePanelResized(); + } + }, + + handlePanelSelected: { + 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); + } + } + }, + + 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