aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties/content.reel/content.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties/content.reel/content.js')
-rw-r--r--js/panels/properties/content.reel/content.js149
1 files changed, 63 insertions, 86 deletions
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index fe6faef8..0088447a 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -97,10 +97,24 @@ exports.Content = Montage.create(Component, {
97 value: function(event) { 97 value: function(event) {
98// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update 98// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
99 if(event.detail.source && event.detail.source !== "pi") { 99 if(event.detail.source && event.detail.source !== "pi") {
100 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); 100 // TODO - This should only update the properties that were changed.
101 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); 101 var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0];
102 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
103 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
104 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
105 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
106
107 if(this.threeD.inGlobalMode)
108 {
109 this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
110 this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
111 this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
112 this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
113 this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
114 this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
102 } 115 }
103 } 116 }
117 }
104 }, 118 },
105 119
106 handleSelectionChange: { 120 handleSelectionChange: {
@@ -141,7 +155,8 @@ exports.Content = Montage.create(Component, {
141 155
142 displayElementProperties: { 156 displayElementProperties: {
143 value: function (el) { 157 value: function (el) {
144 var customPI; 158 var customPI,
159 currentValue;
145 160
146 this.elementName = el.elementModel.selection; 161 this.elementName = el.elementModel.selection;
147 this.elementId.value = el.getAttribute("id") || ""; 162 this.elementId.value = el.getAttribute("id") || "";
@@ -180,87 +195,52 @@ exports.Content = Montage.create(Component, {
180 for(var j = 0, fields; fields = customSec.Section[j]; j++) { 195 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
181 for(var k = 0, control; control = fields[k]; k++) { 196 for(var k = 0, control; control = fields[k]; k++) {
182 197
183 if(control.prop !== "border-color" && control.prop !== "background-color") { 198 if(control.type !== "color") {
184 var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); 199 currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
185 currentValue ? currentValue = currentValue : currentValue = control.defaultValue; 200 if(currentValue === null)
186 this.customSections[0].content.controls[control.id] = currentValue; 201 {
202 currentValue = control.defaultValue;
203 }
204 this.customSections[i].content.controls[control.id] = currentValue;
205 }
206 else
207 {
208 currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
209 if(control.prop === "border")
210 {
211 this.application.ninja.colorController.colorModel.input = "stroke";
212 }
213 else if(control.prop === "background")
214 {
215 this.application.ninja.colorController.colorModel.input = "fill";
216 }
217
218 if(currentValue)
219 {
220 if(currentValue.mode === "gradient")
221 {
222 this.application.ninja.colorController.colorModel["gradient"] =
223 {value: currentValue.color, wasSetByCode: true, type: 'change'};
224 }
225 else
226 {
227 if (currentValue.color.a !== undefined)
228 {
229 this.application.ninja.colorController.colorModel.alpha =
230 {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
231 }
232 this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
233 }
234 }
235 else
236 {
237 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
238 this.application.ninja.colorController.colorModel.applyNoColor();
239 }
187 } 240 }
188 } 241 }
189 } 242 }
190 } 243 }
191
192
193 //TODO: Once logic for color and gradient is established, this needs to be revised
194
195 var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image");
196 this.application.ninja.colorController.colorModel.input = "stroke";
197 if(borderColor || borderImage) {
198 if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) {
199 //Gradient
200 color = this.application.ninja.colorController.getColorObjFromCss(borderImage);
201 if (color && color.value) {
202 this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
203 } else {
204 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
205 this.application.ninja.colorController.colorModel.applyNoColor();
206 }
207 } else {
208 //Solid
209 color = this.application.ninja.colorController.getColorObjFromCss(borderColor);
210 if (color && color.value) {
211 color.value.wasSetByCode = true;
212 color.value.type = 'change';
213 if (color.value.a) {
214 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
215 }
216 this.application.ninja.colorController.colorModel[color.mode] = color.value;
217 } else {
218 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
219 this.application.ninja.colorController.colorModel.applyNoColor();
220 }
221 }
222 } else {
223 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
224 this.application.ninja.colorController.colorModel.applyNoColor();
225 }
226 //
227 background = ElementsMediator.getProperty(el, "background-color");
228 backgroundImage = ElementsMediator.getProperty(el, "background-image");
229 this.application.ninja.colorController.colorModel.input = "fill";
230 if(background || backgroundImage) {
231 if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) {
232 //Gradient
233 color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage);
234 if (color && color.value) {
235 this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
236 } else {
237 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
238 this.application.ninja.colorController.colorModel.applyNoColor();
239 }
240 } else {
241 //Solid
242 color = this.application.ninja.colorController.getColorObjFromCss(background);
243 if (color && color.value) {
244 color.value.wasSetByCode = true;
245 color.value.type = 'change';
246 if (color.value.a) {
247 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
248 }
249 this.application.ninja.colorController.colorModel[color.mode] = color.value;
250 } else {
251 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
252 this.application.ninja.colorController.colorModel.applyNoColor();
253 }
254 }
255 } else {
256 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
257 this.application.ninja.colorController.colorModel.applyNoColor();
258 }
259
260
261
262
263
264 } 244 }
265 }, 245 },
266 246
@@ -300,16 +280,12 @@ exports.Content = Montage.create(Component, {
300 280
301 handlePropertyChange: { 281 handlePropertyChange: {
302 value: function(e) { 282 value: function(e) {
283 if(e.wasSetByCode) return;
284
303 var newValue; 285 var newValue;
304 286
305 e.units ? newValue = e.value + e.units : newValue = e.value; 287 e.units ? newValue = e.value + e.units : newValue = e.value;
306 288
307 if(e.prop === "border-width") {// || e.prop === "border-style") {
308 ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi");
309 } else if(e.prop === "border-style") {
310 ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi");
311 }
312
313 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); 289 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi");
314 290
315 } 291 }
@@ -317,6 +293,7 @@ exports.Content = Montage.create(Component, {
317 293
318 handlePropertyChanging: { 294 handlePropertyChanging: {
319 val