From 375b2d31b4f8a930f1721462fc71a93bb4b3ac86 Mon Sep 17 00:00:00 2001 From: AuDevTist1C <114492072+AuDevTist1C@users.noreply.github.com> Date: Wed, 22 Jul 2026 17:23:36 +0200 Subject: [PATCH] refactor: standardize DOM element dataset attributes across file browser component Standardize DOM element attribute naming across the file browser component by converting legacy custom attributes to standard HTML5 `data-*` dataset attributes. Previously, template elements mixed standard properties with proprietary, non-standard DOM attributes (such as `action`, `type`, `name`, `home`, `open-doc`, `ftp-account`, `uuid`, and `storageType`). This led to non-compliant HTML markup, required explicit `getAttribute()` and `setAttribute()` DOM calls, and increased the risk of attribute collision with future web standards. This change enforces a uniform contract using the standard HTML5 `dataset` API (`data-*`), improving rendering consistency, type predictability, and JS-to-DOM binding efficiency. * **Template Refactoring (`src/pages/fileBrowser/list.hbs`):** * Converted legacy inline attributes to standard dataset equivalents: `data-action`, `data-type`, `data-name`, `data-home`, `data-open-doc`, `data-ftp-account`, `data-uuid`, and `data-storage-type`. * Ensured boolean and string dataset values comply with template engine rendering rules. * **Script Adaptations (`src/pages/fileBrowser/fileBrowser.js`):** * Refactored event delegation and element lookup handlers to utilize standard camelCase JavaScript `dataset` properties (e.g., replacing `el.getAttribute('open-doc')` with `el.dataset.openDoc`, along with `dataset.action`, `dataset.uuid`, `dataset.type`, and `dataset.storageType`). * Simplified property checks across list selection handlers and navigation logic. * **Stylesheet Selectors (`src/pages/fileBrowser/fileBrowser.scss`):** * Updated CSS attribute selectors from `[storageType="notification"]` to `[data-storage-type="notification"]` to maintain tight visual styling coupling without relying on invalid HTML attributes. (AI generated commit message) --- src/pages/fileBrowser/fileBrowser.js | 26 +++++++++++++------------- src/pages/fileBrowser/fileBrowser.scss | 6 +++--- src/pages/fileBrowser/list.hbs | 18 +++++++++--------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/pages/fileBrowser/fileBrowser.js b/src/pages/fileBrowser/fileBrowser.js index 570cacee3..2344fb4c0 100644 --- a/src/pages/fileBrowser/fileBrowser.js +++ b/src/pages/fileBrowser/fileBrowser.js @@ -929,16 +929,16 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { return; } - let action = $el.getAttribute("action") || $el.dataset.action; + let action = $el.dataset.action; if (!action) return; let url = $el.dataset.url; - let name = $el.dataset.name || $el.getAttribute("name"); - const idOpenDoc = $el.hasAttribute("open-doc"); - const uuid = $el.getAttribute("uuid"); - const type = $el.getAttribute("type"); - const storageType = $el.getAttribute("storageType"); - const home = $el.getAttribute("home"); + let name = $el.dataset.name; + const isOpenDoc = $el.dataset.openDoc != null; + const uuid = $el.dataset.uuid; + const type = $el.dataset.type; + const storageType = $el.dataset.storageType; + const home = $el.dataset.home; const isDir = ["dir", "directory", "folder"].includes(type); if (!url) { @@ -960,7 +960,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { return; } - if (!url && action === "open" && isDir && !idOpenDoc && !isContextMenu) { + if (!url && action === "open" && isDir && !isOpenDoc && !isContextMenu) { loader.hide(); util.addPath(name, uuid).then((res) => { const storage = allStorages.find((storage) => storage.uuid === uuid); @@ -975,7 +975,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { } if (isContextMenu) action = "contextmenu"; - else if (idOpenDoc) action = "open-doc"; + else if (isOpenDoc) action = "openDoc"; switch (action) { case "navigation": @@ -988,7 +988,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { if (isDir) folder(); else if (!$el.hasAttribute("disabled")) file(); break; - case "open-doc": + case "openDoc": openDoc(); break; } @@ -1046,7 +1046,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { if (appSettings.value.vibrateOnTap) { navigator.vibrate(config.VIBRATION_TIME); } - if ($el.getAttribute("open-doc") === "true") return; + if (isOpenDoc) return; const deleteText = currentDir.url === "/" ? strings.remove : strings.delete; @@ -1399,7 +1399,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { if (IS_FILE_MODE) { util.pushFolder(allStorages, "Select document", null, { - "open-doc": true, + openDoc: true, }); } @@ -1646,7 +1646,7 @@ function FileBrowserInclude(mode, info, doesOpenLast = true) { className="nav" data-url={url} data-name={displayName} - attr-action="navigation" + data-action="navigation" attr-text={displayName} tabIndex={-1} >, diff --git a/src/pages/fileBrowser/fileBrowser.scss b/src/pages/fileBrowser/fileBrowser.scss index 8e64a9622..769090e05 100644 --- a/src/pages/fileBrowser/fileBrowser.scss +++ b/src/pages/fileBrowser/fileBrowser.scss @@ -4,7 +4,7 @@ } .tile { - &[storageType="notification"] { + &[data-storage-type="notification"] { background-color: rgb(153, 153, 255); background-color: var(--primary-color); color: rgb(255, 255, 255); @@ -22,11 +22,11 @@ position: relative; color: rgb(65, 85, 133); - &[storageType]::after { + &[data-storage-type]::after { position: absolute; top: 50%; left: 50%; - content: attr(storageType); + content: attr(data-storage-type); transform: translate(-50%, -50%); color: rgb(255, 255, 255); font-size: 0.6rem; diff --git a/src/pages/fileBrowser/list.hbs b/src/pages/fileBrowser/list.hbs index a4ae77297..ade7b9434 100644 --- a/src/pages/fileBrowser/list.hbs +++ b/src/pages/fileBrowser/list.hbs @@ -3,19 +3,19 @@