diff options
-rwxr-xr-x | index.html | 8 | ||||
-rw-r--r-- | js/controllers/code-editor-controller.js | 100 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.css | 5 |
3 files changed, 82 insertions, 31 deletions
@@ -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 | ||
40 | span.CodeMirror-matchhighlight { background: #e9e9e9 } | ||
41 | .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } | ||
42 | .activeline {background: #e8f2ff !important;} | ||
43 | div.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 | ||