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 --- js/data/panels-data.js | 141 +++++++ js/ninja.reel/ninja.html | 4 +- js/panels/Color/colorpanel.js | 11 +- .../Color/colorpanelbase.reel/colorpanelbase.js | 13 + js/panels/Panel.reel/Panel.html | 116 +++++- js/panels/Panel.reel/Panel.js | 279 ++++++------- .../PanelContainer.reel/PanelContainer.html | 116 +++++- .../PanelContainer.reel/PanelContainer.js | 432 ++++++--------------- js/panels/Resizer.js | 10 +- js/panels/Timeline/Layer.reel/Layer.js | 2 +- js/panels/drag-drop-composer.js | 136 +++++++ js/panels/properties.reel/properties.css | 299 ++++++++++++++ js/panels/properties.reel/properties.html | 161 ++++++++ js/panels/properties.reel/properties.js | 394 +++++++++++++++++++ .../properties.reel/section.reel/section.html | 50 +++ js/panels/properties.reel/section.reel/section.js | 30 ++ .../color-select.reel/color-select.html | 53 +++ .../custom-rows/color-select.reel/color-select.js | 83 ++++ .../custom-rows/dual-row.reel/dual-row.html | 67 ++++ .../sections/custom-rows/dual-row.reel/dual-row.js | 53 +++ .../custom-rows/single-row.reel/single-row.html | 47 +++ .../custom-rows/single-row.reel/single-row.js | 50 +++ .../sections/custom.reel/custom.html | 61 +++ .../properties.reel/sections/custom.reel/custom.js | 356 +++++++++++++++++ .../position-and-size.reel/position-and-size.css | 14 + .../position-and-size.reel/position-and-size.html | 142 +++++++ .../position-and-size.reel/position-and-size.js | 264 +++++++++++++ .../sections/three-d-view.reel/three-d-view.html | 348 +++++++++++++++++ .../sections/three-d-view.reel/three-d-view.js | 265 +++++++++++++ js/panels/properties/content.reel/content.css | 299 -------------- js/panels/properties/content.reel/content.html | 161 -------- js/panels/properties/content.reel/content.js | 394 ------------------- js/panels/properties/properties-panel.js | 15 - js/panels/properties/section.reel/section.html | 50 --- js/panels/properties/section.reel/section.js | 30 -- .../color-select.reel/color-select.html | 53 --- .../custom-rows/color-select.reel/color-select.js | 83 ---- .../custom-rows/dual-row.reel/dual-row.html | 67 ---- .../sections/custom-rows/dual-row.reel/dual-row.js | 53 --- .../custom-rows/single-row.reel/single-row.html | 47 --- .../custom-rows/single-row.reel/single-row.js | 50 --- .../properties/sections/custom.reel/custom.html | 61 --- .../properties/sections/custom.reel/custom.js | 356 ----------------- .../position-and-size.reel/position-and-size.css | 14 - .../position-and-size.reel/position-and-size.html | 142 ------- .../position-and-size.reel/position-and-size.js | 264 ------------- .../sections/three-d-view.reel/three-d-view.html | 348 ----------------- .../sections/three-d-view.reel/three-d-view.js | 265 ------------- js/panels/resize-composer.js | 121 ++++++ 49 files changed, 3582 insertions(+), 3288 deletions(-) create mode 100644 js/data/panels-data.js create mode 100644 js/panels/drag-drop-composer.js create mode 100755 js/panels/properties.reel/properties.css create mode 100755 js/panels/properties.reel/properties.html create mode 100755 js/panels/properties.reel/properties.js create mode 100755 js/panels/properties.reel/section.reel/section.html create mode 100755 js/panels/properties.reel/section.reel/section.js create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.html create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.js create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js delete mode 100755 js/panels/properties/content.reel/content.css delete mode 100755 js/panels/properties/content.reel/content.html delete mode 100755 js/panels/properties/content.reel/content.js delete mode 100755 js/panels/properties/properties-panel.js delete mode 100755 js/panels/properties/section.reel/section.html delete mode 100755 js/panels/properties/section.reel/section.js delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.html delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.js delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.html delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.js delete mode 100755 js/panels/properties/sections/custom.reel/custom.html delete mode 100755 js/panels/properties/sections/custom.reel/custom.js delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.css delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.html delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.js delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.html delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.js create mode 100644 js/panels/resize-composer.js (limited to 'js') diff --git a/js/data/panels-data.js b/js/data/panels-data.js new file mode 100644 index 00000000..aa5057a2 --- /dev/null +++ b/js/data/panels-data.js @@ -0,0 +1,141 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage; + +exports.PanelsData = Montage.create(Montage, { + + panels: { + value: [ + { + name: "Color", + height: 200, + minHeight: 200, + maxHeight: null, + flexible: false, + scrollable: false, + collapsed: false, + open: true, + contentComponent: null, + modulePath: "js/panels/Color/colorpanelbase.reel", + moduleName: "ColorPanelBase" + }, + { + name: "Properties", + minHeight: 200, + height: 200, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: false, + open: true, + contentComponent: null, + modulePath: "js/panels/properties.reel", + moduleName: "Properties" + }, + { + name: "Materials", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + contentComponent: null, + modulePath: "js/panels/Materials/materials-library-panel.reel", + moduleName: "MaterialsLibraryPanel" + }, + { + name: "Components", + minHeight: 100, + height: 200, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: true, + open: true, + contentComponent: null, + modulePath: "js/panels/Components/ComponentsPanelBase.reel", + moduleName: "ComponentsPanelBase" + }, +// { +// name: "Project/Assets", +// minHeight: 250, +// height: 250, +// maxHeight: null, +// flexible: true, +// scrollable: true, +// collapsed: false, +// open: true, +// content: null, +// modulePath: "js/panels/Project/projectpanelbase.reel", +// moduleName: "ProjectPanelBase" +// }, + { + name: "CSS", + minHeight: 195, + height: 195, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: true, + open: true, + contentComponent: null, + modulePath: "js/panels/CSSPanel/CSSPanelBase.reel", + moduleName: "CSSPanelBase" + }, + { + name: "Presets", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + contentComponent: null, + modulePath: "js/panels/presets/content.reel", + moduleName: "content" + } + ] + } + + + /* + _panelOrder: { + value: ["Properties","Color","Components","Project/Assets", "CSS","Materials"] + }, + + panelOrder: { + get: function() { + return this._panelOrder; + }, + set: function(val) { + this._panelOrder = val; + } + } + + + panels: { + get: function() { + var filtered = this._panels.filter(function(item) { + return item.open; + }); + + filtered.sort(function(a,b) { + a.name + }); + + return filtered; + }, + set : function() { + + } + } + */ + +}); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index a20a6090..112f844e 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -389,8 +389,8 @@
-
-
+
+
diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js index 4858be68..3a603e98 100755 --- a/js/panels/Color/colorpanel.js +++ b/js/panels/Color/colorpanel.js @@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, { //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// //TODO: Remove and add via toolbar draw loop - this.application.ninja.colorController.createToolbar(); + //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// @@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, { }, //////////////////////////////////////////////////////////////////// //Applying default colors only on first draw - handleFirstDraw: { - enumerable: true, - value: function (e) { - // - this.content.applyDefaultColors(); - this.content.removeEventListener('firstDraw', this, false); - } - } + //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// }); \ No newline at end of file diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js index ff738bbe..af62dd07 100755 --- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js @@ -117,10 +117,23 @@ exports.ColorPanelBase = Montage.create(Component, { enumerable: false, value: function() { //TODO: Remove temporary hack, color history should be initilized + this.addEventListener('firstDraw', this, false); + this.application.ninja.colorController.colorView = this; this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}]; this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}]; } }, + + handleFirstDraw: { + enumerable: true, + value: function (e) { + // + this.application.ninja.colorController.createToolbar(); + this.applyDefaultColors(); + this.removeEventListener('firstDraw', this, false); + } + }, + //////////////////////////////////////////////////////////////////// //Assigning values and binding willDraw: { diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 7556952c..04e2930a 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html @@ -8,22 +8,86 @@ @@ -55,7 +139,7 @@
-
+
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 diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js index ca6ed062..0252c4fb 100755 --- a/js/panels/Resizer.js +++ b/js/panels/Resizer.js @@ -90,16 +90,22 @@ exports.Resizer = Montage.create(Component, { return this._panel; }, set: function(val) { - this._panel = val + this._panel = val; + if(val._element) this._panel = val._element; } }, + + height: { + value: null + }, handleClick: { value: function() { } }, - + + handleMousedown: { value: function(e) { e.preventDefault(); diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index d50360e6..e3897bbf 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -491,7 +491,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { value: function() { - + // Coordinate the collapsers if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { this.mainCollapser.bypassAnimation = true; diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js new file mode 100644 index 00000000..e09f601d --- /dev/null +++ b/js/panels/drag-drop-composer.js @@ -0,0 +1,136 @@ +/* +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. + */ + +var Montage = require("montage/core/core").Montage; +var Composer = require("montage/ui/composer/composer").Composer; + +exports.DragDropComposer = Montage.create(Composer, { + + draggable: { + value: false // TODO: Turning this off until color Panel bug fixes are in + }, + + droppable: { + value: true + }, + + identifier: { + value: "generic" + }, + + _dragover: { + value: false + }, + + load: { + value: function() { + //TODO: to make this work even better check to see if this is a component or not + //right now it does not support data-montage id's + this.element.element.addEventListener("mouseover", this, true); + this.element.element.addEventListener("mouseout", this, true); + this.component.element.addEventListener("dragenter", this, true); + this.component.element.addEventListener("dragleave", this, true); + this.component.element.addEventListener("dragend", this, true); + this.component.element.addEventListener("drop", this, true); + this.component.element.addEventListener("dragover", this, true); + this.component.element.addEventListener("dragstart", this, true); + } + }, + + unload: { + value: function() { + this.element.element.removeEventListener("mouseover", this, true); + this.element.element.removeEventListener("mouseout", this, true); + this.component.element.removeEventListener("dragenter", this, true); + this.component.element.removeEventListener("dragleave", this, true); + this.component.element.removeEventListener("dragend", this, true); + this.component.element.removeEventListener("drop", this, true); + this.component.element.removeEventListener("dragover", this, true); + this.component.element.removeEventListener("dragstart", this, true); + } + }, + + captureMouseover: { + value: function(e) { + if(this.draggable) { + this.component.element.draggable = true; + } + } + }, + + captureMouseout: { + value: function(e) { + this.component.element.draggable = false; + } + }, + + /* ------ Drag Drop Events ------- */ + + // This Function will determine what is being moved + captureDragstart: { + value:function(e) { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('Text', this.identifier); + this.component.element.classList.add("dragging"); + this.component.application.ninja.componentBeingDragged = this.component; + } + }, + + captureDragenter: { + value: function(e) { + + } + }, + + captureDragover: { + value:function(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + if (!this._dragover) { + this._dragover = true; + this.component.element.classList.add("dragOver"); + } + } + }, + + captureDragleave: { + value: function(e) { + if (this._dragover) { + this._dragover = false; + this.component.element.classList.remove("dragOver"); + } + } + }, + + captureDrop: { + value:function(e) { + e.stopPropagation(); // Stops some browsers from redirecting. + e.preventDefault(); + if (this._dragover) { + this._dragover = false; + this.component.element.classList.remove("dragOver"); + if (this.identifier === e.dataTransfer.getData("Text")) { + if(this.component.application.ninja.componentBeingDragged !== this.component) { + dropEvent = document.createEvent("CustomEvent"); + dropEvent.initCustomEvent("dropped", true, false, null); + dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged; + dropEvent.droppedComponent = this.component; + this.component.dispatchEvent(dropEvent); + } + } + this.component.application.ninja.componentBeingDragged = null; + } + + } + }, + + captureDragend: { + value:function(e) { + this.component.element.classList.remove("dragging"); + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css new file mode 100755 index 00000000..f8d37984 --- /dev/null +++ b/js/panels/properties.reel/properties.css @@ -0,0 +1,299 @@ +/* + 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. + */ + +.propertiesPanel { + color:#FFF; + overflow-x: hidden; +} + +.propertiesPanel .fieldCol { + display: -webkit-box; + -webkit-box-orient:horizontal; + position:relative; +} + +.propertiesPanel .fieldCol > label { + -webkit-box-flex:0; + text-align: right; + width:46px; + display:block; + padding: 4px 2px 4px 5px; + height:16px; + line-height: 16px; +} + +.propertiesPanel .fieldRow label { +padding-right:6px; + width:20px; + display: inline-block; + text-align: right; +} + + +.propertiesPanel .fieldRow { + padding: 4px 10px 4px 5px; + height:16px; + line-height: 16px; + display:block; + -webkit-box-flex:1; +} + +.propertiesPanel .fieldRow.oneCol div, .propertiesPanel .fieldRow.twoCol div,.propertiesPanel .fieldRow.threeCol div { + -webkit-box-sizing: content-box; + float:left; + +} + +.propertiesPanel hr { + border: 0; + border-top: 1px solid #3c3c3c; + border-bottom: 1px solid #555; +} + +.propertiesPanel input[type='text'] { + width:100%; + padding: 1px; +} + +.propertiesPanel .montage-textfield { + padding: 1px; +} + +.propertiesPanel .fieldRow.threeCol div input[type='text'] { + width:34px; + display: inline-block; +} + +.propertiesPanel .hottextunit input { + width:38px; +} + +.propertiesPanel .fieldRow.threeCol div .inputField { + width:34px; +} +.propertiesPanel .fieldRow.twoCol label { + width:74px; + display: inline-block; + +} + +.propertiesPanel .fieldRow.oneCol label { + width:auto; + display: inline-block; + +} + +.propertiesPanel .fieldRow.oneCol div input[type='text'] { + width:34px; + display: inline-block; +} +.propertiesPanel .fieldRow.oneCol div .inputField { + width:34px; +} + + +.propertiesPane