diff options
author | Eric Guzman | 2012-03-17 00:05:14 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-17 00:05:14 -0700 |
commit | a3192d8bc0f8c0698265817c14dcd2284fd89d7d (patch) | |
tree | 497ac55f550ed52f9d73b464aafb2aa6cb5f5038 /js/panels/properties.reel/properties.js | |
parent | a6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c (diff) | |
parent | 954f5a13e371febcb1c0fb8015c577ee51c23130 (diff) | |
download | ninja-a3192d8bc0f8c0698265817c14dcd2284fd89d7d.tar.gz |
Merge branch 'refs/heads/master' into AddAnimationsLibrary
Conflicts:
js/panels/presets/default-transition-presets.js
Diffstat (limited to 'js/panels/properties.reel/properties.js')
-rwxr-xr-x | js/panels/properties.reel/properties.js | 97 |
1 files changed, 65 insertions, 32 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index eb9faa8b..40e9b86a 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -17,15 +17,11 @@ exports.Properties = Montage.create(Component, { | |||
17 | value: null | 17 | value: null |
18 | }, | 18 | }, |
19 | 19 | ||
20 | elementID: { | 20 | elementId: { |
21 | value: null | 21 | value: null |
22 | }, | 22 | }, |
23 | 23 | ||
24 | elementClassName: { | 24 | elementClass: { |
25 | value: null | ||
26 | }, | ||
27 | |||
28 | nameAttribute: { | ||
29 | value: null | 25 | value: null |
30 | }, | 26 | }, |
31 | 27 | ||
@@ -60,6 +56,14 @@ exports.Properties = Montage.create(Component, { | |||
60 | 56 | ||
61 | this.eventManager.addEventListener("openDocument", this, false); | 57 | this.eventManager.addEventListener("openDocument", this, false); |
62 | this.eventManager.addEventListener("switchDocument", this, false); | 58 | this.eventManager.addEventListener("switchDocument", this, false); |
59 | |||
60 | this.elementId.element.addEventListener("blur", this, false); | ||
61 | this.elementId.element.addEventListener("focus", this, false); | ||
62 | this.elementId.element.addEventListener("keyup", this, false); | ||
63 | |||
64 | this.elementClass.element.addEventListener("blur", this, false); | ||
65 | this.elementClass.element.addEventListener("focus", this, false); | ||
66 | this.elementClass.element.addEventListener("keyup", this, false); | ||
63 | } | 67 | } |
64 | }, | 68 | }, |
65 | 69 | ||
@@ -73,12 +77,6 @@ exports.Properties = Montage.create(Component, { | |||
73 | if(this.application.ninja.selectedElements.length === 0) { | 77 | if(this.application.ninja.selectedElements.length === 0) { |
74 | this.displayStageProperties(); | 78 | this.displayStageProperties(); |
75 | } | 79 | } |
76 | |||
77 | this.elementId.element.addEventListener("blur", this, false); | ||
78 | this.elementId.element.addEventListener("keyup", this, false); | ||
79 | |||
80 | this.elementNameAttribute.element.addEventListener("blur", this, false); | ||
81 | this.elementNameAttribute.element.addEventListener("keyup", this, false); | ||
82 | } | 80 | } |
83 | }, | 81 | }, |
84 | 82 | ||
@@ -87,7 +85,7 @@ exports.Properties = Montage.create(Component, { | |||
87 | // For now always assume that the stage is selected by default | 85 | // For now always assume that the stage is selected by default |
88 | if(this.application.ninja.selectedElements.length === 0) { | 86 | if(this.application.ninja.selectedElements.length === 0) { |
89 | this.displayStageProperties(); | 87 | this.displayStageProperties(); |
90 | }else { | 88 | } else { |
91 | if(this.application.ninja.selectedElements.length === 1) { | 89 | if(this.application.ninja.selectedElements.length === 1) { |
92 | this.displayElementProperties(this.application.ninja.selectedElements[0]._element); | 90 | this.displayElementProperties(this.application.ninja.selectedElements[0]._element); |
93 | } else { | 91 | } else { |
@@ -102,17 +100,29 @@ exports.Properties = Montage.create(Component, { | |||
102 | */ | 100 | */ |
103 | handleBlur: { | 101 | handleBlur: { |
104 | value: function(event) { | 102 | value: function(event) { |
105 | console.log(event.target); | 103 | |
106 | if(event.target.id === "elementID") { | 104 | if(event.target.id === "elementId") { |
105 | |||
106 | // Remove all white spaces from the id | ||
107 | this.elementId.value = this.elementId.value.replace(/\s/g, ''); | ||
108 | |||
109 | // Check if that id is in use | ||
110 | if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) { | ||
111 | // TODO: Replace with Ninja Alert | ||
112 | alert("The following ID: " + this.elementId.value + " is already in use"); | ||
113 | } | ||
114 | |||
107 | if(this.application.ninja.selectedElements.length) { | 115 | if(this.application.ninja.selectedElements.length) { |
108 | 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"); |
109 | } else { | 117 | } else { |
110 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); | 118 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); |
111 | } | 119 | } |
112 | } else if(event.target.id === "elementNameAttribute") { | 120 | } else if(event.target.id === "elementClass") { |
113 | if(this.application.ninja.selectedElements.length) { | 121 | if(this.application.ninja.selectedElements.length) { |
114 | //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi"); | 122 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi"); |
115 | this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value); | 123 | console.log(this.application.ninja.selectedElements[0]._element.className); |
124 | } else { | ||
125 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); | ||
116 | } | 126 | } |
117 | } | 127 | } |
118 | } | 128 | } |
@@ -121,11 +131,7 @@ exports.Properties = Montage.create(Component, { | |||
121 | handleKeyup: { | 131 | handleKeyup: { |
122 | value: function(event) { | 132 | value: function(event) { |
123 | if(event.keyCode === 13) { | 133 | if(event.keyCode === 13) { |
124 | if(event.target === "elementID") { | 134 | event.target.blur(); |
125 | this.elementId.element.blur(); | ||
126 | } else if(event.target === "elementNameAttribute") { | ||
127 | this.elementNameAttribute.element.blur(); | ||
128 | } | ||
129 | } | 135 | } |
130 | } | 136 | } |
131 | }, | 137 | }, |
@@ -180,10 +186,9 @@ exports.Properties = Montage.create(Component, { | |||
180 | value: function() { | 186 | value: function() { |
181 | var stage = this.application.ninja.currentDocument.documentRoot; | 187 | var stage = this.application.ninja.currentDocument.documentRoot; |
182 | //this is test code please remove | 188 | //this is test code please remove |
183 | this.elementName = "Stage"; | 189 | this.elementName.value = "Stage"; |
184 | this.elementId.value = stage.elementModel.id; | 190 | this.elementId.value = stage.elementModel.id; |
185 | this.elementClassName = ""; | 191 | this.elementClass.value = ""; |
186 | this.nameAttribute = ""; | ||
187 | 192 | ||
188 | this.positionSize.disablePosition = true; | 193 | this.positionSize.disablePosition = true; |
189 | this.threeD.disableTranslation = true; | 194 | this.threeD.disableTranslation = true; |
@@ -243,10 +248,9 @@ exports.Properties = Montage.create(Component, { | |||
243 | var customPI, | 248 | var customPI, |
244 | currentValue; | 249 | currentValue; |
245 | 250 | ||
246 | this.elementName = el.elementModel.selection; | 251 | this.elementName.value = el.elementModel.selection; |
247 | this.elementId.value = el.getAttribute("id") || ""; | 252 | this.elementId.value = el.getAttribute("id") || ""; |
248 | this.elementClassName = el.getAttribute("class"); | 253 | this.elementClass.value = el.getAttribute("class"); |
249 | this.nameAttribute = el.getAttribute("name") || ""; | ||
250 | 254 | ||
251 | this.positionSize.disablePosition = false; | 255 | this.positionSize.disablePosition = false; |
252 | this.threeD.disableTranslation = false; | 256 | this.threeD.disableTranslation = false; |
@@ -283,7 +287,7 @@ exports.Properties = Montage.create(Component, { | |||
283 | this.customPi = el.elementModel.pi; | 287 | this.customPi = el.elementModel.pi; |
284 | this.displayCustomProperties(el, el.elementModel.pi); | 288 | this.displayCustomProperties(el, el.elementModel.pi); |
285 | } | 289 | } |
286 | 290 | var previousInput = this.application.ninja.colorController.colorModel.input; | |
287 | customPI = PiData[this.customPi]; | 291 | customPI = PiData[this.customPi]; |
288 | // Get all the custom section for the custom PI | 292 | // Get all the custom section for the custom PI |
289 | for(var i = 0, customSec; customSec = customPI[i]; i++) { | 293 | for(var i = 0, customSec; customSec = customPI[i]; i++) { |
@@ -302,13 +306,15 @@ exports.Properties = Montage.create(Component, { | |||
302 | } | 306 | } |
303 | else | 307 | else |
304 | { | 308 | { |
305 | currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); | ||
306 | if(control.prop === "border") | 309 | if(control.prop === "border") |
307 | { | 310 | { |
311 | // TODO - For now, always return the top border if multiple border sides | ||
312 | currentValue = ElementsMediator.getColor(el, false, "top"); | ||
308 | this.application.ninja.colorController.colorModel.input = "stroke"; | 313 | this.application.ninja.colorController.colorModel.input = "stroke"; |
309 | } | 314 | } |
310 | else if(control.prop === "background") | 315 | else if(control.prop === "background") |
311 | { | 316 | { |
317 | currentValue = ElementsMediator.getColor(el, true); | ||
312 | this.application.ninja.colorController.colorModel.input = "fill"; | 318 | this.application.ninja.colorController.colorModel.input = "fill"; |
313 | } | 319 | } |
314 | 320 | ||
@@ -350,13 +356,40 @@ exports.Properties = Montage.create(Component, { | |||
350 | } | 356 | } |
351 | } | 357 | } |
352 | } | 358 | } |
359 | this.application.ninja.colorController.colorModel.input = previousInput; | ||
360 | var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1]; | ||
361 | color.c.wasSetByCode = true; | ||
362 | color.c.type = 'change'; | ||
363 | switch (color.m) { | ||
364 | case 'rgb': | ||
365 | this.application.ninja.colorController.colorModel.alpha = {value: color.a, wasSetByCode: true, type: 'change'}; | ||
366 | this.application.ninja.colorController.colorModel.rgb = color.c; | ||
367 | break; | ||
368 | case 'hsl': | ||
369 | this.application.ninja.colorController.colorModel.alpha = {value: color.a, wasSetByCode: true, type: 'change'}; | ||
370 | this.application.ninja.colorController.colorModel.hsl = color.c; | ||
371 | break; | ||
372 | case 'hex': | ||
373 | //TODO: Check if anything needed here | ||
374 | break; | ||
375 | case 'gradient': | ||
376 | this.application.ninja.colorController.colorModel.gradient = color.c; | ||
377 | break; | ||