static/components/language-component.js

// components/language-component.js - Language selection modal

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

export const LanguageComponent = {
  elements: {
    frRadioBtn: null,
    enRadioBtn: null,
    continueLangBtn: null,
    consentModal: null
  },

  /**

   * Initialize the language component

   */
  init() {
    this.elements.frRadioBtn = document.getElementById('lang-fr');
    this.elements.enRadioBtn = document.getElementById('lang-en');
    this.elements.continueLangBtn = document.getElementById('lang-continue-btn');
    this.elements.consentModal = document.getElementById('consent-modal');

    this.attachEventListeners();
    this.setInitialLanguage();
  },

  /**

   * Attach event listeners

   */
  attachEventListeners() {
    this.elements.frRadioBtn.addEventListener('change', () => {
      TranslationService.setLanguage(this.elements.frRadioBtn.value);
    });
    
    this.elements.enRadioBtn.addEventListener('change', () => {
      TranslationService.setLanguage(this.elements.enRadioBtn.value);
    });

    this.elements.continueLangBtn.addEventListener('click', () => {
      this.elements.consentModal.scrollIntoView({
        behavior: 'smooth',
        inline: 'start',
        block: 'nearest'
      });
    });
  },

  /**

   * Set initial language radio button state

   */
  setInitialLanguage() {
    if (StateManager.currentLang === 'en') {
      this.elements.enRadioBtn.checked = true;
    } else {
      this.elements.frRadioBtn.checked = true;
    }
  }
};