User:ClaudineChionh/Scripts/SkinSwitcher.js
/**
* SkinSwitcher.js
* @file Allows for easy switching between MediaWiki's default skins
* @author Eizen User:Eizen
* @author ClaudineChionh User:ClaudineChionh
* @version 0.2.0
* @license Apache-2.0
* @external "jQuery"
* @external "mediawiki.util"
*/
mw.loader.using("mediawiki.util", function () {
"use strict";
/**
* @class SkinSwitcher
* @classdesc The central SkinSwitcher class
*/
var SkinSwitcher = {
lang: {
script: "Skin Switcher",
viewIn: "View this page in $1 skin"
},
skins: {
"vector": "Vector",
"timeless": "Timeless",
"monobook": "MonoBook",
"apioutput": "ApiOutput"
},
/**
* @method constructElement
* @param {string} $selectedSkin
* @param {string} $itemText
* @returns {html}
*/
constructElement: function ($selectedSkin, $itemText) {
var $href = window.location.href;
var $param = (window.location.search)
? "&"
: "?";
return mw.html.element("li", {
"id": "skinSwitcher-li-" + $selectedSkin,
"class": "skinSwitcher-li"
}, new mw.html.Raw(
mw.html.element("a", {
"href": $href.replace(/#.*/, "") +
$param + jQuery.param({ useskin: $selectedSkin }),
"title": this.lang.viewIn.replace("$1", $itemText),
"id": "skinSwitcher-a-" + $selectedSkin,
"class": "skinSwitcher-a"
}, $itemText)
));
},
/**
* @method assembleElements
* @returns {string[] } $elementsArray
*/
assembleElements: function () {
var $elementsArray = [];
Object.keys(this.skins).forEach(function ($property) {
$elementsArray.push(
this.constructElement($property, this.skins[$property])
);
}, this);
return $elementsArray;
},
/**
* @method cloneMenu
* @param {string} $template
* @returns {void}
*/
cloneMenu: function ($template) {
jQuery($template)
.clone()
.attr("id", "skinSwitcher")
.insertAfter($template);
jQuery("#skinSwitcher h3")
.html("" + this.lang.script + "");
jQuery("#skinSwitcher ul").empty();
},
/**
* @method experimentalPlacement
* @returns {void}
*/
experimentalPlacement: function () {
// Experimental CSS to center links horizontally in header
mw.util.addCSS(
"#skinSwitcher {" +
"display: flex;" +
"justify-content: center;" +
"flex-direction: row;" +
"align-items: center;" +
"}" +
".skinSwitcher-li {" +
"display:inline-block;" +
"margin:5px 25px 0 25px;" +
"}"
);
jQuery("
- ", {
id: "skinSwitcher"
}).prependTo(".mw-body");
},
/**
* @method determinePlacement
* @param {string[] } $assembledElements
* @returns {void}
*/
determinePlacement: function ($assembledElements) {
var $appendLocation;
switch (this.currentSkin) {
case "vector":
case "timeless":
case "monobook":
this.cloneMenu("#p-tb");
$appendLocation = jQuery("#skinSwitcher ul");
break;
case "apioutput":
this.experimentalPlacement();
$appendLocation = jQuery("#skinSwitcher");
break;
}
$assembledElements.forEach(function ($element) {
jQuery($element).appendTo($appendLocation);
});
},
/**
* @method init
* @returns {void}
*/
init: function () {
if (
window.isSkinSwitcherLoaded ||
jQuery("#skinSwitcher").length
) {
return;
}
window.isSkinSwitcherLoaded = true;
this.currentSkin = mw.config.get("skin");
if (this.skins.hasOwnProperty(this.currentSkin)) {
delete this.skins[this.currentSkin];
this.determinePlacement(this.assembleElements());
}
}
};
jQuery(document).ready(function () {
SkinSwitcher.init();
});
});