User:TarTavor/global.js

importArticles({   type: 'script',    articles: [        'u:dev:MediaWiki:ModernBackToTopButton/code.js', /*Кнопка "Наверх"*/        'u:dev:MediaWiki:PortableCSSPad/code.js',        'u:dev:MediaWiki:UCXSearchBar.js',        'u:nkch:MediaWiki:WhatLeavesHere.js'    ] }); mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(   function  {        const api = new mw.Api;

mw.hook("dev.wds").add(           function (wds) {                var currentTheme = mw.user.options.get("theme");

const themeTogglerWrapper = document.createElement("div");

themeTogglerWrapper.classList.add("nkch-theme-toggler__wrapper");

mw.util.addCSS(".nkch-theme-toggler__wrapper { background: var(--theme-body-background-color); border: 1px solid var(--theme-body-text-color); border-radius: 15px; display: flex; height: 30px; justify-content: center; margin-right: 6px; position: relative; }");

const themeToggler = document.createElement("div");

themeToggler.classList.add("nkch-theme-toggler");

mw.util.addCSS(".nkch-theme-toggler { border-radius: 15px; display: flex; overflow: hidden; position: relative; z-index: 2; }");

const themeTogglerButton__dark = document.createElement("button"); themeTogglerButton__dark.classList.add("nkch-theme-toggler__button", "nkch-theme-toggler__button-dark");

const themeTogglerButtonIcon__dark = document.createElement("div"); themeTogglerButtonIcon__dark.classList.add("nkch-theme-toggler__button-icon", "nkch-theme-toggler__button-icon-dark");

mw.util.addCSS(".nkch-theme-toggler__button-dark { animation: anim-theme-toggler-slide-in--dark .5s ease; }"); mw.util.addCSS("@keyframes anim-theme-toggler-slide-in--dark { 0% { opacity: 0; transform: translateY(20px); } 60% { transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }");

mw.util.addCSS(".nkch-theme-toggler__button-icon-dark { margin-left: -2px; }");

themeTogglerButtonIcon__dark.appendChild(wds.icon("moon-small"));

const themeTogglerButton__default = document.createElement("button"); themeTogglerButton__default.classList.add("nkch-theme-toggler__button", "nkch-theme-toggler__button-default");

mw.util.addCSS(".nkch-theme-toggler__button-default { animation: anim-theme-toggler-slide-in--default .5s ease; }"); mw.util.addCSS("@keyframes anim-theme-toggler-slide-in--default { 0% { opacity: 0; transform: translateY(20px); } 65% { transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }");

const themeTogglerButtonIcon__default = document.createElement("div"); themeTogglerButtonIcon__default.classList.add("nkch-theme-toggler__button-icon", "nkch-theme-toggler__button-icon-default");

themeTogglerButtonIcon__default.appendChild(wds.icon("radio-empty-small"));

const themeTogglerButton__light = document.createElement("button"); themeTogglerButton__light.classList.add("nkch-theme-toggler__button", "nkch-theme-toggler__button-light");

const themeTogglerButtonIcon__light = document.createElement("div"); themeTogglerButtonIcon__light.classList.add("nkch-theme-toggler__button-icon", "nkch-theme-toggler__button-icon-light");

mw.util.addCSS(".nkch-theme-toggler__button-light { animation: anim-theme-toggler-slide-in--light .5s ease; }"); mw.util.addCSS("@keyframes anim-theme-toggler-slide-in--light { 0% { opacity: 0; transform: translateY(20px); } 70% { transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }");

mw.util.addCSS(".nkch-theme-toggler__button-icon-light { margin-right: -2px; }");

themeTogglerButtonIcon__light.appendChild(wds.icon("sun-small"));

switch (currentTheme) { case "light": themeTogglerButton__light.classList.add("is-active"); break; case "dark": themeTogglerButton__dark.classList.add("is-active"); break; case "wiki": themeTogglerButton__default.classList.add("is-active"); break; }

function switchButton(button) { document.querySelectorAll(".nkch-theme-toggler > .nkch-theme-toggler__button").forEach(                       function (e) {                            e.classList.remove("is-active");                        }                    );

button.classList.add("is-active"); }

function changeTheme(theme) { if (theme === "light" && document.body.classList.contains("theme-fandomdesktop-dark")) { document.body.classList.remove("theme-fandomdesktop-dark"); document.body.classList.add("theme-fandomdesktop-light"); } else if (theme === "dark" && document.body.classList.contains("theme-fandomdesktop-light")) { document.body.classList.remove("theme-fandomdesktop-light"); document.body.classList.add("theme-fandomdesktop-dark"); }

if (theme !== "wiki" && (theme === "light" || theme === "dark")) { $.ajax({                           method: "GET",                            url: mw.util.wikiScript("wikia"),                            data: {                                controller: "ThemeApi",                                method: "themeVariables",                                variant: theme                            }                        }).done(                            function (data) {                                mw.util.addCSS(data);

api.postWithToken('csrf', {                                   action: "options",                                    optionname: "theme",                                    optionvalue: theme                                }); }                       );                    } else {                        api.postWithToken('csrf', { action: "options", optionname: "theme", optionvalue: theme });                   }                }

themeTogglerButton__dark.addEventListener("click", function {                    switchButton(themeTogglerButton__dark);                    changeTheme("dark");                });

themeTogglerButton__default.addEventListener("click", function {                    switchButton(themeTogglerButton__default);                    changeTheme("wiki");                });

themeTogglerButton__light.addEventListener("click", function {                    switchButton(themeTogglerButton__light);                    changeTheme("light");                });

const themeTogglerPointerWrapper = document.createElement("div"); themeTogglerPointerWrapper.classList.add("nkch-theme-toggler__pointer-wrapper");

if (themeTogglerButton__dark.classList.contains("is-active")) { themeTogglerPointerWrapper.style.marginLeft = "-61px"; }

if (themeTogglerButton__light.classList.contains("is-active")) { themeTogglerPointerWrapper.style.marginRight = "-61px"; }

mw.util.addCSS(".nkch-theme-toggler__pointer-wrapper { align-items: center; animation: anim-theme-toggler-jump-in .5s ease; display: flex; height: 28px; justify-content: center; position: absolute; top: 0; transition: .3s; width: 30px; z-index: 1; will-change: transform, z-index ;}"); mw.util.addCSS("@keyframes anim-theme-toggler-jump-in { 0% { transform: translateY(0); z-index: -1; } 40% { transform: translateY(-30px); z-index: -1; } 50% { transform: translateY(-30px); z-index: 1; } 90% { transform: translateY(2px); z-index: 1; } 100% { transform: translateY(0); z-index: 1; } }");

const themeTogglerPointer = document.createElement("div"); themeTogglerPointer.classList.add("nkch-theme-toggler__pointer");

mw.util.addCSS(".nkch-theme-toggler__pointer { background: var(--theme-body-text-color); border-radius: 15px; height: 26px; margin: 1px; width: 26px; }");

mw.util.addCSS(".nkch-theme-toggler__button { align-items: center; background: none; border: none; cursor: pointer; display: flex; height: 28px; justify-content: center; width: 30px; z-index: 2; }"); mw.util.addCSS(".nkch-theme-toggler__button-icon { color: currentColor; height: 18px; width: 18px; }"); mw.util.addCSS(".nkch-theme-toggler__button-icon .wds-icon-small { fill: var(--theme-body-text-color); transition: .5s; }"); mw.util.addCSS(".nkch-theme-toggler__button.is-active .wds-icon-small { fill: var(--theme-body-background-color); transition: .7s; }");

function checkIfActive { if (themeTogglerButton__default.classList.contains("is-active")) { themeTogglerPointerWrapper.style.marginLeft = null; themeTogglerPointerWrapper.style.marginRight = null; } else if (themeTogglerButton__dark.classList.contains("is-active")) { themeTogglerPointerWrapper.style.marginLeft = "-61px"; themeTogglerPointerWrapper.style.marginRight = null; } else if (themeTogglerButton__light.classList.contains("is-active")) { themeTogglerPointerWrapper.style.marginLeft = null; themeTogglerPointerWrapper.style.marginRight = "-61px"; }               }

setInterval(checkIfActive, 100);

document.querySelector(".page-counter").after(themeTogglerWrapper);

themeTogglerWrapper.appendChild(themeToggler);

themeToggler.appendChild(themeTogglerButton__dark); themeTogglerButton__dark.appendChild(themeTogglerButtonIcon__dark); themeToggler.appendChild(themeTogglerButton__default); themeTogglerButton__default.appendChild(themeTogglerButtonIcon__default); themeToggler.appendChild(themeTogglerButton__light); themeTogglerButton__light.appendChild(themeTogglerButtonIcon__light);

themeTogglerWrapper.appendChild(themeTogglerPointerWrapper); themeTogglerPointerWrapper.appendChild(themeTogglerPointer); }       )

importArticle({           type: "script",            article: "u:dev:MediaWiki:WDSIcons/code.js"        }); } );