github-personal/dev.shadoll
1
0
Fork 0
mirror of https://github.com/shadoll/dev.shadoll.git synced 2026-08-28 11:33:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add method to update mobile theme color based on gradient selection

Browse Source
This commit is contained in:
sha
2026-02-21 23:56:40 +02:00
parent 3bfdded140
commit 76352a2318
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/settings.js
+13 -7
View File
@@ -96,6 +96,16 @@ export class SettingsController {
} }
} }
/**
* Update the mobile theme-color meta tag to match the gradient colour.
* Called from both #syncControls and the colour picker handler.
* @param {string} color
*/
#setThemeColor(color) {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', color);
}
/** /**
* Apply saved localStorage settings to the controllers and sync the UI. * Apply saved localStorage settings to the controllers and sync the UI.
* Must be called AFTER gradient.init() so saved values override DEFAULTS. * Must be called AFTER gradient.init() so saved values override DEFAULTS.
@@ -152,11 +162,6 @@ export class SettingsController {
#bindEvents() { #bindEvents() {
const colorPicker = /** @type {HTMLInputElement} */ (document.getElementById('colorPicker')); const colorPicker = /** @type {HTMLInputElement} */ (document.getElementById('colorPicker'));
const colorValue = /** @type {HTMLElement} */ (document.getElementById('colorValue')); const colorValue = /** @type {HTMLElement} */ (document.getElementById('colorValue'));
// helper for mobile theme-color
const setThemeColor = (c) => {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', c);
};
const speedSlider = /** @type {HTMLInputElement} */ (document.getElementById('speedSlider')); const speedSlider = /** @type {HTMLInputElement} */ (document.getElementById('speedSlider'));
const rotToggle = /** @type {HTMLInputElement} */ (document.getElementById('rotationToggle')); const rotToggle = /** @type {HTMLInputElement} */ (document.getElementById('rotationToggle'));
const moveSpeedSlider = /** @type {HTMLInputElement} */ (document.getElementById('moveSpeedSlider')); const moveSpeedSlider = /** @type {HTMLInputElement} */ (document.getElementById('moveSpeedSlider'));
@@ -189,7 +194,7 @@ export class SettingsController {
const col = (/** @type {HTMLInputElement} */ (e.target)).value; const col = (/** @type {HTMLInputElement} */ (e.target)).value;
this.#gradient.setColor(col); this.#gradient.setColor(col);
colorValue.textContent = col; colorValue.textContent = col;
setThemeColor(col); this.#setThemeColor(col);
this.#saveState(); this.#saveState();
}); });
@@ -336,6 +341,7 @@ export class SettingsController {
* Called on construction, after loadSaved(), and after reset. * Called on construction, after loadSaved(), and after reset.
*/ */
#syncControls() { #syncControls() {
// helper moved to class scope so sync and bindEvents can both use it.
const colorPicker = /** @type {HTMLInputElement} */ (document.getElementById('colorPicker')); const colorPicker = /** @type {HTMLInputElement} */ (document.getElementById('colorPicker'));
const colorValue = /** @type {HTMLElement} */ (document.getElementById('colorValue')); const colorValue = /** @type {HTMLElement} */ (document.getElementById('colorValue'));
const speedSlider = /** @type {HTMLInputElement} */ (document.getElementById('speedSlider')); const speedSlider = /** @type {HTMLInputElement} */ (document.getElementById('speedSlider'));
@@ -348,7 +354,7 @@ export class SettingsController {
const letterHitCountToggle = /** @type {HTMLInputElement} */ (document.getElementById('letterHitCountToggle')); const letterHitCountToggle = /** @type {HTMLInputElement} */ (document.getElementById('letterHitCountToggle'));
colorPicker.value = this.#gradient.color; colorPicker.value = this.#gradient.color;
setThemeColor(this.#gradient.color); this.#setThemeColor(this.#gradient.color);
colorValue.textContent = this.#gradient.color; colorValue.textContent = this.#gradient.color;
speedSlider.value = String(this.#gradient.speed); speedSlider.value = String(this.#gradient.speed);
document.getElementById('speedValue').textContent = String(this.#gradient.speed); document.getElementById('speedValue').textContent = String(this.#gradient.speed);