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;	var noop = function{};	/* 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.onFrameLoad = this.onFrameLoad.bind(this);		this.updateEditorCSS = this.updateEditorCSS.bind(this);		this.wikiHrefText = this.wikiHref.replace(/^.*?:\/{2}/, );		// Setup Output iframe		this.$outputFrame = $(' ', { id: "code-fiddle-output-frame", src: this.wikiHref, });		this.childWindow = this.$outputFrame[0].contentWindow;		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; });		$('.code-fiddle-reload').click(this.toggleReloading.bind(this));		$('.code-fiddle-fullscreen').click(this.toFullScreenPreview.bind(this));		$([window, document]).on('keyup', function(e) { e.key = e.key.toLowerCase; if (e.key === 'f11' && e.ctrlKey) this.toFullScreenPreview; }.bind(this));		// Block default page reload keybind & change it to ctrl-alt-f5/ctrl-alt		$([window, document]).on('keydown', function(e) { e.key = e.key.toLowerCase; // For frame if ((e.key === 'f5' || e.key === 'r' && e.ctrlKey) && !e.altKey) { e.preventDefault; this.childWindow.location.reload; this.setOutputLoading; // Allow normal } else if ((e.key === 'f5' || e.key === 'r' && e.ctrlKey) && e.altKey) { window.location.reload; }		}.bind(this));		this.$titleInput.on('enter', => { this.$outputFrame.attr('src', this.wikiHref + encodeURIComponent(this.$titleInput.getValue) + '?useskin=FandomDesktop&noexternals=1'); this.setOutputLoading; });		this.setOutputLoading;	};

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,		reloading: false,		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: ' ', title: "Reload the Code Output", }),							$(' ', {								class: "code-fiddle-stop", html: ' ', css: { display: "none", },								title: "Stop loading the Code Output", }),							$(" ", {								class: "code-fiddle-fullscreen", html: ' ', title: "Enter fullscreen for the Code Output", })						],					}),				],			});		},		onFrameLoad {			this.childWindow = this.$outputFrame[0].contentWindow;			$('.code-fiddle-frame-wrapper').removeClass('loading');			this.injectEditorCSS				.toggleReloading;		},		setFrameLoading {			$('.code-fiddle-frame-wrapper').addClass('loading');			this.$outputFrame.one('load', this.onFrameLoad);			return this;		},		blockFrameLoad {			this.childWindow.stop;			this.toggleReloading;			$('.code-fiddle-frame-wrapper').removeClass('loading');			return this;		},		injectEditorCSS {			this.updateEditorCSS;			$(this.childWindow.document.head).append(this.$inputStyles);			return this;		},		updateEditorCSS {			this.$inputStyles.text(this.cssEditor.getValue);			return this;		},		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; }			return this; },		toggleReloading { if (this.reloading) { $('.code-fiddle-stop').hide; $('.code-fiddle-reload').show; } else { $('.code-fiddle-stop').show; $('.code-fiddle-reload').hide; }			this.reloading = !this.reloading; return this; },		toFullScreenPreview { this.$outputFrame[0].requestFullscreen.catch(noop); return this; },		setOutputLoading { this.setFrameLoading .toggleReloading .addFrameKeyBindings; return this; },		addFrameKeyBindings { $(this.childWindow).on('keyup', function(e) {				console.log(e);				e.preventDefault;				if (e.key.toLowerCase === 'r' && e.ctrlKey) this.childWindow.reload;			}.bind(this)); return this; }	}, window.CodeFiddle);	window.ReadyCodeFiddle = new CodeFiddle; });