Skip to content

refactor: Standardize DOM element dataset attributes across file browser component - #2543

Open
AuDevTist1C wants to merge 1 commit into
Acode-Foundation:mainfrom
AuDevTist1C:refactor/file-browser-dataset-attributes
Open

refactor: Standardize DOM element dataset attributes across file browser component#2543
AuDevTist1C wants to merge 1 commit into
Acode-Foundation:mainfrom
AuDevTist1C:refactor/file-browser-dataset-attributes

Conversation

@AuDevTist1C

Copy link
Copy Markdown
Contributor

Summary

This pull request standardizes 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 DOM attributes (such as action, type, name, home, open-doc, ftp-account, uuid, and storageType). This PR updates the component to use standard data-* markup, native dataset JavaScript accessors, and compliant CSS selectors.


Key Changes

1. Template Refactoring (src/pages/fileBrowser/list.hbs)

  • Converted legacy inline attributes to standard data-* dataset equivalents (data-action, data-type, data-name, data-home, data-open-doc, data-ftp-account, data-uuid, and data-storage-type).
  • Updated template conditionals to align with boolean and string dataset values (openDoc, ftpAccount).

2. 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).
  • Updated action routing logic to handle openDoc dataset values.
  • Replaced attr-action="navigation" with data-action="navigation" in dynamically generated navigation tags.

3. Stylesheet Selectors (src/pages/fileBrowser/fileBrowser.scss)

  • Updated CSS attribute selectors from [storageType="notification"] to [data-storage-type="notification"].
  • Updated pseudo-element content CSS function from attr(storageType) to attr(data-storage-type).

Benefits

  • HTML Compliance: Eliminates non-standard, invalid DOM attributes.
  • Performance & Cleanliness: Avoids verbose getAttribute() / setAttribute() DOM calls in favor of direct dataset accessors.
  • Future-Proofing: Minimizes the risk of attribute name collisions with future HTML specifications.

(PR name and description are AI generated (Gemini 3.6 Flash))

@greptile-apps

greptile-apps Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Standardizes file-browser DOM metadata on HTML5 data-* attributes.

  • Updates list-item templates and dynamically generated breadcrumbs to emit dataset-compatible attributes.
  • Updates delegated click handling to read the corresponding camel-cased dataset properties.
  • Aligns storage-type CSS selectors and generated content with the new markup.

Confidence Score: 5/5

The PR appears safe to merge, with the template producers, dataset consumers, dynamic navigation markup, and CSS selectors aligned.

The changed list-rendering and open-document paths consistently emit and consume the same dataset keys, and no reachable behavioral, styling, or security failure remains.

Important Files Changed

Filename Overview
src/pages/fileBrowser/fileBrowser.js Migrates file-browser event metadata access and generated navigation markup to consistent dataset properties without an identified behavioral regression.
src/pages/fileBrowser/list.hbs Migrates list-item metadata to data attributes while keeping the open-document producer, template key, and event consumer aligned.
src/pages/fileBrowser/fileBrowser.scss Updates storage-type selectors and pseudo-element content to match the renamed data attribute.

Reviews (1): Last reviewed commit: "refactor: standardize DOM element datase..." | Re-trigger Greptile

…ser 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)
@AuDevTist1C
AuDevTist1C force-pushed the refactor/file-browser-dataset-attributes branch from 375b2d3 to 9b024e2 Compare July 31, 2026 06:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

2 participants