diff --git a/README.md b/README.md index dbe1f03..9098e25 100644 --- a/README.md +++ b/README.md @@ -340,7 +340,7 @@ The library expects the following elements within the form: ### Optional Elements - `#orientation-toggle` - Button to toggle portrait/landscape - `#dark-mode-toggle` - Button to toggle dark mode -- `#reset-button` - Button to reset palette to model's default +- `#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 diff --git a/src/index.js b/src/index.js index 8ecfcd1..7dc506c 100644 --- a/src/index.js +++ b/src/index.js @@ -521,6 +521,9 @@ class TRMNLPicker { this.elements.orientationText.textContent = this.state.isPortrait ? 'Portrait' : 'Landscape' } + // Update reset button state + this._updateResetButton() + // Emit change event this._emitChangeEvent() } @@ -537,12 +540,15 @@ class TRMNLPicker { this.elements.darkModeText.textContent = this.state.isDarkMode ? 'Dark Mode' : 'Light Mode' } + // Update reset button state + this._updateResetButton() + // Emit change event this._emitChangeEvent() } /** - * Reset palette to model's default (first valid palette) + * Reset to defaults: first valid palette, landscape orientation, light mode * @private */ _resetToDefaults() { @@ -554,6 +560,18 @@ class TRMNLPicker { this.elements.paletteSelect.value = firstPaletteId this.state.selectedPalette = this.palettes.find(p => p.id === firstPaletteId) + // Reset to landscape orientation + this.state.isPortrait = false + if (this.elements.orientationText) { + this.elements.orientationText.textContent = 'Landscape' + } + + // Reset to light mode + this.state.isDarkMode = false + if (this.elements.darkModeText) { + this.elements.darkModeText.textContent = 'Light Mode' + } + // Update UI this._updateResetButton() @@ -563,6 +581,7 @@ class TRMNLPicker { /** * Update reset button enabled/disabled state + * Button is disabled only when palette, orientation, and dark mode are all at defaults * @private */ _updateResetButton() { @@ -572,7 +591,11 @@ class TRMNLPicker { if (!model) return const firstValidPaletteId = this._getFirstValidPaletteId(model) - const isAtDefaults = this.elements.paletteSelect.value === String(firstValidPaletteId) + const isPaletteDefault = this.elements.paletteSelect.value === String(firstValidPaletteId) + const isOrientationDefault = this.state.isPortrait === false + const isDarkModeDefault = this.state.isDarkMode === false + + const isAtDefaults = isPaletteDefault && isOrientationDefault && isDarkModeDefault this.elements.resetButton.disabled = isAtDefaults