User:Thundercraft5/CodeFiddle.js

mw.loader.using(['mediawiki.widgets', 'mediawiki.widgets.SearchInputWidget'], function {	if (mw.config.get('wgPageName') !== 'Special:CodeFiddle') return;	document.title = 'Wiki Code Fiddle | ' + mw.config.get('wgSiteName') + ' | Fandom';	var wikiHref = mw.config.get('wgServer') + mw.config.get('wgArticlePath').replace(/\$1/, );	var wikiHrefText = wikiHref.replace(/^.*?:\/{2}/, );	var titleInput = new mw.widgets.TitleInputWidget({ id: "code-fiddle-searchtitle", });	var $frame = $(' ', { id: "code-fiddle-output-frame", class: "empty", });	var childWindow;	var activeEditor;	var inputStyles = $(' ', { type: "text/css", });	titleInput.on('enter', => { $frame .removeClass('empty') .attr('src', wikiHref + encodeURIComponent(titleInput.getValue) + '?useskin=FandomDesktop&noexternals=1'); setFrameLoading; });	function setFrameLoading {		$('.code-fiddle-frame-wrapper').addClass('loading');		$frame.one('load', => { childWindow = $frame[0].contentWindow; $('.code-fiddle-frame-wrapper').removeClass('loading'); injectEditorCSS; });	}	function blockFrameLoad {		childWindow.stop;		$('.code-fiddle-frame-wrapper').removeClass('loading');	}	function injectEditorCSS {		updateEditorCSS;		$(childWindow.document.head).append(inputStyles);	}	function updateEditorCSS {		inputStyles.text(cssEditor.getValue);	}	function switchEditors {		if (activeEditor === jsEditor) {			$(jsEditor.container).removeClass('active-editor');			$(cssEditor.container).addClass('active-editor');			activeEditor = cssEditor;		} else {			$(cssEditor.container).removeClass('active-editor');			$(jsEditor.container).addClass('active-editor');			activeEditor = jsEditor;		}	}	$('body')		.find('.main-container')			.empty		.end		.prepend($(' ', {			class: "code-fiddle",			html: [				$(' ', { 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",										}), ],								}),							],						}),					],				}),				$(' ', {					class: "code-fiddle-output-wrapper", html: $(' ', {						html: [							$(' ', { class: "code-fiddle-output-header-wrapper", html: $(' ', { 									text: "Code Fiddle Output",									class: "code-fiddle-output-header",								}), }),							$(' ', {								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: wikiHref, text: wikiHrefText, title: wikiHref, target: "_blank", }),										],									}),									$(' ', {										class: "code-fiddle-input-wrapper",										html: titleInput.$element,									}), $(' ', {										class: "code-fiddle-addressbar-controls",										html: [											$(' ', { class: "code-fiddle-reload", html: ' ', }),											$(' ', {												class: "code-fiddle-stop", html: ' ', }),										],									}),								],							}),							$(' ', {								class: "code-fiddle-frame-wrapper", html: [ $frame, $(' ', {										class: "code-fiddle-frame-overlay",										html: $(' ', { class: "fandom-spinner code-fiddle-frame-spinner", html: '  ', }),									}),								],							}),						],					}),				}),			],		}));	// Setup editors	ace.config.set('basePath', '/extensions-ucp/CodeEditor/modules/ace');	var jsEditor = ace.edit('code-fiddle-js-editor');	var cssEditor = ace.edit('code-fiddle-css-editor');	cssEditor.session.setMode(new (ace.require("ace/mode/css").Mode));	jsEditor.session.setMode(new (ace.require("ace/mode/javascript").Mode));	activeEditor = jsEditor;	cssEditor.on('change', updateEditorCSS);	$('.code-fiddle-reload').click(function { childWindow.location.reload; setFrameLoading; });	$('.code-fiddle-stop').click(function { blockFrameLoad; });	$('.code-fiddle-tab').click(function { var $this = $(this); if ($this.hasClass('active')) return; $('.code-fiddle-tab').removeClass('active'); $this.addClass('active'); switchEditors; });	cssEditor.resize; });