static/components/settings-component.js

// components/settings-component.js - Settings modal functionality

import { StateManager } from '../services/state-manager.js';
import { TranslationService } from '../services/translation-service.js';

export const SettingsComponent = {
  elements: {
    settingsBtn: null,
    settingsModal: null,
    doneSettingsBtn: null,
    closeSettingsBtn: null,
    frRadioBtnSettings: null,
    enRadioBtnSettings: null,
    increaseFontSizeBtn: null,
    decreaseFontSizeBtn: null,
    resetFontSizeBtn: null
  },

  constants: {
    MIN_FONT_SIZE: 0.75,
    MAX_FONT_SIZE: 1.625,
    FONT_SIZE_STEP: 0.125 // 1/8 rem for smooth increments
  },

  /**
   * Initialize the settings component
   */
  init() {
    this.elements.settingsBtn = document.getElementById('settings-btn');
    this.elements.settingsModal = document.getElementById('settings-modal');
    this.elements.doneSettingsBtn = document.getElementById('done-settings');
    this.elements.closeSettingsBtn = document.getElementById('close-settings-btn');
    this.elements.frRadioBtnSettings = document.getElementById('lang-fr-settings');
    this.elements.enRadioBtnSettings = document.getElementById('lang-en-settings');
    this.elements.increaseFontSizeBtn = document.getElementById('increase-font-size-btn');
    this.elements.decreaseFontSizeBtn = document.getElementById('decrease-font-size-btn');
    this.elements.resetFontSizeBtn = document.getElementById('reset-font-size-btn');

    this.attachOutsideClickListener();
    this.attachEventListeners();
    this.updateLanguageRadioButtons();
  },

  attachOutsideClickListener() {
    this.elements.settingsModal.addEventListener('click', (e) => {
      // Check if click is on the overlay itself (not its children)
      if (e.target === this.elements.settingsModal) {
        this.closeModal();
      }
    });
  },

  /**
   * Attach event listeners
   */
  attachEventListeners() {
    this.elements.settingsBtn.addEventListener('click', (e) => this.openModal(e));
    this.elements.closeSettingsBtn.addEventListener('click', () => this.closeModal());
    this.elements.doneSettingsBtn.addEventListener('click', () => this.closeModal());

    // Language change listeners
    this.elements.frRadioBtnSettings.addEventListener('change', () => {
      TranslationService.setLanguage(this.elements.frRadioBtnSettings.value);
      this.updateLanguageRadioButtons();
    });
    this.elements.enRadioBtnSettings.addEventListener('change', () => {
      TranslationService.setLanguage(this.elements.enRadioBtnSettings.value);
      this.updateLanguageRadioButtons();
    });

    // Font size listeners
    this.elements.increaseFontSizeBtn.addEventListener('click', () => {
      this.updateFontSize(StateManager.fontSize + this.constants.FONT_SIZE_STEP);
    });
    this.elements.decreaseFontSizeBtn.addEventListener('click', () => {
      this.updateFontSize(StateManager.fontSize - this.constants.FONT_SIZE_STEP);
    });
    this.elements.resetFontSizeBtn.addEventListener('click', () => {
      this.updateFontSize(1); // 1rem = browser default
    });
  },

  /**
   * Open the settings modal
   */
  openModal(e) {
    e.preventDefault();
    this.elements.settingsModal.style.display = '';
  },

  /**
   * Close the settings modal
   */
  closeModal() {
    this.elements.settingsModal.style.display = 'none';
  },

  /**
   * Update font size
   * @param {number} newSize - New font size in rem
   */
  updateFontSize(newSize) {
    const clampedSize = Math.min(
      this.constants.MAX_FONT_SIZE, 
      Math.max(this.constants.MIN_FONT_SIZE, newSize)
    );
    StateManager.setFontSize(clampedSize);
    document.documentElement.style.fontSize = clampedSize + 'rem';
  },

  /**
   * Update language radio buttons to reflect current language
   */
  updateLanguageRadioButtons() {
    this.elements.frRadioBtnSettings.checked = StateManager.currentLang === 'fr';
    this.elements.enRadioBtnSettings.checked = StateManager.currentLang === 'en';
  }
};