--- /dev/null
+/*
+ Class: MooshellEditor
+ Editor using CodeMirror
+ http://codemirror.net
+ */
+
+// jordan
+var codemirrorpath = "";
+// end jorda
+
+var disallowedPlatforms = ['ios', 'android', 'ipod'];
+var default_code_mirror_options = {
+ gutters: ["note-gutter", "CodeMirror-linenumbers"],
+ tabSize: 4,
+ indentUnit: 4,
+ matchBrackets: true,
+ lineNumbers: true,
+ lineWrapping: true,
+ tabMode: 'spaces' // or 'shift'
+};
+
+var MooShellEditor = new Class({
+ Implements: [Options, Events],
+
+ parameter: 'Editor',
+
+ options: {
+ useCodeMirror: true,
+ codeMirrorOptions: default_code_mirror_options,
+ syntaxHighlighting: []
+ },
+
+ window_names: {
+ 'javascript': 'JavaScript',
+ 'html': 'HTML',
+ 'css': 'CSS',
+ 'scss': 'SCSS',
+ 'coffeescript': 'CoffeeScript',
+ 'javascript 1.7': 'JavaScript 1.7'
+ },
+
+ initialize: function(el, options) {
+ this.validationTooltip;
+
+ // switch off CodeMirror for IE
+ //if (Browser.Engine.trident) options.useCodeMirror = false;
+ this.element = $(el)[0]; // jordan added [0] for jquery
+ if (!this.options.syntaxHighlighting.contains(options.language)) {
+ this.forceDefaultCodeMirrorOptions();
+ }
+ this.setOptions(options);
+ var is_disallowed = (disallowedPlatforms.contains(Browser.Platform.name));
+ if (this.options.useCodeMirror && !is_disallowed) {
+ // hide textarea
+ this.element.hide();
+ // prepare settings
+ if (!this.options.codeMirrorOptions.stylesheet && this.options.stylesheet) {
+ this.options.codeMirrorOptions.stylesheet = this.options.stylesheet.map(function(path) {
+ return mediapath + path;
+ });
+ }
+ if (!this.options.codeMirrorOptions.path) {
+ this.options.codeMirrorOptions.path = codemirrorpath + 'js/';
+ }
+ if (!this.options.codeMirrorOptions.content) {
+ this.options.codeMirrorOptions.content = this.element.get('value');
+ }
+
+ var parentNode = this.element.getParent();
+ var options = { value: this.element.value };
+ options = Object.append(options, this.options.codeMirrorOptions);
+ this.editor = CodeMirror(parentNode, options);
+
+ // run this after initialization
+ if (!this.options.codeMirrorOptions.initCallback){
+ if (this.options.codeMirrorOptions.autofocus) {
+ // set current editor
+ Layout.current_editor = this.options.name;
+ }
+ }
+
+ // set editor options that can only be set once the editor is initialized
+ var cur = this.editor.getLineHandle(this.editor.getCursor().line);
+ this.setEditorEvents({
+ focus: function(){
+ Layout.current_editor = this.options.name;
+ // this.editor.removeLineClass(cur, 'background', 'activeline');
+ // this.editor.hlLine = this.editor.addLineClass(0, "background", "activeline");
+ },
+ cursorActivity: function(){
+ // var cur = this.editor.getLineHandle(this.editor.getCursor().line);
+ // if (cur != this.editor.hlLine) {
+ // this.editor.removeLineClass(this.editor.hlLine, 'background', 'activeline');
+ // this.editor.hlLine = this.editor.addLineClass(cur, 'background', 'activeline');
+ // }
+ },
+ blur: function(){
+ // this.editor.removeLineClass(this.editor.hlLine, 'background', 'activeline');
+ },
+ change: function(){
+ this.validateEditorInput.call(this, parentNode);
+ window.editorsModified = true;
+ }.bind(this)
+ });
+
+ // disable new line insertion when saving fiddle
+ CodeMirror.keyMap.default['Ctrl-Enter'] = function(){
+ return false;
+ };
+
+ // don't let Emmet capture this
+ delete CodeMirror.keyMap.default['Cmd-L'];
+ }
+
+ this.editorLabelFX = new Fx.Tween(this.getLabel(), {
+ property: 'opacity',
+ link: 'cancel'
+ });
+
+ this.getWindow().addEvents({
+ mouseenter: function() {
+ this.editorLabelFX.start(0);
+ }.bind(this),
+ mouseleave: function() {
+ this.editorLabelFX.start(0.8);
+ }.bind(this)
+ });
+
+// jordan commented
+// mooshell.addEvents({
+// 'run': this.b64decode.bind(this)
+// });
+
+ Layout.registerEditor(this);
+ this.setLabelName(this.options.language || this.options.name);
+ },
+
+ validateEditorInput: function(parentNode){
+ var currentValue = this.getCode();
+ var warnings = [];
+
+ // destroy tooltip if it already exists for this editor
+ if (this.validationTooltip){
+ this.validationTooltip.destroy();
+ }
+
+ // create the container
+ this.validationTooltip = Element('ul', {
+ 'class': 'warningTooltip'
+ });
+
+ // collect warnings
+ Object.each(this.options.disallowed, function(value, key){
+ if (currentValue.test(key, 'i')){
+ warnings.push('<li>' + value + '</li>');
+ }
+ });
+
+ // inject container
+ this.validationTooltip = this.validationTooltip.inject(parentNode);
+
+ // squash and apply warnings
+ this.validationTooltip.set({
+ html: warnings.join('')
+ });
+ },
+
+ getEditor: function() {
+ return this.editor || this.element;
+ },
+
+ getWindow: function() {
+ if (!this.window) {
+ this.window = this.element.getParent('.window');
+ }
+ return this.window;
+ },
+
+ getLabel: function() {
+ return this.getWindow().getElement('.window_label');
+ },
+
+ b64decode: function() {
+ this.element.set('value', this.before_decode);
+ },
+
+ getCode: function() {
+ return (this.editor) ? this.editor.getValue() : this.element.get('value');
+ },
+
+ updateFromMirror: function() {
+ this.before_decode = this.getCode();
+ this.element.set('value', Base64.encode(this.before_decode));
+ },
+
+ updateCode: function() {
+ this.element.set('value', this.getCode());
+ },
+
+ clean: function() {
+ this.element.set('value', '');
+ this.cleanEditor();
+ },
+
+ cleanEditor: function() {
+ if (this.editor) this.editor.setCode('');
+ },
+
+ hide: function() {
+ this.getWindow().hide();
+ },
+
+ show: function() {
+ this.getWindow().show();
+ },
+
+ setEditorOptions: function(options){
+ Object.each(options, function(fn, key){
+ this.editor.setOption(key, fn.bind(this));
+ }, this);
+ },
+
+ setEditorEvents: function(e){
+ Object.each(e, function(fn, key){
+ this.editor.on(key, fn.bind(this));
+ }, this);
+ },
+
+ setLanguage: function(language) {
+ // Todo: This is hacky
+ this.setLabelName(language);
+ },
+
+ setLabelName: function(language) {
+ this.getLabel().set('text', this.window_names[language] || language);
+ },
+
+ setStyle: function(key, value) {
+ if (this.editor) return $(this.editor.frame).setStyle(key, value);
+ return this.element.setStyle(key, value);
+ },
+
+ setStyles: function(options) {
+ if (this.editor) return $(this.editor.frame).setStyles(options);
+ return this.element.setStyles(options);
+ },
+
+ setWidth: function(width) {
+ this.getWindow().setStyle('width', width);
+ },
+
+ setHeight: function(height) {
+ this.getWindow().setStyle('height', height);
+ },
+
+ getPosition: function() {
+ if (this.editor) return $(this.editor.frame).getPosition();
+ return this.element.getPosition();
+ },
+
+ forceDefaultCodeMirrorOptions: function() {
+ this.options.codeMirrorOptions = default_code_mirror_options;
+ }
+});
+
+
+/*
+ * JS specific settings
+ */
+MooShellEditor.JS = new Class({
+ Extends: MooShellEditor,
+
+ options: {
+ name: 'js',
+ language: 'javascript',
+ useCodeMirror: true,
+ codeMirrorOptions: {
+ autofocus: true,
+ mode: 'javascript'
+ },
+ syntaxHighlighting: ['javascript', 'javascript 1.7'],
+ disallowed: {
+ '<script': "Input plain JavaScript code, no HTML.",
+ 'document.write': "<code>document.write</code> is disallowed in JSFiddle envioriment and might break your fiddle."
+ }
+ },
+
+ initialize: function(el, options) {
+ this.setOptions(options);
+ this.parent(el, this.options);
+ }
+});
+
+/*
+ * CSS specific settings
+ */
+MooShellEditor.CSS = new Class({
+ Extends: MooShellEditor,
+
+ options: {
+ name: 'css',
+ language: 'css',
+ useCodeMirror: true,
+ codeMirrorOptions: {
+ mode: 'css'
+ },
+ syntaxHighlighting: ['css', 'scss']
+ },
+
+ initialize: function(el, options) {
+ this.setOptions(options);
+ this.parent(el, this.options);
+ }
+});
+
+/*
+ * HTML specific settings
+ */
+MooShellEditor.HTML = new Class({
+ Extends: MooShellEditor,
+
+ options: {
+ name: 'html',
+ language: 'html',
+ useCodeMirror: true,
+ codeMirrorOptions: {
+ mode: 'xml'
+ },
+ syntaxHighlighting: ['html'],
+ disallowed: {
+ '<html': "No need for the <code>HTML</code> tag, it's already in the output.",
+ '<meta': "No need for the <code>META</code> tags.",
+ '<head*.?>': "No need for the <code>HEAD</code> tag, it's already in the output.",
+ '<doctype': "Select <code>DOCTYPE</code> from the <strong>Info</strong> panel on the left, instead of adding a tag.",
+ '<script/?.*text\/javascript': "For JavaScript use the panel below or the <strong>Resources</strong> panel for external files.",
+ '<link/?.*rel/?.*stylesheet': "For external CSS files use the <strong>Resources</strong> panel on the left.",
+ '<style': "For CSS use the panel on the right.",
+ }
+ },
+
+ initialize: function(el, options) {
+ this.setOptions(options);
+ this.parent(el, this.options);
+ }
+});
git://git.onelab.eu / myslice.git / blobdiff