aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorValerio Virgillito2012-06-13 13:56:56 -0700
committerValerio Virgillito2012-06-13 13:56:56 -0700
commit682f4917d6badd105998c3dd84d031c38b51f017 (patch)
tree7c907dd58e9b4f4a1d4802d8d22b9c84d3c2edf3 /js/panels
parenta827f2769d75848c0ba0bff03a927c1f2706322b (diff)
parent263ecfc95bd7eb5c726cd5688c3d74eb10296811 (diff)
downloadninja-682f4917d6badd105998c3dd84d031c38b51f017.tar.gz
Merge pull request #297 from mqg734/PI_HotTextFixes
Fixing properties panel to support px and % for body and other elements.
Diffstat (limited to 'js/panels')
-rwxr-xr-xjs/panels/properties.reel/properties.js74
-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, 107 insertions, 29 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index e9d9472e..43c92b74 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -156,6 +156,7 @@ exports.Properties = Montage.create(Component, {
156 156
157 handleElementChange: { 157 handleElementChange: {
158 value: function(event) { 158 value: function(event) {
159 var l, t, h, w, lvu, tvu, hvu, wvu;
159// 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
160 if(event.detail.source && event.detail.source !== "pi") { 161 if(event.detail.source && event.detail.source !== "pi") {
161 var el = this.application.ninja.currentDocument.model.documentRoot; 162 var el = this.application.ninja.currentDocument.model.documentRoot;
@@ -164,10 +165,24 @@ exports.Properties = Montage.create(Component, {
164 } 165 }
165 166
166 // TODO - This should only update the properties that were changed. 167 // TODO - This should only update the properties that were changed.
167 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 168 l = ElementsMediator.getProperty(el, "left");
168 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 169 t = ElementsMediator.getProperty(el, "top");
169 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 170 lvu = document.application.njUtils.getValueAndUnits(l);
170 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];
171 186
172 if(this.threeD.inGlobalMode) { 187 if(this.threeD.inGlobalMode) {
173 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); 188 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -222,7 +237,8 @@ exports.Properties = Montage.create(Component, {
222 237
223 displayElementProperties: { 238 displayElementProperties: {
224 value: function (el) { 239 value: function (el) {
225 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;
226 242
227 this.elementName.value = el.elementModel.selection; 243 this.elementName.value = el.elementModel.selection;
228 this.elementId.value = el.getAttribute("id") || ""; 244 this.elementId.value = el.getAttribute("id") || "";
@@ -232,11 +248,24 @@ exports.Properties = Montage.create(Component, {
232 this.threeD.disableTranslation = isRoot; 248 this.threeD.disableTranslation = isRoot;
233 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; 249 this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
234 250
235 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); 251 l = ElementsMediator.getProperty(el, "left");
236 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); 252 t = ElementsMediator.getProperty(el, "top");
237 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); 253 lvu = document.application.njUtils.getValueAndUnits(l);
238 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); 254 tvu = document.application.njUtils.getValueAndUnits(t);
239// 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];
240 269
241 if(this.threeD.inGlobalMode) 270 if(this.threeD.inGlobalMode)
242 { 271 {
@@ -290,10 +319,23 @@ exports.Properties = Montage.create(Component, {
290 319
291 if(control.type !== "color") { 320 if(control.type !== "color") {
292 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); 321 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
293 if(currentValue === null) { 322 if(control.type === "hottext") {
294 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;
295 } 338 }
296 this.customSections[i].content.controls[control.id] = currentValue;
297 } else { 339 } else {
298 if(control.prop === "border") { 340 if(control.prop === "border") {
299 // 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
@@ -415,7 +457,11 @@ exports.Properties = Montage.create(Component, {
415 value: function(e) { 457 value: function(e) {
416 if(e.wasSetByCode) return; 458 if(e.wasSetByCode) return;
417 459
418 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");
419 } 465 }
420 } 466 }
421 467
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 ccc7a159..d322f826 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": {"<->": "@o