adding a viewIdentifier to the model to enable design/code switch

Todo:
- Cleanup and remove listeners
- Finish stage reload
- Add remaining bindings.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

9 files changed, 124 insertions, 37 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index ee7ca82c..83c1f58c 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -80,6 +80,7 @@ exports.DocumentController = Montage.create(Component, {
             } else if(this._currentDocument.currentView === "design") {
                 document.getElementById("codeViewContainer").style.display = "none";
                 document.getElementById("iframeContainer").style.display = "block";
+                this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
                 if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show();
                 this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*');
             } else {
@@ -91,6 +92,23 @@ exports.DocumentController = Montage.create(Component, {
         }
     },
 
+    handleChange: {
+        value: function(notification) {
+            if(notification.currentPropertyPath === "model.currentViewIdentifier") {
+                if(this.currentDocument.model.currentView.identifier === "design-code") {
+//                    document.getElementById("iframeContainer").style.display = "none";
+//                    this._currentDocument.model.parentContainer.style["display"] = "block";
+//                    if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show();
+                } else {
+                    document.getElementById("codeViewContainer").style.display = "none";
+                    document.getElementById("iframeContainer").style.display = "block";
+                    if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show();
+                    this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*');
+                }
+            }
+        }
+    },
+
     deserializedFromTemplate: {
         value: function() { //TODO: Add event naming consistency (save, fileOpen and newFile should be consistent, all file events should be executeFile[operation name])
             this.eventManager.addEventListener("appLoaded", this, false);
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 21321f6d..0e1df1e9 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -99,6 +99,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// setting document via binding
             this._currentDocument = document;
 
+            this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
+
             ///// Stage stylesheet should always be found
             this._stageStylesheet  = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
             // Returns null if sheet not found (as in non-ninja projects)
@@ -126,6 +128,38 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         enumerable : false
     },
 
+    handleChange: {
+        value: function(notification) {
+            if(notification.currentPropertyPath === "model.currentViewIdentifier") {
+                if(this.currentDocument.model.currentView.identifier === "design") {
+                    ///// Stage stylesheet should always be found
+                    this._stageStylesheet  = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
+                    // Returns null if sheet not found (as in non-ninja projects)
+                    // Setter will handle null case
+                    this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
+
+                    this.userStyleSheets = nj.toArray(this.currentDocument.model.views.design.document.styleSheets).filter(function(sheet) {
+                        if(sheet === this._stageStylesheet) { return false; }
+
+                        var media = sheet.ownerNode.getAttribute('media');
+
+                        ///// If the media attribute contains a query, we'll watch for changes in media
+                        if(/\([0-9A-Za-z-: ]+\)/.test(media)) {
+                            this.watchMedia(media);
+                        }
+
+                        return true;
+
+                    }, this);
+
+                    this.initializeRootStyles();
+
+                    NJevent('styleSheetsReady', this);
+                }
+            }
+        }
+    },
+
     _mediaList : {
         value: []
     },
diff --git a/js/document/document-html.js b/js/document/document-html.js
index a59f5848..f3163339 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -164,7 +164,7 @@ exports.HtmlDocument = Montage.create(Component, {
                     //Adding observer to know when template is ready
                     this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
                     this._observer.observe(this.model.views.design.document.head, {childList: true});
-                }.bind(this), template, {viewCallback: this.handleViewReady, context: this});
+                }.bind(this), template, {viewCallback: this.handleReloadViewReady, context: this});
             } else if(view === 'code'){
                 //TODO: Add logic to handle external changed files
                 //Checking for template type and not saving external data
@@ -176,6 +176,7 @@ exports.HtmlDocument = Montage.create(Component, {
                 //Setting current view object to code
                 this.currentView = 'code';
                 this.model.currentView = this.model.views.code;
+                this.model.currentViewIdentifier = this.model.currentView.identifier;
             } else {
                     //TODO: Identify default view (probably code) - Error handling
             }
@@ -200,10 +201,22 @@ exports.HtmlDocument = Montage.create(Component, {
             if(typeof this.model.domContainer !== "undefined") {
                 this.model.domContainer = this.model.documentRoot;
             }
+            this.model.currentViewIdentifier = this.model.currentView.identifier;
             //Making callback after view is loaded
             this.loaded.callback.call(this.loaded.context, this);
         }
     },
+    handleReloadViewReady: {
+        value: function(mObjects) {
+            this.model.mObjects = mObjects;
+            // TODO: Find a better way to initialize this property
+            // Assign the domContainer to be the document root on open
+            if(typeof this.model.domContainer !== "undefined") {
+                this.model.domContainer = this.model.documentRoot;
+            }
+            this.model.currentViewIdentifier = this.model.currentView.identifier;
+        }
+    },
     ////////////////////////////////////////////////////////////////////
     //
     closeDocument: {
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 85a0414f..c44123c3 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -88,6 +88,21 @@ exports.BaseDocumentModel = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _currentViewIdentifier: {
+        value: ""
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    currentViewIdentifier: {
+        get: function() {
+            return this._currentViewIdentifier;
+        },
+        set: function(value) {
+            this._currentViewIdentifier = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     _selection: {
         value: []
     },
diff --git a/js/document/views/code.js b/js/document/views/code.js
index 05f671b2..0ca87fa9 100755
--- a/js/document/views/code.js
+++ b/js/document/views/code.js
@@ -39,8 +39,8 @@ var Montage =           require("montage/core/core").Montage,
 exports.CodeDocumentView = Montage.create(BaseDocumentView, {
     ////////////////////////////////////////////////////////////////////
     //
-    hasTemplate: {
-        value: false
+    identifier: {
+        value: "code"
     },
     ////////////////////////////////////////////////////////////////////
     //
diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js
index 25073833..44d12549 100644
--- a/js/document/views/design-code.js
+++ b/js/document/views/design-code.js
@@ -40,8 +40,8 @@ var Montage =           require("montage/core/core").Montage,
 exports.DesignCodeView = Montage.create(CodeDocumentView, {
     ////////////////////////////////////////////////////////////////////
     //
-    hasTemplate: {
-        value: false
+    identifier: {
+        value: "design-code"
     },
     ////////////////////////////////////////////////////////////////////
     //
@@ -75,22 +75,6 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, {
             this.textViewContainer.style.background = "white";
             this.textViewContainer.style.height = "100%";