Hear me out... Replace all upvote divs' backgrounds with this version of Binny, make one where's angry and replace all downvote divs' backgrounds with that one.
You had me in the first half, not gonna lie.
Version 0.2.3 released.
Slight styling changes, including menu expansion animation.
@ernest - I appreciate the heads up and echo the sentiments of @Perry and @minnieo.
Both kbin-code-highlighting and the supporting script, kbin-mod-options, continue to be functional on lab2.
@shazbot will need to take a look at the first 3 mods inside of kbin-megamod - it looks like in some instances they try to function before DOM is finished and only intermittently work on lab2. However, the megamod itself is functioning as intended.
Just took a look. With the previous version of kmo, it does in fact work when compatibility mode is enabled. I think that's probably the best solution to hope for without slowing down your own enhancements to the point of being a visual hindrance. Thanks for taking a look.
I just need to up my visual appearance game now. Your dropdown appearance and effect is much more visually appealing and while my implementation is meant to make mod options more accessible for would-be devs, it would be ideal to make it visually appealing as well.
Version 0.2.2 released.
I noticed that KUP (Kbin Usability Pack) 0.2.1 by @Perry added some settings refactoring that hides the old .settings-list instead of updating in place. This unfortunately has a side-effect of causing script's settings that are slower, or wait on DOM to load, to be hidden instead of displayed with their new refactor.
In order to prevent this issue in the future, I've updated to create our own DIV and simply append it to the #settings.section DIV instead. Without KUP, you'll notice no difference in how settings are displayed from version 0.2.1, but if you're using KUP, it currently puts your options section at the top of the new section created by KUP. I imagine this will change if KUP moves to prepend instead of append. In my view, mod options should have always been last in any settings list solution, so I do hope that change is made at the very least.
Depends on your mobile browser. There are numerous third-party chromium-based browsers that support mobile extensions, such as Opera. There's also Firefox that supports mobile extensions. In either of those situations, you'd simply install TamperMonkey. I do agree that Chome/Edge should bring extension support sooner rather than later.
I'm sure it's something that'll be moved at some point, but for now - it's in KES.
Version 0.4.2 released. Adds support for kbin-mod-options 0.2.
Version 0.2 released.
It is a breaking change, but I do believe it is better to get it out quickly before any known adoption. The major change is to add collapsibility. This change does require your header to be passed as the first argument to each 'Add' function. Example code has been updated, but the gist of it is to store your header in a variable and update your add calls to reference the variable in the first argument position.
Might be a little less cluttered visibly if settings sections were collapsed vertically to start. Might be something I look at tomorrow.
Went ahead and added matches to kbin-code-highlighting for those two instances. All looks good from my perspective anyway.
Any chance you'll move this to GitHub? Would love to contribute.
Yep, I've looked at it, used it a bit. I feel as though the two projects are distinct enough that they could co-exist. Whereas megamod is a mod manager where you can toggle on/off, it becomes a burden for script writers to maintain two separate sets of options for their scripts - one for megamod and one for a standalone version.
In contrast, this script isn't intended to be installed as a userscript. Instead, it's to supplement other developers userscripts. A userscript that is setup to work with megamod could still utilize this script and simply lightens the load on the developer.
My reasoning is that I agree with @JohnEdwa and, subsequently, @SirPsychoMantis - at least partially. It makes sense for options to be standardized in one place, in this case the options menu. I also believe that if megamod does go mainstream, it's mod manager should be separate.
Hope that makes sense. ( っ- ‸ - c)
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); }); })();
```
0.4 was just merged to main. You should update automatically if you're on 0.2. If you want to update immediately, simply click here. Notes and examples have been updated in OP.
Worth noting that some of the changes in this version are to make it easier to integrate with @shazbot megamod.
Just pushed version 0.3 to GitHub. If you're on version 0.2, you should get an update automatically (eventually). If you're on version 0.1, you can update by going following this link.
Only one major change... I've added options similar to KES' to allow you to specify a hljs stylesheet outside of code.
And here I am putting together a simple script to allow collapsing of those pesky sidebars, lol! However, doesn't RES also handle settings in a similar was as is here? I think they open a new page entirely now, but it's still a dedicated button, no? At the very least it would be familiar to users of RES.
Well, I mean it works a little... But I think your main problem is on the .icon transform.
Write-Host -Object "Hello World" -ForegroundColor Red
kbin-code-highlighting: Adds support for code syntax highlighting to kbin.
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
