From 6ffda1a7ebe18adb518eb24a612df22305b050a6 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 9 Apr 2012 17:15:41 -0700 Subject: - added configurability of code completion with the file type - added logic to toggle between automatic code completion and manually triggered code completion [ UI pending ] Signed-off-by: Ananya Sen --- index.html | 8 --- js/controllers/code-editor-controller.js | 100 ++++++++++++++++++++++++------- js/stage/stage-view.reel/stage-view.css | 5 ++ 3 files changed, 82 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index ed24ccce..0663fe16 100755 --- a/index.html +++ b/index.html @@ -206,14 +206,6 @@ } - - diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 23bd9279..0c13958c 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -23,6 +23,18 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone set: function(value){this._codeEditor = value;} }, + codeCompletionSupport : {"javascript": true}, + + _automaticCodeComplete: { + value:true + }, + + automaticCodeComplete:{ + get: function(){return this._automaticCodeComplete;}, + set: function(value){this._automaticCodeComplete = value;} + }, + + deserializedFromTemplate: { value: function() { //TODO:add logic to check some configuration file to load the right code editor @@ -30,10 +42,15 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone } }, + /** + * Public method + * Creates an editor instance + */ createEditor : { value:function(doc, type){ - var self = this; - var editor = self.codeEditor.fromTextArea(doc.textArea, { + var self = this, editorOptions = null; + + editorOptions = { lineNumbers: true, matchBrackets:true, mode: type, @@ -49,31 +66,68 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone 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); - } } - }); + }; + //configure auto code completion if it is supported for that document type + if(true){ + editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; + } + + var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); return editor; } + }, + + /** + * Private method + * key event handler for showing code completion dropdown + */ + _codeCompletionKeyEventHandler:{ + enumerable:false, + value: function(cm, keyEvent, type) { + //===manually triggered code completion + if((this.automaticCodeComplete === false)){ + if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space + this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); + } + } + //===automatic auto complete [performance is slower] + else if(this._showAutoComplete(type, keyEvent)){ + this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); + } + } + }, + + /** + * Private method + * checks for valid keyset to show code completion dropdown + */ + _showAutoComplete : { + enumerable:false, + value:function(type, keyEvent){ + switch(type){ + case "javascript": + 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.ctrlKey || keyEvent.metaKey)//ctrl + || (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 ) + || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S + ) + ){return true;} + default : + return false; + } + } } }); \ No newline at end of file diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index 372af144..a7e255ae 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -37,3 +37,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 !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);} \ No newline at end of file -- cgit v1.2.3