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(-) 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 --- css/ninja.css | 19 +- 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 ++++++ scss/imports/scss/_PanelUI.scss | 32 +- 51 files changed, 3610 insertions(+), 3311 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 diff --git a/css/ninja.css b/css/ninja.css index 7baf4204..f139c3b9 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -216,8 +216,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .montage-editor { padding: 0px; word-wrap: normal; } -.panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } - .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } .panelBackground { color: white; background: #292929; } @@ -606,13 +604,13 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } -.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; } +.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } .panel .resizeBar { height: 4px; cursor: row-resize; } .panels .panel { min-height: 25px; -webkit-box-flex: 0; display: -webkit-box; -webkit-box-orient: vertical; background: #282828; height: 200px; padding: 0px 2px; -webkit-box-sizing: border-box; } -.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; resize: vertical; overflow: auto; height: 200px; } +.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; overflow: auto; height: 200px; } .panel .panelBodyContent { -webkit-box-sizing: border-box; -webkit-box-align: stretch; position: absolute; height: 100%; width: 100%; } @@ -628,11 +626,11 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .panel .head.collapsed .arrowIcon { -webkit-transform: rotate(-90deg); } -.panel .head .closeBtn { background: url("data:image/png;base64,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") center center no-repeat; width: 25px; opacity: 0.4; cursor: pointer; } +.panel .head .closeBtn { background: url("data:image/png;base64,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") center center no-repeat; width: 25px; opacity: 0.4; cursor: pointer; display: none; } .panel .head .closeBtn:hover { opacity: 1; } -.panel .panelBody { border-right: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; -webkit-transition: all 0.1s linear; overflow: hidden; } +.panel .panelBody { border-right: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; overflow: hidden; } .panel .panelBodyContent { border: 1px solid #000; background: #474747; } @@ -642,15 +640,20 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .panel.collapsed .panelBody { overflow: hidden; height: 0px; } +.rightPanelContainer { -webkit-box-orient: vertical; display: -webkit-box; } + #rightPanelContainer .panel.collapsed { height: 26px !important; min-height: 26px !important; max-height: 26px !important; -webkit-box-flex: 0.01; overflow: hidden; } .panel.collapsed .arrowIcon { -webkit-transform: rotate(-90deg); } -#rightPanelContent { position: absolute; height: 100%; width: 100%; } +.rightPanelContent { position: absolute; height: 100%; width: 100%; } #rightPanelContainer .panel { -webkit-box-flex: 100; } -.over { border-top: 1px solid #0000FF; } +/* Drag & Drop Code TODO: Most likely need to be somewhere else */ +body section .dragging { opacity: 0.4; } + +body .main .dragOver:not(.dragging) { background-color: #917B56; } .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } 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.