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>

2 files changed, 52 insertions, 0 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: []
     },