aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/code-editor-controller.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers/code-editor-controller.js')
-rw-r--r--js/controllers/code-editor-controller.js125
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
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component; 10 Component = require("montage/ui/component").Component;
11 11
12var CodeEditorController = exports.CodeEditorController = Montage.create(Component, { 12exports.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