User:Thundercraft5/CodeFiddle.js

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

/* 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 {		this.mw = mw.config.get([ 'wgArticlePath', 'wgSiteName', 'wgServer', 'wgPageName', ]);		this.mw.wgArticlePath = this.mw.wgArticlePath.replace(/\$1/, );		document.title = 'Wiki Code Fiddle | ' + this.mw.wgSiteName + ' | Fandom';		this.wikiHref = mw.config.get('wgServer') + this.mw.wgArticlePath;		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; },		onFrameLinkClick(e) { var href = $(this).attr('href'); if (!href) return; href = new mw.Uri(href); const curHref = new mw.Uri(this.parent.location.href); if (curHref.host !== href.host || !href.host.includes(this.mw.wgArticlePath)) { e.preventDefault; open(href.toString); }		},	}, window.CodeFiddle);	window.ReadyCodeFiddle = new CodeFiddle; });