aboutsummaryrefslogtreecommitdiff
path: root/js/controllers
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers')
-rw-r--r--js/controllers/color-controller.js97
-rw-r--r--js/controllers/elements/element-controller.js43
-rw-r--r--js/controllers/elements/shapes-controller.js2
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) 172