☰

AO3: Initialize webix GUI

library to load the webix JS from CDN only if it hasn't already, and create the menu

Verze ze dne 28. 06. 2025. Zobrazit nejnovější verzi.

Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greatest.deepsurf.us/scripts/541008/1615454/AO3%3A%20Initialize%20webix%20GUI.js 

// ==UserScript==
// @name         AO3: Initialize webix GUI
// @namespace    https://greatest.deepsurf.us/en/users/906106-escctrl
// @description  library to load the webix JS from CDN only if it hasn't already, and create the menu
// @author       escctrl
// @version      0.3
// @require      https://update.greatest.deepsurf.us/scripts/491888/1355841/Light%20or%20Dark.js
// @grant        none
// @license      MIT
// ==/UserScript==

/* call this library with createMenu(id, heading, theme, views)
   id ......... config GUI ID chosen for the modal/popup
   heading .... title that appears in the Menu and on the modal/popup
   maxWidth ... for wide screens define the max with of the modal/popup
   views ...... array[] of all [view_id]s that need to be styled (components: window, colorselect)
 */

/* global webix, $$, lightOrDark */
'use strict';

// utility to reduce verboseness
const q = (selector, node=document) => node.querySelector(selector);
const qa = (selector, node=document) => node.querySelectorAll(selector);

function createMenu(id, heading) {
    // if no other script has created it yet, write out a "Userscripts" option to the main navigation
    if (qa('#scriptconfig').length === 0) {
        qa('#header nav[aria-label="Site"] li.search')[0] // insert as last li before search
            .insertAdjacentHTML('beforebegin', `<li class="dropdown" id="scriptconfig">
                <a class="dropdown-toggle" href="/" data-toggle="dropdown" data-target="#">Userscripts</a>
                <ul class="menu dropdown-menu"></ul></li>`);
    }

    // then add this script's config option to navigation dropdown
    q('#scriptconfig .dropdown-menu').insertAdjacentHTML('beforeend', `<li><a href="javascript:void(0);" id="opencfg_${id}">${heading}</a></li>`);
}

async function loadWebix() {
    if (typeof webix !== "undefined") { console.debug('webix is already loaded'); return true; }
    else {
        // https://stackoverflow.com/a/44807594
        new Promise((resolve, reject) => {
          const script = document.createElement('script');
          document.head.appendChild(script);
          script.onload = resolve;
          script.onerror = reject;
          script.async = true;
          script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/webix.min.js';
        })
        .then(() => { console.debug("script has loaded webix successfully"); return true; })
        .catch(() => { console.debug("script has failed to load webix"); return false; });
    }
}

async function initGUI(e, id, heading, maxWidth, views) {
    let loadSuccess = await loadWebix(); // if it fails to load, there's no point in continuing GUI setup

    if (loadSuccess) {
        // setting up the GUI CSS (only if no other script has created it yet)
        if (!q("head link[href*='webix.min.css']")) {
            q("head").insertAdjacentHTML('beforeend',`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/webix.min.css" type="text/css">`);
            q("head").insertAdjacentHTML('beforeend',`<style type="text/css">/* webix stuff that's messed up by AO3 default skins */
                .webix_view {
                    label { margin-right: unset; }
                    button { box-shadow: unset; }
                }</style>`);
        }

        // automatic darkmode if the background is dark (e.g. Reversi)
        let theme = lightOrDark(getComputedStyle(q("body")).getPropertyValue("background-color"));
        if (theme === "dark") {
            views = views.map(function() { return `.webix_view.darkmode[view_id="${this}"]`; }).join(', ');
            console.debug("view_ids:" + views);

            q("head").insertAdjacentHTML('beforeend',`<style type="text/css">/* switching webix colors to a dark mode if AO3 is dark */
            ${views} {
                --text-on-dark: #ddd;
                --handles-on-dark: #bbb;
                --highlight-on-dark: #0c6a82;
                --background-dark: #222;
                --border-on-dark: #555;
                --no-border: transparent;
                --button-dark: #333;

                background-color: var(--background-dark);
                color: var(--text-on-dark);
                border-color: var(--border-on-dark);

                &.webix_popup { border: 1px solid var(--border-on-dark); }
                .webix_win_head { border-bottom-color: var(--border-on-dark); }
                .webix_icon_button:hover::before { background-color: var(--highlight-on-dark); }

                .webix_view.webix_form, .webix_view.webix_header, .webix_win_body>.webix_view { background-color: var(--background-dark); }
                .webix_secondary .webix_button, .webix_slider_box .webix_slider_right, .webix_el_colorpicker .webix_inp_static, .webix_color_out_text, .webix_switch_box { background-color: var(--button-dark); }
                .webix_primary .webix_button, .webix_slider_box .webix_slider_left, .webix_switch_box.webix_switch_on { background-color: var(--highlight-on-dark); }
                .webix_switch_handle, .webix_slider_box .webix_slider_handle { background-color: var(--handles-on-dark); }
                .webix_el_colorpicker .webix_inp_static, .webix_color_out_block, .webix_color_out_text,
                .webix_switch_handle, .webix_slider_box .webix_slider_handle { border-color: var(--border-on-dark); }
                .webix_switch_box, .webix_slider_box .webix_slider_left, .webix_slider_box .webix_slider_right { border-color: var(--no-border); }
                * { color: var(--text-on-dark); }
            }</style>`);
        }

        webix.ui({
            view: "window",
            id: id,
            css: "darkmode",
            width: parseInt(getComputedStyle(q("body")).getPropertyValue("width")) * 0.9, // 90% of the screen
            maxWidth: maxWidth, // limit for wide monitors
            position: "top",
            head: heading,
            close: true,
            move: true,
        });
        console.log($$(id));

        e.target.addEventListener("click", function(e) { $$(id).show(); }); // event listener for reopening the dialog on subsequent clicks
    }
}