@schukai/monster 3.51.4 → 3.52.0

package/source/dom/dimension.mjs

@@ -19,13 +19,13 @@ export { convertToPixels, getDeviceDPI };
  * @type {number|function}
  */
 let CURRENT_DEVICE_DPI = function () {
-    let i = 0;
-    for (i = 56; i < 2000; i++) {
-        if (getWindow().matchMedia(`(max-resolution: ${i}dpi)`).matches === true) {
-            return i;
-        }
-    }
-    return i;
+	let i = 0;
+	for (i = 56; i < 2000; i++) {
+		if (getWindow().matchMedia(`(max-resolution: ${i}dpi)`).matches === true) {
+			return i;
+		}
+	}
+	return i;
 };
 
 /**
@@ -36,12 +36,12 @@ let CURRENT_DEVICE_DPI = function () {
  * @returns {number}
  */
 function getDeviceDPI() {
-    // only call the function once
-    if (typeof CURRENT_DEVICE_DPI === "function") {
-        CURRENT_DEVICE_DPI = CURRENT_DEVICE_DPI();
-    }
+	// only call the function once
+	if (typeof CURRENT_DEVICE_DPI === "function") {
+		CURRENT_DEVICE_DPI = CURRENT_DEVICE_DPI();
+	}
 
-    return getWindow().devicePixelRatio * CURRENT_DEVICE_DPI;
+	return getWindow().devicePixelRatio * CURRENT_DEVICE_DPI;
 }
 
 /**
@@ -74,42 +74,52 @@ function getDeviceDPI() {
  * @throws {Error} Invalid value format
  */
 
-function convertToPixels(value, parentElement = document.documentElement, fontSizeElement = document.documentElement) {
-    validateString(value);
+function convertToPixels(
+	value,
+	parentElement = document.documentElement,
+	fontSizeElement = document.documentElement,
+) {
+	validateString(value);
 
-    const regex = /^(-?[\d.]+)(.*)$/;
-    const matchResult = value.match(regex);
+	const regex = /^(-?[\d.]+)(.*)$/;
+	const matchResult = value.match(regex);
 
-    if (!matchResult) {
-        throw new Error(`Invalid value format: ${value}`);
-    }
+	if (!matchResult) {
+		throw new Error(`Invalid value format: ${value}`);
+	}
 
-    const [, num, unit] = matchResult;
-    const number = parseFloat(num);
-    const dpi = getDeviceDPI();
+	const [, num, unit] = matchResult;
+	const number = parseFloat(num);
+	const dpi = getDeviceDPI();
 
-    if (unit === "px") {
-        return number;
-    } else if (unit === "em") {
-        const fontSize = parseFloat(window.getComputedStyle(fontSizeElement).fontSize);
-        return number * fontSize;
-    } else if (unit === "rem") {
-        const rootFontSize = parseFloat(window.getComputedStyle(parentElement).fontSize);
-        return number * rootFontSize;
-    } else if (unit === "%") {
-        const parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
-        return (number * parentWidth) / 100;
-    } else if (unit === "in") {
-        return number * dpi;
-    } else if (unit === "cm") {
-        return (number * dpi) / 2.54;
-    } else if (unit === "mm") {
-        return (number * dpi) / 25.4;
-    } else if (unit === "pt") {
-        return (number * dpi) / 72;
-    } else if (unit === "pc") {
-        return (number * dpi) / 6;
-    } else {
-        throw new Error(`Unsupported unit: ${unit}`);
-    }
+	if (unit === "px") {
+		return number;
+	} else if (unit === "em") {
+		const fontSize = parseFloat(
+			window.getComputedStyle(fontSizeElement).fontSize,
+		);
+		return number * fontSize;
+	} else if (unit === "rem") {
+		const rootFontSize = parseFloat(
+			window.getComputedStyle(parentElement).fontSize,
+		);
+		return number * rootFontSize;
+	} else if (unit === "%") {
+		const parentWidth = parseFloat(
+			window.getComputedStyle(parentElement).width,
+		);
+		return (number * parentWidth) / 100;
+	} else if (unit === "in") {
+		return number * dpi;
+	} else if (unit === "cm") {
+		return (number * dpi) / 2.54;
+	} else if (unit === "mm") {
+		return (number * dpi) / 25.4;
+	} else if (unit === "pt") {
+		return (number * dpi) / 72;
+	} else if (unit === "pc") {
+		return (number * dpi) / 6;
+	} else {
+		throw new Error(`Unsupported unit: ${unit}`);
+	}
 }

package/source/dom/events.mjs

@@ -25,29 +25,31 @@ export { fireEvent, fireCustomEvent, findTargetElementFromEvent };
  * @summary Construct and send and event
  */
 function fireEvent(element, type) {
-    const document = getDocument();
-
-    if (element instanceof HTMLElement) {
-        if (type === "click") {
-            element.click();
-            return;
-        }
-
-        // https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
-        let event = new Event(validateString(type), {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-        });
-
-        element.dispatchEvent(event);
-    } else if (element instanceof HTMLCollection || element instanceof NodeList) {
-        for (let e of element) {
-            fireEvent(e, type);
-        }
-    } else {
-        throw new TypeError("value is not an instance of HTMLElement or HTMLCollection");
-    }
+	const document = getDocument();
+
+	if (element instanceof HTMLElement) {
+		if (type === "click") {
+			element.click();
+			return;
+		}
+
+		// https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
+		const event = new Event(validateString(type), {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+		});
+
+		element.dispatchEvent(event);
+	} else if (element instanceof HTMLCollection || element instanceof NodeList) {
+		for (const e of element) {
+			fireEvent(e, type);
+		}
+	} else {
+		throw new TypeError(
+			"value is not an instance of HTMLElement or HTMLCollection",
+		);
+	}
 }
 
 /**
@@ -64,28 +66,30 @@ function fireEvent(element, type) {
  * @summary Construct and send and event
  */
 function fireCustomEvent(element, type, detail) {
-    const document = getDocument();
-
-    if (element instanceof HTMLElement) {
-        if (!isObject(detail)) {
-            detail = { detail };
-        }
-
-        let event = new CustomEvent(validateString(type), {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail,
-        });
-
-        element.dispatchEvent(event);
-    } else if (element instanceof HTMLCollection || element instanceof NodeList) {
-        for (let e of element) {
-            fireCustomEvent(e, type, detail);
-        }
-    } else {
-        throw new TypeError("value is not an instance of HTMLElement or HTMLCollection");
-    }
+	const document = getDocument();
+
+	if (element instanceof HTMLElement) {
+		if (!isObject(detail)) {
+			detail = { detail };
+		}
+
+		const event = new CustomEvent(validateString(type), {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail,
+		});
+
+		element.dispatchEvent(event);
+	} else if (element instanceof HTMLCollection || element instanceof NodeList) {
+		for (const e of element) {
+			fireCustomEvent(e, type, detail);
+		}
+	} else {
+		throw new TypeError(
+			"value is not an instance of HTMLElement or HTMLCollection",
+		);
+	}
 }
 
 /**
@@ -105,28 +109,29 @@ function fireCustomEvent(element, type, detail) {
  * @summary Help function to find the appropriate control
  */
 function findTargetElementFromEvent(event, attributeName, attributeValue) {
-    validateInstance(event, Event);
-
-    if (typeof event.composedPath !== "function") {
-        throw new Error("unsupported event");
-    }
-
-    const path = event.composedPath();
-
-    // closest cannot be used here, because closest is not correct for slotted elements
-    if (isArray(path)) {
-        for (let i = 0; i < path.length; i++) {
-            const o = path[i];
-
-            if (
-                o instanceof HTMLElement &&
-                o.hasAttribute(attributeName) &&
-                (attributeValue === undefined || o.getAttribute(attributeName) === attributeValue)
-            ) {
-                return o;
-            }
-        }
-    }
-
-    return undefined;
+	validateInstance(event, Event);
+
+	if (typeof event.composedPath !== "function") {
+		throw new Error("unsupported event");
+	}
+
+	const path = event.composedPath();
+
+	// closest cannot be used here, because closest is not correct for slotted elements
+	if (isArray(path)) {
+		for (let i = 0; i < path.length; i++) {
+			const o = path[i];
+
+			if (
+				o instanceof HTMLElement &&
+				o.hasAttribute(attributeName) &&
+				(attributeValue === undefined ||
+					o.getAttribute(attributeName) === attributeValue)
+			) {
+				return o;
+			}
+		}
+	}
+
+	return undefined;
 }

package/source/dom/focusmanager.mjs

@@ -43,179 +43,179 @@ const stackSymbol = Symbol("stack");
  * @summary Handle the focus
  */
 class FocusManager extends BaseWithOptions {
-    /**
-     *
-     * @param {Object|undefined} options
-     */
-    constructor(options) {
-        super(options);
-        validateInstance(this.getOption(KEY_DOCUMENT), HTMLDocument);
-
-        this[stackSymbol] = new Stack();
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     * @since 2.1.0
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/dom/focusmanager");
-    }
-
-    /**
-     * @property {HTMLDocument} document the document object into which the node is to be appended
-     */
-    get defaults() {
-        return extend({}, super.defaults, {
-            [KEY_DOCUMENT]: getGlobalObject("document"),
-            [KEY_CONTEXT]: undefined,
-        });
-    }
-
-    /**
-     * Remembers the current focus on a stack.
-     * Several focus can be stored.
-     *
-     * @return {Monster.DOM.FocusManager}
-     */
-    storeFocus() {
-        const active = this.getActive();
-        if (active instanceof Node) {
-            this[stackSymbol].push(active);
-        }
-        return this;
-    }
-
-    /**
-     * The last focus on the stack is set again
-     *
-     * @return {Monster.DOM.FocusManager}
-     */
-    restoreFocus() {
-        const last = this[stackSymbol].pop();
-        if (last instanceof Node) {
-            this.focus(last);
-        }
-
-        return this;
-    }
-
-    /**
-     *
-     * @param {Node} element
-     * @param {boolean} preventScroll
-     * @throws {TypeError} value is not an instance of
-     * @return {Monster.DOM.FocusManager}
-     */
-    focus(element, preventScroll) {
-        validateInstance(element, Node);
-
-        element.focus({
-            preventScroll: preventScroll ?? false,
-        });
-
-        return this;
-    }
-
-    /**
-     *
-     * @return {Element}
-     */
-    getActive() {
-        return this.getOption(KEY_DOCUMENT).activeElement;
-    }
-
-    /**
-     * Select all elements that can be focused
-     *
-     * @param {string|undefined} query
-     * @return {array}
-     * @throws {TypeError} value is not an instance of
-     */
-    getFocusable(query) {
-        let contextElement = this.getOption(KEY_CONTEXT);
-        if (contextElement === undefined) {
-            contextElement = this.getOption(KEY_DOCUMENT);
-        }
-
-        validateInstance(contextElement, Node);
-
-        if (query !== undefined) {
-            validateString(query);
-        }
-
-        return [
-            ...contextElement.querySelectorAll(
-                'details, button, input, [tabindex]:not([tabindex="-1"]), select, textarea, a[href], body',
-            ),
-        ].filter((element) => {
-            if (query !== undefined && !element.matches(query)) {
-                return false;
-            }
-
-            if (element.hasAttribute("disabled")) return false;
-            if (element.getAttribute("aria-hidden") === "true") return false;
-
-            const rect = element.getBoundingClientRect();
-            if (rect.width === 0) return false;
-            if (rect.height === 0) return false;
-
-            return true;
-        });
-    }
-
-    /**
-     * @param {string} query
-     * @return {Monster.DOM.FocusManager}
-     */
-    focusNext(query) {
-        const current = this.getActive();
-        const focusable = this.getFocusable(query);
-
-        if (!isArray(focusable) || focusable.length === 0) {
-            return this;
-        }
-
-        if (current instanceof Node) {
-            let index = focusable.indexOf(current);
-
-            if (index > -1) {
-                this.focus(focusable[index + 1] || focusable[0]);
-            } else {
-                this.focus(focusable[0]);
-            }
-        } else {
-            this.focus(focusable[0]);
-        }
-
-        return this;
-    }
-
-    /**
-     * @param {string} query
-     * @return {Monster.DOM.FocusManager}
-     */
-    focusPrev(query) {
-        const current = this.getActive();
-        const focusable = this.getFocusable(query);
-
-        if (!isArray(focusable) || focusable.length === 0) {
-            return this;
-        }
-
-        if (current instanceof Node) {
-            let index = focusable.indexOf(current);
-
-            if (index > -1) {
-                this.focus(focusable[index - 1] || focusable[focusable.length - 1]);
-            } else {
-                this.focus(focusable[focusable.length - 1]);
-            }
-        } else {
-            this.focus(focusable[focusable.length - 1]);
-        }
-
-        return this;
-    }
+	/**
+	 *
+	 * @param {Object|undefined} options
+	 */
+	constructor(options) {
+		super(options);
+		validateInstance(this.getOption(KEY_DOCUMENT), HTMLDocument);
+
+		this[stackSymbol] = new Stack();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/dom/focusmanager");
+	}
+
+	/**
+	 * @property {HTMLDocument} document the document object into which the node is to be appended
+	 */
+	get defaults() {
+		return extend({}, super.defaults, {
+			[KEY_DOCUMENT]: getGlobalObject("document"),
+			[KEY_CONTEXT]: undefined,
+		});
+	}
+
+	/**
+	 * Remembers the current focus on a stack.
+	 * Several focus can be stored.
+	 *
+	 * @return {Monster.DOM.FocusManager}
+	 */
+	storeFocus() {
+		const active = this.getActive();
+		if (active instanceof Node) {
+			this[stackSymbol].push(active);
+		}
+		return this;
+	}
+
+	/**
+	 * The last focus on the stack is set again
+	 *
+	 * @return {Monster.DOM.FocusManager}
+	 */
+	restoreFocus() {
+		const last = this[stackSymbol].pop();
+		if (last instanceof Node) {
+			this.focus(last);
+		}
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @param {Node} element
+	 * @param {boolean} preventScroll
+	 * @throws {TypeError} value is not an instance of
+	 * @return {Monster.DOM.FocusManager}
+	 */
+	focus(element, preventScroll) {
+		validateInstance(element, Node);
+
+		element.focus({
+			preventScroll: preventScroll ?? false,
+		});
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {Element}
+	 */
+	getActive() {
+		return this.getOption(KEY_DOCUMENT).activeElement;
+	}
+
+	/**
+	 * Select all elements that can be focused
+	 *
+	 * @param {string|undefined} query
+	 * @return {array}
+	 * @throws {TypeError} value is not an instance of
+	 */
+	getFocusable(query) {
+		let contextElement = this.getOption(KEY_CONTEXT);
+		if (contextElement === undefined) {
+			contextElement = this.getOption(KEY_DOCUMENT);
+		}
+
+		validateInstance(contextElement, Node);
+
+		if (query !== undefined) {
+			validateString(query);
+		}
+
+		return [
+			...contextElement.querySelectorAll(
+				'details, button, input, [tabindex]:not([tabindex="-1"]), select, textarea, a[href], body',
+			),
+		].filter((element) => {
+			if (query !== undefined && !element.matches(query)) {
+				return false;
+			}
+
+			if (element.hasAttribute("disabled")) return false;
+			if (element.getAttribute("aria-hidden") === "true") return false;
+
+			const rect = element.getBoundingClientRect();
+			if (rect.width === 0) return false;
+			if (rect.height === 0) return false;
+
+			return true;
+		});
+	}
+
+	/**
+	 * @param {string} query
+	 * @return {Monster.DOM.FocusManager}
+	 */
+	focusNext(query) {
+		const current = this.getActive();
+		const focusable = this.getFocusable(query);
+
+		if (!isArray(focusable) || focusable.length === 0) {
+			return this;
+		}
+
+		if (current instanceof Node) {
+			const index = focusable.indexOf(current);
+
+			if (index > -1) {
+				this.focus(focusable[index + 1] || focusable[0]);
+			} else {
+				this.focus(focusable[0]);
+			}
+		} else {
+			this.focus(focusable[0]);
+		}
+
+		return this;
+	}
+
+	/**
+	 * @param {string} query
+	 * @return {Monster.DOM.FocusManager}
+	 */
+	focusPrev(query) {
+		const current = this.getActive();
+		const focusable = this.getFocusable(query);
+
+		if (!isArray(focusable) || focusable.length === 0) {
+			return this;
+		}
+
+		if (current instanceof Node) {
+			const index = focusable.indexOf(current);
+
+			if (index > -1) {
+				this.focus(focusable[index - 1] || focusable[focusable.length - 1]);
+			} else {
+				this.focus(focusable[focusable.length - 1]);
+			}
+		} else {
+			this.focus(focusable[focusable.length - 1]);
+		}
+
+		return this;
+	}
 }