aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnanya Sen2012-04-09 17:15:41 -0700
committerAnanya Sen2012-04-09 17:15:41 -0700
commit6ffda1a7ebe18adb518eb24a612df22305b050a6 (patch)
tree6cd281687837f702ef34445e8660e767d448f2f4
parentdece82791f43b5e8d278aba89cf8d6119af1478f (diff)
downloadninja-6ffda1a7ebe18adb518eb24a612df22305b050a6.tar.gz
- 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 <Ananya.Sen@motorola.com>
-rwxr-xr-xindex.html8
-rw-r--r--js/controllers/code-editor-controller.js100
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.css5
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 @@
206 } 206 }
207 </script> 207 </script>
208 208
209 <style type="text/css">
210 span.CodeMirror-matchhighlight { background: #e9e9e9 }
211 .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
212 .activeline {background: #e8f2ff !important;}
213 div.CodeMirror span.CodeMirror-matchingbracket {color: #000;background-color: #ffd500;}
214 .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
215 </style>
216
217 </head> 209 </head>
218 210
219 <body> 211 <body>
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
23 set: function(value){this._codeEditor = value;} 23 set: function(value){this._codeEditor = value;}
24 }, 24 },
25 25
26 codeCompletionSupport : {"javascript": true},
27
28 _automaticCodeComplete: {
29 value:true
30 },
31
32 automaticCodeComplete:{
33 get: function(){return this._automaticCodeComplete;},
34 set: function(value){this._automaticCodeComplete = value;}
35 },
36
37
26 deserializedFromTemplate: { 38 deserializedFromTemplate: {
27 value: function() { 39 value: function() {
28 //TODO:add logic to check some configuration file to load the right code editor 40 //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
30 } 42 }
31 }, 43 },
32 44
45 /**
46 * Public method
47 * Creates an editor instance
48 */
33 createEditor : { 49 createEditor : {
34 value:function(doc, type){ 50 value:function(doc, type){
35 var self = this; 51 var self = this, editorOptions = null;
36 var editor = self.codeEditor.fromTextArea(doc.textArea, { 52
53 editorOptions = {
37 lineNumbers: true, 54 lineNumbers: true,
38 matchBrackets:true, 55 matchBrackets:true,
39 mode: type, 56 mode: type,
@@ -49,31 +66,68 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
49 doc.editor.matchHighlight("CodeMirror-matchhighlight"); 66 doc.editor.matchHighlight("CodeMirror-matchhighlight");
50 doc.editor.setLineClass(doc.editor.hline, null, null); 67 doc.editor.setLineClass(doc.editor.hline, null, null);
51 doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline"); 68 doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
52 },
53 //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
54 onKeyEvent: function(cm, keyEvent) {
55 if((keyEvent.type === "keyup")//need seperate keycode set per mode
56 && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
57 || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
58 || (keyEvent.keyCode === 190)//period
59 || (keyEvent.keyCode === 189)//underscore, dash
60 )
61 && !( (keyEvent.keyCode === 219)//open bracket [
62 || (keyEvent.keyCode === 221)//close bracket ]
63 || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
64 || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
65 || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
66 || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
67 )
68 ){
69
70 self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint);
71 }
72 } 69 }
73 }); 70 };
74 71
72 //configure auto code completion if it is supported for that document type
73 if(true){
74 editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)};
75 }
76
77 var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions);
75 return editor; 78 return editor;
76 } 79 }
80 },
81
82 /**
83 * Private method
84 * key event handler for showing code completion dropdown
85 */
86 _codeCompletionKeyEventHandler:{
87 enumerable:false,
88 value: function(cm, keyEvent, type) {
89 //===manually triggered code completion
90 if((this.automaticCodeComplete === false)){
91 if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space
92 this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
93 }
94 }
95 //===automatic auto complete [performance is slower]
96 else if(this._showAutoComplete(type, keyEvent)){
97 this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
98 }
99 }
100 },
101
102 /**
103 * Private method
104 * checks for valid keyset to show code completion dropdown
105 */
106 _showAutoComplete : {
107 enumerable:false,
108 value:function(type, keyEvent){
109 switch(type){
110 case "javascript":
111 if((keyEvent.type === "keyup")//need seperate keycode set per mode
112 && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
113 || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
114 || (keyEvent.keyCode === 190)//period
115 || (keyEvent.keyCode === 189)//underscore, dash
116 )
117 && !( (keyEvent.keyCode === 219)//open bracket [
118 || (keyEvent.ctrlKey || keyEvent.metaKey)//ctrl
119 || (keyEvent.keyCode === 221)//close bracket ]
120 || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
121 || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
122 || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
123 || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
124 || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S
125 )
126 ){return true;}
127 default :
128 return false;
129 }
130 }
77 } 131 }
78 132
79}); \ No newline at end of file 133}); \ 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 @@
37/*}*/ 37/*}*/
38 38
39 39
40span.CodeMirror-matchhighlight { background: #e9e9e9 }
41.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
42.activeline {background: #e8f2ff !important;}
43div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
44.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