diff options
Diffstat (limited to 'js/controllers/code-editor-controller.js')
-rw-r--r-- | js/controllers/code-editor-controller.js | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js new file mode 100644 index 00000000..cf0503a0 --- /dev/null +++ b/js/controllers/code-editor-controller.js | |||
@@ -0,0 +1,197 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | //////////////////////////////////////////////////////////////////////// | ||
8 | // | ||
9 | var Montage = require("montage/core/core").Montage, | ||
10 | Component = require("montage/ui/component").Component; | ||
11 | |||
12 | var CodeEditorController = exports.CodeEditorController = Montage.create(Component, { | ||
13 | hasTemplate: { | ||
14 | value: false | ||
15 | }, | ||
16 | |||
17 | _codeEditor : { | ||
18 | value:null | ||
19 | }, | ||
20 | |||
21 | codeEditor:{ | ||
22 | get: function(){return this._codeEditor;}, | ||
23 | set: function(value){this._codeEditor = value;} | ||
24 | }, | ||
25 | |||
26 | codeCompletionSupport : { | ||
27 | value: {"javascript": true} | ||
28 | }, | ||
29 | |||
30 | _automaticCodeComplete: { | ||
31 | value:true | ||
32 | }, | ||
33 | |||
34 | automaticCodeComplete:{ | ||
35 | get: function(){return this._automaticCodeComplete;}, | ||
36 | set: function(value){ | ||
37 | //console.log("$$$ automaticCodeComplete setter : "+value); | ||
38 | this._automaticCodeComplete = value;} | ||
39 | }, | ||
40 | |||
41 | originalEditorFont:{ | ||
42 | value:"13"//px | ||
43 | }, | ||
44 | |||
45 | _editorFont:{ | ||
46 | value:null | ||
47 | }, | ||
48 | |||
49 | editorFont:{ | ||
50 | get: function(){return this._editorFont;}, | ||
51 | set: function(value){//gets a zoom % | ||
52 | var codeLineElems = null, i=0; | ||
53 | this._editorFont = (value/100) * CodeEditorController.originalEditorFont; | ||
54 | //set the font size | ||
55 | codeLineElems = document.getElementsByClassName("CodeMirror-lines"); | ||
56 | for(i=0;i<codeLineElems.length;i++){ | ||
57 | codeLineElems[i].style.fontSize = ""+this._editorFont+"px"; | ||
58 | } | ||
59 | } | ||
60 | }, | ||
61 | |||
62 | deserializedFromTemplate: { | ||
63 | value: function() { | ||
64 | //TODO:add logic to check some configuration file to load the right code editor | ||
65 | this.codeEditor = CodeMirror; | ||
66 | } | ||
67 | }, | ||
68 | |||
69 | /** | ||
70 | * Public method | ||
71 | * Creates an editor instance | ||
72 | */ | ||
73 | createEditor : { | ||
74 | value:function(doc, type){ | ||
75 | var self = this, editorOptions = null; | ||
76 | |||
77 | editorOptions = { | ||
78 | lineNumbers: true, | ||
79 | matchBrackets:true, | ||
80 | mode: type, | ||
81 | onChange: function(){ | ||
82 | var historySize = doc.editor.historySize(); | ||
83 | if(historySize.undo>0){ | ||
84 | doc.needsSave = true; | ||
85 | }else if(historySize.undo===0 && historySize.redo>0){ | ||
86 | doc.needsSave = false; | ||
87 | } | ||
88 | }, | ||
89 | onCursorActivity: function() { | ||
90 | doc.editor.matchHighlight("CodeMirror-matchhighlight"); | ||
91 | doc.editor.setLineClass(doc.editor.hline, null, null); | ||
92 | doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline"); | ||
93 | } | ||
94 | }; | ||
95 | |||
96 | //configure auto code completion if it is supported for that document type | ||
97 | if(this.codeCompletionSupport[type] === true){ | ||
98 | editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; | ||
99 | } | ||
100 | |||
101 | var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); | ||
102 | |||
103 | //editor.setOption("theme", "night"); | ||
104 | |||
105 | return editor; | ||
106 | } | ||
107 | }, | ||
108 | |||
109 | /** | ||
110 | * Private method | ||
111 | * key event handler for showing code completion dropdown | ||
112 | */ | ||
113 | _codeCompletionKeyEventHandler:{ | ||
114 | enumerable:false, | ||
115 | value: function(cm, keyEvent, type) { | ||
116 | //===manually triggered code completion | ||
117 | if((this.automaticCodeComplete === false)){ | ||
118 | if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space | ||
119 | this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); | ||
120 | } | ||
121 | } | ||
122 | //===automatic auto complete [performance is slower] | ||
123 | else if(this._showAutoComplete(type, keyEvent)){ | ||
124 | this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); | ||
125 | } | ||
126 | } | ||
127 | }, | ||
128 | |||
129 | /** | ||
130 | * Private method | ||
131 | * checks for valid keyset to show code completion dropdown | ||
132 | */ | ||
133 | _showAutoComplete : { | ||
134 | enumerable:false, | ||
135 | value:function(type, keyEvent){ | ||
136 | switch(type){ | ||
137 | case "javascript": | ||
138 | if((keyEvent.type === "keyup")//need seperate keycode set per mode | ||
139 | && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers | ||
140 | || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters | ||
141 | || (keyEvent.keyCode === 190)//period | ||
142 | || (keyEvent.keyCode === 189)//underscore, dash | ||
143 | ) | ||
144 | && !( (keyEvent.keyCode === 219)//open bracket [ | ||
145 | || (keyEvent.ctrlKey || keyEvent.metaKey)//ctrl | ||
146 | || (keyEvent.keyCode === 221)//close bracket ] | ||
147 | || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket { | ||
148 | || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket } | ||
149 | || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket ( | ||
150 | || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket ) | ||
151 | || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S | ||
152 | ) | ||
153 | ){return true;} | ||
154 | default : | ||
155 | return false; | ||
156 | } | ||
157 | } | ||
158 | }, | ||
159 | |||
160 | handleCodeCompletionSupport:{ | ||
161 | value:function(fileType){ | ||
162 | var autoCodeCompleteElem = document.getElementsByClassName("autoCodeComplete")[0]; | ||
163 | if(autoCodeCompleteElem && (this.codeCompletionSupport[fileType] === true)){ | ||
164 | autoCodeCompleteElem.style.visibility = "visible"; | ||
165 | }else if(autoCodeCompleteElem && !this.codeCompletionSupport[fileType]){ | ||
166 | autoCodeCompleteElem.style.visibility = "hidden"; | ||
167 | } | ||
168 | } | ||
169 | }, | ||
170 | |||
171 | getSelectedRange:{ | ||
172 | value:function(editor){ | ||
173 | return { from: editor.getCursor(true), to: editor.getCursor(false) }; | ||
174 | } | ||
175 | }, | ||
176 | |||
177 | autoFormatSelection:{ | ||
178 | value: function(){ | ||
179 | var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); | ||
180 | this.application.ninja.documentController.activeDocument.editor.autoFormatRange(range.from, range.to); | ||
181 | } | ||
182 | }, | ||
183 | |||
184 | commentSelection:{ | ||
185 | value: function(isComment){ | ||
186 | var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); | ||
187 | this.application.ninja.documentController.activeDocument.editor.commentRange(isComment, range.from, range.to); | ||
188 | } | ||
189 | }, | ||
190 | |||
191 | handleThemeSelection:{ | ||
192 | value: function(theme){ | ||
193 | this.application.ninja.documentController.activeDocument.editor.setOption("theme", theme); | ||
194 | } | ||
195 | } | ||
196 | |||
197 | }); \ No newline at end of file | ||