trmnl/trmnl-picker
0
0
Fork 0
mirror of https://github.com/usetrmnl/trmnl-picker.git synced 2026-04-29 13:44:02 -07:00
Code Issues Packages Projects Releases Wiki Activity

Use data-* attributes instead of IDs

Browse Source
This commit is contained in:
Rockwell Schrock
2025-12-18 15:38:02 -05:00
parent 765bf50ef0
commit 57450222ae
3 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -12
View File
@@ -29,28 +29,28 @@ npm install @trmnl/picker
### 1. Create HTML Structure
The library expects a form with specific element IDs. Apply your favorite CSS styling framework as desired.
The library expects a form with specific data-* attributes. Apply your favorite CSS styling framework as desired.
```html
<form id="picker-form">
<!-- Required: Model selector -->
<select id="model-select"></select>
<select data-model-select></select>
<!-- Required: Palette selector -->
<select id="palette-select"></select>
<select data-palette-select></select>
<!-- Optional: Orientation toggle -->
<button type="button" id="orientation-toggle">
<button type="button" data-orientation-toggle>
<span data-orientation-text>Landscape</span>
</button>
<!-- Optional: Dark mode toggle -->
<button type="button" id="dark-mode-toggle">
<button type="button" data-dark-mode-toggle>
<span data-dark-mode-text>Light Mode</span>
</button>
<!-- Optional: Reset button -->
<button type="button" id="reset-button">Reset</button>
<button type="button" data-reset-button>Reset</button>
</form>
```
@@ -255,16 +255,16 @@ document.getElementById('picker-form').addEventListener('trmnl:change', (event)
## Form Elements
The library expects the following elements within the form:
The library expects the following elements within the form using data-* attributes:
### Required Elements
- `#model-select` - Model dropdown
- `#palette-select` - Palette dropdown
- `[data-model-select]` - Model dropdown (typically a `<select>` element)
- `[data-palette-select]` - Palette dropdown (typically a `<select>` element)
### Optional Elements
- `#orientation-toggle` - Button to toggle portrait/landscape
- `#dark-mode-toggle` - Button to toggle dark mode
- `#reset-button` - Button to reset to defaults (first palette, landscape orientation, light mode)
- `[data-orientation-toggle]` - Button to toggle portrait/landscape
- `[data-dark-mode-toggle]` - Button to toggle dark mode
- `[data-reset-button]` - Button to reset to defaults (first palette, landscape orientation, light mode)
- `[data-orientation-text]` - Text element showing current orientation
- `[data-dark-mode-text]` - Text element showing current mode
example/index.html
+5 -5
View File
@@ -28,23 +28,23 @@
</div>
<form id="picker-form" class="picker-form" style="display: none;">
<select id="model-select" class="picker-select"></select>
<select data-model-select class="picker-select"></select>
<select id="palette-select" class="picker-select"></select>
<select data-palette-select class="picker-select"></select>
<div class="divider"></div>
<button type="button" id="orientation-toggle" class="picker-button">
<button type="button" data-orientation-toggle class="picker-button">
<span data-orientation-text>Landscape</span>
</button>
<button type="button" id="dark-mode-toggle" class="picker-button">
<button type="button" data-dark-mode-toggle class="picker-button">
<span data-dark-mode-text>Light Mode</span>
</button>
<div class="divider"></div>
<button type="button" id="reset-button" class="picker-button">
<button type="button" data-reset-button class="picker-button">
Reset
</button>
</form>
src/index.js
+6 -6
View File
@@ -176,16 +176,16 @@ class TRMNLPicker {
}
/**
* Find and store references to form elements
* Find and store references to form elements using data-* attributes
* @private
*/
_initializeElements() {
this.elements = {
modelSelect: this.formElement.querySelector('#model-select'),
paletteSelect: this.formElement.querySelector('#palette-select'),
orientationToggle: this.formElement.querySelector('#orientation-toggle'),
darkModeToggle: this.formElement.querySelector('#dark-mode-toggle'),
resetButton: this.formElement.querySelector('#reset-button'),
modelSelect: this.formElement.querySelector('[data-model-select]'),
paletteSelect: this.formElement.querySelector('[data-palette-select]'),
orientationToggle: this.formElement.querySelector('[data-orientation-toggle]'),
darkModeToggle: this.formElement.querySelector('[data-dark-mode-toggle]'),
resetButton: this.formElement.querySelector('[data-reset-button]'),
// Optional: UI indicator elements
orientationText: this.formElement.querySelector('[data-orientation-text]'),