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/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 ++++++++++++++ 18 files changed, 2737 insertions(+) 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 (limited to 'js/panels/properties.reel') 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; +} + + +.propertiesPanel .fieldRow.twoCol div input[type='text'] { + width:38px; + display: inline-block; +} +.propertiesPanel .fieldRow.twoCol div .inputField { + width:38px; +} + +.propertiesPanel input[type='text'][readonly], .propertiesPanel input[type='text'][readonly]:focus { + border: none; + background: none; + -webkit-box-shadow:none; +} + +.propertiesPanel h2 { + background: #3E3E3E; + font-size:11px; + height:16px; + line-height: 17px; + display:-webkit-box; + -webkit-box-orient:horizontal; + margin: 0px; + border-bottom: 1px solid #3A3A3A; +} +.propertiesPanel .subSectionHeader .arrow { + -webkit-box-flex:0; + margin: 0px 10px; +} + +.propertiesPanel .subSectionHeader .arrowIcon { + background: url("data:image/png;base64,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") 0px 0px no-repeat; + -webkit-background-size:cover; + width:15px; + height:15px; +} + +.propertiesPanel .subSectionHeader.collapsed .arrowIcon { + -webkit-transform: rotate(-90deg); +} + +.propertiesPanel .sectional { + padding: 4px; +} + +.propertiesPanel .animated { + -webkit-transition: 0.2s all linear; +} + +.propertiesPanel div.collapsed { + padding: 0px !important; + height:0px !important; + overflow: hidden; +} + +.propertiesPanel .subSectionHeader section { + -webkit-box-flex:1; +} + +.propertiesPanel { + text-shadow: 1px 1px 1px #000; +} + +/* Dropdown layout */ +.propertiesPanel select { + -webkit-appearance: none; + font-size: 10px; + color: white; + background-color: #444; + border: 1px solid #313131; + width: 100%; + -webkit-box-sizing: border-box; + height: 15px; + outline: none; + background-image: url("../../../images/dropdown-bg.png"); + background-repeat: no-repeat; + background-position: right center; + border-radius: 0px; + padding-left:5px; +} + +/* File Input Field */ +.propertiesPanel .file { + display:-webkit-box; +} +.propertiesPanel .file input { + -webkit-box-flex:1; + width:auto; + display: block; +} +.propertiesPanel .file .source { + border: 1px solid #313131; + background-color: #444; + color:#FFF; + height:16px; + width:20px; + -webkit-box-flex:0; + cursor: pointer; + padding: 0px; +} + +.propertiesPanel .file .source:hover { + background-color:#555; +} + +.propertiesPanel .file .source:active { + background-color: #666; +} + +/* Checkbox layout */ + +.propertiesPanel .fieldRow.checkbox div .inputField { + width:25px; +} + +.propertiesPanel .fieldRow.colorSelect { + height: 20px; +} + +.propertiesPanel .colortoolbar { + width: 105px; + float:left; +} + +.propertiesPanel .colortoolbar div { + margin: 0px 10px 0px 20px; + clear:none; +} + +/* color select */ +.propertiesPanel .colortoolbar button { + width:40px; + height:20px; + clear:none; +} + +.propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp { + position: absolute; + left: 105px; + border: none; + background-color: transparent; + top: 2px; + opacity: 0.7; +} + +.propertiesPanel .button:active { + outline: none; +} + +.propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover { + opacity: 1; +} + +.propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { + position: relative; + overflow: visible; +} + +.propertiesPanel input[type="checkbox"].nj-skinned:checked::after, .propertiesPanel input[type="radio"].nj-skinned:checked::after { + content: ""; +} + +.propertiesPanel input[type="checkbox"].nj-skinned:checked::before { + content: "✔"; +} + +.propertiesPanel input[type="radio"].nj-skinned:checked::before { + content: "•"; +} + +.propertiesPanel input.nj-skinned label { + position: absolute; + top: 0; + left: 15px; + font-size: 10px; + width:55px; + text-align: left; + font-weight: normal; + color:#FFF; +} + +.propertiesPanel input[type='radio'].nj-skinned { + text-indent: 0px; + line-height: 5px; +} + +.propertiesPanel input[type='radio'].nj-skinned label { + left:15px; +} + +input label { + -webkit-user-select: none; +} + +.propertiesPanel .rotation > label { + padding-left:40px; + padding-right:5px; +} + +.propertiesPanel .rotation .fieldRow { + -webkit-box-flex:0; + width:45px; +} \ No newline at end of file diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html new file mode 100755 index 00000000..d903d8ed --- /dev/null +++ b/js/panels/properties.reel/properties.html @@ -0,0 +1,161 @@ + + + + + + + + + +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js new file mode 100755 index 00000000..1fa65075 --- /dev/null +++ b/js/panels/properties.reel/properties.js @@ -0,0 +1,394 @@ +/* +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, + Component = require("montage/ui/component").Component, + PiData = require("js/data/pi/pi-data").PiData, + CustomSection = require("js/panels/properties.reel/sections/custom.reel").CustomSection; + +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + +exports.Properties = Montage.create(Component, { + + elementName: { + value: null + }, + + elementID: { + value: null + }, + + elementClassName: { + value: null + }, + + customSections: { + value: [] + }, + + _customPi: { + value: null + }, + + customPi: { + get: function() { + return this._customPi; + }, + set: function(value) { + if(this._customPi !== value) { + this._customPi = value; + } + } + }, + + prepareForDraw: { + value : function() { + + this.eventManager.addEventListener("selectionChange", this, false); + + // This will be a toggle option + if(this.application.ninja.appData.PILiveUpdate) { + this.eventManager.addEventListener( "elementChanging", this, false); + } + + this.eventManager.addEventListener("openDocument", this, false); + this.eventManager.addEventListener("switchDocument", this, false); + } + }, + + // Document is opened - Display the current selection + handleOpenDocument: { + value: function() { + + this.eventManager.addEventListener( "elementChange", this, false); + + // For now always assume that the stage is selected by default + if(this.application.ninja.selectedElements.length === 0) { + this.displayStageProperties(); + } + + this.elementId.element.addEventListener("blur", this, false); + this.elementId.element.addEventListener("keyup", this, false); + } + }, + + handleSwitchDocument: { + value: function(){ + // For now always assume that the stage is selected by default + if(this.application.ninja.selectedElements.length === 0) { + this.displayStageProperties(); + }else { + if(this.application.ninja.selectedElements.length === 1) { + this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + } else { + this.displayGroupProperties(this.application.ninja.selectedElements); + } + } + } + }, + + /** + * Blur and Key up to handle change in the Element ID field. + */ + 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); + } + } + }, + + handleKeyup: { + value: function(event) { + if(event.keyCode === 13) { + this.elementId.element.blur(); + } + } + }, + + handleElementChanging: { + value: function(event) { +// this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); +// this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); + } + }, + + handleElementChange: { + value: function(event) { +// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update + if(event.detail.source && event.detail.source !== "pi") { + // TODO - This should only update the properties that were changed. + var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } + } + } + }, + + handleSelectionChange: { + value: function(event) { + if(event.detail.isDocument) { + this.displayStageProperties(); + } else { + if(this.application.ninja.selectedElements.length === 1) { + this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + } else { + this.displayGroupProperties(this.application.ninja.selectedElements); + } + + } + } + }, + + displayStageProperties: { + value: function() { + var stage = this.application.ninja.currentDocument.documentRoot; + //this is test code please remove + this.elementName = "Stage"; + this.elementId.value = stage.elementModel.id; + this.elementClassName = ""; + + this.positionSize.disablePosition = true; + this.threeD.disableTranslation = true; + + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); + + if(this.customPi !== stage.elementModel.pi) { + // We need to unregister color chips from the previous selection from the Color Model + var len = this.customSections.length; + for(var n = 0, controls; n < len; n++) { + controls = this.customSections[n].content.controls; + if(controls["colorSelect"]) { + controls["colorSelect"].destroy(); + } else if(controls["stageBackground"]) { + controls["stageBackground"].destroy(); + } + } + + this.customPi = stage.elementModel.pi; + this.displayCustomProperties(stage, stage.elementModel.pi); + } + + // For now hardcode the background since it is the only custom property + // No need to loop through all the properties. + var backgroundChip = this.customSections[0].content.controls["background"]; + backgroundChip.color = ElementsMediator.getProperty(stage, "background"); + + /* + var customPI = PiData[this.customPi]; + // Get all the custom section for the custom PI + for(var i = 0, customSec; customSec = customPI[i]; i++) { + + // Now set the Fields for the custom PI + for(var j = 0, fields; fields = customSec.Section[j]; j++) { + for(var k = 0, control; control = fields[k]; k++) { + + var colorChipEl = this.customSections[i].content.controls[control.id]; + this.foo = colorChipEl; + colorChipEl.addEventListener("firstDraw", this, false); + + } + } + } + */ + } + }, + + handleFirstDraw: { + value: function() { + this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); + } + }, + + displayElementProperties: { + value: function (el) { + var customPI, + currentValue; + + this.elementName = el.elementModel.selection; + this.elementId.value = el.getAttribute("id") || ""; + this.elementClassName = el.getAttribute("class"); + + this.positionSize.disablePosition = false; + this.threeD.disableTranslation = false; + + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } + + // Custom Section + if(this.customPi !== el.elementModel.pi) { + // We need to unregister color chips from the previous selection from the Color Model + var len = this.customSections.length; + for(var n = 0, controls; n < len; n++) { + controls = this.customSections[n].content.controls; + if(controls["colorSelect"]) { + controls["colorSelect"].destroy(); + } else if(controls["stageBackground"]) { + controls["stageBackground"].destroy(); + } + } + + this.customPi = el.elementModel.pi; + this.displayCustomProperties(el, el.elementModel.pi); + } + + customPI = PiData[this.customPi]; + // Get all the custom section for the custom PI + for(var i = 0, customSec; customSec = customPI[i]; i++) { + + // Now set the Fields for the custom PI + for(var j = 0, fields; fields = customSec.Section[j]; j++) { + for(var k = 0, control; control = fields[k]; k++) { + + if(control.type !== "color") { + currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); + if(currentValue === null) + { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; + } + else + { + currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); + if(control.prop === "border") + { + this.application.ninja.colorController.colorModel.input = "stroke"; + } + else if(control.prop === "background") + { + this.application.ninja.colorController.colorModel.input = "fill"; + } + + if(currentValue) + { + if(currentValue.color) + { + currentValue.color.wasSetByCode = true; + currentValue.color.type = "change"; + } + + if(currentValue.mode === "gradient") + { + this.application.ninja.colorController.colorModel["gradient"] = + {value: currentValue.color, wasSetByCode: true, type: 'change'}; + } + else + { + if (currentValue.color.a !== undefined) + { + this.application.ninja.colorController.colorModel.alpha = + {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; + } + if(currentValue.color.mode) + { + this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; + } + else + { + this.application.ninja.colorController.colorModel["rgb"] = currentValue.color; + } + } + } + else + { + this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; + this.application.ninja.colorController.colorModel.applyNoColor(); + } + } + } + } + } + } + }, + + displayGroupProperties: { + value: function (els) { + this.elementName = "Multiple Elements"; + } + }, + + displayCustomProperties: { + value: function() { + var customPI; + + this.customSections = []; + + customPI = PiData[this.customPi]; + + if(customPI) { + //Get all the custom sections for the custom PI + for(var i = 0, customSec; customSec = customPI[i]; i++) { + var customUI = CustomSection.create(); + customUI.fields = customSec.Section; + this.customSections.push({ + name: customSec.label, + content: customUI + }); + } + } + + for(var j = 0, customSections; customSections = this.customSections[j]; j++) { + customSections.content.addEventListener("propertyChange", this, false); + customSections.content.addEventListener("propertyChanging", this, false); + } + + } + }, + + handlePropertyChange: { + value: function(e) { + if(e.wasSetByCode) return; + + var newValue; + + e.units ? newValue = e.value + e.units : newValue = e.value; + + ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); + + } + }, + + handlePropertyChanging: { + value: function(e) { + if(e.wasSetByCode) return; + +// ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); + ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); + + + } + } + +}); diff --git a/js/panels/properties.reel/section.reel/section.html b/js/panels/properties.reel/section.reel/section.html new file mode 100755 index 00000000..b72a91b3 --- /dev/null +++ b/js/panels/properties.reel/section.reel/section.html @@ -0,0 +1,50 @@ + + + + + + + +
+

+
+
+

+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/section.reel/section.js b/js/panels/properties.reel/section.reel/section.js new file mode 100755 index 00000000..b246c171 --- /dev/null +++ b/js/panels/properties.reel/section.reel/section.js @@ -0,0 +1,30 @@ +/* +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 Component = require("montage/ui/component").Component; + +exports.Section = Montage.create(Component, { + + name: { + value: "Panel" + }, + + slot: { + value: null + }, + + content: { + value: null + }, + + prepareForDraw: { + value: function() { + this.element.getElementsByClassName("title")[0].innerHTML = this.name; + this.slot.content = this.content; + } + } +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html new file mode 100755 index 00000000..58a50a0d --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html @@ -0,0 +1,53 @@ + + + + + + + +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js new file mode 100755 index 00000000..3e81ff67 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js @@ -0,0 +1,83 @@ +/* +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 Component = require("montage/ui/component").Component; + +exports.ColorSelect = Montage.create(Component, { + + Stroke: { + value: null + }, + + Fill: { + value: null + }, + + strokeChip: { + value: null + }, + + fillChip: { + value: null + }, + + handleChange: { + value: function(e) { + + } + }, + + colorVisible: { + value: true + }, + + color2Visible: { + value: true + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) { + this.element.appendChild(document.createElement("hr")); + } + if (!this.colorVisible) { + this.Stroke.style.display = "none"; + } + + if (!this.color2Visible) { + this.Fill.style.display = "none"; + } + +// for (var i = 0; i < this.options.length; i ++ ) { +// var tmpOption = new Option(); +// tmpOption.text = this.options[i].name; +// tmpOption.value = this.options[i].value; +// if (i === this.selectedIndex) tmpOption.selected = true +// this.options[i].name = this.element.getElementsByTagName("select")[0].add(tmpOption); +// } + + } + }, + + destroy: { + value: function() { + if(this.strokeChip) + { + this.strokeChip.destroy(); + } + if(this.fillChip) + { + this.fillChip.destroy(); + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html new file mode 100755 index 00000000..be4ae431 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html @@ -0,0 +1,67 @@ + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js new file mode 100755 index 00000000..72d216ca --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js @@ -0,0 +1,53 @@ +/* +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 Component = require("montage/ui/component").Component; + +exports.DualRow = Montage.create(Component, { + id: { + value: null + }, + + label: { + value: null + }, + + label2:{ + value: null + }, + + content: { + value: null + }, + + content2: { + value: null + }, + + eventDelegate: { + value: null + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) this.element.appendChild(document.createElement("hr")); + if(this.label !== null) { + this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; + } + if(this.label2 !== null) { + this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; + } else { + this.element.getElementsByClassName("lbl")[1].style.display = "none"; + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html new file mode 100755 index 00000000..4de3f1ae --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html @@ -0,0 +1,47 @@ + + + + + + + +
+
+ +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js new file mode 100755 index 00000000..b606d6b8 --- /dev/null +++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js @@ -0,0 +1,50 @@ +/* +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 Component = require("montage/ui/component").Component; + +exports.SingleRow = Montage.create(Component, { + id: { + value: null + }, + + label: { + value: null + }, + + content: { + value: null + }, + + eventDelegate: { + value: null + }, + + + handleChange: { + value: function(event) { + } + }, + + handleChanging: { + value: function(event) { + this.eventDelegate({"type": "changing", "id": this.id, "prop": this.prop, "text": this.label, "value": this.value}); + } + }, + + divider: { + value: false + }, + + prepareForDraw: { + value: function() { + if (this.divider) this.element.appendChild(document.createElement("hr")); + if(this.label !== null) this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; + } + } + +}); \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom.reel/custom.html b/js/panels/properties.reel/sections/custom.reel/custom.html new file mode 100755 index 00000000..99a68264 --- /dev/null +++ b/js/panels/properties.reel/sections/custom.reel/custom.html @@ -0,0 +1,61 @@ + + + + + + + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js new file mode 100755 index 00000000..3c595980 --- /dev/null +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -0,0 +1,356 @@ +/* +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 Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + +//Custom Rows +var SingleRow = require("js/panels/properties.reel/sections/custom-rows/single-row.reel").SingleRow; +var DualRow = require("js/panels/properties.reel/sections/custom-rows/dual-row.reel").DualRow; +var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color-select.reel").ColorSelect; + +// Components Needed to make this work +var Hottext = require("js/components/hottextunit.reel").HotTextUnit; +var Dropdown = require("js/components/combobox.reel").Combobox; +var TextField = require("js/components/textfield.reel").TextField; +var FileInput = require("js/components/ui/file-input.reel").FileInput; +var Checkbox = require("js/components/checkbox.reel").Checkbox; +var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; + +exports.CustomSection = Montage.create(Component, { + + repeat: { + value: null + }, + + _fields: { + + }, + + fields: { + get: function() { + return this._fields; + }, + set: function(val) { + this.controls = {}; + this.rows = []; + this._fields = val; + for(var i=0; i < this._fields.length; i++) { + var tmpRow, fields; + if(this._fields[i].length === 1) { + fields = this._fields[i][0]; + tmpRow = SingleRow.create(); + tmpRow.content = this.generateObject(fields); + if (fields.label) tmpRow.label = fields.label; + if (fields.divider) tmpRow.divider = fields.divider; + this.rows.push(tmpRow); + } else if(this._fields[i].length === 2) { + + var obj1 = this._fields[i][0]; + var obj2 = this._fields[i][1]; + + + if (obj1.type == "color" && obj2.type == "color") { + tmpRow = Montage.create(ColorSelect); + if(obj1.visible === false) tmpRow.colorVisible = obj1.visible; + if(obj2.visible === false) tmpRow.color2Visible = obj2.visible; + + // TODO - Hack for now to reference the color select object to unregister color chips + this.controls["colorSelect"] = tmpRow; + } + else + { + tmpRow = DualRow.create(); + if (obj1.label) tmpRow.label = obj1.label; + if (obj2.label) tmpRow.label2 = obj2.label; + tmpRow.content = this.generateObject(obj1); + tmpRow.content2 = this.generateObject(obj2); + } + + if (obj1.divider === true || obj2.divider === true) tmpRow.divider = true; + this.rows.push(tmpRow); + + } else if(this._fields[i].length === 3) { + + } + + } + } + + }, + + rows: { + value: [] + }, + + controls: { + value:{} + }, + + handleChanging: { + value:function(event) { + var obj = event.currentTarget; + this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); + } + }, + + handleChange: { + value:function(event) { + if(event._event.wasSetByCode) return; + + var obj = event.currentTarget; + this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); + } + }, + + /** + * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip + */ + handleColorChange: { + value: function(event) { + // Change the stage color for now + //console.log(this, event); + ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", ''); + /* + var propEvent = document.createEvent("CustomEvent"); + propEvent.initEvent("propertyChange", true, true); + propEvent.type = "propertyChange"; + + propEvent.prop = "background";//event.prop; + propEvent.value = event._event.color.css; + + this.dispatchEvent(propEvent); + */ + } + }, + + _dispatchPropEvent: { + value: function(event) { +// console.log(event); + var propEvent = document.createEvent("CustomEvent"); + if(event.type === "changing") + { + propEvent.initEvent("propertyChanging", true, true); + propEvent.type = "propertyChanging"; + } + else + { + propEvent.initEvent("propertyChange", true, true); + propEvent.type = "propertyChange"; + } + + propEvent.id = event.id; + propEvent.prop = event.prop; + propEvent.text = event.text; + propEvent.value = event.value; + + event.control.units ? propEvent.units = event.control.units : propEvent.units = ""; + + this.dispatchEvent(propEvent); + } + }, + + generateObject: { + value: function(fields) { + switch(fields.type) { + case "hottext" : return this.createHottext(fields); + case "dropdown" : return this.createDropdown(fields); + case "textbox" : return this.createTextField(fields); + case "file" : return this.createFileInput(fields); + case "checkbox" : return this.createCheckbox(fields); + case "chip" : return this.createColorChip(fields); + } + } + }, + + //Breaking Up Switch Case Statement to functions to return a row + createHottext: { + value: function(aField) { + + // Generate Hottext + var obj = Hottext.create(); + + // Set Values for HottextRow + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.acceptableUnits) obj.acceptableUnits = aField.acceptableUnits; + if (aField.unit) obj.units = aField.unit; + if (aField.min) obj._minValue = aField.min; + if (aField.max) obj._maxValue = aField.max; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + obj.addEventListener("changing", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + + createDropdown: { + value: function(aField) { + + //Generate Dropdown + var obj = Dropdown.create(); + + // Set Values for Dropdown + if (aField.id) obj.id = aField.id; + if (aField.prop) obj.prop = aField.prop; + if (aField.value) obj.value = aField.value; + if (aField.labelField) obj.labelField = aField.labelField; + if (aField.labelFunction) obj.labelFunction = aField.labelFunction; + if (aField.dataField) obj.dataField = aField.dataField; + if (aField.dataFunction) obj.dataFunction = aField.dataFunction; + if (aField.items) { + if(aField.items.boundObject) { + obj.items = eval(aField.items.boundObject)[aField.items.boundProperty]; + } else { + obj.items = aField.items; + } + } + if (aField.enabled) { + if(aField.enabled.boundObject) { + // TODO - For now, always bind to this.controls[someProperty] + Object.defineBinding(obj, "enabled", { + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); + } else { + obj.enabled = aField.enabled; + } + } + + obj.addEventListener("change", this, false); +// +// Object.defineBinding(obj, "value", { +// boundObject: this.controls, +// boundObjectPropertyPath: aField.id, +// oneway: false, +// boundValueMutator: function(value) { +// console.log("In the binding ", value); +// return value; +// } +// }); + + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value", + oneway: false + }); + + + obj.needsDraw = true; + + return obj; + } + }, + + createTextField: { + value: function(aField) { + + // Generate Textfield + var obj = TextField.create(); + + // Set Values for TextField + if (aField.id) obj.id = aField.id; + if (aField.value) obj.value = aField.value; + if (aField.prop) obj.prop = aField.prop; + + //Initiate onChange Events + obj.addEventListener("change", this, false); + + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id, { + boundObject: obj, + boundObjectPropertyPath: "value" + }); + + return obj; + } + }, + + createFileInput: { + value: function(aField) { + + // Generate Textfield + var obj = TextField.create(); + + // Set Values for TextField + if (aField.id) obj.id = aField.id; + if (aField.value)