User:Eizen/SkinSwitcher.js

/** * SkinSwitcher.js * @file Allows for easy switching between seven main skins * @author Eizzen  * @license Apache-2.0 * @external "jQuery" * @external "mediawiki.util" */

/*jslint browser, this:true */ /*global mw, jQuery, window */

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", "monobook": "MonoBook", "modern": "Modern", "minerva": "Minerva", "minervaneue": "MinervaNeue", "cologneblue": "CologneBlue", "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 "monobook": case "modern": case "cologneblue": this.cloneMenu("#p-tb"); $appendLocation = jQuery("#skinSwitcher ul"); break; case "minerva": case "minervaneue": 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;    }); });