Merge pull request #192 from ananyasen/Codeview-improvements

submitting project : Code Editor Improvements [Phase 1]

2 files changed, 120 insertions, 118 deletions

diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..e2c4bb0e 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -14,7 +14,11 @@
   width: 100%;
   height: 100%;
   overflow:auto;
-  /*display: none;*/
+  cursor:text;
+}
+
+.codeViewContainer>div{
+    width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
 }
 
 /* OLD CSS for reference
@@ -23,15 +27,33 @@
 }
 */
 
-.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;*/
+/*}*/
+
+
+span.CodeMirror-matchhighlight { background: #e9e9e9 }
+.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
+div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
+.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
+.CodeMirror-completions {z-index:6001 !important;}
+
+.cm-s-default .activeline {background: #e8f2ff; !important}
+.cm-s-eclipse .activeline {background: #e8f2ff; !important}
+.cm-s-elegant .activeline {background: #e8f2ff; !important}
+.cm-s-neat .activeline {background: #e8f2ff; !important}
+.cm-s-night .activeline {background: #8da6ce; !important}
+.cm-s-cobalt .activeline {background: #8da6ce; !important}
+.cm-s-monokai .activeline {background: #8da6ce; !important}
+.cm-s-rubyblue .activeline {background: #3E7087; !important}
+.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
+.cm-s-xq-dark .activeline {background: #8da6ce; !important}
\ No newline at end of file
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 1f471431..518c3bdd 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";
@@ -86,43 +88,51 @@ exports.StageView = Montage.create(Component, {
                 case "js" :
                     type = "javascript";
                     break;
+                case "html" :
+                    type = "htmlmixed";
+                    break;
+                case "json" :
+                    type = "javascript";
+                    break;
+                case "php" :
+                    type = "php";
+                    break;
+                case "pl" :
+                    type = "perl";
+                    break;
+                case "py" :
+                    type = "python";
+                    break;
+                case "rb" :
+                    type = "ruby";
+                    break;
+                case "xml" :
+                    type = "xml";
+                    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,
-                       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() {
-                           //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null);
-                           //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline");
-                       }
-           });
-
-           //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline");
+            doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type, doc.documentType);
+            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
+
+            this.showCodeViewBar(true);
+            this.application.ninja.codeEditorController.applySettings();
+            this.collapseAllPanels();
         }
     },
 
-    //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") {
@@ -131,62 +141,37 @@ 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();
+
+                this.showCodeViewBar(true);
+                this.application.ninja.codeEditorController.applySettings();
+                this.collapseAllPanels();
             }
 
             if(this.application.ninja.documentController.activeDocument.currentView === "design") {
                 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe