diff options
Diffstat (limited to 'js/panels/properties.reel')
5 files changed, 100 insertions, 5 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index f82d3660..0928da3a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -47,6 +47,11 @@ padding-right:6px; | |||
47 | 47 | ||
48 | } | 48 | } |
49 | 49 | ||
50 | .propertiesPanel button.nj-skinned { | ||
51 | margin-left: -12px; | ||
52 | margin-top: -3px; | ||
53 | } | ||
54 | |||
50 | .propertiesPanel hr { | 55 | .propertiesPanel hr { |
51 | border: 0; | 56 | border: 0; |
52 | border-top: 1px solid #3c3c3c; | 57 | border-top: 1px solid #3c3c3c; |
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index d5acd503..d9dca538 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -113,13 +113,14 @@ exports.Properties = Montage.create(Component, { | |||
113 | } | 113 | } |
114 | 114 | ||
115 | if(this.application.ninja.selectedElements.length) { | 115 | if(this.application.ninja.selectedElements.length) { |
116 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); | 116 | // ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); |
117 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi"); | ||
117 | } else { | 118 | } else { |
118 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); | 119 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); |
119 | } | 120 | } |
120 | } else if(event.target.id === "elementClass") { | 121 | } else if(event.target.id === "elementClass") { |
121 | if(this.application.ninja.selectedElements.length) { | 122 | if(this.application.ninja.selectedElements.length) { |
122 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi"); | 123 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); |
123 | } else { | 124 | } else { |
124 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); | 125 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); |
125 | } | 126 | } |
@@ -146,8 +147,12 @@ exports.Properties = Montage.create(Component, { | |||
146 | value: function(event) { | 147 | value: function(event) { |
147 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 148 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update |
148 | if(event.detail.source && event.detail.source !== "pi") { | 149 | if(event.detail.source && event.detail.source !== "pi") { |
150 | var el = this.application.ninja.currentDocument.documentRoot; | ||
151 | if(this.application.ninja.selectedElements.length) { | ||
152 | el = this.application.ninja.selectedElements[0]; | ||
153 | } | ||
154 | |||
149 | // TODO - This should only update the properties that were changed. | 155 | // TODO - This should only update the properties that were changed. |
150 | var el = this.application.ninja.selectedElements[0]; | ||
151 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 156 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); |
152 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 157 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); |
153 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 158 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); |
@@ -194,6 +199,19 @@ exports.Properties = Montage.create(Component, { | |||
194 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); | 199 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); |
195 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); | 200 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); |
196 | 201 | ||
202 | if(this.threeD.inGlobalMode) | ||
203 | { | ||
204 | this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle"); | ||
205 | this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle"); | ||
206 | this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); | ||
207 | } | ||
208 | |||
209 | if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") { | ||
210 | this.threeD.flatten = false; | ||
211 | } else { | ||
212 | this.threeD.flatten = true; | ||
213 | } | ||
214 | |||
197 | if(this.customPi !== stage.elementModel.pi) { | 215 | if(this.customPi !== stage.elementModel.pi) { |
198 | // We need to unregister color chips from the previous selection from the Color Model | 216 | // We need to unregister color chips from the previous selection from the Color Model |
199 | var len = this.customSections.length; | 217 | var len = this.customSections.length; |
@@ -258,6 +276,11 @@ exports.Properties = Montage.create(Component, { | |||
258 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 276 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); |
259 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 277 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); |
260 | 278 | ||
279 | if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") { | ||
280 | this.threeD.flatten = false; | ||
281 | } else { | ||
282 | this.threeD.flatten = true; | ||
283 | } | ||
261 | 284 | ||
262 | if(this.threeD.inGlobalMode) | 285 | if(this.threeD.inGlobalMode) |
263 | { | 286 | { |
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index ac316907..876fe110 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js | |||
@@ -15,6 +15,7 @@ var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color- | |||
15 | 15 | ||
16 | // Components Needed to make this work | 16 | // Components Needed to make this work |
17 | var Hottext = require("js/components/hottextunit.reel").HotTextUnit; | 17 | var Hottext = require("js/components/hottextunit.reel").HotTextUnit; |
18 | var HT = require("js/components/hottext.reel").HotText; | ||
18 | var Dropdown = require("js/components/combobox.reel").Combobox; | 19 | var Dropdown = require("js/components/combobox.reel").Combobox; |
19 | var TextField = require("js/components/textfield.reel").TextField; | 20 | var TextField = require("js/components/textfield.reel").TextField; |
20 | var FileInput = require("js/components/ui/file-input.reel").FileInput; | 21 | var FileInput = require("js/components/ui/file-input.reel").FileInput; |
@@ -168,6 +169,7 @@ exports.CustomSection = Montage.create(Component, { | |||
168 | value: function(fields) { | 169 | value: function(fields) { |
169 | switch(fields.type) { | 170 | switch(fields.type) { |
170 | case "hottext" : return this.createHottext(fields); | 171 | case "hottext" : return this.createHottext(fields); |
172 | case "ht" : return this.createHT(fields); | ||
171 | case "dropdown" : return this.createDropdown(fields); | 173 | case "dropdown" : return this.createDropdown(fields); |
172 | case "textbox" : return this.createTextField(fields); | 174 | case "textbox" : return this.createTextField(fields); |
173 | case "file" : return this.createFileInput(fields); | 175 | case "file" : return this.createFileInput(fields); |
@@ -178,6 +180,33 @@ exports.CustomSection = Montage.create(Component, { | |||
178 | } | 180 | } |
179 | }, | 181 | }, |
180 | 182 | ||
183 | createHT: { | ||
184 | value: function(aField) { | ||
185 | |||
186 | // Generate Hottext | ||
187 | var obj = HT.create(); | ||
188 | |||
189 | // Set Values for HottextRow | ||
190 | if (aField.id) obj.id = aField.id; | ||
191 | if (aField.value) obj.value = aField.value; | ||
192 | if (aField.min) obj._minValue = aField.min; | ||
193 | if (aField.max) obj._maxValue = aField.max; | ||
194 | if (aField.prop) obj.prop = aField.prop; | ||
195 | |||
196 | //Initiate onChange Events | ||
197 | obj.addEventListener("change", this, false); | ||
198 | obj.addEventListener("changing", this, false); | ||
199 | |||
200 | //Bind object value to controls list so it can be manipulated | ||
201 | Object.defineBinding(this.controls, aField.id, { | ||
202 | boundObject: obj, | ||
203 | boundObjectPropertyPath: "value" | ||
204 | }); | ||
205 | |||
206 | return obj; | ||
207 | } | ||
208 | }, | ||
209 | |||
181 | //Breaking Up Switch Case Statement to functions to return a row | 210 | //Breaking Up Switch Case Statement to functions to return a row |
182 | createHottext: { | 211 | createHottext: { |
183 | value: function(aField) { | 212 | value: function(aField) { |
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html index 18a7369e..b6c25baf 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html | |||
@@ -22,7 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
22 | "xAngleControl": {"@": "threeDRotX"}, | 22 | "xAngleControl": {"@": "threeDRotX"}, |
23 | "yAngleControl": {"@": "threeDRotY"}, | 23 | "yAngleControl": {"@": "threeDRotY"}, |
24 | "zAngleControl": {"@": "threeDRotZ"}, | 24 | "zAngleControl": {"@": "threeDRotZ"}, |
25 | "axisModeGroupControl": {"@": "axisModeGroup"} | 25 | "axisModeGroupControl": {"@": "axisModeGroup"}, |
26 | "flattenControl": {"@": "flattenCheckbox"} | ||
26 | } | 27 | } |
27 | }, | 28 | }, |
28 | 29 | ||
@@ -242,6 +243,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
242 | "value": "Global", | 243 | "value": "Global", |
243 | "group": {"@": "axisModeGroup"} | 244 | "group": {"@": "axisModeGroup"} |
244 | } | 245 | } |
246 | }, | ||
247 | "flattenCheckbox": { | ||
248 | "module": "montage/ui/checkbox.reel", | ||
249 | "name": "Checkbox", | ||
250 | "properties": { | ||
251 | "element": {"#": "flattenCh"}, | ||
252 | "identifier": "flatten", | ||
253 | "checked": false | ||
254 | }, | ||
255 | "bindings": { | ||
256 | "checked": { | ||
257 | "boundObject": {"@": "owner"}, | ||
258 | "boundObjectPropertyPath": "flatten", | ||
259 | "oneway": false | ||
260 | } | ||
261 | }, | ||
262 | "listeners": [ | ||
263 | { | ||
264 | "type": "action", | ||
265 | "listener": {"@": "owner"}, | ||
266 | "capture": false | ||
267 | } | ||
268 | ] | ||
245 | } | 269 | } |
246 | } | 270 | } |
247 | </script> | 271 | </script> |
@@ -335,7 +359,7 @@ No rights, expressed or implied, whatsoever to this software are provided |