diff options
Diffstat (limited to 'js/panels/properties/content.reel/content.js')
-rw-r--r-- | js/panels/properties/content.reel/content.js | 142 |
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 |