/**
* Settings Panel — slide-out with toggle switches
*/
import { setHTML } from '../utils/dom.js';
export class SettingsPanel {
constructor(containerEl) {
this.containerEl = containerEl;
this.onChangeCallback = null;
}
render() {
if (!this.containerEl) return;
setHTML(this.containerEl, `
Settings
Accessibility
Hearing-Impaired Mode
Vision-Impaired (TTS)
Operations
Staff / Organizer Mode
`);
this.containerEl.querySelector('#btn-close-settings')?.addEventListener('click', () => {
this.containerEl.dispatchEvent(new Event('vantage:settings-close'));
});
// Toggle switches
['toggle-hearing', 'toggle-vision', 'toggle-staff'].forEach(id => {
const el = this.containerEl.querySelector(`#${id}`);
if (!el) return;
const handler = () => {
el.classList.toggle('toggle--active');
const isActive = el.classList.contains('toggle--active');
el.setAttribute('aria-checked', isActive.toString());
this._emit();
};
el.addEventListener('click', handler);
});
// Select changes
this.containerEl.querySelectorAll('select').forEach(el => {
el.addEventListener('change', () => this._emit());
});
}
_emit() {
if (!this.onChangeCallback) return;
this.onChangeCallback({
language: this.containerEl.querySelector('#setting-lang')?.value || 'en',
pace: this.containerEl.querySelector('#setting-pace')?.value || 'medium',
register: this.containerEl.querySelector('#setting-register')?.value || 'casual',
theme: this.containerEl.querySelector('#setting-theme')?.value || 'neon',
hearingImpaired: this.containerEl.querySelector('#toggle-hearing')?.classList.contains('toggle--active') || false,
visionImpaired: this.containerEl.querySelector('#toggle-vision')?.classList.contains('toggle--active') || false,
staffMode: this.containerEl.querySelector('#toggle-staff')?.classList.contains('toggle--active') || false,
});
}
onSettingsChange(cb) {
this.onChangeCallback = cb;
}
}