New: Adding re-render method to switching view

This now re-renders the design view when switching from code view. There are many outstanding issues, the Time-Line completely breaks and blocks Ninja, it is unknown why, there are too many dependencies. To make it work, we disabled that feature, although this check in does not include that, so it can be fixed proper. Also, the document controller creates a new tab per switch as it does not check that it is the same document. That bug must also be fixed. Finally, we need to hook up a new code view to the document, the current code view will not work as desired, so a new code view must be built and implemented.

2 files changed, 51 insertions, 3 deletions

diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 1a580284..dbb4fcad 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -171,6 +171,14 @@ exports.DocumentBar = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    renderDesignView: {
+        value: function () {
+            //Reloading in design view (with updates from other view)
+            this.reloadView('design', this.fileTemplate);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     showViewDesign: {
         value: function () {
             //
@@ -179,11 +187,14 @@ exports.DocumentBar = Montage.create(Component, {
                 this._currentDocument.model.switchViewTo('design');
                 this.btnCode.setAttribute('class', 'inactive');
                 this.btnDesign.removeAttribute('class');
+                //this._currentDocument.model.file.content.body = '<div class="test">hello</div><div class="test">hello</div>';
+                var render = this.renderDesignView.bind(this._currentDocument);
+                render();
             }
         }
     },
     ////////////////////////////////////////////////////////////////////
-    //
+    //TODO: Implement code with that updates the file template through the ninja document parser
     showViewCode: {
         value: function () {
             //
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 5079cfca..b7dacf6a 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -76,7 +76,7 @@ exports.HtmlDocument = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     init: {
-        value:function(file, context, callback, view, template) {
+        value: function(file, context, callback, view, template) {
             //Storing callback data for loaded dispatch
             this.loaded.callback = callback;
             this.loaded.context = context;
@@ -122,6 +122,44 @@ exports.HtmlDocument = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
+    //TODO: Make into one method to use here and one init
+    reloadView: {
+        value: function (view, template) {
+            //
+            this.model.parentContainer.removeChild(this.model.views.design.iframe);
+            //Initiliazing views and hiding
+            if (this.model.views.design.initialize(this.model.parentContainer)) {
+                //Hiding iFrame, just initiliazing
+                this.model.views.design.hide();
+                //Setting the iFrame property for reference in helper class
+                this.model.webGlHelper.iframe = this.model.views.design.iframe;
+            } else {
+                //ERROR: Design View not initialized
+            }
+            //
+            if (view === 'design') {
+                //TODO: Remove reference and use as part of model
+                this.currentView = 'design';
+                //Setting current view object to design
+                this.model.currentView = this.model.views.design;
+                //Showing design iFrame
+                this.model.views.design.show();
+                this.model.views.design.iframe.style.opacity = 0;
+                this.model.views.design.content = this.model.file.content;
+                //TODO: Improve reference (probably through binding values)
+                this.model.views.design._webGlHelper = this.model.webGlHelper;
+                //Rendering design view, using observers to know when template is ready
+                this.model.views.design.render(function () {
+                    //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});
+            } else {
+                //TODO: Identify default view (probably code)
+            }
+        }  
+    },
+    ////////////////////////////////////////////////////////////////////
     //
     handleTemplateReady: {
         value: function (e) {
@@ -140,7 +178,6 @@ exports.HtmlDocument = Montage.create(Component, {
             if(typeof this.model.domContainer !== "undefined") {
                 this.model.domContainer = this.model.documentRoot;
             }
-
             //Making callback after view is loaded
             this.loaded.callback.call(this.loaded.context, this);
         }