show design code editor - first cut

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>

5 files changed, 198 insertions, 5 deletions

diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js
index 57fe4d3a..65f42db2 100644
--- a/js/code-editor/code-editor-wrapper.js
+++ b/js/code-editor/code-editor-wrapper.js
@@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, {
                 this.application.ninja.editorViewOptions.codeEditorWrapper = this;
             }
 
+            //TODO:add codeEditorWrapper
+            if(!this.application.ninja.documentBar.codeEditorWrapper){
+                this.application.ninja.documentBar.codeEditorWrapper = this;
+            }
+
+
             editorOptions = {
                                lineNumbers: true,
                                matchBrackets:true,
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
index 9344d34c..e2632d35 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -51,7 +51,7 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
 
             this._currentDocument = value;
 
-            if(!value || this._currentDocument.currentView === "design") {
+            if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) {
                 this.visible = false;
             } else {
                 this.visible = true;
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index dbb4fcad..194b9b23 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -61,6 +61,27 @@ exports.DocumentBar = Montage.create(Component, {
             }
             //
             this.visible = true;
+
+            //TODO: check if the code's options bar can be unified
+            if(this._currentDocument && this._currentDocument.model && (this._currentDocument.model.views.design === null) && (this._currentDocument.model.views.code !== null)){
+                this.visible = false;
+            }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _codeEditorWrapper:{
+        value: null
+    },
+
+    codeEditorWrapper:{
+        get : function() {
+            return this._codeEditorWrapper;
+        },
+        set : function(value) {
+            if(this._codeEditorWrapper !== value){
+                this._codeEditorWrapper = value;
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -101,7 +122,12 @@ exports.DocumentBar = Montage.create(Component, {
                 this._zoomFactor = value;
                 //
                 if (!this._firstDraw) {
-                    this.application.ninja.stage.setZoom(value);
+                    if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design){
+                        this.application.ninja.stage.setZoom(value);
+                    }else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code){
+                        this._zoomFactor = value;
+                        if(this.codeEditorWrapper){this.codeEditorWrapper.handleZoom(value)};
+                    }
                 }
             }
         }
@@ -179,6 +205,14 @@ exports.DocumentBar = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    renderCodeView: {
+        value: function () {
+            //Reloading in code view (with updates from other view)
+            this.reloadView('code', this.fileTemplate);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     showViewDesign: {
         value: function () {
             //
@@ -203,6 +237,8 @@ exports.DocumentBar = Montage.create(Component, {
                 this._currentDocument.model.switchViewTo('code');
                 this.btnDesign.setAttribute('class', 'inactive');
                 this.btnCode.removeAttribute('class');
+                var render = this.renderCodeView.bind(this._currentDocument);
+                render();
             }
         }
     }
diff --git a/js/document/document-html.js b/js/document/document-html.js
index b7dacf6a..76157a07 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -34,7 +34,8 @@ POSSIBILITY OF SUCH DAMAGE.
 var Montage =               require("montage/core/core").Montage,
     Component =             require("montage/ui/component").Component,
     HtmlDocumentModel =     require("js/document/models/html").HtmlDocumentModel,
-    DesignDocumentView =    require("js/document/views/design").DesignDocumentView;
+    DesignDocumentView =    require("js/document/views/design").DesignDocumentView,
+    DesignCodeView =  require("js/document/views/design-code").DesignCodeView;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.HtmlDocument = Montage.create(Component, {
@@ -77,6 +78,7 @@ exports.HtmlDocument = Montage.create(Component, {
     //
     init: {
         value: function(file, context, callback, view, template) {
+            var designCodeView = DesignCodeView.create();
             //Storing callback data for loaded dispatch
             this.loaded.callback = callback;
             this.loaded.context = context;
@@ -85,7 +87,7 @@ exports.HtmlDocument = Montage.create(Component, {
                 file: {value: file},
                 fileTemplate: {value: template},
                 parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach
-                views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic
+                views: {value: {'design': DesignDocumentView.create(), 'code': designCodeView}} //TODO: Add code view logic
             });
             //Calling the any init routines in the model
             this.model.init();
@@ -98,6 +100,14 @@ exports.HtmlDocument = Montage.create(Component, {
             } else {
                 //ERROR: Design View not initialized
             }
+
+
+            //initialize the code view for the html document and hide it since design is the default view
+            this.model.views.code.initialize(this.model.parentContainer);
+
+            this.model.views.code.hide();
+
+
             //
             if (view === 'design') {
                 //TODO: Remove reference and use as part of model
@@ -125,6 +135,7 @@ exports.HtmlDocument = Montage.create(Component, {
     //TODO: Make into one method to use here and one init
     reloadView: {
         value: function (view, template) {
+            var content;
             //
             this.model.parentContainer.removeChild(this.model.views.design.iframe);
             //Initiliazing views and hiding
@@ -154,8 +165,18 @@ exports.HtmlDocument = Montage.create(Component, {
                     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 {
+            } else if(view === 'code'){
                 //TODO: Identify default view (probably code)
+
+                //TODO:get the html content from the document
+                content = '<html><head>'+this.model.file.content.head+'</head><body>'+this.model.file.content.body+'</body></html>';//dummy
+
+                this.model.views.code.load(content);
+
+                //Setting current view object to code
+                this.currentView = 'code';
+                this.model.currentView = this.model.views.code;
+
             }
         }  
     },
diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js
new file mode 100644
index 00000000..25073833
--- /dev/null
+++ b/js/document/views/design-code.js
@@ -0,0 +1,130 @@
+/* <copyright>
+Copyright (c) 2012, Motorola Mobility LLC.
+All Rights Reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice,
+  this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation