MediaWiki:Vector.js
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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();
}