×
扫码关注【爱吃馍】
获取最新脚本和技术支持！
关注公众号，获取最新地址
library to load the jQuery, jQueryUI and TouchPunch JS from CDN only if it hasn't already, and create the menu
Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/542049/1623295/AO3%3A%20Initialize%20jQueryUI.js
This library makes it easier to create config GUIs for userscripts running on AO3
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.
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.
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"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:
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.
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.
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');
}