From 6075916ef18dc4a8cbea41c941d2d0b519360262 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 26 Jun 2012 13:04:04 -0700 Subject: fixed code hinting and autocompletion bug Signed-off-by: Ananya Sen --- js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js | 4 ++-- .../ui/code-editor-view-options.reel/code-editor-view-options.css | 5 +++++ .../code-editor-view-options.reel/code-editor-view-options.html | 2 +- .../ui/code-editor-view-options.reel/code-editor-view-options.js | 8 ++++++++ js/controllers/code-editor-controller.js | 5 ++++- 5 files changed, 20 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js index 4787b4f8..adcafd41 100644 --- a/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js +++ b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js @@ -22,8 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot function insert(str) { editor.replaceRange(str, result.from, result.to); } - // Ninja override: don't autocomplete to reduce user's typing errors -// if (completions.length == 1) {insert(completions[0]); return true;} + + if (completions.length == 1) {insert(completions[0]); return true;} // Build the select widget var complete = document.createElement("div"); diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index aeaf604c..68d77f90 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -22,6 +22,11 @@ vertical-align: middle; } +.viewOptions .autoCodeComplete input{ + width: 1em; + height: 1em; +} + .viewOptions .autoCodeComplete .disabled{ color:#515151; } diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 4448e1f1..3d5df256 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -54,7 +54,7 @@
- +
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index 13c9a705..04b509a6 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -121,6 +121,12 @@ exports.CodeEditorViewOptions = Montage.create(Component, { oneway : false }); + Object.defineBinding(this.codeCompleteCheck , "checked", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "automaticCodeComplete", + oneway : false + }); + } }, @@ -137,6 +143,8 @@ exports.CodeEditorViewOptions = Montage.create(Component, { } else { this.autoCompleteLabel.classList.remove("disabled"); } + + this.codeCompleteCheck.checked = false; } }, diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index f3c19b92..4572d69a 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -32,7 +32,7 @@ exports.CodeEditorController = Montage.create(Component, { if(!value) { } else if(this._currentDocument.currentView === "code") { - this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension]; + this.autocomplete = this.codeCompletionSupport[this._currentDocument.model.file.extension]; this._currentDocument.model.views.code.editor.focus(); this.applySettings(); } @@ -132,6 +132,9 @@ exports.CodeEditorController = Montage.create(Component, { }; //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){ -- cgit v1.2.3 From 3391a8e6fd5df0d464edaffd98c2b3fde23acf5a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 26 Jun 2012 16:03:56 -0700 Subject: refactored to move bindings to template Signed-off-by: Ananya Sen --- js/code-editor/code-editor-wrapper.js | 255 ++++++++++++++++++++ .../code-editor-view-options.css | 5 - .../code-editor-view-options.html | 8 +- .../code-editor-view-options.js | 69 ++++-- js/controllers/code-editor-controller.js | 262 --------------------- js/document/views/code.js | 2 +- js/ninja.reel/ninja.html | 9 +- js/ninja.reel/ninja.js | 2 +- 8 files changed, 317 insertions(+), 295 deletions(-) create mode 100644 js/code-editor/code-editor-wrapper.js delete mode 100644 js/controllers/code-editor-controller.js (limited to 'js') 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +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:{ + value: function(){ + this.currentDocument.model.views.code.editor.setOption("theme", this.editorTheme); + this.currentDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme); + } + }, + + handleZoom:{ + value:function(value){ + var originalFont=13,originalLineHeight=16; + this._zoomFactor = value; + this.currentDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px"; + this.currentDocument.model.views.code.textViewContainer.style.cursor = "text"; + this.currentDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px"; + this.currentDocument.model.views.code.editor.refresh();//refresh editor display for xoom + } + }, + + applySettings:{ + value:function(){ + //set theme + this.handleThemeSelection(); + //set zoom + this.handleZoom(this._zoomFactor); + } + } +}); \ No newline at end of file diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 68d77f90..aeaf604c 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -22,11 +22,6 @@ vertical-align: middle; } -.viewOptions .autoCodeComplete input{ - width: 1em; - height: 1em; -} - .viewOptions .autoCodeComplete .disabled{ color:#515151; } diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 3d5df256..9871525b 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -11,12 +11,13 @@