- Decouple code editor from stage document switching logic

- cleaning up

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

8 files changed, 129 insertions, 153 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 650f3b08..6c198b8e 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -212,7 +212,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror { width: 100%; height: 100%; background: white; }
 
-#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
+#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: hidden; }
 
 .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
 
diff --git a/index.html b/index.html
index 86348459..ed24ccce 100755
--- a/index.html
+++ b/index.html
@@ -207,12 +207,11 @@
         </script>
 
         <style type="text/css">
-          span.CodeMirror-matchhighlight { background: #e9e9e9 }
-          .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
-          .activeline {background: #e8f2ff !important;}
-          div.CodeMirror span.CodeMirror-matchingbracket {color: #000;background-color: #ffd500;}
-          .CodeMirror-scroll {height: auto; overflow-y: hidden; overflow-x: auto; width: 100%;}
-          .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
+            span.CodeMirror-matchhighlight { background: #e9e9e9 }
+            .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
+            .activeline {background: #e8f2ff !important;}
+            div.CodeMirror span.CodeMirror-matchingbracket {color: #000;background-color: #ffd500;}
+            .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
         </style>
         
         </head>
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 4dc39fd6..27402dff 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -100,7 +100,7 @@ exports.DocumentBar = Montage.create(Component, {
             if(event._event.target.id === this.currentView) return;
 
             this.currentView = event._event.target.id;
-            this.application.ninja.documentController.stage.stageView.switchViews(event._event.target.id);//switch between design view
+            this.application.ninja.documentController.stage.stageView.switchDesignDocViews(event._event.target.id);//switch between design view
         }
     },
 
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
new file mode 100644
index 00000000..23bd9279
--- /dev/null
+++ b/js/controllers/code-editor-controller.js
@@ -0,0 +1,79 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage =           require("montage/core/core").Montage,
+    Component =         require("montage/ui/component").Component;
+
+var CodeEditorController = exports.CodeEditorController = Montage.create(Component, {
+    hasTemplate: {
+        value: false
+    },
+
+    _codeEditor : {
+        value:null
+    },
+
+    codeEditor:{
+        get: function(){return this._codeEditor;},
+        set: function(value){this._codeEditor = value;}
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            //TODO:add logic to check some configuration file to load the right code editor
+            this.codeEditor = CodeMirror;
+        }
+    },
+
+    createEditor : {
+        value:function(doc, type){
+            var self = this;
+            var editor = self.codeEditor.fromTextArea(doc.textArea, {
+                               lineNumbers: 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 )
+                                           )
+                                    ){
+
+                                        self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint);
+                                    }
+                               }
+                       });
+
+            return editor;
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index ead7f576..5862cf61 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -348,6 +348,11 @@
                 }
             },
 
+            "codeEditorController": {
+                "module": "js/controllers/code-editor-controller",
+                "name": "CodeEditorController"
+            },
+
             "owner": {
                 "module": "js/ninja.reel",
                 "name": "Ninja",
@@ -377,6 +382,7 @@
                     "ioMediator":           {"@": "ioMediator"},
                     "timeline":             {"@": "timeline"},
                     "mainMenuController":   {"@": "mainMenuController"},
+                    "codeEditorController":   {"@": "codeEditorController"},
                     "rightPanelContainer":  {"#": "rightPanelContainer" },
                     "panelSplitter":     {"@": "splitter3"},
                     "timelineSplitter":     {"@": "splitter4"}
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);