بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greasyfork.org/scripts/542049/1623295/AO3%3A%20Initialize%20jQueryUI.js
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 configHEADING ... 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 hereUNIQUEID ... the same unique identifier you chose for the popupHEADING ... title that appears in the popup headingMAXWIDTH ... 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
const UNIQUEID = 'formatting_keys';
const HEADING = 'Formatting Keyboard Shortcuts';
const MAXWIDTH = 700;
createMenu(UNIQUEID, HEADING);
document.querySelector("#opencfg_"+UNIQUEID).addEventListener("click", async function(e) {
let uiElem = await initGUI(e, UNIQUEID, HEADING, MAXWIDTH);
if (uiElem !== false) createDialog(uiElem);
}, { once: true });
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');
}
