User:Stenskiy/global.js

importArticles({	type: "script",	articles: [		'u:dev:MediaWiki:PortableCSSPad/code.js',		'u:dev:MediaWiki:ThemeDesignerSidebarHidingButton.js',	] });

mw.loader.using("mediawiki.util").then(   $(document).ready( function { const version = "5.62.0"; const version_jqueryui = "1.12.1";

mw.hook('dev.wds').add(               function (wds) {                    var theme = "default";

if (typeof nkch_css_configs !== "undefined") { if (typeof nkch_css_configs.theme !== "undefined") { theme = nkch_css_configs.theme; }                   }

const nkchCSS_style = document.createElement("style");

document.head.appendChild(nkchCSS_style);

mw.loader.load("https://cdnjs.cloudflare.com/ajax/libs/codemirror/" + version + "/codemirror.css", "text/css"); mw.loader.load("https://ajax.googleapis.com/ajax/libs/jqueryui/" + version_jqueryui + "/jquery-ui.css", "text/css"); mw.loader.load("https://cdn.jsdelivr.net/npm/codemirror-colorpicker@" + "1.9.72" + "/dist/codemirror-colorpicker.css", "text/css")

if (theme !== "default") { mw.loader.load("https://cdnjs.cloudflare.com/ajax/libs/codemirror/" + version + "/theme/" + theme + ".css", "text/css"); }

$.when(                       mw.loader.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/" + version + "/codemirror.js"),                        mw.loader.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/" + version + "/mode/css/css.js"),                        mw.loader.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/" + version + "/addon/edit/closebrackets.js"),                        mw.loader.getScript("https://cdn.jsdelivr.net/npm/codemirror-colorpicker@" + "1.9.72" + "/dist/codemirror-colorpicker.js")                    ).done(                        function  {                            var nkchCSS = document.createElement("div");

nkchCSS.classList.add("nkch-css", "is-disabled");

Object.assign(nkchCSS.style, {                               backgroundColor: "rgba(var(--theme-page-background-color--rgb), .7)",                                backdropFilter: "blur(10px)",                                border: "1px solid var(--theme-border-color)",                                borderRadius: "10px",                                position: "fixed",                                zIndex: 99999999                            });

mw.util.addCSS(".nkch-css { height: 300px; width: 450px; bottom: 50px; right: 20px; }");

document.body.after(nkchCSS);

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

nkchCSS_menu.classList.add("nkch-css-menu");

Object.assign(nkchCSS_menu.style, {                               alignItems: "center",                                display: "flex",                                justifyContent: "space-between",                                height: "44px",                                padding: "0 10px"                            });

nkchCSS.appendChild(nkchCSS_menu);

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

nkchCSS_title.classList.add("nkch-css-title");

nkchCSS_title.innerHTML = "nkchCSS";

Object.assign(nkchCSS_title.style, {                               color: "var(--theme-page-text-color)",                                cursor: "default",                                fontFamily: "'Rubik', sans-serif",                                fontSize: "18px"                            });

nkchCSS_menu.appendChild(nkchCSS_title);

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

nkchCSS_tools.classList.add("nkch-css-tools", "wds-button-group");

nkchCSS_menu.appendChild(nkchCSS_tools);

const nkchCSS_tools_toggleButton = document.createElement("button");

nkchCSS_tools_toggleButton.id = "nkchCSS-css-tools-button-toggle"; nkchCSS_tools_toggleButton.classList.add("nkch-css-button", "wds-button", "wds-is-secondary");

nkchCSS_tools_toggleButton.appendChild(wds.icon("eye-small")); nkchCSS_tools_toggleButton.querySelector("svg").style.fill = "var(--theme-success-color)";

nkchCSS_tools_toggleButton.addEventListener("click", function {                                toggle(editor.getValue);                            });

var nkch_IsDisabled = false;

nkchCSS_tools.appendChild(nkchCSS_tools_toggleButton);

const nkchCSS_tools_closebutton = document.createElement("button");

nkchCSS_tools_closebutton.id = "nkchCSS-css-tools-button-close"; nkchCSS_tools_closebutton.classList.add("nkch-css-button", "wds-button", "wds-is-secondary");

Object.assign(nkchCSS_tools_closebutton.style, {                               borderColor: "var(--theme-alert-color)",                                color: "var(--theme-alert-color)"                            });

nkchCSS_tools_closebutton.appendChild(wds.icon("close-small"));

nkchCSS_tools_closebutton.addEventListener("click", function {                                close;                            });

nkchCSS_tools.appendChild(nkchCSS_tools_closebutton);

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

nkchCSS_text.classList.add("nkch-css-text");

Object.assign(nkchCSS_text.style, {                               height: "calc(100% - 44px)",                                padding: "0 10px 10px 10px"                            });

nkchCSS.appendChild(nkchCSS_text);

const nkchCSS_toolbarButton = document.createElement("li");

const nkchCSS_toolbarButtonLink = document.createElement("a");

nkchCSS_toolbarButtonLink.style.cursor = "pointer";

nkchCSS_toolbarButtonLink.innerHTML = "nkchCSS";

nkchCSS_toolbarButtonLink.addEventListener("click", function {                                open;                            });

nkchCSS_toolbarButton.appendChild(nkchCSS_toolbarButtonLink); document.querySelector("#WikiaBar .toolbar .tools").appendChild(nkchCSS_toolbarButton);

var options = { mode: "css", indentUnit: 4, indentWithTabs: true, lineNumbers: true, lineWrapping: true, tabSize: 4, autoCloseBrackets: true, colorpicker: { mode: "edit", onChange: function { updateCode(editor.getValue); },                                   onLastUpdate: function  { updateCode(editor.getValue); }                               }                            }

if (theme !== "default") { Object.assign(options, {                                   theme: theme                                }) }

var editor = CodeMirror(nkchCSS_text, options);

var textarea = document.querySelector(".CodeMirror");

textarea.addEventListener("keyup", function {                                updateCode(editor.getValue);                            });

function updateCode(css) { if (nkch_IsDisabled === false) { nkchCSS_style.innerHTML = css; }                           }

function open { nkchCSS.classList.remove("is-disabled"); }

function close { nkchCSS.classList.add("is-disabled"); }

function toggle(css) { switch (nkch_IsDisabled) { case true: nkchCSS_tools_toggleButton.querySelector("svg").remove; nkchCSS_tools_toggleButton.appendChild(wds.icon("eye-small")); nkchCSS_tools_toggleButton.querySelector("svg").style.fill = "var(--theme-success-color)"; nkchCSS_style.innerHTML = css; nkch_IsDisabled = false; break; case false: nkchCSS_tools_toggleButton.querySelector("svg").remove; nkchCSS_tools_toggleButton.appendChild(wds.icon("eye-crossed-small")); nkchCSS_tools_toggleButton.querySelector("svg").style.fill = "var(--theme-alert-color)"; nkchCSS_style.innerHTML = ""; nkch_IsDisabled = true; break; }                           }

mw.util.addCSS(".CodeMirror { border-radius: 5px; height: 100%; }"); mw.util.addCSS(".nkch-css.is-disabled { visibility: hidden; }"); mw.util.addCSS(".nkch-css-tools .wds-button.wds-is-secondary { padding: 5px 6px; }"); mw.util.addCSS(".codemirror-colorpicker { z-index: 999999999 !important; }");

$(".nkch-css")[0].draggable({                               cancel: ".nkch-css-text",                                opacity: 0.8                            }).resizable({                                ghost: true,                                handles: "nw, ne, se, sw",                                minHeight: 300,                                minWidth: 450                            });

mw.loader.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/" + version_jqueryui + "/jquery-ui.js"); },                       function (e) { mw.log.error(e.message); }                   );

}           );

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