User:Thundercraft5/CodeFiddle.js

/* jshint undef: true, jquery: true, */

/* global mw, CodeFiddle, ace */ mw.loader.using(['mediawiki.widgets', 'mediawiki.widgets.SearchInputWidget'], function {	if (mw.config.get('wgPageName') !== 'Special:CodeFiddle') return;	/* Constructor */	window.CodeFiddle = function CodeFiddle {		document.title = 'Wiki Code Fiddle | ' + mw.config.get('wgSiteName') + ' | Fandom';		this.wikiHref = mw.config.get('wgServer') + mw.config.get('wgArticlePath').replace(/\$1/, );		this.wikiHrefText = this.wikiHref.replace(/^.*?:\/{2}/, );		this.$outputFrame = $(' ', { id: "code-fiddle-output-frame", class: "empty", });		this.$inputStyles = $(' ', { type: "text/css", id: "code-fiddle-injected-styles", });		this.$titleInput = new mw.widgets.TitleInputWidget({ id: "code-fiddle-titleinput", });		$('body')			.find('.main-container')				.empty				.end			.prepend(this.createMainUI);		// Setup editors		ace.config.set('basePath', '/extensions-ucp/CodeEditor/modules/ace');		this.jsEditor = ace.edit('code-fiddle-js-editor');		this.cssEditor = ace.edit('code-fiddle-css-editor');		this.cssEditor.session.setMode(new (ace.require("ace/mode/css").Mode));		this.jsEditor.session.setMode(new (ace.require("ace/mode/javascript").Mode));		this.activeEditor = this.jsEditor;		this.cssEditor.on('change', this.updateEditorCSS);		// Add event listeners		$('.code-fiddle-reload').click( => { this.childWindow.location.reload; this.setFrameLoading; });		$('.code-fiddle-stop').click( => { this.blockFrameLoad; });		$('.code-fiddle-tab').click(e => { var $this = $(e.target); if ($this.hasClass('active')) return; $('.code-fiddle-tab').removeClass('active'); $this.addClass('active'); this.switchEditors; });		this.$titleInput.on('enter', => { this.$outputFrame .removeClass('empty') .attr('src', this.wikiHref + encodeURIComponent(this.$titleInput.getValue) + '?useskin=FandomDesktop&noexternals=1'); this.setFrameLoading; });	};

CodeFiddle.prototype = $.extend({		/* Define variables that will be used */		activeEditor: null,		jsEditor: null,		cssEditor: null,		childWindow: null,		wikiHref: null,		wikiHrefText: null,		$outputFrame: null,		$titleInput: null,		$inputStyles: null,		createMainUI {			return $(' ', { class: "code-fiddle", html: [ this.createSideBarUI, $(' ', {						class: "code-fiddle-output-wrapper",						html: $(' ', { html: [ $(' ', {									class: "code-fiddle-output-header-wrapper",									html: $(' ', { text: "Code Fiddle Output", class: "code-fiddle-output-header", }),								}),								this.createAddressBarUI, $(' ', {									class: "code-fiddle-frame-wrapper",									html: [										this.$outputFrame,										$(' ', { class: "code-fiddle-frame-overlay", html: $(' ', {												class: "fandom-spinner code-fiddle-frame-spinner",												html: '  ',											}), }),									],								}),							],						}),					}),				],			});		},		createSideBarUI {			return $(' ', { class: "code-fiddle-sidebar", html: [ $(' ', {						class: "code-fiddle-header",						html: [							$(' ', { html: "Wiki Code Fiddle", }),						],					}),					$('', {						class: "code-fiddle-editor-tabs",						html: [							$('', { "data-target-tab": "code-fiddle-js-editor", class: "code-fiddle-tab active", text: "JS", }),							$('', { "data-target-tab": "code-fiddle-css-editor", class: "code-fiddle-tab", text: "CSS", }),						],					}),					$(' ', {						class: "code-fiddle-editor-wrapper",						html: [							$(' ', { class: "code-fiddle-editors", html: [ $(' ', {										class: "code-fiddle-editor",										id: "code-fiddle-css-editor",									}), $(' ', {										class: "code-fiddle-editor active-editor",										id: "code-fiddle-js-editor",									}), ],							}),						],					}),				],			});		},		createAddressBarUI {			return $(' ', { class: "code-fiddle-addressbar", html: [ $(' ', {						class: "code-fiddle-wiki-wrapper",						html: [							$(' ', { class: "code-fiddle-favicon", html: $(' ', { src: $('link[rel="shortcut icon"]').attr('href'), }), }),							$('', { class: "code-fiddle-wiki", href: this.wikiHref, text: this.wikiHrefText, title: this.wikiHref, target: "_blank", }),						],					}),					$(' ', {						class: "code-fiddle-input-wrapper",						html: this.$titleInput.$element,					}), $(' ', {						class: "code-fiddle-addressbar-controls",						html: [							$(' ', { class: "code-fiddle-reload", html: ' ', }),							$(' ', {								class: "code-fiddle-stop", html: ' ', }),						],					}),				],			});		},		onFrameLoad {			this.childWindow = this.$outputFrame[0].contentWindow;			$('.code-fiddle-frame-wrapper').removeClass('loading');			this.injectEditorCSS;		},		setFrameLoading {			$('.code-fiddle-frame-wrapper').addClass('loading');			this.elements.$outputFrame.one('load', this.onFrameLoad);		},		blockFrameLoad {			this.childWindow.stop;			$('.code-fiddle-frame-wrapper').removeClass('loading');		},		injectEditorCSS {			this.updateEditorCSS;			$(this.childWindow.document.head).append(this.$inputStyles);		},		updateEditorCSS {			this.elements.$inputStyles.text(this.cssEditor.getValue);		},		switchEditors {			if (this.activeEditor === this.jsEditor) {				$(this.jsEditor.container).removeClass('active-editor');				$(this.cssEditor.container).addClass('active-editor');				this.activeEditor = this.cssEditor;			} else {				$(this.cssEditor.container).removeClass('active-editor'); $(this.jsEditor.container).addClass('active-editor'); this.activeEditor = this.jsEditor; }		}	}, window.CodeFiddle);	return new CodeFiddle; });