aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-xjs/panels/properties.reel/properties.html9
-rwxr-xr-xjs/panels/properties.reel/properties.js93
-rwxr-xr-xjs/panels/properties.reel/section.reel/section.js1
-rwxr-xr-xjs/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js4
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js6
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.html25
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.js81
-rwxr-xr-xjs/panels/properties.reel/sections/three-d-view.reel/three-d-view.html2
-rwxr-xr-xjs/panels/properties.reel/sections/three-d-view.reel/three-d-view.js55
9 files changed, 231 insertions, 45 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 cc99ca6c..43c92b74 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: {
@@ -143,6 +156,7 @@ exports.Properties = Montage.create(Component, {
143 156
144 handleElementChange: { 157 handleElementChange: {
145 value: function(event) { 158 value: function(event) {
159 var l, t, h, w, lvu, tvu, hvu, wvu;
146// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update 160// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
147 if(event.detail.source && event.detail.source !== "pi") { 161 if(event.detail.source && event.detail.source !== "pi") {
148 var el = this.application.ninja.currentDocument.model.documentRoot; 162 var el = this.application.ninja.currentDocument.model.documentRoot;
@@ -151,10 +165,24 @@ exports.Properties = Montage.create(Component, {
151 } 165 }
152 166
153 // TODO - This should only update the properties that were changed. 167 // TODO - This should only update the properties that were changed.
154 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 168 l = ElementsMediator.getProperty(el, "left");
155 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 169 t = ElementsMediator.getProperty(el, "top");
156 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 170 lvu = document.application.njUtils.getValueAndUnits(l);
157 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); 171 tvu = document.application.njUtils.getValueAndUnits(t);
172 this.positionSize.leftUnits = lvu[1];
173 this.positionSize.leftPosition = lvu[0];
174 this.positionSize.topUnits = tvu[1];
175 this.positionSize.topPosition = tvu[0];
176
177 h = ElementsMediator.getProperty(el, "height");
178 w = ElementsMediator.getProperty(el, "width");
179 hvu = document.application.njUtils.getValueAndUnits(h);
180 wvu = document.application.njUtils.getValueAndUnits(w);
181
182 this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
183 this.positionSize.heightSize = hvu[0];
184 this.positionSize.widthUnits = wvu[1] || "px";
185 this.positionSize.widthSize = wvu[0];
158 186
159 if(this.threeD.inGlobalMode) { 187 if(this.threeD.inGlobalMode) {
160 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); 188 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -209,7 +237,8 @@ exports.Properties = Montage.create(Component, {
209 237
210 displayElementProperties: { 238 displayElementProperties: {
211 value: function (el) { 239 value: function (el) {
212 var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; 240 var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument,
241 l, t, h, w, lvu, tvu, hvu, wvu;
213 242
214 this.elementName.value = el.elementModel.selection; 243 this.elementName.value = el.elementModel.selection;
215 this.elementId.value = el.getAttribute("id") || ""; 244 this.elementId.value = el.getAttribute("id") || "";
@@ -219,11 +248,24 @@ exports.Properties = Montage.create(Component, {
219 this.threeD.disableTranslation = isRoot; 248 this.threeD.disableTranslation = isRoot;
220 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; 249 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
221 250
222 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 251 l = ElementsMediator.getProperty(el, "left");
223 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 252 t = ElementsMediator.getProperty(el, "top");
224 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 253 lvu = document.application.njUtils.getValueAndUnits(l);
225 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); 254 tvu = document.application.njUtils.getValueAndUnits(t);
226// this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); 255 this.positionSize.leftUnits = lvu[1];
256 this.positionSize.leftPosition = lvu[0];
257 this.positionSize.topUnits = tvu[1];
258 this.positionSize.topPosition = tvu[0];
259
260 h = ElementsMediator.getProperty(el, "height");
261 w = ElementsMediator.getProperty(el, "width");
262 hvu = document.application.njUtils.getValueAndUnits(h);
263 wvu = document.application.njUtils.getValueAndUnits(w);
264
265 this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
266 this.positionSize.heightSize = hvu[0];
267 this.positionSize.widthUnits = wvu[1] || "px";
268 this.positionSize.widthSize = wvu[0];
227 269
228 if(this.threeD.inGlobalMode) 270 if(this.threeD.inGlobalMode)
229 { 271 {
@@ -277,10 +319,23 @@ exports.Properties = Montage.create(Component, {
277 319
278 if(control.type !== "color") { 320 if(control.type !== "color") {
279 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); 321 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
280 if(currentValue === null) { 322 if(control.type === "hottext") {
281 currentValue = control.defaultValue; 323 if(currentValue == null) {
324 currentValue = control.defaultValue;
325 }
326 if(typeof(currentValue) === "string") {
327 currentValue = document.application.njUtils.getValueAndUnits(currentValue);
328 this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px";
329 this.customSections[i].content.controls[control.id] = currentValue[0];
330 } else {
331 this.customSections[i].content.controls[control.id] = currentValue;
332 }
333 } else {
334 if(currentValue === null) {
335 currentValue = control.defaultValue;
336 }
337 this.customSections[i].content.controls[control.id] = currentValue;
282 } 338 }
283 this.customSections[i].content.controls[control.id] = currentValue;
284 } else { 339 } else {
285 if(control.prop === "border") { 340 if(control.prop === "border") {
286 // TODO - For now, always return the top border if multiple border sides 341 // TODO - For now, always return the top border if multiple border sides
@@ -402,7 +457,11 @@ exports.Properties = Montage.create(Component, {
402 value: function(e) { 457 value: function(e) {
403 if(e.wasSetByCode) return; 458 if(e.wasSetByCode) return;
404 459
405 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); 460 var newValue;
461
462 e.units ? newValue = e.value + e.units : newValue = e.value;
463
464 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi");
406 } 465 }
407 } 466 }
408 467
diff --git a/js/panels/properties.reel/section.reel/section.js b/js/panels/properties.reel/section.reel/section.js
index b246c171..310bc48f 100755
--- a/js/panels/properties.reel/section.reel/section.js
+++ b/js/panels/properties.reel/section.reel/section.js
@@ -11,6 +11,7 @@ exports.Section = Montage.create(Component, {