library to load the webix JS from CDN only if it hasn't already, and create the menu
Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/541008/1615450/AO3%3A%20Initialize%20webix%20GUI.js
// ==UserScript==
// @name AO3: Initialize webix GUI
// @namespace https://greasyfork.org/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.2
// @require https://update.greasyfork.org/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,
});
e.target.addEventListener("click", function(e) { $$(id).show(); }); // event listener for reopening the dialog on subsequent clicks
}
}