AO3: Initialize jQueryUI

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

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @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