diff options
Diffstat (limited to 'js/panels/properties.reel')
9 files changed, 289 insertions, 53 deletions
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html index b9aa206b..a737bd39 100755 --- a/js/panels/properties.reel/properties.html +++ b/js/panels/properties.reel/properties.html | |||
@@ -13,24 +13,21 @@ | |||
13 | "elementName": { | 13 | "elementName": { |
14 | "prototype": "montage/ui/textfield.reel", | 14 | "prototype": "montage/ui/textfield.reel", |
15 | "properties": { | 15 | "properties": { |
16 | "element": {"#": "elementName"}, | 16 | "element": {"#": "elementName"} |
17 | "readOnly": true | ||
18 | } | 17 | } |
19 | }, | 18 | }, |
20 | 19 | ||
21 | "elementId": { | 20 | "elementId": { |
22 | "prototype": "montage/ui/textfield.reel", | 21 | "prototype": "montage/ui/textfield.reel", |
23 | "properties": { | 22 | "properties": { |
24 | "element": {"#": "elementId"}, | 23 | "element": {"#": "elementId"} |
25 | "readOnly": false | ||
26 | } | 24 | } |
27 | }, | 25 | }, |
28 | 26 | ||
29 | "elementClass": { | 27 | "elementClass": { |
30 | "prototype": "montage/ui/textfield.reel", | 28 | "prototype": "montage/ui/textfield.reel", |
31 | "properties": { | 29 | "properties": { |
32 | "element": {"#": "elementClass"}, | 30 | "element": {"#": "elementClass"} |
33 | "readOnly": false | ||
34 | } | 31 | } |
35 | }, | 32 | }, |
36 | 33 | ||
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 700b93f3..4aaeda93 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -43,15 +43,28 @@ exports.Properties = Montage.create(Component, { | |||
43 | }, | 43 | }, |
44 | 44 | ||
45 | elementName: { | 45 | elementName: { |
46 | value: null | 46 | value: null, |
47 | serializable: true | ||
47 | }, | 48 | }, |
48 | 49 | ||
49 | elementId: { | 50 | elementId: { |
50 | value: null | 51 | value: null, |
52 | serializable: true | ||
51 | }, | 53 | }, |
52 | 54 | ||
53 | elementClass: { | 55 | elementClass: { |
54 | value: null | 56 | value: null, |
57 | serializable: true | ||
58 | }, | ||
59 | |||
60 | positionSize: { | ||
61 | value: null, | ||
62 | serializable: true | ||
63 | }, | ||
64 | |||
65 | threeD: { | ||
66 | value: null, | ||
67 | serializable: true | ||
55 | }, | 68 | }, |
56 | 69 | ||
57 | customSections: { | 70 | customSections: { |
@@ -144,6 +157,7 @@ exports.Properties = Montage.create(Component, { | |||
144 | 157 | ||
145 | handleElementChange: { | 158 | handleElementChange: { |
146 | value: function(event) { | 159 | value: function(event) { |
160 | var l, t, h, w, lvu, tvu, hvu, wvu; | ||
147 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 161 | // 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") { | 162 | if(event.detail.source && event.detail.source !== "pi") { |
149 | var el = this.application.ninja.currentDocument.model.documentRoot; | 163 | var el = this.application.ninja.currentDocument.model.documentRoot; |
@@ -152,10 +166,24 @@ exports.Properties = Montage.create(Component, { | |||
152 | } | 166 | } |
153 | 167 | ||
154 | // TODO - This should only update the properties that were changed. | 168 | // TODO - This should only update the properties that were changed. |
155 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 169 | l = ElementsMediator.getProperty(el, "left"); |
156 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 170 | t = ElementsMediator.getProperty(el, "top"); |
157 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 171 | lvu = document.application.njUtils.getValueAndUnits(l); |
158 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 172 | tvu = document.application.njUtils.getValueAndUnits(t); |
173 | this.positionSize.leftUnits = lvu[1]; | ||
174 | this.positionSize.leftPosition = lvu[0]; | ||
175 | this.positionSize.topUnits = tvu[1]; | ||
176 | this.positionSize.topPosition = tvu[0]; | ||
177 | |||
178 | h = ElementsMediator.getProperty(el, "height"); | ||
179 | w = ElementsMediator.getProperty(el, "width"); | ||
180 | hvu = document.application.njUtils.getValueAndUnits(h); | ||
181 | wvu = document.application.njUtils.getValueAndUnits(w); | ||
182 | |||
183 | this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. | ||
184 | this.positionSize.heightSize = hvu[0]; | ||
185 | this.positionSize.widthUnits = wvu[1] || "px"; | ||
186 | this.positionSize.widthSize = wvu[0]; | ||
159 | 187 | ||
160 | if(this.threeD.inGlobalMode) { | 188 | if(this.threeD.inGlobalMode) { |
161 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); | 189 | this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); |
@@ -210,7 +238,8 @@ exports.Properties = Montage.create(Component, { | |||
210 | 238 | ||
211 | displayElementProperties: { | 239 | displayElementProperties: { |
212 | value: function (el) { | 240 | value: function (el) { |
213 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; | 241 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument, |
242 | l, t, h, w, lvu, tvu, hvu, wvu; | ||
214 | 243 | ||
215 | this.elementName.value = el.elementModel.selection; | 244 | this.elementName.value = el.elementModel.selection; |
216 | this.elementId.value = el.getAttribute("id") || ""; | 245 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -220,11 +249,24 @@ exports.Properties = Montage.create(Component, { | |||
220 | this.threeD.disableTranslation = isRoot; | 249 | this.threeD.disableTranslation = isRoot; |
221 | this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; | 250 | this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; |
222 | 251 | ||
223 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 252 | l = ElementsMediator.getProperty(el, "left"); |
224 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 253 | t = ElementsMediator.getProperty(el, "top"); |
225 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 254 | lvu = document.application.njUtils.getValueAndUnits(l); |
226 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 255 | tvu = document.application.njUtils.getValueAndUnits(t); |
227 | // this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); | 256 | this.positionSize.leftUnits = lvu[1]; |
257 | this.positionSize.leftPosition = lvu[0]; | ||
258 | this.positionSize.topUnits = tvu[1]; | ||
259 | this.positionSize.topPosition = tvu[0]; | ||
260 | |||
261 | h = ElementsMediator.getProperty(el, "height"); | ||
262 | w = ElementsMediator.getProperty(el, "width"); | ||
263 | hvu = document.application.njUtils.getValueAndUnits(h); | ||
264 | wvu = document.application.njUtils.getValueAndUnits(w); | ||
265 | |||
266 | this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units. | ||
267 | this.positionSize.heightSize = hvu[0]; | ||
268 | this.positionSize.widthUnits = wvu[1] || "px"; | ||
269 | this.positionSize.widthSize = wvu[0]; | ||
228 | 270 | ||
229 | if(this.threeD.inGlobalMode) | 271 | if(this.threeD.inGlobalMode) |
230 | { | 272 | { |
@@ -278,10 +320,23 @@ exports.Properties = Montage.create(Component, { | |||
278 | 320 | ||
279 | if(control.type !== "color") { | 321 | if(control.type !== "color") { |
280 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 322 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
281 | if(currentValue === null) { | 323 | if(control.type === "hottext") { |
282 | currentValue = control.defaultValue; | 324 | if(currentValue == null) { |
325 | currentValue = control.defaultValue; | ||
326 | } | ||
327 | if(typeof(currentValue) === "string") { | ||
328 | currentValue = document.application.njUtils.getValueAndUnits(currentValue); | ||
329 | this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px"; | ||
330 | this.customSections[i].content.controls[control.id] = currentValue[0]; | ||
331 | } else { | ||
332 | this.customSections[i].content.controls[control.id] = currentValue; | ||
333 | } | ||
334 | } else { | ||
335 | if(currentValue === null) { | ||
336 | currentValue = control.defaultValue; | ||
337 | } | ||
338 | this.customSections[i].content.controls[control.id] = currentValue; | ||
283 | } | 339 | } |
284 | this.customSections[i].content.controls[control.id] = currentValue; | ||
285 | } else { | 340 | } else { |
286 | if(control.prop === "border") { | 341 | if(control.prop === "border") { |
287 | // TODO - For now, always return the top border if multiple border sides | 342 | // TODO - For now, always return the top border if multiple border sides |
@@ -403,7 +458,11 @@ exports.Properties = Montage.create(Component, { | |||
403 | value: function(e) { | 458 | value: function(e) { |
404 | if(e.wasSetByCode) return; | 459 | if(e.wasSetByCode) return; |
405 | 460 | ||
406 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); | 461 | var newValue; |
462 | |||
463 | e.units ? newValue = e.value + e.units : newValue = e.value; | ||
464 | |||
465 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi"); | ||
407 | } | 466 | } |
408 | } | 467 | } |
409 | 468 | ||
diff --git a/js/panels/properties.reel/section.reel/section.js b/js/panel |