diff options
Diffstat (limited to 'js/panels/properties')
-rw-r--r-- | js/panels/properties/content.reel/content.js | 122 |
1 files changed, 43 insertions, 79 deletions
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 3cedee6d..34c38e70 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js | |||
@@ -141,7 +141,8 @@ exports.Content = Montage.create(Component, { | |||
141 | 141 | ||
142 | displayElementProperties: { | 142 | displayElementProperties: { |
143 | value: function (el) { | 143 | value: function (el) { |
144 | var customPI; | 144 | var customPI, |
145 | currentValue; | ||
145 | 146 | ||
146 | this.elementName = el.elementModel.selection; | 147 | this.elementName = el.elementModel.selection; |
147 | this.elementId.value = el.getAttribute("id") || ""; | 148 | this.elementId.value = el.getAttribute("id") || ""; |
@@ -180,90 +181,50 @@ exports.Content = Montage.create(Component, { | |||
180 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { | 181 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { |
181 | for(var k = 0, control; control = fields[k]; k++) { | 182 | for(var k = 0, control; control = fields[k]; k++) { |
182 | 183 | ||
183 | if(control.prop !== "border-color" && control.prop !== "background-color") { | 184 | if(control.type !== "color") { |
184 | var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 185 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
185 | if(currentValue === null) | 186 | currentValue ? currentValue = currentValue : currentValue = control.defaultValue; |
187 | this.customSections[0].content.controls[control.id] = currentValue; | ||
188 | } | ||
189 | else | ||
190 | { | ||
191 | currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator); | ||
192 | if(control.prop === "border") | ||
193 | { | ||
194 | this.application.ninja.colorController.colorModel.input = "stroke"; | ||
195 | } | ||
196 | else if(control.prop === "background") | ||
197 | { | ||
198 | this.application.ninja.colorController.colorModel.input = "fill"; | ||
199 | } | ||
200 | |||
201 | debugger; | ||
202 | if(currentValue) | ||
186 | { | 203 | { |
187 | currentValue = control.defaultValue; | 204 | if(currentValue.mode === "gradient") |
205 | { | ||
206 | this.application.ninja.colorController.colorModel["gradient"] = | ||
207 | {value: currentValue.color, wasSetByCode: true, type: 'change'}; | ||
208 | } | ||
209 | else | ||
210 | { | ||
211 | if (currentValue.color.a !== undefined) | ||
212 | { | ||
213 | this.application.ninja.colorController.colorModel.alpha = | ||
214 | {value: currentValue.color.a, wasSetByCode: true, type: 'change'}; | ||
215 | } | ||
216 | this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color; | ||
217 | } | ||
218 | } | ||
219 | else | ||
220 | { | ||
221 | this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'}; | ||
222 | this.application.ninja.colorController.colorModel.applyNoColor(); | ||
188 | } | 223 | } |
189 | this.customSections[i].content.controls[control.id] = currentValue; | ||
190 | } | 224 | } |
191 | } | 225 | } |
192 | } | 226 | } |
193 | } | 227 | } |
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 | } | 228 | } |
268 | }, | 229 | }, |
269 | 230 | ||
@@ -303,6 +264,8 @@ exports.Content = Montage.create(Component, { | |||
303 | 264 | ||
304 | handlePropertyChange: { | 265 | handlePropertyChange: { |
305 | value: function(e) { | 266 | value: function(e) { |
267 | if(e.wasSetByCode) return; | ||
268 | |||
306 | var newValue; | 269 | var newValue; |
307 | 270 | ||
308 | e.units ? newValue = e.value + e.units : newValue = e.value; | 271 | e.units ? newValue = e.value + e.units : newValue = e.value; |
@@ -320,6 +283,7 @@ exports.Content = Montage.create(Component, { | |||
320 | 283 | ||
321 | handlePropertyChanging: { | 284 | handlePropertyChanging: { |
322 | value: function(e) { | 285 | value: function(e) { |
286 | if(e.wasSetByCode) return; | ||
323 | 287 | ||
324 | // ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); | 288 | // ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi"); |
325 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); | 289 | ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi"); |