move a few things away in to-be-integrated/
[myslice.git] / to-be-integrated / plugins / code_editor / static / js / EditorCM.js
1 /*
2  Class: MooshellEditor
3  Editor using CodeMirror
4  http://codemirror.net
5  */
6
7 // jordan
8 var codemirrorpath = "";
9 // end jorda
10
11 var disallowedPlatforms = ['ios', 'android', 'ipod'];
12 var default_code_mirror_options = {
13   gutters: ["note-gutter", "CodeMirror-linenumbers"],
14   tabSize: 4,
15   indentUnit: 4,
16   matchBrackets: true,
17   lineNumbers: true,
18   lineWrapping: true,
19   tabMode: 'spaces' // or 'shift'
20 };
21
22 var MooShellEditor = new Class({
23   Implements: [Options, Events],
24
25   parameter: 'Editor',
26
27   options: {
28     useCodeMirror: true,
29     codeMirrorOptions: default_code_mirror_options,
30     syntaxHighlighting: []
31   },
32
33   window_names: {
34     'javascript': 'JavaScript',
35     'html': 'HTML',
36     'css': 'CSS',
37     'scss': 'SCSS',
38     'coffeescript': 'CoffeeScript',
39     'javascript 1.7': 'JavaScript 1.7'
40   },
41
42   initialize: function(el, options) {
43     this.validationTooltip;
44
45     // switch off CodeMirror for IE
46     //if (Browser.Engine.trident) options.useCodeMirror = false;
47     this.element = $(el)[0]; // jordan added [0] for jquery
48     if (!this.options.syntaxHighlighting.contains(options.language)) {
49       this.forceDefaultCodeMirrorOptions();
50     }
51     this.setOptions(options);
52     var is_disallowed = (disallowedPlatforms.contains(Browser.Platform.name));
53     if (this.options.useCodeMirror && !is_disallowed) {
54       // hide textarea
55       this.element.hide();
56       // prepare settings
57       if (!this.options.codeMirrorOptions.stylesheet && this.options.stylesheet) {
58         this.options.codeMirrorOptions.stylesheet = this.options.stylesheet.map(function(path) {
59           return mediapath + path;
60         });
61       }
62       if (!this.options.codeMirrorOptions.path) {
63         this.options.codeMirrorOptions.path = codemirrorpath + 'js/';
64       }
65       if (!this.options.codeMirrorOptions.content) {
66         this.options.codeMirrorOptions.content = this.element.get('value');
67       }
68
69       var parentNode = this.element.getParent();
70       var options = { value: this.element.value };
71       options = Object.append(options, this.options.codeMirrorOptions);
72       this.editor = CodeMirror(parentNode, options);
73
74       // run this after initialization
75       if (!this.options.codeMirrorOptions.initCallback){
76         if (this.options.codeMirrorOptions.autofocus) {
77           // set current editor
78           Layout.current_editor = this.options.name;
79         }
80       }
81
82       // set editor options that can only be set once the editor is initialized
83       var cur = this.editor.getLineHandle(this.editor.getCursor().line);
84       this.setEditorEvents({
85         focus: function(){
86           Layout.current_editor = this.options.name;
87           // this.editor.removeLineClass(cur, 'background', 'activeline');
88           // this.editor.hlLine = this.editor.addLineClass(0, "background", "activeline");
89         },
90         cursorActivity: function(){
91           // var cur = this.editor.getLineHandle(this.editor.getCursor().line);
92           // if (cur != this.editor.hlLine) {
93           //   this.editor.removeLineClass(this.editor.hlLine, 'background', 'activeline');
94           //   this.editor.hlLine = this.editor.addLineClass(cur, 'background', 'activeline');
95           // }
96         },
97         blur: function(){
98           // this.editor.removeLineClass(this.editor.hlLine, 'background', 'activeline');
99         },
100         change: function(){
101           this.validateEditorInput.call(this, parentNode);
102           window.editorsModified = true;
103         }.bind(this)
104       });
105
106       // disable new line insertion when saving fiddle
107       CodeMirror.keyMap.default['Ctrl-Enter'] = function(){
108         return false;
109       };
110
111       // don't let Emmet capture this
112       delete CodeMirror.keyMap.default['Cmd-L'];
113     }
114
115     this.editorLabelFX = new Fx.Tween(this.getLabel(), {
116       property: 'opacity',
117       link: 'cancel'
118     });
119
120     this.getWindow().addEvents({
121       mouseenter: function() {
122         this.editorLabelFX.start(0);
123       }.bind(this),
124       mouseleave: function() {
125         this.editorLabelFX.start(0.8);
126       }.bind(this)
127     });
128
129 // jordan commented
130 //    mooshell.addEvents({
131 //      'run': this.b64decode.bind(this)
132 //    });
133
134     Layout.registerEditor(this);
135     this.setLabelName(this.options.language || this.options.name);
136   },
137
138   validateEditorInput: function(parentNode){
139     var currentValue = this.getCode();
140     var warnings = [];
141
142     // destroy tooltip if it already exists for this editor
143     if (this.validationTooltip){
144       this.validationTooltip.destroy();
145     }
146
147     // create the container
148     this.validationTooltip = Element('ul', {
149       'class': 'warningTooltip'
150     });
151
152     // collect warnings
153     Object.each(this.options.disallowed, function(value, key){
154       if (currentValue.test(key, 'i')){
155         warnings.push('<li>' + value + '</li>');
156       }
157     });
158
159     // inject container
160     this.validationTooltip = this.validationTooltip.inject(parentNode);
161
162     // squash and apply warnings
163     this.validationTooltip.set({
164       html: warnings.join('')
165     });
166   },
167
168   getEditor: function() {
169     return this.editor || this.element;
170   },
171
172   getWindow: function() {
173     if (!this.window) {
174       this.window = this.element.getParent('.window');
175     }
176     return this.window;
177   },
178
179   getLabel: function() {
180     return this.getWindow().getElement('.window_label');
181   },
182
183   b64decode: function() {
184     this.element.set('value', this.before_decode);
185   },
186
187   getCode: function() {
188     return (this.editor) ? this.editor.getValue() : this.element.get('value');
189   },
190
191   updateFromMirror: function() {
192     this.before_decode = this.getCode();
193     this.element.set('value', Base64.encode(this.before_decode));
194   },
195
196   updateCode: function() {
197     this.element.set('value', this.getCode());
198   },
199
200   clean: function() {
201     this.element.set('value', '');
202     this.cleanEditor();
203   },
204
205   cleanEditor: function() {
206     if (this.editor) this.editor.setCode('');
207   },
208
209   hide: function() {
210     this.getWindow().hide();
211   },
212
213   show: function() {
214     this.getWindow().show();
215   },
216
217   setEditorOptions: function(options){
218     Object.each(options, function(fn, key){
219       this.editor.setOption(key, fn.bind(this));
220     }, this);
221   },
222
223   setEditorEvents: function(e){
224     Object.each(e, function(fn, key){
225       this.editor.on(key, fn.bind(this));
226     }, this);
227   },
228
229   setLanguage: function(language) {
230     // Todo: This is hacky
231     this.setLabelName(language);
232   },
233
234   setLabelName: function(language) {
235     this.getLabel().set('text', this.window_names[language] || language);
236   },
237
238   setStyle: function(key, value) {
239     if (this.editor) return $(this.editor.frame).setStyle(key, value);
240     return this.element.setStyle(key, value);
241   },
242
243   setStyles: function(options) {
244     if (this.editor) return $(this.editor.frame).setStyles(options);
245     return this.element.setStyles(options);
246   },
247
248   setWidth: function(width) {
249     this.getWindow().setStyle('width', width);
250   },
251
252   setHeight: function(height) {
253     this.getWindow().setStyle('height', height);
254   },
255
256   getPosition: function() {
257     if (this.editor) return $(this.editor.frame).getPosition();
258     return this.element.getPosition();
259   },
260
261   forceDefaultCodeMirrorOptions: function() {
262     this.options.codeMirrorOptions = default_code_mirror_options;
263   }
264 });
265
266
267 /*
268  * JS specific settings
269  */
270 MooShellEditor.JS = new Class({
271   Extends: MooShellEditor,
272
273   options: {
274     name: 'js',
275     language: 'javascript',
276     useCodeMirror: true,
277     codeMirrorOptions: {
278       autofocus: true,
279       mode: 'javascript'
280     },
281     syntaxHighlighting: ['javascript', 'javascript 1.7'],
282     disallowed: {
283       '<script': "Input plain JavaScript code, no HTML.",
284       'document.write': "<code>document.write</code> is disallowed in JSFiddle envioriment and might break your fiddle."
285     }
286   },
287
288   initialize: function(el, options) {
289     this.setOptions(options);
290     this.parent(el, this.options);
291   }
292 });
293
294 /*
295  * CSS specific settings
296  */
297 MooShellEditor.CSS = new Class({
298   Extends: MooShellEditor,
299
300   options: {
301     name: 'css',
302     language: 'css',
303     useCodeMirror: true,
304     codeMirrorOptions: {
305       mode: 'css'
306     },
307     syntaxHighlighting: ['css', 'scss']
308   },
309
310   initialize: function(el, options) {
311     this.setOptions(options);
312     this.parent(el, this.options);
313   }
314 });
315
316 /*
317  * HTML specific settings
318  */
319 MooShellEditor.HTML = new Class({
320   Extends: MooShellEditor,
321
322   options: {
323     name: 'html',
324     language: 'html',
325     useCodeMirror: true,
326     codeMirrorOptions: {
327       mode: 'xml'
328     },
329     syntaxHighlighting: ['html'],
330     disallowed: {
331       '<html': "No need for the <code>HTML</code> tag, it's already in the output.",
332       '<meta': "No need for the <code>META</code> tags.",
333       '<head*.?>': "No need for the <code>HEAD</code> tag, it's already in the output.",
334       '<doctype': "Select <code>DOCTYPE</code> from the <strong>Info</strong> panel on the left, instead of adding a tag.",
335       '<script/?.*text\/javascript': "For JavaScript use the panel below or the <strong>Resources</strong> panel for external files.",
336       '<link/?.*rel/?.*stylesheet': "For external CSS files use the <strong>Resources</strong> panel on the left.",
337       '<style': "For CSS use the panel on the right.",
338     }
339   },
340
341   initialize: function(el, options) {
342     this.setOptions(options);
343     this.parent(el, this.options);
344   }
345 });