Added third gradient chip popup

Need to add support for gradient events dispatching from standalone chips. Just need to hook up relays for events besides HSV to bubble up.

1 files changed, 167 insertions, 65 deletions

diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index bccfcebc..717e6fa2 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -36,18 +36,30 @@ exports.ColorPopupManager = Montage.create(Component, {
             //Closing popups if outside limits
             document.addEventListener('mousedown', function (e) {
                 //
-                if (this._popupBase && !this._popupChipBase) {
+                if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) {
                         if(!this.popupHitCheck(this._popupBase, e)) {
                                 this.hideColorPopup();
                         }
-                } else if (!this._popupBase && this._popupChipBase) {
+                } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
                         if(!this.popupHitCheck(this._popupChipBase, e)) {
                                 this.hideColorChipPopup();
                         }
-                } else if (this._popupBase && this._popupChipBase) {
+                } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
                         if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
                                 this.hideColorPopup();
                         }
+                } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorPopup();
+                        }
+                } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorChipPopup();
+                        }
+                } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorPopup();
+                        }
                 }
             }.bind(this));
             ////////////////////////////////////////////////////////////
@@ -74,9 +86,11 @@ exports.ColorPopupManager = Montage.create(Component, {
                         //Hides popups since click is outside limits
                         return false;
                 } else {
+                        //Keeps popup open since click inside area
                         return true;
                 }
             } else {
+                //Hides popups since element not detected
                     return false;
             }
                 }  
@@ -92,6 +106,11 @@ exports.ColorPopupManager = Montage.create(Component, {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
+    //
+    _popupGradientChipBase: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
         value: null
@@ -99,33 +118,33 @@ exports.ColorPopupManager = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        get: function() {
-            return this._colorManager;
-        },
-        set: function(value) {
-                this._colorManager = value;
-        }
+        get: function() {return this._colorManager;},
+        set: function(value) {this._colorManager = value;}
     },
     ////////////////////////////////////////////////////////////////////
     //
     _colorPopupDrawing: {
-        enumerable: true,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //
         _colorChipPopupDrawing: {
-        enumerable: true,
+        value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+        _colorGradientPopupDrawing: {
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //TODO: Remove and use montage's built in component
     showColorPopup: {
-        enumerable: true,
         value: function (x, y, side, align) {
+                //Check to see if popup is drawing, avoids errors
                 if (this._colorPopupDrawing) {
                         return;
                 }
+                //Check for toggling view
                 if (this._popupBase && this._popupBase.opened) {
                         //Toogles if called and opened
                         this.hideColorPopup();
@@ -138,7 +157,7 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 this._hasinit = true;
                         }
                         ////////////////////////////////////////////////////
-                        //Creating popup from m-js component
+                        //Creating popup
                         var popup = document.createElement('div');
                         document.body.appendChild(popup);
                         //
@@ -158,13 +177,13 @@ exports.ColorPopupManager = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     hideColorPopup: {
-        enumerable: true,
         value: function () {
                 if (this._popupBase && this._popupBase.opened) {
                         //
                         this._popupBase.popup.removeEventListener('didDraw', this, false);
                         //
                         this.hideColorChipPopup();
+                        this.hideGradientChipPopup();
                         //Making sure to return color manager to either stroke or fill (might be a Hack for now)
                         if (this.colorManager.input !== 'stroke' && this.colorManager.input !== 'fill' && this.application.ninja.colorController.colorView.previousInput) {
                                 this.colorManager.input = this.application.ninja.colorController.colorView.previousInput;
@@ -187,7 +206,6 @@ exports.ColorPopupManager = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     colorChipChange: {
-        enumerable: true,
         value: function (e) {
                 //
                 var ctx,
@@ -224,16 +242,58 @@ exports.ColorPopupManager = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    colorGradientChipChange: {
+        value: function (e) {
+                //
+                var ctx,
+                        cvs = this.application.ninja.colorController.colorView.currentChip.getElementsByTagName('canvas')[0],
+                        rgb = this._popupGradientChipBase.colorManager.rgb,
+                                hsl = this._popupGradientChipBase.colorManager.hsl,
+                                alpha = this._popupGradientChipBase.colorManager.alpha.value;
+                //
+                if (cvs) {
+                        ctx = cvs.getContext('2d');
+                        ctx.clearRect(0, 0, cvs.width, cvs.height);
+                        ctx.beginPath();
+                        ctx.lineWidth = 2;
+                        ctx.strokeStyle = "#666";
+                        ctx.moveTo(0, 0);
+                                ctx.lineTo(cvs.width, 0);
+                                ctx.lineTo(cvs.width, cvs.height);
+                                ctx.lineTo(0, cvs.height);
+                                ctx.lineTo(0, 0);
+                                ctx.stroke();
+                                ctx.beginPath();
+                        ctx.lineWidth = 2;
+                        ctx.strokeStyle = "#333";
+                        ctx.moveTo(2, 2);
+                                ctx.lineTo(cvs.width-2, 2);
+                                ctx.lineTo(cvs.width-2, cvs.height-2);
+                                ctx.lineTo(2, cvs.height-2);
+                                ctx.lineTo(2, 1);
+                                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+')'});
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     showColorChipPopup: {
-        enumerable: true,