aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties')
-rw-r--r--js/panels/properties/content.reel/content.js142
1 files changed, 58 insertions, 84 deletions
</
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 3cedee6d..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,90 +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 if(currentValue === null) 200 if(currentValue === null)
186 { 201 {
187 currentValue = control.defaultValue; 202 currentValue = control.defaultValue;
188 } 203 }
189 this.customSections[i].content.controls[control.id] = currentValue; 204 this.customSections[i].content.controls[control.id] = currentValue;
190 } 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 }
240 }
191 } 241 }
192 } 242 }
193 } 243 }
194
195
196 //TODO: Once logic for color and gradient is established, this needs to be revised
197
198 var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image");
199 this.application.ninja.colorController.colorModel.input = "stroke";
200 if(borderColor || borderImage) {
201 if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) {
202 //Gradient
203 color = this.application.ninja.colorController.getColorObjFromCss(borderImage);
204 if (color && color.value) {
205 this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
206 } else {
207 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
208 this.application.ninja.colorController.colorModel.applyNoColor();
209 }
210 } else {
211 //Solid
212 color = this.application.ninja.colorController.getColorObjFromCss(borderColor);
213 if (color && color.value) {
214 color.value.wasSetByCode = true;
215 color.value.type = 'change';
216 if (color.value.a) {
217 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
218 }
219 this.application.ninja.colorController.colorModel[color.mode] = color.value;
220 } else {
221 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
222 this.application.ninja.colorController.colorModel.applyNoColor();
223 }
224 }
225 } else {
226 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
227 this.application.ninja.colorController.colorModel.applyNoColor();
228 }
229 //
230 background = ElementsMediator.getProperty(el, "background-color");
231 backgroundImage = ElementsMediator.getProperty(el, "background-image");
232 this.application.ninja.colorController.colorModel.input = "fill";
233 if(background || backgroundImage) {
234 if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) {
235 //Gradient
236 color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage);
237 if (color && color.value) {
238 this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
239 } else {
240 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
241 this.application.ninja.colorController.colorModel.applyNoColor();
242 }
243 } else {
244 //Solid
245 color = this.application.ninja.colorController.getColorObjFromCss(background);
246 if (color && color.value) {
247 color.value.wasSetByCode = true;
248 color.value.type = 'change';
249 if (color.value.a) {
250 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
251 }
252 this.application.ninja.colorController.colorModel[color.mode] = color.value;
253 } else {
254 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
255 this.application.ninja.colorController.colorModel.applyNoColor();
256 }
257 }
258 } else {
259 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
260 this.application.ninja.colorController.colorModel.applyNoColor();
261 }
262
263
264
265
266
267 } 244 }
268 }, 245 },
269 246
@@ -303,16 +280,12 @@ exports.Content = Montage.create(Component, {
303 280
304 handlePropertyChange: { 281 handlePropertyChange: {
305 value: function(e) { 282 value: function(e) {
283 if(e.wasSetByCode) return;
284
306 var newValue; 285 var newValue;
307 286
308 e.units ? newValue = e.value + e.units : newValue = e.value; 287 e.units ? newValue = e.value + e.units : newValue = e.value;
309 288
310 if(e.prop === "border-width") {// || e.prop === "border-style") {
311 ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi");
312 } else if(e.prop === "border-style") {
313 ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi");
314 }
315
316 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); 289 ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi");
317 290
318 } 291 }
@@ -320,6 +293,7 @@ exports.Content = Montage.create(Component, {
320 293
321 handlePropertyChanging: { 294 handlePropertyChanging: {
322 value: function(e) { 295 value: function(e) {
296 if(e.wasSetByCode) return;
323 297