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.

3 files changed, 186 insertions, 81 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6b50fae2..9acd24ac 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -43,7 +43,7 @@ exports.GradientPicker = Montage.create(Component, {
         get: function() {return this._mode;},
         set: function(value) {
                 //
-                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                 //
             this._mode = value;
             //
@@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, {
         value: function(data, silent) {
                 if (this.application.ninja.colorController.colorPopupManager) {
                         //Hiding any open popups (of gradient buttons)
-                        this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                        this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                         //Creating stop elements
                         var stop = document.createElement('div'),
                                 holder = document.createElement('div'),
@@ -160,7 +160,7 @@ exports.GradientPicker = Montage.create(Component, {
                                 //Initialing button with color data
                                 button.color(data.color.mode, data.color.value);
                                 //Button popup data
-                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true, history: false};
+                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, gradientPopup: true, history: false};
                                 //Listening for color events from button
                                 button.addEventListener('change', this, false);
                                 //Dispatching event depending on type of mode
@@ -263,7 +263,7 @@ exports.GradientPicker = Montage.create(Component, {
                 //
                 this._updating = true;
                 //
-                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                 //
                 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
                         this.removeStop(this.currentStop);
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 153817c1..179dc02c 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
         value: function () {
                 //
                 this._components = null;
-                this._components = {wheel: null, combo: null};
+                this._components = {wheel: null, combo: null, gradient: null};
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -369,27 +369,30 @@ exports.ColorPanelPopup = Montage.create(Component, {
     drawGradient: {
         value: function (g) {
                 //TODO: Remove container, insert in reel
-                var container = document.createElement('div'), gradient = GradientPicker.create();
+                var container = document.createElement('div');
+                //
+                this._components.gradient = GradientPicker.create();
+                //
                 this.gradients.appendChild(container);
                 //Creating gradient picker from components
-                gradient.element = container;
-                gradient.hack = this.hack; // TODO: Remove
+                this._components.gradient.element = container;
+                this._components.gradient.hack = this.hack; // TODO: Remove
                 //
                 if (g && g.value && g.value.stops) {
                         if (g.value.gradientMode) {
-                                gradient._mode = g.value.gradientMode;
-                                gradient.value = g.value.stops;
+                                this._components.gradient._mode = g.value.gradientMode;
+                                this._components.gradient.value = g.value.stops;
                         } else {
-                                gradient._mode = 'linear';
-                                gradient.value = g.value.stops;
+                                this._components.gradient._mode = 'linear';
+                                this._components.gradient.value = g.value.stops;
                         }
                 } else {
-                        gradient._mode = this.defaultGradient.gradientMode;
-                        gradient.value = this.defaultGradient.stops;
+                        this._components.gradient._mode = this.defaultGradient.gradientMode;
+                        this._components.gradient.value = this.defaultGradient.stops;
                 }
                 //
-                gradient.needsDraw = true;
-                gradient.addEventListener('change', function (e){
+                this._components.gradient.needsDraw = true;
+                this._components.gradient.addEventListener('change', function (e){
                         //
                         if (!e._event.wasSetByCode) {
                                 this.colorManager.gradient = {value: e._event.gradient, type: 'change', wasSetByCode: false};
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