Replacing temp color chip pop

This replaces the temporary color chip popup with a main popup used universally throughout the app. There are still outstanding issues to be addressed, this is just the initial set up before debugging issues.

3 files changed, 212 insertions, 147 deletions

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index 596580b4..d3b6fed7 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -52,7 +52,7 @@
                                 
                                 </div>
                         
-                        <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
+                        <div class="cp_pu_hex">#<input data-montage-id="input_hex" class="cp_pu_hottext_hex" maxlength="6" /></div>
                         
                         <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
                         <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 192c62fb..153817c1 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, {
     draw: {
         value: function() {
                 //
-                this.drawPalette(this.defaultPalette);
+                if (!this.props || (this.props && this.props.palette)) {
+                        //
+                        this.btnPalette.addEventListener('click', function () {
+                                        this.popupSwitchInputTo(this.palettes);
+                                }.bind(this), true);
+                        //
+                        this.drawPalette(this.defaultPalette);
+                } else {
+                        this.btnPalette.style.display = 'none';
+                }
                 //
-                if (!this.colorManager.gradient) {
-                        this.drawGradient(this.defaultGradient);
+                if (!this.props || (this.props && this.props.gradient)) {
+                        //
+                        this.btnGradient.addEventListener('click', function () {
+                                        this.popupSwitchInputTo(this.gradients);
+                                }.bind(this), true);
+                        //
+                        if (!this.colorManager.gradient) {
+                                this.drawGradient(this.defaultGradient);
+                        }
+                } else {
+                        this.btnGradient.style.display = 'none';
                 }
                 //
-                this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]);
+                this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex);
                 //
                 this._components.combo.slider.needsDraw = true;
                 this._components.combo.hottext.needsDraw = true;
-                        //
-                        this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () {
-                                this.setNoColor();
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.palettes);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.wheel);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.gradients);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
-                this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
-                                //this.popupSwitchInputTo(this.images);
-                }.bind(this), true);
+                //
+                if (!this.props || (this.props && this.props.nocolor)) {
+                                //
+                                this.btnNocolor.addEventListener('click', function () {
+                                        this.setNoColor();
+                                }.bind(this), true);
+                } else {
+                        this.btnNocolor.style.display = 'none';
+                }
                 //
-                this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]);
-                this.application.ninja.colorController.colorView.addButton('previous', this.element.getElementsByClassName('cp_pu_color_previous')[0]);
+                if (!this.props || (this.props && this.props.wheel)) {
+                        //
+                        this.btnWheel.addEventListener('click', function () {
+                                        this.popupSwitchInputTo(this.wheel);
+                                }.bind(this), true);
+                                //
+                                this._components.wheel.addEventListener('firstDraw', this, false);
+                                this._components.wheel.needsDraw = true;
+                } else {
+                        this.btnWheel.style.display = 'none';
+                }
                 //
-                this._components.wheel.addEventListener('firstDraw', this, false);
+                if (!this.props || (this.props && this.props.image)) {
+                        //
+                        this.btnImage.style.opacity = .2;//TODO: Remove, visual feedback for disable button
+                        this.btnImage.addEventListener('click', function () {
+                                        //this.popupSwitchInputTo(this.images);
+                                }.bind(this), true);
+                } else {
+                        this.btnImage.style.display = 'none';
+                }
                 //
-                this._components.wheel.needsDraw = true;
+                if (!this.props || (this.props && this.props.history)) {
+                        this.application.ninja.colorController.colorView.addButton('current', this.btnCurrent);
+                        this.application.ninja.colorController.colorView.addButton('previous', this.btnPrevious);
+                } else {
+                        this.btnCurrent.style.display = 'none';
+                        this.btnPrevious.style.display = 'none';
+                }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -202,7 +231,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                                 break
                 }
                 //Checking for a gradient to be current color
-                if (this.colorManager.gradient) {
+                if (this.colorManager.gradient && (!this.props || (this.props && this.props.gradient))) {
                         if (this.colorManager.colorHistory[this.colorManager.input] && this.colorManager.colorHistory[this.colorManager.input][this.colorManager.colorHistory[this.colorManager.input].length-1].m !== 'gradient') {
                                 //If no gradient set, using default
                                 this.drawGradient(this.defaultGradient);
@@ -265,7 +294,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                         this.application.ninja.colorController.popupTab = 'gradient';
                 }
                 //
-                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                if (!this.isPopupChip) this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -413,7 +442,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
     destroy: {
         value: function() {
                 //
-                this.application.ninja.colorController.colorView.removeButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]);
+                this.application.ninja.colorController.colorView.removeButton('hexinput', this.inputHex);
                 Object.deleteBinding(this._components.combo.hottext, "value");
                 Object.deleteBinding(this._components.combo.slider, "value");
                 Object.deleteBinding(this._components.wheel, "value");
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 4667f2b4..fba196e4 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage =                   require("montage/core/core").Montage,
         Component =                     require("montage/ui/component").Component,
         ColorChipPopup =        require("js/panels/Color/colorchippopup.reel").ColorChipPopup,
-        ColorPanelPopup =       require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup;
+        ColorPanelPopup =       require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup,
+        ColorModel =        require("js/models/color-model").ColorModel;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorPopupManager
 exports.ColorPopupManager = Montage.create(Component, {
@@ -26,69 +27,77 @@ exports.ColorPopupManager = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     init: {
-        enumerable: false,
         value: function () {
                 ////////////////////////////////////////////////////////////
             //Closing popups on resize
             window.addEventListener('resize', function (e) {
                 this.application.ninja.colorController.colorPopupManager.hideColorPopup();
             }.bind(this));
-            //Storing limits of popup
-            var top, bottom, left, right; 
+            
             //Closing popups if outside limits
             document.addEventListener('mousedown', function (e) {
-                //Checking for popup to be opened otherwise nothing happens
+                //