Color Popup Test Candidate

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

6 files changed, 26 insertions, 18 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 9acd24ac..853d77f9 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -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, gradientPopup: true, history: false};
+                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: false, 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
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index a684d0db..dd786d15 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -82,7 +82,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
                 // This is a single chip - Not related to the color panel -- Set the initial color if found
                 var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)";
 
-                if(this.color) {
+                if(this.color && this.color.color) {
+                        var g =  this.color.color;
+                        g.wasSetByCode = true;
+                        this.chipBtn.color(this.color.mode, g);
+                } else if (this.color) {
                     var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css);
                     mode = colorObj.mode;
                     r = colorObj.value.r;
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) {
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 5719a63d..c8383307 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -373,7 +373,7 @@ exports.Properties = Montage.create(Component, {
                         }
                     }
                 }
-
+                if (previousInput === 'chip') return;
                 this.application.ninja.colorController.colorModel.input =  previousInput;
                 var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1];
                         color.c.wasSetByCode = true;