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'
    }
);

Header Example

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) );
});

Toggle Switch Example

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) );
});

Drop-Down Example

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!' );
});

Button Example

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 );
});

Color Dropper Example

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);
    });
})();

Uses HLJS to add syntax highlighting to kbin.

• 0.1 - Initial launch, basic support with singular theme.
• 0.2 - Update to remove unnecessary code.
• 0.3 - Add support for stylesheet URLs to be specified in settings and to be stored in memory.
• 0.3.1 - Added support for numerous kbin instances.
• 0.4 - Preloads a dropdown with predefined stylesheets for ease of use. Reworked how stylesheets are stored. Added header for code sections that displays what language code section is in (unless poster specifies, this is best-guess based on HLJS). Added clipboard copy button and made code section collapsible.

Example, 0.1 - PowerShell
Example, 0.3 - Side by side
Example, 0.4 - JavaScript
Example, 0.4 - New functionality
Example, 0.4 - Settings and themes