From 0a500496236bedbdd9fbbcb3d841a195b3e5fc0f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 1 Mar 2012 13:38:44 -0800 Subject: stage and elements fixes - Resizing the iframe container when resizing the stage - Removing 3d rules from elements when adding them - Adding a name property in the pi Signed-off-by: Valerio Virgillito --- js/controllers/elements/stage-controller.js | 2 ++ js/mediators/element-mediator.js | 9 ++++---- js/panels/properties/content.reel/content.html | 21 +++++++++++++++++ js/panels/properties/content.reel/content.js | 31 +++++++++++++++++++++----- js/tools/TagTool.js | 10 ++++----- 5 files changed, 59 insertions(+), 14 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index abad3736..34bb1fb5 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -104,9 +104,11 @@ exports.StageController = Montage.create(ElementController, { el.elementModel.viewPort.style.setProperty(p, value); break; case "width": + this.application.ninja.currentDocument.iframe.width = parseInt(value) + 1400; el.elementModel.stageDimension.style.setProperty(p, value); break; case "height": + this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400; el.elementModel.stageDimension.style.setProperty(p, value); break; default: diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 127f73e1..60a75992 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -90,10 +90,11 @@ exports.ElementMediator = Montage.create(NJComponent, { _addElement: { value: function(el, rules, noEvent) { ElementController.addElement(el, rules); - var p3d = this.get3DProperties(el); - if(p3d) { - el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); - } + // Commenting this out because we should not add 3D properties by default when creating new elements. +// var p3d = this.get3DProperties(el); +// if(p3d) { +// el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); +// } if(!noEvent) { this.application.ninja.documentController.activeDocument.needsSave = true; NJevent("elementAdded", el); diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html index ab485323..bf11e215 100755 --- a/js/panels/properties/content.reel/content.html +++ b/js/panels/properties/content.reel/content.html @@ -58,6 +58,22 @@ } }, + "elementNameAttribute": { + "module": "montage/ui/textfield.reel", + "name": "Textfield", + "properties": { + "element": {"#": "elementNameAttribute"}, + "readOnly": false + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "nameAttribute", + "oneway": false + } + } + }, + "PosSizeSection": { "module": "js/panels/properties/section.reel", @@ -128,6 +144,7 @@ "element": {"#": "propertiesPanel"}, "elementNameInput": {"@": "elementNameInput1"}, "elementId": {"@": "elementID"}, + "elementNameAttribute": {"@": "elementNameAttribute"}, "positionSize": {"@": "PosSize"}, "threeD": {"@": "threeDProperties"} } @@ -150,6 +167,10 @@
+
+ +
+
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 72c02ffd..d4b0edc4 100755 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -25,6 +25,10 @@ exports.Content = Montage.create(Component, { value: null }, + nameAttribute: { + value: null + }, + customSections: { value: [] }, @@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, { this.elementId.element.addEventListener("blur", this, false); this.elementId.element.addEventListener("keyup", this, false); + + this.elementNameAttribute.element.addEventListener("blur", this, false); + this.elementNameAttribute.element.addEventListener("keyup", this, false); } }, @@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, { */ handleBlur: { value: function(event) { - if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); - } else { - ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); + console.log(event.target); + if(event.target.id === "elementID") { + if(this.application.ninja.selectedElements.length) { + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); + } else { + ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); + } + } else if(event.target.id === "elementNameAttribute") { + if(this.application.ninja.selectedElements.length) { + //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi"); + this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value); + } } } }, @@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, { handleKeyup: { value: function(event) { if(event.keyCode === 13) { - this.elementId.element.blur(); + if(event.target === "elementID") { + this.elementId.element.blur(); + } else if(event.target === "elementNameAttribute") { + this.elementNameAttribute.element.blur(); + } } } }, @@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, { this.elementName = "Stage"; this.elementId.value = stage.elementModel.id; this.elementClassName = ""; + this.nameAttribute = ""; this.positionSize.disablePosition = true; this.threeD.disableTranslation = true; @@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, { this.elementName = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; this.elementClassName = el.getAttribute("class"); + this.nameAttribute = el.getAttribute("name") || ""; this.positionSize.disablePosition = false; this.threeD.disableTranslation = false; diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index e3f49bbe..39667aa7 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -232,9 +232,9 @@ exports.TagTool = Montage.create(DrawingTool, { styles = { 'position': 'absolute', 'top' : top + 'px', - 'left' : left + 'px', - '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : matStr + 'left' : left + 'px' +// '-webkit-transform-style' : 'preserve-3d', +// '-webkit-transform' : matStr }; // TODO - for canvas, set both as style and attribute. @@ -254,8 +254,8 @@ exports.TagTool = Montage.create(DrawingTool, { makeStaticElement: { value: function(tag) { var styles = { - "-webkit-transform-style": "preserve-3d", - "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" +// "-webkit-transform-style": "preserve-3d", +// "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" }; tag.innerHTML = "content"; -- cgit v1.2.3 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(functi