New: Added switching view functionality to document UI

This now let's you switch between code and design views in all documents opened that support design view. Code view for these documents is currently unsupported, so this is just to hook up the UI to the new methods. Code view will be added next.

2 files changed, 113 insertions, 116 deletions

diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 69f8107f..fbd03221 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -73,7 +73,9 @@ POSSIBILITY OF SUCH DAMAGE.
                     "prototype": "js/components/layout/document-bar.reel",
                     "properties": {
                         "element": {"#": "documentBar"},
-                        "zoomControl": {"@": "hottext1"}
+                        "zoomControl": {"@": "hottext1"},
+                        "btnDesign": {"#": "buttonDesign"},
+                        "btnCode": {"#": "buttonCode"}
                     }
                 }
             }
@@ -93,7 +95,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section>
+            <section data-montage-id="buttonDesign">
                 
                 <div class="viewicon viewdesign"></div>
                 
@@ -101,7 +103,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section class="inactive">
+            <section data-montage-id="buttonCode">
                 
                 <div class="viewicon viewcode"></div>
                 
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 248bc8c4..1a580284 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -29,140 +29,115 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-
+////////////////////////////////////////////////////////////////////////
+//
+var Montage =   require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
 exports.DocumentBar = Montage.create(Component, {
-
-    _currentDocument: {
-        enumerable: false,
-        value: null
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
+    _currentDocument: {value: null},
+    ////////////////////////////////////////////////////////////////////
+    //
     currentDocument: {
-        enumerable: false,
-        get: function() {
-            return this._currentDocument;
-        },
+        get: function() {return this._currentDocument;},
         set: function(value) {
+            //
             if (value === this._currentDocument) {
                 return;
             }
-
+            //
             this._currentDocument = value;
-
             this.disabled = !this._currentDocument;
-
-            if(this._currentDocument && this._currentDocument.currentView === "design") {
-                this.visible = true;
-            } else if(this._currentDocument && this._currentDocument.currentView === "code") {
-                this.visible = false;
+            //          
+            if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design) {
+                this.btnCode.setAttribute('class', 'inactive');
+                this.btnDesign.removeAttribute('class');
+            } else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code) {
+                this.btnDesign.setAttribute('class', 'inactive');
+                this.btnCode.removeAttribute('class');
             }
+            //
+            this.visible = true;
         }
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     _visible: {
         value: false
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     visible: {
-        get: function() {
-            return this._visible;
-        },
+        get: function() {return this._visible;},
         set: function(value) {
+            //
             if(this._visible !== value) {
                 this._visible = value;
                 this.needsDraw = true;
             }
         }
     },
-
-    designView: {
-        value: null
-    },
-
-    codeView: {
-        value: null
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     zoomControl: {
         value: null,
         serializable: true
     },
-
-    _type: {
-        value: null
-    },
-
-    type: {
-        enumerable: false,
-        get: function() { return this._type; },
-        set: function(value) {
-            if (this._type === value) {
-                return;
-            }
-
-            this._type = value;
-            this.needsDraw = true;
-
-        }
-    },
-
-    _currentView: {
-        value: null
-    },
-
-    currentView: {
-        get: function() { return this._currentView},
-        set: function(value) {
-            if (this._currentView === value) {
-                return;
-            }
-
-            this._currentView = value;
-            this.needsDraw = true;
-        }
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     _zoomFactor: {
         value: 100
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     zoomFactor: {
-        get: function() { return this._zoomFactor; },
-
-        set: function(value)
-        {
-            if(value !== this._zoomFactor)
-            {
+        get: function() {return this._zoomFactor;},
+        set: function(value) {
+            if(value !== this._zoomFactor) {
+                //
                 this._zoomFactor = value;
-                if (!this._firstDraw)
-                {
+                //
+                if (!this._firstDraw) {
                     this.application.ninja.stage.setZoom(value);
                 }
             }
         }
     },
-
-    draw: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    prepareForDraw: {
         value: function() {