aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-23 19:22:53 -0700
committerJose Antonio Marquez2012-06-23 19:22:53 -0700
commit32c41a56fd870f28be70c9b9cfb4fe6dfbb16654 (patch)
tree9cb08c329b5fec6ae241fa2974ac4713fa428e3c /js
parent1005ff940d65a6717653d28b81d10564e4434dea (diff)
downloadninja-32c41a56fd870f28be70c9b9cfb4fe6dfbb16654.tar.gz
Adding support for gradients on chips
Need to handle other color modes, currently only handling HSV and gradients. Working on getting other modes supported. Also, will need clean up color popup manager after completion.
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/body-controller.js5
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js6
-rwxr-xr-xjs/panels/color/colorpopup-manager.js34
3 files changed, 36 insertions, 9 deletions
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0ca6c417..0b6a5bad 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -31,6 +31,8 @@ exports.BodyController = Montage.create(ElementController, {
31 value: function(el, p) { 31 value: function(el, p) {
32 switch(p) { 32 switch(p) {
33 case "background" : 33 case "background" :
34 case "background-image":
35 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-image"));
34 case "background-color": 36 case "background-color":
35 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); 37 return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
36 case "border": 38 case "border":
@@ -50,6 +52,9 @@ exports.BodyController = Montage.create(ElementController, {
50 value: function(el, p, value) { 52 value: function(el, p, value) {
51 switch(p) { 53 switch(p) {
52 case "background": 54 case "background":
55 case "background-image":
56 this.application.ninja.stylesController.setElementStyle(el, "background-image", value);
57 break;
53 case "background-color": 58 case "background-color":
54 this.application.ninja.stylesController.setElementStyle(el, "background-color", value); 59 this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
55 break; 60 break;
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index 26d4932f..bf2ada96 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -480,7 +480,11 @@ exports.ColorPanelBase = Montage.create(Component, {
480 } 480 }
481 if (c && c.css) { 481 if (c && c.css) {
482 this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); 482 this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
483 this.style.backgroundColor = c.css; 483 if (m === 'gradient') {
484 this.style.backgroundImage = c.css;
485 } else {
486 this.style.backgroundColor = c.css;
487 }
484 } else { 488 } else {
485 this.drawNoColor(this, this.cvs); 489 this.drawNoColor(this, this.cvs);
486 } 490 }
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 29f9ec94..0ea02192 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -106,10 +106,20 @@ exports.ColorPopupManager = Montage.create(Component, {
106 }, 106 },
107 //////////////////////////////////////////////////////////////////// 107 ////////////////////////////////////////////////////////////////////
108 // 108 //
109 _popupChipBtn: {
110 value: null
111 },
112 ////////////////////////////////////////////////////////////////////
113 //
109 _popupGradientChipBase: { 114 _popupGradientChipBase: {
110 value: null 115 value: null
111 }, 116 },
112 //////////////////////////////////////////////////////////////////// 117 ////////////////////////////////////////////////////////////////////
118 //
119 _popupGradientChipBtn: {
120 value: null
121 },
122 ////////////////////////////////////////////////////////////////////
113 //Storing color manager 123 //Storing color manager
114 _colorManager: { 124 _colorManager: {
115 value: null 125 value: null
@@ -208,7 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, {
208 value: function (e) { 218 value: function (e) {
209 // 219 //
210 var ctx, 220 var ctx,
211 cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], 221 cvs = this._popupChipBtn.getElementsByTagName('canvas')[0],
212 rgb = this._popupChipBase.colorManager.rgb, 222 rgb = this._popupChipBase.colorManager.rgb,
213 hsl = this._popupChipBase.colorManager.hsl, 223 hsl = this._popupChipBase.colorManager.hsl,
214 alpha = this._popupChipBase.colorManager.alpha.value; 224 alpha = this._popupChipBase.colorManager.alpha.value;
@@ -236,7 +246,7 @@ exports.ColorPopupManager = Montage.create(Component, {
236 ctx.stroke(); 246 ctx.stroke();
237 } 247 }
238 // 248 //
239 this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); 249 this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
240 } 250 }
241 }, 251 },
242 //////////////////////////////////////////////////////////////////// 252 ////////////////////////////////////////////////////////////////////
@@ -245,7 +255,7 @@ exports.ColorPopupManager = Montage.create(Component, {
245 value: function (e) { 255 value: function (e) {
246 // 256 //
247 var ctx, 257 var ctx,
248 cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0], 258 cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0],
249 rgb = this._popupGradientChipBase.colorManager.rgb, 259 rgb = this._popupGradientChipBase.colorManager.rgb,
250 hsl = this._popupGradientChipBase.colorManager.hsl, 260 hsl = this._popupGradientChipBase.colorManager.hsl,
251 alpha = this._popupGradientChipBase.colorManager.alpha.value; 261 alpha = this._popupGradientChipBase.colorManager.alpha.value;
@@ -273,7 +283,7 @@ exports.ColorPopupManager = Montage.create(Component, {
273 ctx.stroke(); 283 ctx.stroke();
274 } 284 }
275 // 285 //
276 this.application.ninja.colorController.colorView.currentChip.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'}); 286 this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
277 } 287 }
278 }, 288 },
279 //////////////////////////////////////////////////////////////////// 289 ////////////////////////////////////////////////////////////////////
@@ -294,6 +304,8 @@ exports.ColorPopupManager = Montage.create(Component, {
294 return; 304 return;
295 } 305 }
296 // 306 //
307 this._popupChipBtn = this.application.ninja.colorController.colorView.currentChip;
308 //
297 this._colorChipPopupDrawing = true; 309 this._colorChipPopupDrawing = true;
298 //////////////////////////////////////////////////// 310 ////////////////////////////////////////////////////
299 //Initializing events 311 //Initializing events
@@ -370,6 +382,8 @@ exports.ColorPopupManager = Montage.create(Component, {
370 this.hideGradientChipPopup(); 382 this.hideGradientChipPopup();
371 return; 383 return;
372 } else { 384 } else {
385 //
386 this._popupGradientChipBtn = this.application.ninja.colorController.colorView.currentChip;
373 // 387 //
374 this._colorGradientPopupDrawing = true; 388 this._colorGradientPopupDrawing = true;
375 //////////////////////////////////////////////////// 389 ////////////////////////////////////////////////////
@@ -590,16 +604,20 @@ exports.ColorPopupManager = Montage.create(Component, {
590 if (e._event.hsv) { 604 if (e._event.hsv) {
591 this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; 605 this._popupChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
592 this.colorChipChange(e); 606 this.colorChipChange(e);
593 } else { 607 } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
594 //console.log(e._event); 608 if (e._event.gradient && !e._event.wasSetByCode) {
609 //
610 this._popupChipBtn.color('gradient', e._event.gradient);
611 }
595 } 612 }
596 return; 613 return;
597 } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) { 614 } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
598 if (e._event.hsv) { 615 if (e._event.hsv) {
599 this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode}; 616 this._popupGradientChipBase.colorManager.hsv = {h: e._event.hsv.h, s: e._event.hsv.s, v: e._event.hsv.v, type: e._event.type, wasSetByCode: e._event.wasSetByCode};
600 this.colorGradientChipChange(e); 617 this.colorGradientChipChange(e);
601 } else { 618 } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
602 //console.log(e._event); 619 //
620 this._popupChipBtn.color('gradient', e._event.gradient);
603 } 621 }
604 return; 622 return;
605 } 623 }