Crystal/SillyBubble
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actually make this good.

Browse Source
This commit is contained in:
city-unit 2023-08-02 00:23:23 -04:00
parent e3d6a143f9
commit b98429d414
2 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
example.html
View File

@ -1,2 +1,22 @@
<!-- You might want to add additional HTML elements to ST.
It's good practice to separate it out from your code -->
It's good practice to separate it out from your code -->
<div class="example-extension-settings">
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<b>Extension Example</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div class="example-extension_block flex-container">
<input id="my_button" class="menu_button" type="submit" value="Example Button" />
</div>
<div class="example-extension_block flex-container">
<input id="example_setting" type="checkbox" />
<label for="example_setting">This is an example</label>
</div>
<hr class="sysHR" />
</div>
</div>
</div>

34
index.js
View File

@ -4,27 +4,44 @@
//You'll likely need to import extension_settings, getContext, and loadExtensionSettings from extensions.js
import { extension_settings, getContext, loadExtensionSettings } from "../../../extensions.js";
// Keep track of where your extension is located
const extensionName = "example-extension";
const extensionFolderPath = `scripts/extensions/third-party/${extensionName}/`;
//You'll likely need to import some other functions from the main script
import { saveSettingsDebounced } from "../../../../script.js";
// Keep track of where your extension is located, name should match repo name
const extensionName = "st-extension-example";
const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`;
const extensionSettings = extension_settings[extensionName];
const defaultSettings = {};
/**
* Loads the extension settings if they exist, otherwise initializes them to the defaults.
*/
// Loads the extension settings if they exist, otherwise initializes them to the defaults.
async function loadSettings() {
//Create the settings if they don't exist
extension_settings[extensionName] = extension_settings[extensionName] || {};
if (Object.keys(extension_settings[extensionName]).length === 0) {
Object.assign(extension_settings[extensionName], defaultSettings);
}
// Updating settings in the UI
$("#example_setting").prop("checked", extension_settings[extensionName].example_setting).trigger("input");
}
// This function is called when the extension settings are changed in the UI
function onExampleInput(event) {
const value = Boolean($(event.target).prop("checked"));
extension_settings[extensionName].example_setting = value;
saveSettingsDebounced();
}
// This function is called when the button is clicked
function onButtonClick() {
// This function is called when the button is clicked
// You can do whatever you want here
// Let's make a popup appear with the checked setting
toastr.info(
`The checkbox is ${extension_settings[extensionName].example_setting ? "checked" : "not checked"}`,
"A popup appeared because you clicked the button!"
);
}
// This function is called when the extension is loaded
@ -38,7 +55,8 @@ jQuery(async () => {
$("#extensions_settings").append(settingsHtml);
// These are examples of listening for events
$("#my_button").on("click", onButtonClick());
$("#my_button").on("click", onButtonClick);
$("#example_setting").on("input", onExampleInput);
// Load settings when starting things up (if you have any)
loadSettings();