Merge branch 'refs/heads/Ninja-DOM-Architecture' into Document

2 files changed, 1435 insertions, 1416 deletions

diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index af62dd07..7a28c55d 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -15,35 +15,35 @@ var Montage = 			require("montage/core/core").Montage,
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorPanelBase
 exports.ColorPanelBase = Montage.create(Component, {
-        ////////////////////////////////////////////////////////////////////
-        //
-        hasTemplate: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    hasTemplate: {
         value: true
     },
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     _panelMode: {
-        enumerable: false,
-        value: 'rgb'
+        enumerable: false,
+        value: 'rgb'
     },
     ////////////////////////////////////////////////////////////////////
     //Storing ColorPanel sliders mode
     panelMode: {
-        enumerable: true,
-        get: function() {
+        enumerable: true,
+        get: function () {
             return this._panelMode;
         },
-        set: function(value) {
-                if (value !== this._panelMode) {
-                        this._panelMode = value;
-                }
+        set: function (value) {
+            if (value !== this._panelMode) {
+                this._panelMode = value;
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     _colorBar: {
-        enumerable: false,
-        value: null
+        enumerable: false,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
@@ -54,19 +54,19 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        enumerable: true,
-        get: function() {
+        enumerable: true,
+        get: function () {
             return this._colorManager;
         },
-        set: function(value) {
-                if (value !== this._colorManager) {
-                        this._colorManager = value;
-                        //Updating input buttons
-                        this._colorManager.addEventListener('change', this._update.bind(this));
-                        this._colorManager.addEventListener('changing', this._update.bind(this));
-                        //Updating history buttons once color is set
-                        this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
-                }
+        set: function (value) {
+            if (value !== this._colorManager) {
+                this._colorManager = value;
+                //Updating input buttons
+                this._colorManager.addEventListener('change', this._update.bind(this));
+                this._colorManager.addEventListener('changing', this._update.bind(this));
+                //Updating history buttons once color is set
+                this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -78,1574 +78,1578 @@ exports.ColorPanelBase = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     _combo: {
-        enumerable: false,
-        value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}]
+        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: []}
+        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}
+        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}
+        enumerable: true,
+        value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
     },
     ////////////////////////////////////////////////////////////////////
     //
     currentChip: {
-        enumerable: true,
-        value: null
+        enumerable: true,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     previousInput: {
-        enumerable: true,
-        value: null
+        enumerable: true,
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Setting up elements/components
     prepareForDraw: {
-        enumerable: false,
-        value: function() {
-                //TODO: Remove temporary hack, color history should be initilized
+        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}];
-        }
+            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.application.ninja.colorController.createToolbar();
             this.applyDefaultColors();
             this.removeEventListener('firstDraw', this, false);
+
+            // Workaround for delaying subtool colorchip creation until the color panel is initialized.
+            // This can be removed and the subtools must be updated once we create a new view for color buttons
+            // and they no longer rely on the view of the color panel.
+            this.application.ninja.colorController.colorPanelDrawn = true;
         }
     },
 
     ////////////////////////////////////////////////////////////////////
     //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);
-                ////////////////////////////////////////////////////////////
+        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);
+            ////////////////////////////////////////////////////////////