MediaWiki:Vector.js

/* All JavaScript here will be loaded for users of the Vector skin */

var vectorjs = {
	util: {
		ready: function(callback) {
			if (document.readyState === "loading") {
				document.addEventListener("DOMContentLoaded", callback);
			} else callback();
		},

		load: function(url, callback) {
			fetch(url).then(function(response) {
				if (response.ok) response.text().then(callback);
			});
		},

		loadAndAppend: function(url, selector) {
			vectorjs.util.load(url, function(text) {
				vectorjs.util.ready(function() {
					document.querySelectorAll(selector).forEach(function(node) {
						node.insertAdjacentHTML("beforeend", text);
					});
				});
			});
		}
	},

	expandCactions: function() {
		vectorjs.util.ready(function() {
			var cactions = document.querySelector("#p-cactions");
			var viewsContent = document.querySelector("#p-views .vector-menu-content-list");
			var watch = viewsContent.querySelector(".mw-watchlink");
			cactions.querySelectorAll(".mw-list-item").forEach(function(node) {
				if (watch) watch.before(node);
				else viewsContent.append(node);
			});
		});
	},

	decorateSearchBar: function() {
		var inputBoxWrapper = document.createElement("div");
		inputBoxWrapper.setAttribute("class", "input-box-wrapper");
		vectorjs.util.load("/images/0/05/Input-box.svg", function(text) {
			inputBoxWrapper.innerHTML = text;
		});

		var searchIcon = document.createElement("div");
		searchIcon.setAttribute("class", "search-icon-wrapper");
		vectorjs.util.load("/images/4/46/Search-button-icon.svg", function(text) {
			searchIcon.innerHTML = text;
		});

		vectorjs.util.ready(function() {
			var searchBox = document.querySelector("#simpleSearch");
			searchBox.prepend(inputBoxWrapper);
			searchBox.append(searchIcon);
		});
	},

	decoratePageBase: function() {
		var surprisedAudio = new Audio("/images/f/fe/Soundfx_bunny_surprised_2.flac");
		var lateralAudio = new Audio("/images/5/5f/Soundfx_bunny_lateral.flac");
		var carrotAudio = new Audio("/images/2/23/Soundfx_carrot_consumed.flac");
		
		var titleScreenBunny = document.createElement("div");
		titleScreenBunny.setAttribute("class", "page-base-bunny-wrapper");
		vectorjs.util.load("/images/a/aa/Title-screen-bunny.svg", function(text) {
			titleScreenBunny.innerHTML = text;
		});

		var logo = document.createElement("a");
		logo.setAttribute("class", "page-base-logo-wrapper");
		logo.setAttribute("href", "/wiki/Pâquerette_Down_the_Bunburrows_Wiki");
		logo.setAttribute("title", "Pâquerette Down the Bunburrows Wiki");
		vectorjs.util.load("/images/2/2c/Bunburrows-logo.svg", function(text) {
			logo.innerHTML = text;
			var bunny = logo.querySelector(".bunburrows-logo__bunny");
			bunny.addEventListener("click", function(e) {
				e.preventDefault();
				bunny.querySelectorAll("animate").forEach(function(animate) {
					animate.setAttribute("dur", "0.2s");
				});
				surprisedAudio.play();
				bunny.animate([
					{ translate: "none" },
					{ translate: "-78px" }
				], {
					duration: 847.8,
					fill: "forwards"
				}).addEventListener("finish", function() {
					carrotAudio.play();
					logo.querySelector(".bunburrows-logo__left-flower").remove();
					bunny.animate([
						{ translate: "-78px" },
						{ translate: "-113px" }
					], {
						duration: 437.5,
						fill: "forwards"
					}).addEventListener("finish", function() {
						lateralAudio.play();
						bunny.remove();
					});
				});
			});
		});

		var titleScreenPaquerette = document.createElement("div");
		titleScreenPaquerette.setAttribute("class", "page-base-paquerette-wrapper");
		vectorjs.util.load("/images/7/71/Title-screen-paquerette.svg", function(text) {
			titleScreenPaquerette.innerHTML = text;
		});

		vectorjs.util.ready(function() {
			document.querySelector("#mw-page-base").append(
				titleScreenBunny,
				logo,
				titleScreenPaquerette);
		});
	},

	replaceHeadIcons: function() {
		vectorjs.util.loadAndAppend("/images/1/15/Head-icon-nstab.svg", "[id^=ca-nstab]");
		vectorjs.util.loadAndAppend("/images/7/79/Head-icon-talk.svg", "#ca-talk");
		vectorjs.util.loadAndAppend("/images/d/d6/Head-icon-view.svg", "#ca-view");
		vectorjs.util.loadAndAppend("/images/5/5a/Head-icon-edit.svg", "#ca-edit");
		vectorjs.util.loadAndAppend("/images/c/c6/Head-icon-viewsource.svg", "#ca-viewsource");
		vectorjs.util.loadAndAppend("/images/1/17/Head-icon-history.svg", "#ca-history");
		vectorjs.util.loadAndAppend("/images/0/08/Head-icon-delete.svg", "#ca-delete");
		vectorjs.util.loadAndAppend("/images/9/9e/Head-icon-move.svg", "#ca-move");
		vectorjs.util.loadAndAppend("/images/d/d1/Head-icon-protect.svg", "#ca-protect");
		vectorjs.util.loadAndAppend("/images/0/03/Head-icon-watch.svg", ".mw-watchlink");
		vectorjs.util.loadAndAppend("/images/6/67/Head-selection-marker.svg", ".mw-list-item.selected");
	},

	addBackgrounds: function() {
		vectorjs.util.load("/images/2/2e/Dialogue-box-background.svg", function(text) {
			var contentBackground = document.createElement("div");
			contentBackground.setAttribute("class", "content-background-wrapper");
			contentBackground.innerHTML = text;
			vectorjs.util.ready(function() {
				document.querySelector("#content").prepend(contentBackground);
			});
		});

		vectorjs.util.load("/images/1/1b/UI-box.svg", function(text) {
			vectorjs.util.ready(function() {
				document.querySelectorAll(".vector-menu-portal").forEach(function(node) {
					var portalBackground = document.createElement("div");
					portalBackground.setAttribute("class", "portal-background-wrapper");
					portalBackground.innerHTML = text;
					node.prepend(portalBackground);
				});
			});
		});
	}
};

if (CSS.supports("selector(&)")) {
	vectorjs.expandCactions();
	vectorjs.addBackgrounds();
	vectorjs.replaceHeadIcons();
	vectorjs.decoratePageBase();
	vectorjs.decorateSearchBar();
}