mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Make ST-style buttons keyboard selectable
- Make ST-style buttons keyboard selectable - Allow custom classes/selectors to be set as buttons too, with the same functionality (CSS selector-based) - Observer to automatically add functionality to any button added to the DOM - Allow buttons to not be selectable via 'disabled' or 'not_focusable'
This commit is contained in:
165
public/scripts/keyboard.js
Normal file
165
public/scripts/keyboard.js
Normal file
@ -0,0 +1,165 @@
|
||||
/* All selectors that should act as keyboard buttons by default */
|
||||
const buttonSelectors = ['.menu_button', '.right_menu_button', '.clickable'];
|
||||
|
||||
const CUSTOM_CLICKABLE_BUTTON_CLASS = 'clickable';
|
||||
|
||||
const NOT_FOCUSABLE_CLASS = 'not_focusable';
|
||||
const DISABLED_CLASS = 'disabled';
|
||||
|
||||
/**
|
||||
* An observer that will check if any new buttons are added to the body
|
||||
* @type {MutationObserver}
|
||||
*/
|
||||
const observer = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.type === 'childList') {
|
||||
mutation.addedNodes.forEach(node => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE && node instanceof Element) {
|
||||
// Check if the node itself is a button
|
||||
if (isKeyboardButton(node)) {
|
||||
enableKeyboardButton(node);
|
||||
}
|
||||
// Check for any descendants that might be buttons
|
||||
const newButtons = getAllButtons(node);
|
||||
enableKeyboardButton(...newButtons);
|
||||
}
|
||||
});
|
||||
} else if (mutation.type === 'attributes') {
|
||||
const target = mutation.target;
|
||||
if (mutation.attributeName === 'class' && target instanceof Element) {
|
||||
if (isKeyboardButton(target)) {
|
||||
enableKeyboardButton(target);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Registers a button class (for example for an exatension) and makes it keyboard-selectable.
|
||||
* Optionally apply the 'not_focusable' and 'disabled' classes if needed.
|
||||
*
|
||||
* @param {string} buttonSelector - The CSS selector for the button (Supports class combinations, chained via dots like <c>tag.actionable</c>, and sub selectors)
|
||||
* @param {object} [options={}] - Optional settings for the button class
|
||||
* @param {boolean} [options.disabledByDefault=false] - Whether buttons of this class should be disabled by default
|
||||
* @param {boolean} [options.notFocusableByDefault=false] - Whether buttons of this class should not be focusable by default
|
||||
*/
|
||||
export function registerKeyboardButtonClass(buttonSelector, { disabledByDefault = false, notFocusableByDefault = false } = {}) {
|
||||
buttonSelectors.push(buttonSelector);
|
||||
|
||||
const buttons = document.querySelectorAll(buttonSelector);
|
||||
|
||||
if (disabledByDefault || notFocusableByDefault) {
|
||||
buttons.forEach(button => {
|
||||
if (disabledByDefault) button.classList.add(DISABLED_CLASS);
|
||||
if (notFocusableByDefault) button.classList.add(NOT_FOCUSABLE_CLASS);
|
||||
});
|
||||
}
|
||||
|
||||
enableKeyboardButton(...buttons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the given button is a keyboard-enabled button.
|
||||
*
|
||||
* @param {Element} button - The button element to check
|
||||
* @returns {boolean} Returns true if the button is a keyboard button, false otherwise
|
||||
*/
|
||||
export function isKeyboardButton(button) {
|
||||
// Check if this button matches any of the selectors
|
||||
return buttonSelectors.some(selector => button.matches(selector));
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a
|
||||
* Adds the 'tabindex' attribute to buttons that are not marked as 'not_focusable' or 'disabled'
|
||||
*
|
||||
* @param {Element[]} buttons - The buttons to add the 'tabindex' attribute to
|
||||
*/
|
||||
export function enableKeyboardButton(...buttons) {
|
||||
buttons.forEach(button => {
|
||||
// If this button doesn't have any of the classes, lets say the caller knows this and wants this to be a custom-enabled keyboard button.
|
||||
if (!isKeyboardButton(button)) {
|
||||
button.classList.add(CUSTOM_CLICKABLE_BUTTON_CLASS);
|
||||
}
|
||||
|
||||
// Set/remove the tabindex accordingly to the classes. Remembering if it had a custom value.
|
||||
if (!button.classList.contains(NOT_FOCUSABLE_CLASS) && !button.classList.contains(DISABLED_CLASS)) {
|
||||
if (!button.hasAttribute('tabindex')) {
|
||||
const tabIndex = button.getAttribute('data-original-tabindex') ?? '0';
|
||||
button.setAttribute('tabindex', tabIndex);
|
||||
}
|
||||
} else {
|
||||
button.setAttribute('data-original-tabindex', button.getAttribute('tabindex'));
|
||||
button.removeAttribute('tabindex');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the focusability of buttons on the given element or the document
|
||||
*
|
||||
* @param {Element|Document} [element=document] - The element on which to initialize the button focus. Defaults to the document
|
||||
*/
|
||||
function initializeButtonFocus(element = document) {
|
||||
const buttons = getAllButtons(element);
|
||||
enableKeyboardButton(...buttons);
|
||||
}
|
||||
|
||||
/**
|
||||
* Queries all buttons within the given element based on the button selectors and returns them as an array
|
||||
*
|
||||
* @param {Element|Document} element - The element within which to query the buttons
|
||||
* @returns {HTMLElement[]} An array containing all the buttons that match the button selectors
|
||||
*/
|
||||
function getAllButtons(element) {
|
||||
// Query each selecter individually and combine all to a big array to return
|
||||
return [].concat(...buttonSelectors.map(selector => Array.from(element.querySelectorAll(`${selector}`))));
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles keydown events on the document to trigger click on Enter key press for buttons
|
||||
*
|
||||
* @param {KeyboardEvent} event - The keyboard event
|
||||
*/
|
||||
function handleGlobalKeyDown(event) {
|
||||
if (event.key === 'Enter') {
|
||||
if (!(event.target instanceof HTMLElement))
|
||||
return;
|
||||
|
||||
// Only count enter on this button if no modifier key is pressed
|
||||
if (event.altKey || event.ctrlKey || event.shiftKey)
|
||||
return;
|
||||
|
||||
// Traverse up the DOM tree to find the actual button element
|
||||
let target = event.target;
|
||||
while (target && !isKeyboardButton(target)) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
// Trigger click if a valid button is found and it's not disabled
|
||||
if (target && !target.classList.contains(DISABLED_CLASS)) {
|
||||
console.debug('Triggering click on keyboard-focused button via Enter', target);
|
||||
target.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes severial keyboard functionalities for ST
|
||||
*/
|
||||
export function initKeyboard() {
|
||||
// Start observing the body for added elements and attribute changes
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
|
||||
// Initialize tabindex for existing buttons
|
||||
initializeButtonFocus();
|
||||
|
||||
// Add a global keydown listener
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
}
|
Reference in New Issue
Block a user