import {onSelect} from "../services/dom";
+import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
/**
* Dropdown
this.direction = (document.dir === 'rtl') ? 'right' : 'left';
this.body = document.body;
this.showing = false;
- this.setupListeners();
+
this.hide = this.hide.bind(this);
+ this.setupListeners();
}
show(event = null) {
}
// Set listener to hide on mouse leave or window click
- this.menu.addEventListener('mouseleave', this.hide.bind(this));
+ this.menu.addEventListener('mouseleave', this.hide);
window.addEventListener('click', event => {
if (!this.menu.contains(event.target)) {
this.hide();
this.showing = false;
}
- getFocusable() {
- return Array.from(this.menu.querySelectorAll('[tabindex]:not([tabindex="-1"]),[href],button,input:not([type=hidden])'));
- }
-
- focusNext() {
- const focusable = this.getFocusable();
- const currentIndex = focusable.indexOf(document.activeElement);
- let newIndex = currentIndex + 1;
- if (newIndex >= focusable.length) {
- newIndex = 0;
- }
-
- focusable[newIndex].focus();
- }
+ setupListeners() {
+ const keyboardNavHandler = new KeyboardNavigationHandler(this.container, (event) => {
+ this.hide();
+ this.toggle.focus();
+ if (!this.bubbleEscapes) {
+ event.stopPropagation();
+ }
+ }, (event) => {
+ if (event.target.nodeName === 'INPUT') {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ this.hide();
+ });
- focusPrevious() {
- const focusable = this.getFocusable();
- const currentIndex = focusable.indexOf(document.activeElement);
- let newIndex = currentIndex - 1;
- if (newIndex < 0) {
- newIndex = focusable.length - 1;
+ if (this.moveMenu) {
+ keyboardNavHandler.shareHandlingToEl(this.menu);
}
- focusable[newIndex].focus();
- }
-
- setupListeners() {
// Hide menu on option click
this.container.addEventListener('click', event => {
const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
event.stopPropagation();
this.show(event);
if (event instanceof KeyboardEvent) {
- this.focusNext();
- }
- });
-
- // Keyboard navigation
- const keyboardNavigation = event => {
- if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
- this.focusNext();
- event.preventDefault();
- } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
- this.focusPrevious();
- event.preventDefault();
- } else if (event.key === 'Escape') {
- this.hide();
- this.toggle.focus();
- if (!this.bubbleEscapes) {
- event.stopPropagation();
- }
- }
- };
- this.container.addEventListener('keydown', keyboardNavigation);
- if (this.moveMenu) {
- this.menu.addEventListener('keydown', keyboardNavigation);
- }
-
- // Hide menu on enter press or escape
- this.menu.addEventListener('keydown ', event => {
- if (event.key === 'Enter') {
- event.preventDefault();
- event.stopPropagation();
- this.hide();
+ keyboardNavHandler.focusNext();
}
});
}
import {htmlToDom} from "../services/dom";
import {debounce} from "../services/util";
+import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
/**
* @extends {Component}
this.input.setAttribute('autocomplete', 'on');
this.button.focus();
this.input.focus();
- })
+ });
+
+ new KeyboardNavigationHandler(this.container, () => {
+ this.hideSuggestions();
+ });
}
/**
import * as Dates from "../services/dates";
import {onSelect} from "../services/dom";
+import {debounce} from "../services/util";
/**
* Page Editor
});
// Changelog controls
- this.changelogInput.addEventListener('change', this.updateChangelogDisplay.bind(this));
+ const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
+ this.changelogInput.addEventListener('input', updateChangelogDebounced);
// Draft Controls
onSelect(this.saveDraftButton, this.saveDraft.bind(this));
--- /dev/null
+/**
+ * Handle common keyboard navigation events within a given container.
+ */
+export class KeyboardNavigationHandler {
+
+ /**
+ * @param {Element} container
+ * @param {Function|null} onEscape
+ * @param {Function|null} onEnter
+ */
+ constructor(container, onEscape = null, onEnter = null) {
+ this.containers = [container];
+ this.onEscape = onEscape;
+ this.onEnter = onEnter;
+ container.addEventListener('keydown', this.#keydownHandler.bind(this));
+ }
+
+ /**
+ * Also share the keyboard event handling to the given element.
+ * Only elements within the original container are considered focusable though.
+ * @param {Element} element
+ */
+ shareHandlingToEl(element) {
+ this.containers.push(element);
+ element.addEventListener('keydown', this.#keydownHandler.bind(this));
+ }
+
+ /**
+ * Focus on the next focusable element within the current containers.
+ */
+ focusNext() {
+ const focusable = this.#getFocusable();
+ const currentIndex = focusable.indexOf(document.activeElement);
+ let newIndex = currentIndex + 1;
+ if (newIndex >= focusable.length) {
+ newIndex = 0;
+ }
+
+ focusable[newIndex].focus();
+ }
+
+ /**
+ * Focus on the previous existing focusable element within the current containers.
+ */
+ focusPrevious() {
+ const focusable = this.#getFocusable();
+ const currentIndex = focusable.indexOf(document.activeElement);
+ let newIndex = currentIndex - 1;
+ if (newIndex < 0) {
+ newIndex = focusable.length - 1;
+ }
+
+ focusable[newIndex].focus();
+ }
+
+ /**
+ * @param {KeyboardEvent} event
+ */
+ #keydownHandler(event) {
+ if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+ this.focusNext();
+ event.preventDefault();
+ } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+ this.focusPrevious();
+ event.preventDefault();
+ } else if (event.key === 'Escape') {
+ if (this.onEscape) {
+ this.onEscape(event);
+ } else if (document.activeElement) {
+ document.activeElement.blur();
+ }
+ } else if (event.key === 'Enter' && this.onEnter) {
+ this.onEnter(event);
+ }
+ }
+
+ /**
+ * Get an array of focusable elements within the current containers.
+ * @returns {Element[]}
+ */
+ #getFocusable() {
+ const focusable = [];
+ const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"]),input:not([type=hidden])';
+ for (const container of this.containers) {
+ focusable.push(...container.querySelectorAll(selector))
+ }
+ return focusable;
+ }
+}
\ No newline at end of file
text-decoration: none;
@include lightDark(background-color, #f2f2f2, #2d2d2d);
}
+ &:focus {
+ @include lightDark(background-color, #eee, #222);
+ outline: 1px dotted #666;
+ outline-offset: -2px;
+ }
}
.card.border-card {
projects / bookstack / commitdiff