// Gather our input files
const entryPoints = {
- app: path.join(__dirname, '../../resources/js/app.js'),
+ app: path.join(__dirname, '../../resources/js/app.ts'),
code: path.join(__dirname, '../../resources/js/code/index.mjs'),
'legacy-modes': path.join(__dirname, '../../resources/js/code/legacy-modes.mjs'),
markdown: path.join(__dirname, '../../resources/js/markdown/index.mjs'),
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
import {uniqueId} from '../services/util.ts';
import {Component} from './component';
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
export class AjaxDeleteRow extends Component {
-import {onEnterPress, onSelect} from '../services/dom';
+import {onEnterPress, onSelect} from '../services/dom.ts';
import {Component} from './component';
/**
-import {showLoading} from '../services/dom';
+import {showLoading} from '../services/dom.ts';
import {Component} from './component';
export class Attachments extends Component {
import {escapeHtml} from '../services/util.ts';
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
import {Component} from './component';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
const ajaxCache = {};
import Sortable, {MultiDrag} from 'sortablejs';
import {Component} from './component';
-import {htmlToDom} from '../services/dom';
+import {htmlToDom} from '../services/dom.ts';
// Auto sort control
const sortOperations = {
-import {onChildEvent, onEnterPress, onSelect} from '../services/dom';
+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';
import {Component} from './component';
export class CodeEditor extends Component {
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
/**
-import {onSelect} from '../services/dom';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {onSelect} from '../services/dom.ts';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
import {Component} from './component';
/**
import {Clipboard} from '../services/clipboard.ts';
import {
elem, getLoading, onSelect, removeLoading,
-} from '../services/dom';
+} from '../services/dom.ts';
export class Dropzone extends Component {
-import {htmlToDom} from '../services/dom';
+import {htmlToDom} from '../services/dom.ts';
import {Component} from './component';
export class EntityPermissions extends Component {
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
export class EntitySearch extends Component {
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
import {Component} from './component';
/**
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
/**
-import {htmlToDom} from '../services/dom';
+import {htmlToDom} from '../services/dom.ts';
import {debounce} from '../services/util.ts';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
import {Component} from './component';
/**
import {
onChildEvent, onSelect, removeLoading, showLoading,
-} from '../services/dom';
+} from '../services/dom.ts';
import {Component} from './component';
export class ImageManager extends Component {
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
export class OptionalInput extends Component {
import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom.ts';
import {buildForInput} from '../wysiwyg-tinymce/config';
export class PageComment extends Component {
import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom.ts';
import {buildForInput} from '../wysiwyg-tinymce/config';
export class PageComments extends Component {
-import * as DOM from '../services/dom';
+import * as DOM from '../services/dom.ts';
import {scrollAndHighlightElement} from '../services/util.ts';
import {Component} from './component';
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {debounce} from '../services/util.ts';
import {Component} from './component';
import {utcTimeStampToLocalTime} from '../services/dates.ts';
-import * as DOM from '../services/dom';
+import * as DOM from '../services/dom.ts';
import {Component} from './component';
import {copyTextToClipboard} from '../services/clipboard.ts';
import {fadeIn, fadeOut} from '../services/animations.ts';
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
import {Component} from './component';
/**
-import * as DOM from '../services/dom';
+import * as DOM from '../services/dom.ts';
import {Component} from './component';
export class TemplateManager extends Component {
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
import {Component} from './component';
export class UserSelect extends Component {
+/**
+ * Check if the given param is a HTMLElement
+ */
+export function isHTMLElement(el: any): el is HTMLElement {
+ return el instanceof HTMLElement;
+}
+
/**
* Create a new element with the given attrs and children.
* Children can be a string for text nodes or other elements.
- * @param {String} tagName
- * @param {Object<String, String>} attrs
- * @param {Element[]|String[]}children
- * @return {*}
*/
-export function elem(tagName, attrs = {}, children = []) {
+export function elem(tagName: string, attrs: Record<string, string> = {}, children: Element[]|string[] = []): HTMLElement {
const el = document.createElement(tagName);
for (const [key, val] of Object.entries(attrs)) {
/**
* Run the given callback against each element that matches the given selector.
- * @param {String} selector
- * @param {Function<Element>} callback
*/
-export function forEach(selector, callback) {
+export function forEach(selector: string, callback: (el: Element) => any) {
const elements = document.querySelectorAll(selector);
for (const element of elements) {
callback(element);
/**
* Helper to listen to multiple DOM events
- * @param {Element} listenerElement
- * @param {Array<String>} events
- * @param {Function<Event>} callback
*/
-export function onEvents(listenerElement, events, callback) {
+export function onEvents(listenerElement: Element, events: string[], callback: (e: Event) => any): void {
for (const eventName of events) {
listenerElement.addEventListener(eventName, callback);
}
/**
* Helper to run an action when an element is selected.
* A "select" is made to be accessible, So can be a click, space-press or enter-press.
- * @param {HTMLElement|Array} elements
- * @param {function} callback
*/
-export function onSelect(elements, callback) {
+export function onSelect(elements: HTMLElement|HTMLElement[], callback: (e: Event) => any): void {
if (!Array.isArray(elements)) {
elements = [elements];
}
/**
* Listen to key press on the given element(s).
- * @param {String} key
- * @param {HTMLElement|Array} elements
- * @param {function} callback
*/
-function onKeyPress(key, elements, callback) {
+function onKeyPress(key: string, elements: HTMLElement|HTMLElement[], callback: (e: KeyboardEvent) => any): void {
if (!Array.isArray(elements)) {
elements = [elements];
}
- const listener = event => {
+ const listener = (event: KeyboardEvent) => {
if (event.key === key) {
callback(event);
}
/**
* Listen to enter press on the given element(s).
- * @param {HTMLElement|Array} elements
- * @param {function} callback
*/
-export function onEnterPress(elements, callback) {
+export function onEnterPress(elements: HTMLElement|HTMLElement[], callback: (e: KeyboardEvent) => any): void {
onKeyPress('Enter', elements, callback);
}
/**
* Listen to escape press on the given element(s).
- * @param {HTMLElement|Array} elements
- * @param {function} callback
*/
-export function onEscapePress(elements, callback) {
+export function onEscapePress(elements: HTMLElement|HTMLElement[], callback: (e: KeyboardEvent) => any): void {
onKeyPress('Escape', elements, callback);
}
* Set a listener on an element for an event emitted by a child
* matching the given childSelector param.
* Used in a similar fashion to jQuery's $('listener').on('eventName', 'childSelector', callback)
- * @param {Element} listenerElement
- * @param {String} childSelector
- * @param {String} eventName
- * @param {Function} callback
*/
-export function onChildEvent(listenerElement, childSelector, eventName, callback) {
- listenerElement.addEventListener(eventName, event => {
- const matchingChild = event.target.closest(childSelector);
+export function onChildEvent(
+ listenerElement: HTMLElement,
+ childSelector: string,
+ eventName: string,
+ callback: (this: HTMLElement, e: Event, child: HTMLElement) => any
+): void {
+ listenerElement.addEventListener(eventName, (event: Event) => {
+ const matchingChild = (event.target as HTMLElement|null)?.closest(childSelector) as HTMLElement;
if (matchingChild) {
callback.call(matchingChild, event, matchingChild);
}
/**
* Look for elements that match the given selector and contain the given text.
- * Is case insensitive and returns the first result or null if nothing is found.
- * @param {String} selector
- * @param {String} text
- * @returns {Element}
+ * Is case-insensitive and returns the first result or null if nothing is found.
*/
-export function findText(selector, text) {
+export function findText(selector: string, text: string): Element|null {
const elements = document.querySelectorAll(selector);
text = text.toLowerCase();
for (const element of elements) {
- if (element.textContent.toLowerCase().includes(text)) {
+ if ((element.textContent || '').toLowerCase().includes(text) && isHTMLElement(element)) {
return element;
}
}
/**
* Show a loading indicator in the given element.
* This will effectively clear the element.
- * @param {Element} element
*/
-export function showLoading(element) {
+export function showLoading(element: HTMLElement): void {
element.innerHTML = '<div class="loading-container"><div></div><div></div><div></div></div>';
}
/**
* Get a loading element indicator element.
- * @returns {Element}
*/
-export function getLoading() {
+export function getLoading(): HTMLElement {
const wrap = document.createElement('div');
wrap.classList.add('loading-container');
wrap.innerHTML = '<div></div><div></div><div></div>';
/**
* Remove any loading indicators within the given element.
- * @param {Element} element
*/
-export function removeLoading(element) {
+export function removeLoading(element: HTMLElement): void {
const loadingEls = element.querySelectorAll('.loading-container');
for (const el of loadingEls) {
el.remove();
/**
* Convert the given html data into a live DOM element.
* Initiates any components defined in the data.
- * @param {String} html
- * @returns {Element}
*/
-export function htmlToDom(html) {
+export function htmlToDom(html: string): HTMLElement {
const wrap = document.createElement('div');
wrap.innerHTML = html;
window.$components.init(wrap);
- return wrap.children[0];
+ const firstChild = wrap.children[0];
+ if (!isHTMLElement(firstChild)) {
+ throw new Error('Could not find child HTMLElement when creating DOM element from HTML');
+ }
+
+ return firstChild;
}
+import {isHTMLElement} from "./dom";
+
+type OptionalKeyEventHandler = ((e: KeyboardEvent) => any)|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) {
+ protected containers: HTMLElement[];
+ protected onEscape: OptionalKeyEventHandler;
+ protected onEnter: OptionalKeyEventHandler;
+
+ constructor(container: HTMLElement, onEscape: OptionalKeyEventHandler = null, onEnter: OptionalKeyEventHandler = null) {
this.containers = [container];
this.onEscape = onEscape;
this.onEnter = onEnter;
/**
* 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) {
+ shareHandlingToEl(element: HTMLElement) {
this.containers.push(element);
element.addEventListener('keydown', this.#keydownHandler.bind(this));
}
*/
focusNext() {
const focusable = this.#getFocusable();
- const currentIndex = focusable.indexOf(document.activeElement);
+ const activeEl = document.activeElement;
+ const currentIndex = isHTMLElement(activeEl) ? focusable.indexOf(activeEl) : -1;
let newIndex = currentIndex + 1;
if (newIndex >= focusable.length) {
newIndex = 0;
*/
focusPrevious() {
const focusable = this.#getFocusable();
- const currentIndex = focusable.indexOf(document.activeElement);
+ const activeEl = document.activeElement;
+ const currentIndex = isHTMLElement(activeEl) ? focusable.indexOf(activeEl) : -1;
let newIndex = currentIndex - 1;
if (newIndex < 0) {
newIndex = focusable.length - 1;
focusable[newIndex].focus();
}
- /**
- * @param {KeyboardEvent} event
- */
- #keydownHandler(event) {
+ #keydownHandler(event: KeyboardEvent) {
// Ignore certain key events in inputs to allow text editing.
- if (event.target.matches('input') && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+ if (isHTMLElement(event.target) && event.target.matches('input') && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
return;
}
} else if (event.key === 'Escape') {
if (this.onEscape) {
this.onEscape(event);
- } else if (document.activeElement) {
+ } else if (isHTMLElement(document.activeElement)) {
document.activeElement.blur();
}
} else if (event.key === 'Enter' && this.onEnter) {
/**
* Get an array of focusable elements within the current containers.
- * @returns {Element[]}
*/
- #getFocusable() {
- const focusable = [];
+ #getFocusable(): HTMLElement[] {
+ const focusable: HTMLElement[] = [];
const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"],[disabled]),input:not([type=hidden])';
for (const container of this.containers) {
- focusable.push(...container.querySelectorAll(selector));
+ const toAdd = [...container.querySelectorAll(selector)].filter(e => isHTMLElement(e));
+ focusable.push(...toAdd);
}
+
return focusable;
}
projects / bookstack / commitdiff