- Decouple code editor from stage document switching logic

- cleaning up

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

2 files changed, 36 insertions, 144 deletions

diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..372af144 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -23,15 +23,17 @@
 }
 */
 
-.CodeMirror {
-    width: 100%;
-    height: 100%;
-    background: white;
-}
+/*.CodeMirror {*/
+    /*width: 100%;*/
+    /*height: 100%;*/
+    /*background: white;*/
+/*}*/
+
+/*.CodeMirror .CodeMirror-scroll {*/
+    /*height: 100%;*/
+    /*overflow: scroll;*/
+    /*overflow-x: auto;*/
+    /*overflow-y: auto;*/
+/*}*/
+
 
-.CodeMirror .CodeMirror-scroll {
-    height: 100%;
-    overflow: scroll;
-    overflow-x: auto;
-    overflow-y: auto;
-}
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 917cbeb5..bfbee2b6 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, {
     },
 
     /**
-     * Creates a text area which will contain the content of the opened text document.
+     * Public method
+     * Creates a textarea element which will contain the content of the opened text document.
      */
     createTextAreaElement: {
         value: function(uuid) {
-
-
             var codeMirrorDiv = document.createElement("div");
             codeMirrorDiv.id = "codeMirror_"  + uuid;
             codeMirrorDiv.style.display = "block";
@@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, {
             var textArea = document.createElement("textarea");
             textArea.id = "code";
             textArea.name = "code";
-
             codeMirrorDiv.appendChild(textArea);
 
             return textArea;
         }
     },
 
-    // Temporary function to create a Codemirror text view
+    /**
+     * Public method
+     * Creates a new instance of a code editor
+     */
     createTextView: {
         value: function(doc) {
+            var type;
             this.application.ninja.documentController._hideCurrentDocument();
             this.hideOtherDocuments(doc.uuid);
-            var type;
+
             switch(doc.documentType) {
                 case  "css" :
                     type = "css";
@@ -87,66 +89,25 @@ exports.StageView = Montage.create(Component, {
                     type = "javascript";
                     break;
             }
-
-            //fix hack
             document.getElementById("codeMirror_"+doc.uuid).style.display="block";
 
-            var documentController = this.application.ninja.documentController;
-            doc.editor = CodeMirror.fromTextArea(doc.textArea, {
-                   lineNumbers: true,
-                   lineWrapping: true,
-                   matchBrackets:true,
-                   mode: type,
-                   onChange: function(){
-                       var historySize = doc.editor.historySize();
-                       if(historySize.undo>0){
-                            doc.needsSave = true;
-                       }else if(historySize.undo===0 && historySize.redo>0){
-                           doc.needsSave = false;
-                       }
-                   },
-                   onCursorActivity: function() {
-                       doc.editor.matchHighlight("CodeMirror-matchhighlight");
-                       doc.editor.setLineClass(doc.editor.hline, null, null);
-                       doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
-                   },
-                   //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
-                   onKeyEvent: function(cm, keyEvent) {
-                        if((keyEvent.type === "keyup")//need seperate keycode set per mode
-                            && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
-                                || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
-                                || (keyEvent.keyCode === 190)//period
-                                || (keyEvent.keyCode === 189)//underscore, dash
-                               )
-                            && !( (keyEvent.keyCode === 219)//open bracket [
-                                    || (keyEvent.keyCode === 221)//close bracket ]
-                                    || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
-                                    || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
-                                    || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
-                                    || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
-                               )
-                        ){
-
-                            CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
-                        }
-                   }
-           });
-
+            doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type);
             doc.editor.hline = doc.editor.setLineClass(0, "activeline");
 
             this.application.ninja.stage._scrollFlag = false;    // TODO HACK to prevent type error on Hide/Show Iframe
             this.application.ninja.documentController.activeDocument = doc;
             this.application.ninja.stage.hideCanvas(true);
-
             document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
         }
     },
 
-    //called for switching between html documents
+    /**
+     * Public method
+     * Switches between documents. Document state data is saved and restored whereever applicable
+     */
     switchDocument:{
         value: function(doc){
             this.application.ninja.documentController._hideCurrentDocument();
-
             this.application.ninja.documentController.activeDocument = doc;
 
             if(this.application.ninja.documentController.activeDocument.currentView === "design") {
@@ -155,62 +116,30 @@ exports.StageView = Montage.create(Component, {
 
             this.application.ninja.stage._scrollFlag = false;    // TODO HACK to prevent type error on Hide/Show Iframe
             this.application.ninja.documentController._showCurrentDocument();
-
-            //focus current document
+            //focus editor
             if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
-                document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus();
+                this.application.ninja.documentController.activeDocument.editor.focus();
             }
 
             if(this.application.ninja.documentController.activeDocument.currentView === "design") {
                 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe
-
-                //reinitialize draw-util, snapmanager and view-util
-                this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();
-
-                //this.application.ninja.stage.layout.reinitializeForSwitchDocument();
-
-                // TODO dispatch event here
-    //                appDelegateModule.MyAppDelegate.onSetActiveDocument();
+                this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util
             }
 
             NJevent("switchDocument");
-
         }
     },
 
-    refreshCodeDocument:{
-        value:function(doc){
-
-        }
-    },
-    addCodeDocument:{
-        value:function(doc){
-            var type;
-            switch(doc.documentType) {
-                case  "css" :
-                    type = "css";
-                    break;
-                case "js" :
+    /**
+     * Public method
+     * Switches between different views of a design document, like HTML design view, HTML code view
+     */
+    switchDesignDocViews: {
+        value: function() {
+            //TODO