OC kbin-mod-options; Mod options made easy
kbin-mod-options
Description
The purpose of this script is to allow mods to more easily implement settings.
Functionality
Header
kmoAddHeader(<modName>, <{author: 'name', version: 'versionNumber', license: 'licenseType', url: 'modUrl'}>);
- modName - required
- info object - optional
Example
const settingHeader = kmoAddHeader(
'kbin-mod-options examples',
{
author: 'Ori',
version: '0.1',
license: 'MIT',
url: 'https://github.com/Oricul'
}
);
Toggle Switch
kmoAddToggle(<headerChildDiv>, <settingLabel>, <settingValue>, <settingDescription>);
- headerChildDiv - required
- settingLabel - required
- settingValue - required
- settingDescription - optional
Example
// Create toggle switch
const settingEnabled = kmoAddToggle(
settingHeader,
'Enabled',
true,
'Turns this mod on or off.'
);
// Listen for toggle
settingEnabled.addEventListener("click", () => {
// Log enabled state to console.
console.log( kmoGetToggle(settingEnabled) );
});
Drop-Down
kmoAddDropDown(<headerChildDiv>, <settingLabel>, <[{name: 'friendlyName', value: 'backendValue'},{name: 'friendlyNameTwo', value: 'backendValueTwo'}]>, <currentSetting>, <settingDescription>);
- headerChildDiv - required
- settingLabel - required
- options array - required
- name/value in options array - required
- currentSetting - required
- settingDescription - optional
Example
// Create drop down
const font = kmoAddDropDown(
settingHeader,
'Font',
[
{
name: 'Arial',
value: 'font-arial'
},{
name: 'Consolas',
value: 'font-consolas'
}
],
'font-consolas',
'Choose a font for kbin.'
);
// Listen for drop down change
font.addEventListener("change", () => {
// Log drop down selection to console.
console.log( kmoGetDropDown(font) );
});
Button
kmoAddButton(<headerChildDiv>, <settingLabel>, <buttonLabel>, <settingDescription>);
- headerChildDiv - required
- settingLabel - required
- buttonLabel - required
- settingDescription - optional
Example
// Create button const
const resetButton = kmoAddButton(
settingHeader,
'Default Settings',
'Reset',
'Resets settings to defaults.'
);
// Listen for button press.
resetButton.addEventListener("click", () => {
// Log press to console.
console.log( 'button pressed!' );
});
Color Dropper
kmoAddColorDropper(<headerChildDiv>, <settingLabel>, <currentColor>, <settingDescription>);
- headerChildDiv - required
- settingLabel - required
- currentColor - required
- settingDescription - optional
Example
// Create color dropper const
const primaryColor = kmoAddColorDropper(
settingHeader,
'Primary Color',
'#0ff',
'Select primary theme color'
);
// Listen for new color change
primaryColor.addEventListener("change", () => {
// Log color selection out to console.
console.log( primaryColor.value );
});
Usage
Simply add kbin-mod-options to your script's requires.
// @require https://github.com/Oricul/kbin-scripts/raw/main/kbin-mod-options.js
Example
// ==UserScript==
// @name kbin-mod-options-dev
// @namespace https://github.com/Oricul
// @version 0.1
// @description Attempt at standardizing mod options.
// @author 0rito
// @license MIT
// @match https://kbin.social/*
// @match https://kbin.sh/*
// @icon https://kbin.social/favicon.svg
// @grant none
// @require file://H:/GoogleDrive/Personal/Documents/GitHub/kbin-scripts/kbin-mod-options.js
// ==/UserScript==
(function() {
'use strict';
// Section header - kmoAddHeader(<modName>, {author: 'name', version: 'versionNumber', license: 'licenseType', url: 'modUrl'});
// modName - required, author - optional, version - optional, license - optional, url - optional
const settingHeader = kmoAddHeader(
'kbin-mod-options examples',
{
author: 'Ori',
version: '0.1',
license: 'MIT',
url: 'https://github.com/Oricul'
}
);
// Toggle switch - kmoAddToggle(<settingLabel>, <settingValue>, <settingDescription>);
// settingLabel - required, settingValue - required, settingDescription - optional
const settingOne = kmoAddToggle(
settingHeader,
'Enabled',
true,
'Turn this mod on or off.'
);
// Listener for toggle switch - kmoGetToggle(<toggleSwitchVar>);
// toggleSwitchVar - required
settingOne.addEventListener("click", () => {
console.log(kmoGetToggle(settingOne));
});
// Dropdown Menu - kmoAddDropDown(<settingLabel>, [{name: 'name', value: 'value'},{name: 'name2', value: 'value2'}], <currentSetting>, <settingDescription>);
// settingLabel - required, name & value - required, currentSetting - required, settingDescription - optional
const settingTwo = kmoAddDropDown(
settingHeader,
'Font',
[
{
name: 'Arial',
value: 'font-arial'
},{
name: 'Consolas',
value: 'font-consolas'
}
],
'font-consolas',
'Choose a site-wide font.');
// Listener for dropdown menu - kmoGetDropDown(<dropDownVar>);
// dropDownVar - required
settingTwo.addEventListener("change", () => {
console.log(kmoGetDropDown(settingTwo));
});
// Button - kmoAddButton(<settingLabel>, <buttonLabel>, <settingDescription>);
// settingLabel - required, buttonLabel - required, settingDescription - optional
const settingThree = kmoAddButton(
settingHeader,
'Default Settings',
'Reset',
'Resets settings to defaults.'
);
// Listener example for buttons.
settingThree.addEventListener("click", () => {
console.log('button pressed');
});
// Color Dropper - kmoAddColorDropper(<settingLabel>, <currentColor>, <settingDescription>);
// settingLabel - required, currentColor - required, settingDescription - optional
const settingFour = kmoAddColorDropper(
settingHeader,
'Primary Color',
'#0ff',
'Select primary color for style.'
);
// Listener example for color dropper.
settingFour.addEventListener("change", () => {
console.log(settingFour.value);
});
})();
Add comment