AO3: Initialize jQueryUI

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

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/542049/1623295/AO3%3A%20Initialize%20jQueryUI.js

發表問題、評論、或檢舉該腳本。

作者: escctrl
版本: 1.0
建立日期: 2025-07-08
更新日期: 2025-07-12
尺寸: 7.3 KB
授權條款: MIT

Purpose

This library makes it easier to create config GUIs for userscripts running on AO3

it creates a dropdown menu for the user to open the GUI
it initializes the jQueryUI framework and creates an empty popup window
it allows you to fill the popup window with the content you need and manage what happens when buttons are clicked

The GUI automatically switches to a darkmode theme if the user has AO3 styled with a dark background. It supports mobile devices (through TouchPunch). It also resizes automatically if the browser size changes.

Usage Pattern

The library creates the dialog within #main, to automatically carry over some CSS into the dialog.

In the code samples below, make sure to replace all the parameters (here in CAPITAL LETTERS) with the variable names your script uses.

Step 1: creating the AO3 menu entry

In the main part of your script, which is executed as the page loads, call:

createMenu(UNIQUEID, HEADING);

Parameters:

UNIQUEID ... a unique identifier chosen for the popup. this will become the id="X" attribute of the dialog popup, and in the menu the id="opencfg_X" attribute of the link to open the config
HEADING ... link text that appears in the AO3 menu under "Userscripts"

Step 2: waiting for user to click the AO3 menu entry

On the next line after the createMenu() call, add this code:

    document.querySelector("#opencfg_"+UNIQUEID).addEventListener("click", async function(e) {
        let uiElem = await initGUI(e, UNIQUEID, HEADING, MAXWIDTH);
        if (uiElem !== false) createDialog(uiElem);
    }, { once: true });

Configs are opened rarely. We make this script faster by initializing the GUI only on the first click of the menu link. Once clicked, the initGUI(e, UNIQUEID, HEADING, MAXWIDTH) function is called. Any subsequent clicks on the menu link will re-open the dialog as well, because initGUI() automatically adds the necessary event listener.

Parameters:

e ... the triggered event - you don't need to modify anything here
UNIQUEID ... the same unique identifier you chose for the popup
HEADING ... title that appears in the popup heading
MAXWIDTH ... for wide screens define how wide your popup needs to be at most (integer, in pixels)

Return value:

on success: jQueryUI dialog object
on error: false

initGUI() returns the dialog object into which you can add your GUI content in Step 3. If the return value is false, however, then something went wrong and the GUI can't be built.

Step 3: add content to the popup

The event listener of Step 2 calls a createDialog() function. You have to define that function and make it add content to the popup:

    function createDialog(dlg) {

        $(dlg).html(`<form><p>Hello World!</p></form>`);

        // the save/reset/cancel buttons and handling of storage
        $(dlg).dialog('option', 'buttons', [
            {
                text: "Reset",
                click: function() {
                    // do something
                    $( this ).dialog( "close" );
                }
            },
            {
                text: "Cancel",
                click: function() { $( this ).dialog( "close" ); }
            },
            {
                text: "Save",
                click: function() {
                    // do something
                    $( this ).dialog( "close" );
                }
            },

        ]);

        $(dlg).dialog('open');
    }

Add the HTML content that you need in $(dlg).html();.

The above example already includes three buttons at the bottom of the popup: Reset, Cancel, and Save. Define what they each need to do in their anonymous callback functions.

After everything is set up, the last line finally shows the dialog to the user.

Note: Within the createDialog() function, you have jQuery available. You can use its convenient functions to make the form content reactive, such as $(element).toggle(400) to toggle between show/hide of elements with a slide animation.

Example code