1 files changed, 57 insertions, 121 deletions

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index 7a28c55d..26d4932f 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -23,41 +23,28 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     _panelMode: {
-        enumerable: false,
-        value: 'rgb'
+            value: 'rgb'
     },
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     panelMode: {
-        enumerable: true,
-        get: function () {
-            return this._panelMode;
-        },
-        set: function (value) {
-            if (value !== this._panelMode) {
-                this._panelMode = value;
-            }
-        }
+        get: function () {return this._panelMode;},
+        set: function (value) {if (value !== this._panelMode)this._panelMode = value;}
     },
     ////////////////////////////////////////////////////////////////////
     //
     _colorBar: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        enumerable: true,
-        get: function () {
-            return this._colorManager;
-        },
+        get: function () {return this._colorManager;},
         set: function (value) {
             if (value !== this._colorManager) {
                 this._colorManager = value;
@@ -72,60 +59,41 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Color Panel Container
     _container: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     _combo: {
-        enumerable: false,
         value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
     },
     ////////////////////////////////////////////////////////////////////
     //
     _buttons: {
-        enumerable: false,
         value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
     },
     ////////////////////////////////////////////////////////////////////
     //
     historyCache: {
-        enumerable: false,
         value: { current: null, previous: null }
     },
     ////////////////////////////////////////////////////////////////////
     //
     colorChipProps: {
-        enumerable: true,
         value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
     },
     ////////////////////////////////////////////////////////////////////
     //
     currentChip: {
-        enumerable: true,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     previousInput: {
-        enumerable: true,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
-    //Setting up elements/components
-    prepareForDraw: {
-        enumerable: false,
-        value: function () {
-            //TODO: Remove temporary hack, color history should be initilized
-            this.addEventListener('firstDraw', this, false);
-            this.application.ninja.colorController.colorView = this;
-            this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}];
-            this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}];
-        }
-    },
-
+    //
     handleFirstDraw: {
-        enumerable: true,
         value: function (e) {
             //
             this.applyDefaultColors();
@@ -137,33 +105,42 @@ exports.ColorPanelBase = Montage.create(Component, {
             this.application.ninja.colorController.colorPanelDrawn = true;
         }
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //Setting up elements/components
+    prepareForDraw: {
+        value: function () {
+            //TODO: Remove temporary hack, color history should be initilized
+            this.addEventListener('firstDraw', this, false);
+            this.application.ninja.colorController.colorView = this;
+            this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}];
+            this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}];
+        }
+    },
     ////////////////////////////////////////////////////////////////////
     //Assigning values and binding
     willDraw: {
-        enumerable: false,
         value: function () {
             ////////////////////////////////////////////////////////////
-            //TODO: remove ID dependencies
-            createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element);
-            createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element);
-            createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element);
-            createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element);
+            //Creating slider/hottext components
+            createCombo(this._combo[0], this.slider1, this.hottext1, true);
+            createCombo(this._combo[1], this.slider2, this.hottext2, true);
+            createCombo(this._combo[2], this.slider3, this.hottext3, true);
+            createCombo(this._combo[3], this.slider4, this.hottext4, false);
             ////////////////////////////////////////////////////////////
             //Function to create slider/hottext combination
-            function createCombo(c, slid, htid, color, e) {
+            function createCombo(c, sldr, htxt, color) {
                 //Only creating, not drawing
                 c.slider = Slider.create();
                 c.hottext = HotText.create();
-                c.slider.element = e.getElementsByClassName(slid)[0];
-                c.hottext.element = e.getElementsByClassName(htid)[0];
+                c.slider.element = sldr;
+                c.hottext.element = htxt;
                 c.slider.changesColor = c.hottext.changesColor = color;
                 c.slider.cInputType = 'slider';
                 c.slider.cInputType = 'hottext';
                 //Binding Hottext to Slider
                 Object.defineBinding(c.hottext, "value", {
                     boundObject: c.slider,
-                    boundObjectPropertyPath: "_value", //TODO: Check if needed
+                    boundObjectPropertyPath: "value", //TODO: Check if needed
                     oneway: false,
                     boundValueMutator: function (value) {
                         return Math.round(value);
@@ -182,32 +159,28 @@ exports.ColorPanelBase = Montage.create(Component, {