cross-posted from: https://kbin.social/m/kbinStyles/t/109271 > 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 #### > > ``` > kmoAddHeader( > 'kbin-mod-options examples', > { > author: 'Ori', > version: '0.1', > license: 'MIT', > url: 'https://github.com/Oricul' > } > ); > > ``` > > [Header Example](https://files.catbox.moe/3wmmoq.gif) > > ### Toggle Switch ### > > ``` > kmoAddToggle(, , ); > > ``` > > * settingLabel - required > * settingValue - required > * settingDescription - optional > > #### Example #### > > ``` > // Create toggle switch > const settingEnabled = kmoAddToggle( > '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'}]>, , ); > > ``` > > * settingLabel - required > * options array - required > * name/value in options array - required > * currentSetting - required > * settingDescription - optional > > #### Example #### > > ``` > // Create drop down > const font = kmoAddDropDown( > '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(, , ); > > ``` > > * settingLabel - required > * buttonLabel - required > * settingDescription - optional > > #### Example #### > > ``` > // Create button const > const resetButton = kmoAddButton( > '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(, , ); > > ``` > > * settingLabel - required > * currentColor - required > * settingDescription - optional > > #### Example #### > > ``` > // Create color dropper const > const primaryColor = kmoAddColorDropper( > '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/* > // @icon https://kbin.social/favicon.svg > // @grant none > // @require https://github.com/Oricul/kbin-scripts/raw/main/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 > 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( > '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( > '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( > '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( > 'Primary Color', > '#0ff', > 'Select primary color for style.' > ); > // Listener example for color dropper. > settingFour.addEventListener("change", () => { > console.log(settingFour.value); > }); > })(); > > ```