aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-06-12 15:13:09 -0700
committerNivesh Rajbhandari2012-06-12 15:13:09 -0700
commit509092ff335f74517a413cfb2deeb9d2de20f8e3 (patch)
tree86dddcb4b74f04c965da52180cab3c49529148cf /js/panels
parent6854a72504f57903bd5de003e377f2aefb02d0da (diff)
downloadninja-509092ff335f74517a413cfb2deeb9d2de20f8e3.tar.gz
Fixing properties panel to support px and % for body and other elements.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/properties.reel/properties.js70
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js6
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.html16
-rwxr-xr-xjs/panels/properties.reel/sections/position-size.reel/position-size.js40
4 files changed, 103 insertions, 29 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index cc99ca6c..33e66515 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -143,6 +143,7 @@ exports.Properties = Montage.create(Component, {
143 143
144 handleElementChange: { 144 handleElementChange: {
145 value: function(event) { 145 value: function(event) {
146 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 147// 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") { 148 if(event.detail.source && event.detail.source !== "pi") {
148 var el = this.application.ninja.currentDocument.model.documentRoot; 149 var el = this.application.ninja.currentDocument.model.documentRoot;
@@ -151,10 +152,24 @@ exports.Properties = Montage.create(Component, {
151 } 152 }
152 153
153 // TODO - This should only update the properties that were changed. 154 // TODO - This should only update the properties that were changed.
154 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 155 l = ElementsMediator.getProperty(el, "left");
155 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 156 t = ElementsMediator.getProperty(el, "top");
156 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 157 lvu = document.application.njUtils.getValueAndUnits(l);
157 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); 158 tvu = document.application.njUtils.getValueAndUnits(t);
159 this.positionSize.leftUnits = lvu[1];
160 this.positionSize.leftPosition = lvu[0];
161 this.positionSize.topUnits = tvu[1];
162 this.positionSize.topPosition = tvu[0];
163
164 h = ElementsMediator.getProperty(el, "height");
165 w = ElementsMediator.getProperty(el, "width");
166 hvu = document.application.njUtils.getValueAndUnits(h);
167 wvu = document.application.njUtils.getValueAndUnits(w);
168
169 this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
170 this.positionSize.heightSize = hvu[0];
171 this.positionSize.widthUnits = wvu[1] || "px";
172 this.positionSize.widthSize = wvu[0];
158 173
159 if(this.threeD.inGlobalMode) { 174 if(this.threeD.inGlobalMode) {
160 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); 175 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -209,7 +224,8 @@ exports.Properties = Montage.create(Component, {
209 224
210 displayElementProperties: { 225 displayElementProperties: {
211 value: function (el) { 226 value: function (el) {
212 var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; 227 var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument,
228 l, t, h, w, lvu, tvu, hvu, wvu;
213 229
214 this.elementName.value = el.elementModel.selection; 230 this.elementName.value = el.elementModel.selection;
215 this.elementId.value = el.getAttribute("id") || ""; 231 this.elementId.value = el.getAttribute("id") || "";
@@ -219,11 +235,24 @@ exports.Properties = Montage.create(Component, {
219 this.threeD.disableTranslation = isRoot; 235 this.threeD.disableTranslation = isRoot;
220 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; 236 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
221 237
222 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 238 l = ElementsMediator.getProperty(el, "left");
223 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 239 t = ElementsMediator.getProperty(el, "top");
224 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 240 lvu = document.application.njUtils.getValueAndUnits(l);
225 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); 241 tvu = document.application.njUtils.getValueAndUnits(t);
226// this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); 242 this.positionSize.leftUnits = lvu[1];
243 this.positionSize.leftPosition = lvu[0];
244 this.positionSize.topUnits = tvu[1];
245 this.positionSize.topPosition = tvu[0];
246
247 h = ElementsMediator.getProperty(el, "height");
248 w = ElementsMediator.getProperty(el, "width");
249 hvu = document.application.njUtils.getValueAndUnits(h);
250 wvu = document.application.njUtils.getValueAndUnits(w);
251
252 this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
253 this.positionSize.heightSize = hvu[0];
254 this.positionSize.widthUnits = wvu[1] || "px";
255 this.positionSize.widthSize = wvu[0];
227 256
228 if(this.threeD.inGlobalMode) 257 if(this.threeD.inGlobalMode)
229 { 258 {
@@ -277,10 +306,19 @@ exports.Properties = Montage.create(Component, {
277 306
278 if(control.type !== "color") { 307 if(control.type !== "color") {
279 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); 308 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
280 if(currentValue === null) { 309 if(control.type === "hottext") {
281 currentValue = control.defaultValue; 310 if(currentValue == null) {
311 currentValue = control.defaultValue;
312 }
313 currentValue = document.application.njUtils.getValueAndUnits(currentValue);
314 this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px";
315 this.customSections[i].content.controls[control.id] = currentValue[0];
316 } else {
317 if(currentValue === null) {
318 currentValue = control.defaultValue;
319 }
320 this.customSections[i].content.controls[control.id] = currentValue;
282 } 321 }
283 this.customSections[i].content.controls[control.id] = currentValue;
284 } else { 322 } else {
285 if(control.prop === "border") { 323 if(control.prop === "border") {
286 // TODO - For now, always return the top border if multiple border sides 324 // TODO - For now, always return the top border if multiple border sides
@@ -402,7 +440,11 @@ exports.Properties = Montage.create(Component, {
402 value: function(e) { 440 value: function(e) {
403 if(e.wasSetByCode) return; 441 if(e.wasSetByCode) return;
404 442
405 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); 443 var newValue;
444
445 e.units ? newValue = e.value + e.units : newValue = e.value;
446
447 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi");
406 } 448 }
407 } 449 }
408 450
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 9df16112..c599dcb0 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -233,6 +233,12 @@ exports.CustomSection = Montage.create(Component, {
233 boundObjectPropertyPath: "value" 233 boundObjectPropertyPath: "value"
234 }); 234 });
235 235
236 //Bind object value to controls list so it can be manipulated
237 Object.defineBinding(this.controls, aField.id + "Units", {
238 boundObject: obj,
239 boundObjectPropertyPath: "units"
240 });
241
236 return obj; 242 return obj;
237 } 243 }
238 }, 244 },
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html
index 5d1a805a..bc93da33 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.html
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -29,9 +29,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
29 "properties": { 29 "properties": {
30 "element": {"#": "PosX"}, 30 "element": {"#": "PosX"},
31 "maxValue": 10000, 31 "maxValue": 10000,
32 "minValue": -10000 32 "minValue": -10000,
33 "acceptableUnits" : ["px", "%"],
34 "units": "px"
33 }, 35 },
34 "bindings": { 36 "bindings": {
37 "units": {"<<->": "@owner.leftUnits"},
35 "value": {"<<->": "@owner.leftPosition"} 38 "value": {"<<->": "@owner.leftPosition"}
36 } 39 }
37 }, 40 },
@@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
40 "properties": { 43 "properties": {
41 "element": {"#": "PosY"}, 44 "element": {"#": "PosY"},
42 "maxValue": 10000, 45 "maxValue": 10000,
43 "minValue": -10000 46 "minValue": -10000,
47 "acceptableUnits" : ["px", "%"],
48 "units": "px"
44 }, 49 },
45 "bindings": { 50 "bindings": {
51 "units": {"<<->": "@owner.topUnits"},
46 "value": {"<<->": "@owner.topPosition"} 52 "value": {"<<->": "@owner.topPosition"}
47 } 53 }
48 }, 54 },
@@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
50 "PosH": { 56 "PosH": {
51 "prototype": "js/components/hottextunit.reel[HotTextUnit]", 57 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
52 "properties": { 58 "properties": {
53 "element": {"#": "PosH"} 59 "element": {"#": "PosH"},
60 "acceptableUnits" : ["px", "%"],
61 "units": "px"
54 }, 62 },
55 "bindings": { 63 "bindings": {
64 "units": {"<<->": "@owner.heightUnits"},
56 "value": {"<<->": "@owner.heightSize"} 65 "value": {"<<->": "@owner.heightSize"}
57 } 66 }
58 }, 67 },
@@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
65 "units": "px" 74 "units": "