Color Popup Test Candidate

Preliminary check in for testing to commence on new color popup functionality.

3 files changed, 19 insertions, 15 deletions

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index bf2ada96..b3045db1 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -170,7 +170,7 @@ exports.ColorPanelBase = Montage.create(Component, {
             this.addButton('current', this.btnCurrent);
             this.addButton('previous', this.btnPrevious);
             //
-            this.addButton('hexinput', this.hextext);
+            this.addButton('hexinput', this.hextext, this.colorManager);
             this.addButton('reset', this.btnDefault);
             this.addButton('nocolor', this.btnNoColor);
             this.addButton('swap', this.btnSwap);
@@ -461,7 +461,7 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     addButton: {
-        value: function (type, button) {
+        value: function (type, button, manager) {
             //
             switch (type.toLocaleLowerCase()) {
                 case 'chip':
@@ -487,7 +487,7 @@ exports.ColorPanelBase = Montage.create(Component, {
                             }
                         } else {
                             this.drawNoColor(this, this.cvs);
-                        }
+                        }9
                         this.colorValue = c;
                         this.colorMode = m;
                         this.otherInput = false;
@@ -677,8 +677,8 @@ exports.ColorPanelBase = Montage.create(Component, {
                 case 'hexinput':
                     var hexinp = HotText.create();
                     hexinp.element = button;
-                    hexinp.labelFunction = this._updateHexValue.bind(this);
-                    hexinp.inputFunction = this._hottextHexInput.bind(this);
+                    hexinp.labelFunction = this._updateHexValue.bind(manager);
+                    hexinp.inputFunction = this._hottextHexInput.bind(manager);
                     hexinp.needsDraw = true;
                     this._buttons.hexinput.push(hexinp);
                     return hexinp;
@@ -1248,23 +1248,23 @@ exports.ColorPanelBase = Montage.create(Component, {
             }
             //Checking for panel mode and converting the color to the panel mode
             if (this._panelMode === 'hsl') {
-                rgb = this.colorManager.hexToRgb(color);
+                rgb = this.hexToRgb(color);
                 if (rgb) {
-                    update = this.colorManager.rgbToHsl(rgb.r, rgb.g, rgb.b);
+                    update = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
                     update.wasSetByCode = false;
                     update.type = 'change';
-                    this.colorManager.hsl = update;
+                    this.hsl = update;
                 } else {
-                    this.colorManager.applyNoColor(false);
+                    this.applyNoColor(false);
                 }
             } else {
-                update = this.colorManager.hexToRgb(color);
+                update = this.hexToRgb(color);
                 if (update) {
                     update.wasSetByCode = false;
                     update.type = 'change';
-                    this.colorManager.rgb = update;
+                    this.rgb = update;
                 } else {
-                    this.colorManager.applyNoColor(false);
+                    this.applyNoColor(false);
                 }
             }
         }
@@ -1273,7 +1273,7 @@ exports.ColorPanelBase = Montage.create(Component, {
     //
     _updateHexValue: {
         value: function (v) {
-            return this.colorManager.hex;
+            return this.hex;
         }
     },
     ////////////////////////////////////////////////////////////////////
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 179dc02c..c0d8118f 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -153,7 +153,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                         this.btnGradient.style.display = 'none';
                 }
                 //
-                this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex);
+                this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex, this.colorManager);
                 //
                 this._components.combo.slider.needsDraw = true;
                 this._components.combo.hottext.needsDraw = true;
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 0ea02192..15d55787 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -217,6 +217,8 @@ exports.ColorPopupManager = Montage.create(Component, {
     colorChipChange: {
         value: function (e) {
                 //
+                if (!this._popupChipBtn) return;
+                //
                 var ctx,
                         cvs = this._popupChipBtn.getElementsByTagName('canvas')[0],
                         rgb = this._popupChipBase.colorManager.rgb,
@@ -254,6 +256,8 @@ exports.ColorPopupManager = Montage.create(Component, {
     colorGradientChipChange: {
         value: function (e) {
                 //
+                if (!this._popupGradientChipBtn) return;
+                //
                 var ctx,
                         cvs = this._popupGradientChipBtn.getElementsByTagName('canvas')[0],
                         rgb = this._popupGradientChipBase.colorManager.rgb,
@@ -403,7 +407,7 @@ exports.ColorPopupManager = Montage.create(Component, {
                         if (e._event.srcElement.props) {
                                 this._popupGradientChipBase.props = e._event.srcElement.props;
                         } else {
-                                this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, history: false};
+                                this._popupGradientChipBase.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, history: false};
                         }
                         //
                         if (this._popupGradientChipBase.props.offset) {