diff options
Diffstat (limited to 'js/controllers/code-editor-controller.js')
-rw-r--r-- | js/controllers/code-editor-controller.js | 125 |
1 files changed, 64 insertions, 61 deletions
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index e7163bd8..f3c19b92 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js | |||
@@ -9,11 +9,36 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component; | 10 | Component = require("montage/ui/component").Component; |
11 | 11 | ||
12 | var CodeEditorController = exports.CodeEditorController = Montage.create(Component, { | 12 | exports.CodeEditorController = Montage.create(Component, { |
13 | hasTemplate: { | 13 | hasTemplate: { |
14 | value: false | 14 | value: false |
15 | }, | 15 | }, |
16 | 16 | ||
17 | _currentDocument: { | ||
18 | value : null | ||
19 | }, | ||
20 | |||
21 | currentDocument : { | ||
22 | get : function() { | ||
23 | return this._currentDocument; | ||
24 | }, | ||
25 | set : function(value) { | ||
26 | if (value === this._currentDocument) { | ||
27 | return; | ||
28 | } | ||
29 | |||
30 | this._currentDocument = value; | ||
31 | |||
32 | if(!value) { | ||
33 | |||
34 | } else if(this._currentDocument.currentView === "code") { | ||
35 | this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension]; | ||
36 | this._currentDocument.model.views.code.editor.focus(); | ||
37 | this.applySettings(); | ||
38 | } | ||
39 | } | ||
40 | }, | ||
41 | |||
17 | _codeEditor : { | 42 | _codeEditor : { |
18 | value:null | 43 | value:null |
19 | }, | 44 | }, |
@@ -27,13 +52,23 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
27 | value: {"js": true} | 52 | value: {"js": true} |
28 | }, | 53 | }, |
29 | 54 | ||
55 | autocomplete: { | ||
56 | value: false | ||
57 | }, | ||
58 | |||
30 | _automaticCodeComplete: { | 59 | _automaticCodeComplete: { |
31 | value:false | 60 | value:false |
32 | }, | 61 | }, |
33 | 62 | ||
34 | automaticCodeComplete:{ | 63 | automaticCodeComplete:{ |
35 | get: function(){return this._automaticCodeComplete;}, | 64 | get: function(){ |
36 | set: function(value){this._automaticCodeComplete = value;} | 65 | return this._automaticCodeComplete; |
66 | }, | ||
67 | set: function(value) { | ||
68 | if(this._automaticCodeComplete !== value) { | ||
69 | this._automaticCodeComplete = value; | ||
70 | } | ||
71 | } | ||
37 | }, | 72 | }, |
38 | 73 | ||
39 | _editorTheme: { | 74 | _editorTheme: { |
@@ -41,17 +76,23 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
41 | }, | 76 | }, |
42 | 77 | ||
43 | editorTheme:{ | 78 | editorTheme:{ |
44 | get: function(){return this._editorTheme;}, | 79 | get: function(){ |
45 | set: function(value){this._editorTheme = value;} | 80 | return this._editorTheme; |
81 | }, | ||
82 | set: function(value){ | ||
83 | this._editorTheme = value; | ||
84 | } | ||
46 | }, | 85 | }, |
47 | 86 | ||
48 | _zoomFactor:{ | 87 | _zoomFactor: { |
49 | value:100 | 88 | value:100 |
50 | }, | 89 | }, |
51 | 90 | ||
52 | zoomFactor:{ | 91 | zoomFactor:{ |
53 | get: function(){return this._zoomFactor;}, | 92 | get: function() { |
54 | set: function(value){ | 93 | return this._zoomFactor; |
94 | }, | ||
95 | set: function(value) { | ||
55 | this.handleZoom(value); | 96 | this.handleZoom(value); |
56 | } | 97 | } |
57 | }, | 98 | }, |
@@ -91,13 +132,15 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
91 | }; | 132 | }; |
92 | 133 | ||
93 | //configure auto code completion if it is supported for that document type | 134 | //configure auto code completion if it is supported for that document type |
94 | if(this.codeCompletionSupport[documentType] === true){ | 135 | if(this.autocomplete) { |
95 | editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType)}; | 136 | |
96 | } | 137 | editorOptions.onKeyEvent = function(cm, keyEvent){ |
138 | self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType) | ||
139 | }; | ||
97 | 140 | ||
98 | var editor = self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions); | 141 | } |
99 | 142 | ||
100 | return editor; | 143 | return self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions); |
101 | } | 144 | } |
102 | }, | 145 | }, |
103 | 146 | ||
@@ -174,61 +217,23 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
174 | } | 217 | } |
175 | }, | 218 | }, |
176 | 219 | ||
177 | handleCodeCompletionSupport:{ | ||
178 | value:function(fileType){ | ||
179 | var autoCodeCompleteElem = document.getElementsByClassName("autoCodeComplete")[0], elems=null, i=0; | ||
180 | if(autoCodeCompleteElem){ | ||
181 | elems = autoCodeCompleteElem.getElementsByTagName("*"); | ||
182 | } | ||
183 | |||
184 | if(elems && (this.codeCompletionSupport[fileType] === true)){ | ||
185 | //enable elements | ||
186 | for(i=0;i<elems.length;i++){ | ||
187 | if(elems[i].hasAttribute("disabled")){ | ||
188 | elems[i].removeAttribute("disabled"); | ||
189 | } | ||
190 | if(elems[i].classList.contains("disabled")){ | ||
191 | elems[i].classList.remove("disabled"); | ||
192 | } | ||
193 | } | ||
194 | }else if(elems && !this.codeCompletionSupport[fileType]){ | ||
195 | //disable elements | ||
196 | for(i=0;i<elems.length;i++){ | ||
197 | if(!elems[i].hasAttribute("disabled")){ | ||
198 | elems[i].setAttribute("disabled", "disabled"); | ||
199 | } | ||
200 | if(!elems[i].classList.contains("disabled")){ | ||
201 | elems[i].classList.add("disabled"); | ||
202 | } | ||
203 | } | ||
204 | } | ||
205 | } | ||
206 | }, | ||
207 | |||
208 | getSelectedRange:{ | 220 | getSelectedRange:{ |
209 | value:function(editor){ | 221 | value:function(editor){ |
210 | return { from: editor.getCursor(true), to: editor.getCursor(false) }; | 222 | return { from: editor.getCursor(true), to: editor.getCursor(false) }; |
211 | } | 223 | } |
212 | }, | 224 | }, |
213 | 225 | ||
214 | autoFormatSelection:{ | ||
215 | value: function(){ | ||
216 | var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor); | ||
217 | this.application.ninja.documentController.activeDocument.model.views.code.editor.autoFormatRange(range.from, range.to); | ||
218 | } | ||
219 | }, | ||
220 | |||
221 | commentSelection:{ | 226 | commentSelection:{ |
222 | value: function(isComment){ | 227 | value: function(isComment){ |
223 | var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor); | 228 | var range = this.getSelectedRange(this.currentDocument.model.views.code.editor); |
224 | this.application.ninja.documentController.activeDocument.model.views.code.editor.commentRange(isComment, range.from, range.to); | 229 | this.currentDocument.model.views.code.editor.commentRange(isComment, range.from, range.to); |
225 | } | 230 | } |
226 | }, | 231 | }, |
227 | 232 | ||
228 | handleThemeSelection:{ | 233 | handleThemeSelection:{ |
229 | value: function(){ | 234 | value: function(){ |
230 | this.application.ninja.documentController.activeDocument.model.views.code.editor.setOption("theme", this.editorTheme); | 235 | this.currentDocument.model.views.code.editor.setOption("theme", this.editorTheme); |
231 | this.application.ninja.documentController.activeDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme); | 236 | this.currentDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme); |
232 | } | 237 | } |
233 | }, | 238 | }, |
234 | 239 | ||
@@ -236,10 +241,10 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
236 | value:function(value){ | 241 | value:function(value){ |
237 | var originalFont=13,originalLineHeight=16; | 242 | var originalFont=13,originalLineHeight=16; |
238 | this._zoomFactor = value; | 243 | this._zoomFactor = value; |
239 | this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px"; | 244 | this.currentDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px"; |
240 | this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.cursor = "text"; | 245 | this.currentDocument.model.views.code.textViewContainer.style.cursor = "text"; |
241 | this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px"; | 246 | this.currentDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px"; |
242 | this.application.ninja.documentController.activeDocument.model.views.code.editor.refresh();//refresh editor display for xoom | 247 | this.currentDocument.model.views.code.editor.refresh();//refresh editor display for xoom |
243 | } | 248 | } |
244 | }, | 249 | }, |
245 | 250 | ||
@@ -247,8 +252,6 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
247 | value:function(){ | 252 | value:function(){ |
248 | //set theme | 253 | //set theme |
249 | this.handleThemeSelection(); | 254 | this.handleThemeSelection(); |
250 | //check autocomplete support | ||
251 | this.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.model.file.extension); | ||
252 | //set zoom |