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.

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, {
         value: function(el, p) {
             switch(p) {
                 case "background" :
+                case "background-image":
+                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-image"));
                 case "background-color":
                     return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
                 case "border":
@@ -50,6 +52,9 @@ exports.BodyController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "background":
+                case "background-image":
+                    this.application.ninja.stylesController.setElementStyle(el, "background-image", value);
+                    break;
                 case "background-color":
                     this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
                     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, {
                         }
                         if (c && c.css) {
                             this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height);
-                            this.style.backgroundColor = c.css;
+                            if (m === 'gradient') {
+                                this.style.backgroundImage = c.css;
+                            } else {
+                                    this.style.backgroundColor = c.css;
+                            }
                         } else {
                             this.drawNoColor(this, this.cvs);
                         }
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, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _popupChipBtn: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     _popupGradientChipBase: {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
+    //
+    _popupGradientChipBtn: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
         value: null
@@ -208,7 +218,7 @@ exports.ColorPopupManager = Montage.create(Component, {
         value: function (e) {
                 //
                 var ctx,
-                        cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0],
+                        cvs = this._popupChipBtn.getElementsByTagName('canvas')[0],
                         rgb = this._popupChipBase.colorManager.rgb,
                                 hsl = this._popupChipBase.colorManager.hsl,
                                 alpha = this._popupChipBase.colorManager.alpha.value;
@@ -236,7 +246,7 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 ctx.stroke();
                         }
                 //
-                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+')'});
+                this._popupChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -245,7 +255,7 @@ exports.ColorPopupManager = Montage.create(Component, {
         value: function (e) {
                 //
                 var ctx,
-                        cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0],
+                        cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0],
                         rgb = this._popupGradientChipBase.colorManager.rgb,
                                 hsl = this._popupGradientChipBase.colorManager.hsl,
                                 alpha = this._popupGradientChipBase.colorManager.alpha.value;
@@ -273,7 +283,7 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 ctx.stroke();
                         }
                 //
-                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+')'});
+                this._popupGradientChipBtn.color('rgb', {r: rgb.r, g: rgb.g, b: rgb.b, a: alpha, css: 'rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')'});
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -294,6 +304,8 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 return;
                         }
                         //
+                        this._popupChipBtn = this.application.ninja.colorController.colorView.currentChip;
+                        //
                         this._colorChipPopupDrawing = true;
                         ////////////////////////////////////////////////////
                         //Initializing events
@@ -370,6 +382,8 @@ exports.ColorPopupManager = Montage.create(Component, {
                         this.hideGradientChipPopup();
                         return;
                 } else {
+                        //
+                        this._popupGradientChipBtn = this.application.ninja.colorController.colorView.currentChip;
                         //
                         this._colorGradientPopupDrawing = true;
                         ////////////////////////////////////////////////////
@@ -590,16 +604,20 @@ exports.ColorPopupManager = Montage.create(Component, {
                         if (e._event.hsv) {
                                 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};
                                 this.colorChipChange(e);
-                        } else {
-                                //console.log(e._event);
+                        } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
+                                if (e._event.gradient && !e._event.wasSetByCode) {
+                                        //
+                                        this._popupChipBtn.color('gradient', e._event.gradient);
+                                }
                         }
                         return;
                 } else if (this._popupGradientChipBase && this._popupGradientChipBase.opened) {
                         if (e._event.hsv) {
                                 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};
                                 this.colorGradientChipChange(e);
-                        } else {
-                                //console.log(e._event);
+                        } else if (!this._popupBase || (this._popupBase && !this._popupBase.opened)){
+                                //
+                                this._popupChipBtn.color('gradient', e._event.gradient);
                         }
                         return;
                 }