4 files changed, 316 insertions, 17 deletions

diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js
new file mode 100644
index 00000000..942bd5cd
--- /dev/null
+++ b/js/code-editor/code-editor-wrapper.js
@@ -0,0 +1,255 @@
+/* <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;
+
+exports.CodeEditorWrapper = Montage.create(Component, {
+    hasTemplate: {
+        value: false
+    },
+
+    _currentDocument: {
+        value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value) {
+
+            } else if(this._currentDocument.currentView === "code") {
+                this.autocomplete = this.codeCompletionSupport[this._currentDocument.model.file.extension];
+                this._currentDocument.model.views.code.editor.focus();
+
+                this.applySettings();
+            }
+        }
+    },
+
+    _codeEditor : {
+        value:null
+    },
+
+    codeEditor:{
+        get: function(){return this._codeEditor;},
+        set: function(value){this._codeEditor = value;}
+    },
+
+    codeCompletionSupport : {
+        value: {"js": true}
+    },
+
+    autocomplete: {
+        value: false
+    },
+
+    _editorTheme: {
+        value:"default"
+    },
+
+    editorTheme:{
+        get: function(){
+            return this._editorTheme;
+        },
+        set: function(value){
+            this._editorTheme = value;
+        }
+    },
+
+    _zoomFactor: {
+        value:100
+    },
+
+    zoomFactor:{
+        get: function() {
+            return this._zoomFactor;
+        },
+        set: function(value) {
+            if(value !== this._zoomFactor){
+                this._zoomFactor = value;
+                this.handleZoom(value);
+            }
+        }
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            //TODO:add logic to check some configuration file to load the right code editor
+            this.codeEditor = CodeMirror;
+        }
+    },
+
+    /**
+     * Public method
+     * Creates an editor instance
+     */
+    createEditor : {
+        value:function(codeDocumentView, type, documentType, textDocument){
+            var self = this, editorOptions = null;
+
+            if(!this.application.ninja.editorViewOptions.codeEditorWrapper){
+                this.application.ninja.editorViewOptions.codeEditorWrapper = this;
+            }
+
+            editorOptions = {
+                               lineNumbers: true,
+                               matchBrackets:true,
+                               mode: type,
+                               onChange: function(){
+                                   var historySize = codeDocumentView.editor.historySize();
+                                   if(historySize.undo>0){
+                                       textDocument.model.needsSave = true;
+                                   }else if(historySize.undo===0 && historySize.redo>0){
+                                       textDocument.model.needsSave = false;
+                                   }
+                               },
+                               onCursorActivity: function() {
+                                   codeDocumentView.editor.matchHighlight("CodeMirror-matchhighlight");
+                                   codeDocumentView.editor.setLineClass(codeDocumentView.editor.hline, null, null);
+                                   codeDocumentView.editor.hline = codeDocumentView.editor.setLineClass(codeDocumentView.editor.getCursor().line, null, "activeline");
+                               }
+                           };
+
+            //configure auto code completion if it is supported for that document type
+
+            this.autocomplete = this.codeCompletionSupport[documentType];
+
+            if(this.autocomplete) {
+
+                editorOptions.onKeyEvent = function(cm, keyEvent){
+                    self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType)
+                };
+
+            }
+
+            return self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions);
+        }
+    },
+
+    /**
+     * Private method
+     * key event handler for showing code completion dropdown
+     */
+    _codeCompletionKeyEventHandler:{
+        enumerable:false,
+        value: function(cm, keyEvent, documentType) {
+            //comment shortkeys
+            if((keyEvent.metaKey || keyEvent.ctrlKey) && !keyEvent.shiftKey && keyEvent.keyCode === 191){//ctrl+/
+                this.commentSelection(true);
+                return;
+            }
+            //uncomment shortkeys
+            if((keyEvent.metaKey || keyEvent.ctrlKey) && keyEvent.shiftKey && keyEvent.keyCode === 191){//ctrl+shift+/
+                this.commentSelection(false);
+                return;
+            }
+
+            //===manually triggered code completion
+            if((this.currentDocument.model.views.code.editor.automaticCodeHint === false)){
+                if(keyEvent.ctrlKey && keyEvent.keyCode === 32){//Ctrl+Space
+                    this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
+                }
+            }
+            //===automatic auto complete [performance is slower]
+            else if(this._showAutoComplete(documentType, keyEvent)){
+                this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
+            }
+       }
+    },
+
+    /**
+     * Private method
+     * checks for valid keyset to show code completion dropdown
+     */
+    _showAutoComplete : {
+        enumerable:false,
+        value:function(documentType, keyEvent){
+            var status=false;
+
+            if((keyEvent.metaKey || keyEvent.ctrlKey) &&  (keyEvent.keyCode === 83)){//ctrl+s
+                return false;
+            }
+
+            switch(documentType){
+                case "js":
+                    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.ctrlKey //ctrl
+                            || keyEvent.metaKey//cmd
+                            || (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 )
+                           )
+                    ){
+                        status = true;
+                        break;
+                    }
+                default :
+                    status = false;
+            }
+
+            return status;
+        }
+    },
+
+    getSelectedRange:{
+        value:function(editor){
+            return { from: editor.getCursor(true), to: editor.getCursor(false) };
+        }
+    },
+
+    commentSelection:{
+        value: function(isComment){
+            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
+            this.currentDocument.model.views.code.editor.commentRange(isComment, range.from, range.to);
+        }
+    },
+
+    handleThemeSelection:{