kbin-mod-options ========== Description ---------- The purpose of this script is to allow mods to more easily implement settings. Functionality ---------- ### Header ### ``` kmoAddHeader(, <{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' } ); ``` [Header Example](https://files.catbox.moe/vjknsd.gif) ### Toggle Switch ### ``` kmoAddToggle(, , , ); ``` * 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) ); }); ``` [Toggle Switch Example](https://files.catbox.moe/5yxjr0.gif) ### Drop-Down ### ``` kmoAddDropDown(, , <[{name: 'friendlyName', value: 'backendValue'},{name: 'friendlyNameTwo', value: 'backendValueTwo'}]>, , ); ``` * 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) ); }); ``` [Drop-Down Example](https://files.catbox.moe/t6q3dv.gif) ### Button ### ``` kmoAddButton(, , , ); ``` * 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!' ); }); ``` [Button Example](https://files.catbox.moe/tm7m8s.gif) ### Color Dropper ### ``` kmoAddColorDropper(, , , ); ``` * 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 ); }); ``` [Color Dropper Example](https://files.catbox.moe/jcm99i.gif) 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(, {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 - required, settingValue - required, settingDescription - optional const settingOne = kmoAddToggle( settingHeader, 'Enabled', true, 'Turn this mod on or off.' ); // Listener for toggle switch - kmoGetToggle(); // toggleSwitchVar - required settingOne.addEventListener("click", () => { console.log(kmoGetToggle(settingOne)); }); // Dropdown Menu - kmoAddDropDown(, [{name: 'name', value: 'value'},{name: 'name2', value: 'value2'}], , ); // 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 - required settingTwo.addEventListener("change", () => { console.log(kmoGetDropDown(settingTwo)); }); // Button - kmoAddButton(, , ); // 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 - 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); }); })(); ```