aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel/properties.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel/properties.js')
-rwxr-xr-xjs/panels/properties.reel/properties.js97
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;
378 case 'hsv':
379 this.application.ninja.colorController.colorModel.alpha = {value: color.a, wasSetByCode: true, type: 'change'};
380 this.application.ninja.colorController.colorModel.hsv = color.c;
381 break;