diff options
Diffstat (limited to 'js/controllers')
-rw-r--r-- | js/controllers/color-controller.js | 97 | ||||
-rw-r--r-- | js/controllers/elements/element-controller.js | 43 | ||||
-rw-r--r-- | js/controllers/elements/shapes-controller.js | 2 |
3 files changed, 55 insertions, 87 deletions
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 87180873..925b525d 100644 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js | |||
@@ -175,76 +175,21 @@ exports.ColorController = Montage.create(Component, { | |||
175 | }, | 175 | }, |
176 | //////////////////////////////////////////////////////////////////// | 176 | //////////////////////////////////////////////////////////////////// |
177 | // | 177 | // |
178 | setBackground: { | 178 | setColor: { |
179 | enumerable: true, | 179 | enumerable: true, |
180 | value: function (type, background, selection) { | 180 | value: function (mode, color, isFill, selection) { |
181 | //TODO: Remove hack | 181 | var elements; |
182 | var elements, i, hack = [], hackNone = []; | ||
183 | //The selection is optional, if none, it asks for the currently selected elements | 182 | //The selection is optional, if none, it asks for the currently selected elements |
184 | if (selection) { | 183 | if (selection) { |
185 | elements = selection; | 184 | elements = selection; |
186 | } else { | 185 | } else { |
187 | elements = this.application.ninja.selectedElements; | 186 | elements = this.application.ninja.selectedElements; |
188 | } | 187 | } |
189 | // | 188 | if (elements && elements.length) { |
190 | for (i=0; elements[i]; i++) { | 189 | var colorInfo = { mode:mode, |
191 | hack[i] = background; | 190 | color:color |
192 | hackNone[i] = 'none'; | 191 | }; |
193 | } | 192 | ElementsMediator.setColor(elements, colorInfo, isFill, "Change", "color-controller"); |
194 | // | ||
195 | if (elements && elements.length > 0) { | ||
196 | switch (type) { | ||
197 | case 'image': | ||
198 | ElementsMediator.setProperty(elements, "background-image", hack, {"background-image": background}, "Change", "color-controller"); | ||
199 | ElementsMediator.setProperty(elements, "background-color", hackNone, {"background-color": 'none'}, "Change", "color-controller"); | ||
200 | break; | ||
201 | case 'color': | ||
202 | //TODO: Add logic to handle setting color when image (like gradients) is applied | ||
203 | //TODO: Handle applying to multiple items, currently, we need to create a dummy array of the same value | ||
204 | ElementsMediator.setProperty(elements, "background-image", hackNone, {"background-image": 'none'}, "Change", "color-controller"); | ||
205 | ElementsMediator.setProperty(elements, "background-color", hack, {"background-color": background}, "Change", "color-controller"); | ||
206 | break; | ||
207 | case 'background': | ||
208 | break; | ||
209 | } | ||
210 | // | ||
211 | //console.log(this.getColorObjFromCss('#333')); | ||
212 | } | ||
213 | } | ||
214 | }, | ||
215 | //////////////////////////////////////////////////////////////////// | ||
216 | // | ||
217 | setBorder: { | ||
218 | enumerable: true, | ||
219 | value: function (type, border, selection) { | ||
220 | // | ||
221 | var elements, i, hack = [], hackNone = []; | ||
222 | //The selection is optional, if none, it asks for the currently selected elements | ||
223 | if (selection) { | ||
224 | elements = selection; | ||
225 | } else { | ||
226 | elements = this.application.ninja.selectedElements; | ||
227 | } | ||
228 | // | ||
229 | for (i=0; elements[i]; i++) { | ||
230 | hack[i] = border; | ||
231 | hackNone[i] = 'none'; | ||
232 | } | ||
233 | // | ||
234 | if (elements && elements.length > 0) { | ||
235 | switch (type) { | ||
236 | case 'image': | ||
237 | //TODO: Figure out why color must be removed, might be related to the CSS | ||
238 | ElementsMediator.setProperty(elements, "border-color", hackNone, {"border-color": 'none'}, "Change", "color-controller"); | ||
239 | ElementsMediator.setProperty(elements, "border-image", hack, {"border-image": border}, "Change", "color-controller"); | ||
240 | break; | ||
241 | case 'color': | ||
242 | ElementsMediator.setProperty(elements, "border-image", hackNone, {"border-image": 'none'}, "Change", "color-controller"); | ||
243 | ElementsMediator.setProperty(elements, "border-color", hack, {"border-color": border}, "Change", "color-controller"); | ||
244 | break; | ||
245 | case 'border': | ||
246 | break; | ||
247 | } | ||
248 | } | 193 | } |
249 | } | 194 | } |
250 | }, | 195 | }, |
@@ -264,8 +209,10 @@ exports.ColorController = Montage.create(Component, { | |||
264 | color = {value: null, css: 'none'}; | 209 | color = {value: null, css: 'none'}; |
265 | } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { | 210 | } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { |
266 | color = e._event.rgba; | 211 | color = e._event.rgba; |
212 | color.webGlColor = e._event.webGlColor; | ||
267 | } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') { | 213 | } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') { |
268 | color = e._event.hsla; | 214 | color = e._event.hsla; |
215 | color.webGlColor = e._event.webGlColor; | ||
269 | } else if (mode !== 'gradient'){ | 216 | } else if (mode !== 'gradient'){ |
270 | color = {value: e._event.hex, css: '#'+e._event.hex}; | 217 | color = {value: e._event.hex, css: '#'+e._event.hex}; |
271 | } else if (mode === 'gradient'){ | 218 | } else if (mode === 'gradient'){ |
@@ -280,32 +227,14 @@ exports.ColorController = Montage.create(Component, { | |||
280 | // | 227 | // |
281 | if(e._event.wasSetByCode) return; | 228 | if(e._event.wasSetByCode) return; |
282 | // | 229 | // |
283 | if (mode === 'nocolor') { | 230 | this.setColor(mode, color, true); |
284 | //TODO: Add a check instead of setting properties | ||
285 | this.setBackground('image', color.css, false); | ||
286 | this.setBackground('color', color.css, false); | ||
287 | this.setBackground('background', color.css, false); | ||
288 | } else if (mode === 'gradient') { | ||
289 | this.setBackground('image', color.css, false); | ||
290 | } else { | ||
291 | this.setBackground('color', color.css, false); | ||
292 | } | ||
293 | } else if (input === 'stroke') { | 231 | } else if (input === 'stroke') { |
294 | // | 232 | // |
295 | this.stroke = color; | 233 | this.stroke = color; |
296 | // | 234 | // |
297 | if(e._event.wasSetByCode) return; | 235 | if(e._event.wasSetByCode) return; |
298 | // | 236 | |
299 | if (mode === 'nocolor') { | 237 | this.setColor(mode, color, false); |
300 | //TODO: Add a check instead of setting properties | ||
301 | this.setBorder('image', color.css, false); | ||
302 | this.setBorder('color', color.css, false); | ||
303 | this.setBorder('border', color.css, false); | ||
304 | } else if (mode === 'gradient') { | ||
305 | this.setBorder('image', color.css, false); | ||
306 | } else { | ||
307 | this.setBorder('color', color.css, false); | ||
308 | } | ||
309 | } | 238 | } |
310 | //////////////////////////////////////////////////////////// | 239 | //////////////////////////////////////////////////////////// |
311 | //////////////////////////////////////////////////////////// | 240 | //////////////////////////////////////////////////////////// |
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index f254220c..8a0735f7 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -83,13 +83,52 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
83 | 83 | ||
84 | setColor: { | 84 | setColor: { |
85 | value: function(el, color, isFill) { | 85 | value: function(el, color, isFill) { |
86 | var mode = color.mode; | ||
86 | if(isFill) | 87 | if(isFill) |
87 | { | 88 | { |
88 | this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); | 89 | if(mode) |
90 | { | ||
91 | switch (mode) { | ||
92 | case 'nocolor': | ||
93 | this.setProperty(el, "background-image", "none"); | ||
94 | this.setProperty(el, "background-color", "none"); | ||
95 | break; | ||
96 | case 'gradient': | ||
97 | this.setProperty(el, "background-image", color.color.css); | ||
98 | this.setProperty(el, "background-color", "none"); | ||
99 | break; | ||
100 | default: | ||
101 | this.setProperty(el, "background-image", "none"); | ||
102 | this.setProperty(el, "background-color", color.color.css); | ||
103 | } | ||
104 | } | ||
105 | else | ||
106 | { | ||
107 | this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); | ||
108 | } | ||
89 | } | 109 | } |
90 | else | 110 | else |
91 | { | 111 | { |
92 | this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); | 112 | if(mode) |
113 | { | ||
114 | switch (mode) { | ||
115 | case 'nocolor': | ||
116 | this.setProperty(el, "border-image", "none"); | ||
117 | this.setProperty(el, "border-color", "none"); | ||
118 | break; | ||
119 | case 'gradient': | ||
120 | this.setProperty(el, "border-image", color.color.css); | ||
121 | this.setProperty(el, "border-color", "none"); | ||
122 | break; | ||
123 | default: | ||
124 | this.setProperty(el, "border-image", "none"); | ||
125 | this.setProperty(el, "border-color", color.color.css); | ||
126 | } | ||
127 | } | ||
128 | else | ||
129 | { | ||
130 | this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); | ||
131 | } | ||
93 | } | 132 | } |
94 | } | 133 | } |
95 | }, | 134 | }, |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d34644a7..92353f28 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -168,7 +168,7 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
168 | setColor: { | 168 | setColor: { |
169 | value: function(el, color, isFill) { | 169 | value: function(el, color, isFill) { |
170 | // TODO - Format color for webGL before setting | 170 | // TODO - Format color for webGL before setting |
171 | color = color.webGlColor; | 171 | color = color.webGlColor || color.color.webGlColor; |
172 | if(isFill) |