Un-Constant Element References

Going back on this model, I don't like using static references in this case, at least for ID-based references. Figured out the bug as to why the tab and or editor were each different colors, it was because the editor's background wasn't properly being assigned to the `--workspace-background` custom property, which it used to use the last I knew of. Looking into web frameworks for the front end, I'm trying to get used to them, but they just don't feel natural to me still. I think I don't like being locked into one kind of mindset that you have to employ to use the framework (changing your whole codebase over to it, vs starting fresh with a new project?), and I'm still not a big proponent for web tooling. I don't want to use it as much as possible, I think maybe just because I like only building what you absolutely need to have. I think it's hard to figure all of this out when you aren't quite in your coding-game. And while this project is fully typed-out and everything, it's still stressing me out how much complexity it still holds. I think I have yet to properly employ and understand a proper component model for a site. That could be my limitations at the moment too, maybe hence why frameworks don't seem to work for me yet.
Offroaders123 · Aug 19, 2023 · 78c65d3 · 78c65d3
1 parent ef5f103
commit 78c65d3
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 93 deletions.
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -4,7 +4,7 @@
 var self = /** @type { ServiceWorkerGlobalScope } */ (/** @type { unknown } */ (globalThis));
 
 const NAME = "Smart Text Editor";
-const VERSION = "v4.27.2";
+const VERSION = "v4.27.3";
 const CACHE_NAME = /** @type { const } */ (`${NAME} ${VERSION}`);
 
 const IS_MACOS_DEVICE = (/(macOS|Mac)/i.test(navigator.userAgentData?.platform ?? navigator.platform) && navigator.standalone === undefined);

diff --git a/src/Card.ts b/src/Card.ts
@@ -1,6 +1,6 @@
 import STE from "./STE.js";
 import Editor from "./Editor.js";
-import { card_backdrop, workspace_tabs, workspace_editors, getElementStyle } from "./dom.js";
+import { getElementStyle } from "./dom.js";
 
 /**
  * The base component for the Alert, Dialog, and Widget card types.

diff --git a/src/Editor.ts b/src/Editor.ts
@@ -1,6 +1,6 @@
 import STE from "./STE.js";
 import { setPreviewSource, refreshPreview } from "./Workspace.js";
-import { workspace_tabs, create_editor_button, workspace_editors, preview_menu, preview, getElementStyle, applyEditingBehavior, setTitle } from "./dom.js";
+import { getElementStyle, applyEditingBehavior, setTitle } from "./dom.js";
 
 export interface EditorOptions {
   name?: string;

diff --git a/src/STE.ts b/src/STE.ts
@@ -1,5 +1,3 @@
-import { workspace_tabs, workspace_editors, default_orientation_setting, syntax_highlighting_setting, automatic_refresh_setting, preview_base_input, reset_settings_card } from "./dom.js";
-
 import type Card from "./Card.js";
 import type { View } from "./Workspace.js";
 import type { Orientation } from "./Workspace.js";

diff --git a/src/Tools.ts b/src/Tools.ts
@@ -1,7 +1,6 @@
 import STE from "./STE.js";
 import Editor from "./Editor.js";
 import { setView } from "./Workspace.js";
-import { replacer_find, replacer_replace, formatter_input, encoder_type, encoder_input } from "./dom.js";
 
 export type TemplateType = "html" | "pack-manifest-bedrock";
 

diff --git a/src/Workspace.ts b/src/Workspace.ts
@@ -1,6 +1,6 @@
 import STE from "./STE.js";
 import Editor from "./Editor.js";
-import { workspace, view_menu, scaler, preview, preview_menu, workspace_tabs, header, getElementStyle } from "./dom.js";
+import { getElementStyle } from "./dom.js";
 
 import type { EditorOptions } from "./Editor.js";
 

diff --git a/src/app.ts b/src/app.ts
@@ -3,7 +3,7 @@ import "./Card.js";
 import Tools from "./Tools.js";
 import Editor from "./Editor.js";
 import { setView, setOrientation, createWindow, openFiles, saveFile, createDisplay, refreshPreview, setScaling, disableScaling } from "./Workspace.js";
-import { app_omnibox, cleared_cache_card, theme_button, preview_base_card, replace_text_card, json_formatter_card, uri_encoder_card, uuid_generator_card, settings_card, app_menubar, workspace_tabs, create_editor_button, scaler, card_backdrop, preview_base_input, generator_output, default_orientation_setting, syntax_highlighting_setting, automatic_refresh_setting, scrollbar_styles, applyEditingBehavior } from "./dom.js";
+import { applyEditingBehavior } from "./dom.js";
 
 import type { Orientation } from "./Workspace.js";
 

diff --git a/src/dom.ts b/src/dom.ts
@@ -1,89 +1,5 @@
 import STE from "./STE.js";
 
-import type { Card } from "./Card.js";
-
-export const theme_color = document.querySelector<HTMLMetaElement>("#theme_color")!;
-export const scrollbar_styles = document.querySelector<HTMLStyleElement>("#scrollbar_styles")!;
-export const theme_styles = document.querySelector<HTMLStyleElement>("#theme_styles")!;
-
-export const symbol_definitions = document.querySelector<SVGSVGElement>("#symbol_definitions")!;
-export const arrow_icon = document.querySelector<SVGSymbolElement>("#arrow_icon")!;
-export const check_icon = document.querySelector<SVGSymbolElement>("#check_icon")!;
-export const back_icon = document.querySelector<SVGSymbolElement>("#back_icon")!;
-export const minimize_icon = document.querySelector<SVGSymbolElement>("#minimize_icon")!;
-export const close_icon = document.querySelector<SVGSymbolElement>("#close_icon")!;
-export const rename_icon = document.querySelector<SVGSymbolElement>("#rename_icon")!;
-export const undo_icon = document.querySelector<SVGSymbolElement>("#undo_icon")!;
-export const redo_icon = document.querySelector<SVGSymbolElement>("#redo_icon")!;
-export const install_icon = document.querySelector<SVGSymbolElement>("#install_icon")!;
-export const refresh_icon = document.querySelector<SVGSymbolElement>("#refresh_icon")!;
-export const github_icon = document.querySelector<SVGSymbolElement>("#github_icon")!;
-
-export const header = document.querySelector<HTMLElement>("#header")!;
-
-export const app_menubar = document.querySelector<HTMLDivElement>("#app_menubar")!;
-export const file_menu = document.querySelector<MenuDropElement>("#file_menu")!;
-export const view_menu = document.querySelector<MenuDropElement>("#view_menu")!;
-export const preview_menu = document.querySelector<MenuDropElement>("#preview_menu")!;
-export const tools_menu = document.querySelector<MenuDropElement>("#tools_menu")!;
-export const settings_menu = document.querySelector<MenuDropElement>("#settings_menu")!;
-
-export const app_omnibox = document.querySelector<HTMLDivElement>("#app_omnibox")!;
-export const install_option = document.querySelector<HTMLButtonElement>("#install_option")!;
-
-export const main = document.querySelector<HTMLElement>("#main")!;
-
-export const workspace = document.querySelector<HTMLDivElement>("#workspace")!;
-export const workspace_tabs = document.querySelector<HTMLDivElement>("#workspace_tabs")!;
-export const create_editor_button = document.querySelector<HTMLButtonElement>("#create_editor_button")!;
-export const workspace_editors = document.querySelector<HTMLDivElement>("#workspace_editors")!;
-export const scaler = document.querySelector<HTMLDivElement>("#scaler")!;
-export const preview = document.querySelector<HTMLIFrameElement>("#preview")!;
-
-export const card_backdrop = document.querySelector<HTMLDivElement>("#card_backdrop")!;
-
-export const settings_card = document.querySelector<Card>("#settings_card")!;
-export const default_orientation_setting = document.querySelector<MenuDropElement>("#default_orientation_setting")!;
-export const syntax_highlighting_setting = document.querySelector<HTMLInputElement>("#syntax_highlighting_setting")!;
-export const automatic_refresh_setting = document.querySelector<HTMLInputElement>("#automatic_refresh_setting")!;
-export const install_button = document.querySelector<HTMLButtonElement>("#install_button")!;
-export const theme_button = document.querySelector<HTMLButtonElement>("#theme_button")!;
-export const clear_site_caches_button = document.querySelector<HTMLButtonElement>("#clear_site_caches_button")!;
-
-export const theme_card = document.querySelector<Card>("#theme_card")!;
-export const theme_setting = document.querySelector<NumTextElement>("#theme_setting")!;
-
-export const preview_base_card = document.querySelector<Card>("#preview_base_card")!;
-export const preview_base_input = document.querySelector<HTMLInputElement & {
-  setWidth(): void;
-  setValue(value: string): void;
-  reset(): void;
-}>("#preview_base_input")!;
-
-export const reset_settings_card = document.querySelector<Card>("#reset_settings_card")!;
-export const cleared_cache_card = document.querySelector<Card>("#cleared_cache_card")!;
-
-export const replace_text_card = document.querySelector<Card>("#replace_text_card")!;
-export const replacer_find = document.querySelector<NumTextElement>("#replacer_find")!;
-export const replacer_replace = document.querySelector<NumTextElement>("#replacer_replace")!;
-
-export const color_picker_card = document.querySelector<Card>("#color_picker_card")!;
-export const picker_preview = document.querySelector<HTMLDivElement>("#picker_preview")!;
-export const picker_input = document.querySelector<HTMLInputElement>("#picker_input")!;
-export const red_channel = document.querySelector<HTMLInputElement>("#red_channel")!;
-export const green_channel = document.querySelector<HTMLInputElement>("#green_channel")!;
-export const blue_channel = document.querySelector<HTMLInputElement>("#blue_channel")!;
-
-export const json_formatter_card = document.querySelector<Card>("#json_formatter_card")!;
-export const formatter_input = document.querySelector<NumTextElement>("#formatter_input")!;
-
-export const uri_encoder_card = document.querySelector<Card>("#uri_encoder_card")!;
-export const encoder_input = document.querySelector<NumTextElement>("#encoder_input")!;
-export const encoder_type = document.querySelector<HTMLInputElement>("#encoder_type")!;
-
-export const uuid_generator_card = document.querySelector<Card>("#uuid_generator_card")!;
-export const generator_output = document.querySelector<HTMLInputElement>("#generator_output")!;
-
 export interface GetElementStyleOptions {
   element: Element;
   property: string;

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -11,6 +11,88 @@ declare global {
   }
 
   var Prism: typeof import("prismjs");
+
+  var theme_color: HTMLMetaElement;
+  var scrollbar_styles: HTMLStyleElement;
+  var theme_styles: HTMLStyleElement;
+
+  var symbol_definitions: SVGSVGElement;
+  var arrow_icon: SVGSymbolElement;
+  var check_icon: SVGSymbolElement;
+  var back_icon: SVGSymbolElement;
+  var minimize_icon: SVGSymbolElement;
+  var close_icon: SVGSymbolElement;
+  var rename_icon: SVGSymbolElement;
+  var undo_icon: SVGSymbolElement;
+  var redo_icon: SVGSymbolElement;
+  var install_icon: SVGSymbolElement;
+  var refresh_icon: SVGSymbolElement;
+  var github_icon: SVGSymbolElement;
+
+  var header: HTMLElement;
+
+  var app_menubar: HTMLDivElement;
+  var file_menu: MenuDropElement;
+  var view_menu: MenuDropElement;
+  var preview_menu: MenuDropElement;
+  var tools_menu: MenuDropElement;
+  var settings_menu: MenuDropElement;
+
+  var app_omnibox: HTMLDivElement;
+  var install_option: HTMLButtonElement;
+
+  var main: HTMLElement;
+
+  var workspace: HTMLDivElement;
+  var workspace_tabs: HTMLDivElement;
+  var create_editor_button: HTMLButtonElement;
+  var workspace_editors: HTMLDivElement;
+  var scaler: HTMLDivElement;
+  var preview: HTMLIFrameElement;
+
+  var card_backdrop: HTMLDivElement;
+
+  var settings_card: Card;
+  var default_orientation_setting: MenuDropElement;
+  var syntax_highlighting_setting: HTMLInputElement;
+  var automatic_refresh_setting: HTMLInputElement;
+  var install_button: HTMLButtonElement;
+  var theme_button: HTMLButtonElement;
+  var clear_site_caches_button: HTMLButtonElement;
+
+  var theme_card: Card;
+  var theme_setting: NumTextElement;
+
+  var preview_base_card: Card;
+  var preview_base_input: HTMLInputElement & {
+    setWidth(): void;
+    setValue(value: string): void;
+    reset(): void;
+  };
+
+  var reset_settings_card: Card;
+  var cleared_cache_card: Card;
+
+  var replace_text_card: Card;
+  var replacer_find: NumTextElement;
+  var replacer_replace: NumTextElement;
+
+  var color_picker_card: Card;
+  var picker_preview: HTMLDivElement;
+  var picker_input: HTMLInputElement;
+  var red_channel: HTMLInputElement;
+  var green_channel: HTMLInputElement;
+  var blue_channel: HTMLInputElement;
+
+  var json_formatter_card: Card;
+  var formatter_input: NumTextElement;
+
+  var uri_encoder_card: Card;
+  var encoder_input: NumTextElement;
+  var encoder_type: HTMLInputElement;
+
+  var uuid_generator_card: Card;
+  var generator_output: HTMLInputElement;
 }
 
 export {};
diff --git a/styles/styles.css b/styles/styles.css
@@ -569,7 +569,7 @@ main .workspace .editor {
   position: absolute;
   width: 100%;
   height: 100%;
-  --background: var(--workspace-background);
+  background: var(--workspace-background);
   border: solid transparent;
   border-width: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
   visibility: hidden;