Skip to content

Commit

Permalink
Function Scoping
Browse files Browse the repository at this point in the history 
Removed some functions that weren't used in the codebase anywhere anymore, and I also moved some function defintions that were used in only a single place into the code where it is used itself. So, the code isn't any nicer there, but it's a little less convoluted by having things defined right next to where they are used now, since they are ones that were only used in one spot. They both have to do with internal logic for their single use cases too, so having them at the top level of the module didn't really make sense, now that I can scope things a bit better.
  • Loading branch information
@Offroaders123
Offroaders123 committed Feb 23, 2023
1 parent 8e7e3e5 commit 1a10eef
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 106 deletions.
60 changes: 25 additions & 35 deletions scripts/STE.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,23 +65,39 @@ 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"),
};
},

/**
* 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"),
};
},

Expand All @@ -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.
*
Expand Down
95 changes: 24 additions & 71 deletions scripts/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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){
Expand All @@ -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<HTMLElement> } */
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);
Expand Down Expand Up @@ -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<HTMLElement> } */
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.
*
Expand Down Expand Up @@ -1193,23 +1174,6 @@ function applyEditingBehavior({ element }){
}
}

/**
* Dispatches a `KeyboardEvent` on the `<body>` 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.
*/
Expand Down Expand Up @@ -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.
*
Expand Down

0 comments on commit 1a10eef

Please sign in to comment.