diff --git a/scripts/STE.js b/scripts/STE.js index 0d82468..6a01103 100644 --- a/scripts/STE.js +++ b/scripts/STE.js @@ -65,11 +65,18 @@ class STE { * Gets the inset values for the screen Safe Area. */ get safeAreaInsets() { + /** + * @private + * @param { string } section + */ + function getSafeAreaInset(section){ + return parseInt(getComputedStyle(document.documentElement).getPropertyValue(`--safe-area-inset-${section}`),10); + } return { - left: this._getSafeAreaInset("left"), - right: this._getSafeAreaInset("right"), - top: this._getSafeAreaInset("top"), - bottom: this._getSafeAreaInset("bottom"), + left: getSafeAreaInset("left"), + right: getSafeAreaInset("right"), + top: getSafeAreaInset("top"), + bottom: getSafeAreaInset("bottom"), }; }, @@ -77,11 +84,20 @@ class STE { * Gets the inset values for the window Title Bar Areas when Window Controls Overlay is enabled. */ get titleBarAreaInsets() { + /** + * @private + * @param { "top" | "width-left" | "width-right" | "height" } section + */ + function getTitleBarAreaInset(section){ + var value = getComputedStyle(document.documentElement).getPropertyValue(`--titlebar-area-inset-${section}`); + if (value.includes("calc")) value = Function(`"use strict"; return (${value.replace(/calc/g,"").replace(/100vw/g,`${window.innerWidth}px`).replace(/px/g,"")})`)(); + return parseInt(value,10); + } return { - top: this._getTitlebarAreaInset("top"), - width_left: this._getTitlebarAreaInset("width-left"), - width_right: this._getTitlebarAreaInset("width-right"), - height: this._getTitlebarAreaInset("height"), + top: getTitleBarAreaInset("top"), + width_left: getTitleBarAreaInset("width-left"), + width_right: getTitleBarAreaInset("width-right"), + height: getTitleBarAreaInset("height"), }; }, @@ -98,36 +114,10 @@ class STE { * This is used to make the App Omnibox symmetrical to the Title Bar Area when Window Controls Overlay is enabled. */ refreshDevicePixelRatio() { - var ratio = STE.appearance.devicePixelRatio, styling = this._getRootStyleProperty("--device-pixel-ratio"); + var ratio = STE.appearance.devicePixelRatio, styling = getComputedStyle(document.documentElement).getPropertyValue("--device-pixel-ratio"); if (ratio != styling) document.documentElement.style.setProperty("--device-pixel-ratio",ratio); }, - /** - * @private - * @param { string } section - */ - _getSafeAreaInset(section){ - return parseInt(this._getRootStyleProperty(`--safe-area-inset-${section}`),10); - }, - - /** - * @private - * @param { string } section - */ - _getTitlebarAreaInset(section){ - var value = this._getRootStyleProperty(`--titlebar-area-inset-${section}`); - if (value.includes("calc")) value = Function(`"use strict"; return (${value.replace(/calc/g,"").replace(/100vw/g,`${window.innerWidth}px`).replace(/px/g,"")})`)(); - return parseInt(value,10); - }, - - /** - * @private - * @param { string } template - */ - _getRootStyleProperty(template){ - return window.getComputedStyle(document.documentElement).getPropertyValue(template); - }, - /** * Enables or disables syntax highlighting for all Num Text elements. * diff --git a/scripts/app.js b/scripts/app.js index 3ed4318..0e1b4fb 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -12,7 +12,7 @@ export class STECardElement extends HTMLElement { this.defined = true; this.addEventListener("keydown",event => { if (this.getAttribute("data-type") != "dialog" || event.key != "Tab") return; - var navigable = _getNavigableElements({ container: this, scope: true }); + var navigable = STECardElement.#getNavigableElements({ container: this, scope: true }); if (!event.shiftKey){ if (document.activeElement != navigable[navigable.length - 1]) return; event.preventDefault(); @@ -83,7 +83,7 @@ export class STECardElement extends HTMLElement { },4000); } if (this.type == "dialog"){ - document.body.addEventListener("keydown",_catchCardNavigation); + document.body.addEventListener("keydown",STECardElement.#catchCardNavigation); card_backdrop.classList.add("active"); if (!STE.activeDialog && !STE.dialogPrevious){ STE.dialogPrevious = /** @type { STECardElement } */ (document.activeElement); @@ -139,7 +139,7 @@ export class STECardElement extends HTMLElement { window.setTimeout(() => this.minimize(),transitionDuration); } if (this.type == "dialog"){ - document.body.removeEventListener("keydown",_catchCardNavigation); + document.body.removeEventListener("keydown",STECardElement.#catchCardNavigation); card_backdrop.classList.remove("active"); STE.activeDialog = null; if (STE.dialogPrevious){ @@ -150,18 +150,28 @@ export class STECardElement extends HTMLElement { } if (this.type == "widget") STE.activeWidget = null; } -} -/** - * @param { KeyboardEvent } event - * - * @private -*/ -function _catchCardNavigation(event){ - if (!STE.activeDialog || event.key != "Tab" || document.activeElement != document.body) return; - var navigable = _getNavigableElements({ container: STE.activeDialog, scope: true }); - event.preventDefault(); - navigable[((!event.shiftKey) ? 0 : navigable.length - 1)].focus(); + /** + * Gets all navigable elements within a given parent element. + * + * @param { { container: HTMLElement; scope?: boolean | string; } } options - If the scope option is set to `true`, only direct children within the parent element will be selected. + */ + static #getNavigableElements({ container, scope = false }){ + scope = (scope) ? "" : ":scope > "; + /** @type { NodeListOf } */ + var navigable = container.querySelectorAll(`${scope}button:not([disabled]), ${scope}textarea:not([disabled]), ${scope}input:not([disabled]), ${scope}select:not([disabled]), ${scope}a[href]:not([disabled]), ${scope}[tabindex]:not([tabindex="-1"])`); + return Array.from(navigable).filter(element => (getElementStyle({ element, property: "display" }) != "none")); + } + + /** + * @param { KeyboardEvent } event + */ + static #catchCardNavigation(event){ + if (!STE.activeDialog || event.key != "Tab" || document.activeElement != document.body) return; + var navigable = STECardElement.#getNavigableElements({ container: STE.activeDialog, scope: true }); + event.preventDefault(); + navigable[((!event.shiftKey) ? 0 : navigable.length - 1)].focus(); + } } window.customElements.define("ste-card",STECardElement); @@ -1120,35 +1130,6 @@ globalThis.createDisplay = function createDisplay(){ },20); } -/** - * Calls a `document.execCommand()` action on a given element. - * - * @param { HTMLElement } element - * @param { string } action - * - * @deprecated -*/ -async function callCommand(element,action){/* I think I may remove this, or do something else with it. document.execCommand() is broken in so many ways, what a shame */ - element.focus({ preventScroll: true }); - if (action == "paste"){ - var clipboard = await navigator.clipboard.readText().catch(() => alert("Could not access the clipboard, please check site permissions for clipboard use.")); - if (clipboard === undefined) return; - document.execCommand("insertText",false,clipboard); - } else document.execCommand(action); -} - -/** - * Gets all navigable elements within a given parent element. - * - * @param { { container: HTMLElement; scope?: boolean | string; } } options - If the scope option is set to `true`, only direct children within the parent element will be selected. -*/ -function _getNavigableElements({ container, scope = false }){ - scope = (scope) ? "" : ":scope > "; - /** @type { NodeListOf } */ - var navigable = container.querySelectorAll(`${scope}button:not([disabled]), ${scope}textarea:not([disabled]), ${scope}input:not([disabled]), ${scope}select:not([disabled]), ${scope}a[href]:not([disabled]), ${scope}[tabindex]:not([tabindex="-1"])`); - return Array.from(navigable).filter(element => (getElementStyle({ element, property: "display" }) != "none")); -} - /** * Gets a style property value for a given element. * @@ -1193,23 +1174,6 @@ function applyEditingBehavior({ element }){ } } -/** - * Dispatches a `KeyboardEvent` on the `` from a given key combination. - * - * @param { { control?: boolean; command?: boolean; shift?: boolean; controlShift?: boolean; shiftCommand?: boolean; controlCommand?: boolean; key: string; } } options -*/ -function sendShortcutAction({ control, command, shift, controlShift, shiftCommand, controlCommand, key }){ - if (!key) return; - var appleDevice = (STE.environment.appleDevice); - - control = ((control && !appleDevice) || (controlShift && !appleDevice) || (controlCommand && appleDevice)); - command = ((command && appleDevice) || (shiftCommand && appleDevice) || (controlCommand && appleDevice)); - shift = (shift || (controlShift && !appleDevice) || (shiftCommand && appleDevice)); - key = key.toString().toLowerCase(); - - document.body.dispatchEvent(new KeyboardEvent("keydown",{ ctrlKey: control, metaKey: command, shiftKey: shift, key })); -} - /** * Refreshes the Preview with the latest source from the source Editor. */ @@ -1239,17 +1203,6 @@ function setTitle({ content = "", reset = false } = {}){ document.title = `${(content && !reset) ? `${content} - ` : ""}Smart Text Editor`; } -/** - * Adds additional boolean query parameters to the app's URL. - * - * @param { string[] } entries -*/ -function addQueryParameters(entries){ - var parameters = new URLSearchParams(window.location.search); - entries.forEach(entry => parameters.set(entry,"")); - changeQueryParameters(parameters); -} - /** * Removes query parameters from the app's URL. *