chore(frontend): getting rid of LWT_DATA for cleaner patterns

Author: HugoFara

src/frontend/js/core/language_config.ts

@@ -172,6 +172,24 @@ export function getTtsVoiceApi(): string {
  */
 export function setTtsVoiceApi(api: string): void {
   currentConfig.ttsVoiceApi = api;
+  isInitialized = true;
+}
+
+/**
+ * Set dictionary links.
+ * Used when initializing from page-specific configuration.
+ */
+export function setDictionaryLinks(links: { dict1?: string; dict2?: string; translator?: string }): void {
+  if (links.dict1 !== undefined) {
+    currentConfig.dictLink1 = links.dict1;
+  }
+  if (links.dict2 !== undefined) {
+    currentConfig.dictLink2 = links.dict2;
+  }
+  if (links.translator !== undefined) {
+    currentConfig.translatorLink = links.translator;
+  }
+  isInitialized = true;
 }
 
 /**

src/frontend/js/core/user_interactions.ts

@@ -9,30 +9,7 @@
 import { overlib, cClick } from '../ui/word_popup';
 import { scrollTo } from '../core/hover_intent';
 import { getTTSSettingsWithMigration, type TTSLanguageSettings } from './tts_storage';
-
-// Type for LWT_DATA global
-interface LwtLanguage {
-  id: number;
-  name: string;
-  abbreviation: string;
-  reading_mode?: string;
-  voiceapi?: string;
-}
-
-interface LwtText {
-  id: number;
-  reading_position: number;
-}
-
-interface LwtDataGlobal {
-  language: LwtLanguage;
-  text: LwtText;
-  settings: {
-    hts: number;
-  };
-}
-
-declare const LWT_DATA: LwtDataGlobal;
+import { getReadingPosition } from './reading_state';
 
 // Type for text dictionary in newExpressionInteractable
 interface TextDictionary {
@@ -203,7 +180,7 @@ export function newExpressionInteractable(
  */
 export function goToLastPosition(): void {
   // Last registered position to go to
-  const lookPos = LWT_DATA.text.reading_position;
+  const lookPos = getReadingPosition();
   // Element to scroll to
   let targetElement: HTMLElement | null = null;
   if (lookPos > 0) {

src/frontend/js/reading/text_annotations.ts

@@ -6,6 +6,8 @@
  */
 
 import { make_tooltip } from '../terms/word_status';
+import { getAnnotation } from '../core/text_config';
+import { getDelimiter } from '../core/language_config';
 
 /**
  * Helper to safely get an HTML attribute value as a string.
@@ -30,37 +32,6 @@ export function getAttrElement(el: HTMLElement, attr: string): string {
   return el.getAttribute(attr) || '';
 }
 
-// Type definitions
-interface LwtLanguage {
-  id: number;
-  dict_link1: string;
-  dict_link2: string;
-  translator_link: string;
-  delimiter: string;
-  rtl: boolean;
-}
-
-interface LwtText {
-  id: number;
-  reading_position: number;
-  annotations: Record<string, [unknown, string, string]>;
-}
-
-interface LwtSettings {
-  jQuery_tooltip: boolean;
-  hts: number;
-  word_status_filter: string;
-  annotations_mode: number;
-}
-
-interface LwtDataGlobal {
-  language: LwtLanguage;
-  text: LwtText;
-  settings: LwtSettings;
-}
-
-declare const LWT_DATA: LwtDataGlobal;
-
 /**
  * Add annotations to a word.
  */
@@ -70,13 +41,15 @@ export function word_each_do_text_text(
   const wid = getAttr(this, 'data_wid');
   if (wid !== '') {
     const order = getAttr(this, 'data_order');
-    if (order in LWT_DATA.text.annotations) {
-      if (wid === LWT_DATA.text.annotations[order][1]) {
-        const ann = LWT_DATA.text.annotations[order][2];
+    const annotation = getAnnotation(order);
+    if (annotation) {
+      if (wid === annotation[1]) {
+        const ann = annotation[2];
+        const delimiter = getDelimiter();
         const re = new RegExp(
-          '([' + LWT_DATA.language.delimiter + '][ ]{0,1}|^)(' +
+          '([' + delimiter + '][ ]{0,1}|^)(' +
             ann.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&') + ')($|[ ]{0,1}[' +
-            LWT_DATA.language.delimiter + '])',
+            delimiter + '])',
           ''
         );
         const dataTrans = getAttr(this, 'data_trans');
@@ -88,14 +61,13 @@ export function word_each_do_text_text(
       }
     }
   }
-  if (!LWT_DATA.settings.jQuery_tooltip) {
-    this.title = make_tooltip(
-      this.textContent || '',
-      getAttr(this, 'data_trans'),
-      getAttr(this, 'data_rom'),
-      getAttr(this, 'data_status') || '0'
-    );
-  }
+  // Native tooltips are always used (jQuery tooltips removed)
+  this.title = make_tooltip(
+    this.textContent || '',
+    getAttr(this, 'data_trans'),
+    getAttr(this, 'data_rom'),
+    getAttr(this, 'data_status') || '0'
+  );
 }
 
 /**
@@ -111,15 +83,17 @@ export function mword_each_do_text_text(
     const wid = getAttr(this, 'data_wid');
     if (wid !== '') {
       const order = parseInt(getAttr(this, 'data_order') || '0', 10);
+      const delimiter = getDelimiter();
       for (let j = 2; j <= 16; j = j + 2) {
         const index = (order + j).toString();
-        if (index in LWT_DATA.text.annotations) {
-          if (wid === LWT_DATA.text.annotations[index][1]) {
-            const ann = LWT_DATA.text.annotations[index][2];
+        const annotation = getAnnotation(index);
+        if (annotation) {
+          if (wid === annotation[1]) {
+            const ann = annotation[2];
             const re = new RegExp(
-              '([' + LWT_DATA.language.delimiter + '][ ]{0,1}|^)(' +
+              '([' + delimiter + '][ ]{0,1}|^)(' +
                 ann.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&') + ')($|[ ]{0,1}[' +
-                LWT_DATA.language.delimiter + '])',
+                delimiter + '])',
               ''
             );
             const dataTrans = getAttr(this, 'data_trans');
@@ -133,14 +107,13 @@ export function mword_each_do_text_text(
         }
       }
     }
-    if (!LWT_DATA.settings.jQuery_tooltip) {
-      this.title = make_tooltip(
-        getAttr(this, 'data_text'),
-        getAttr(this, 'data_trans'),
-        getAttr(this, 'data_rom'),
-        getAttr(this, 'data_status') || '0'
-      );
-    }
+    // Native tooltips are always used (jQuery tooltips removed)
+    this.title = make_tooltip(
+      getAttr(this, 'data_text'),
+      getAttr(this, 'data_trans'),
+      getAttr(this, 'data_rom'),
+      getAttr(this, 'data_status') || '0'
+    );
   }
 }
 

src/frontend/js/reading/text_multiword_selection.ts

@@ -11,9 +11,10 @@
 import Alpine from 'alpinejs';
 import { loadModalFrame } from './frame_management';
 import type { MultiWordFormStoreState } from './stores/multi_word_form_store';
+import { getTextId as getTextIdFromConfig } from '../core/text_config';
 
 /**
- * Get text ID from URL (fallback when LWT_DATA is not available).
+ * Get text ID from URL (fallback when config is not available).
  */
 function getTextIdFromUrl(): number {
   // Try to get from URL path: /text/read/123
@@ -31,14 +32,12 @@ function getTextIdFromUrl(): number {
 }
 
 /**
- * Get the text ID from LWT_DATA or URL.
+ * Get the text ID from config or URL.
  */
 function getTextId(): number {
-  if (typeof window !== 'undefined') {
-    const win = window as unknown as { LWT_DATA?: { text?: { id?: number } } };
-    if (win.LWT_DATA?.text?.id) {
-      return win.LWT_DATA.text.id;
-    }
+  const configId = getTextIdFromConfig();
+  if (configId > 0) {
+    return configId;
   }
   return getTextIdFromUrl();
 }

src/frontend/js/reading/text_reading_init.ts

@@ -15,15 +15,14 @@ import { getLangFromDict } from '../terms/dictionary';
 import { prepareTextInteractions } from './text_events';
 import { goToLastPosition, saveReadingPosition, saveAudioPosition, readRawTextAloud } from '../core/user_interactions';
 import { getAudioPlayer } from '../media/html5_audio_player';
-import { LWT_DATA } from '../core/lwt_state';
 import { initNativeTooltips } from '../ui/native_tooltip';
 import { resetReadingPosition } from '../core/reading_state';
 import {
   initLanguageConfig,
   getDictionaryLinks,
   setTtsVoiceApi
 } from '../core/language_config';
-import { initTextConfig, getTextId, setAnnotations } from '../core/text_config';
+import { initTextConfig, getTextId } from '../core/text_config';
 import { initSettingsConfig } from '../core/settings_config';
 import { resetAnswer } from '../core/test_state';
 
@@ -124,11 +123,6 @@ export function initTTS(): void {
   // Update TTS voice API in language config
   setTtsVoiceApi(config.voiceApi || '');
 
-  // Also update legacy LWT_DATA for backwards compatibility
-  if (typeof LWT_DATA !== 'undefined' && LWT_DATA.language) {
-    LWT_DATA.language.ttsVoiceApi = config.voiceApi || '';
-  }
-
   // Store textId for later use
   window._lwtTextId = config.textId;
 }
@@ -330,15 +324,9 @@ export function initTextReading(): void {
 
   // Reset reading position (will be set by goToLastPosition)
   resetReadingPosition();
-  if (LWT_DATA.text) {
-    LWT_DATA.text.reading_position = -1;
-  }
 
   // Initialize test answer state
   resetAnswer();
-  if (LWT_DATA.test) {
-    LWT_DATA.test.answer_opened = false;
-  }
 
   // Set the language of the current frame
   if (window.LANG && window.LANG !== dictLinks.translator) {

src/frontend/js/terms/overlib_interface.ts

@@ -23,6 +23,7 @@ import { showRightFramesPanel } from '../reading/frame_management';
 import { speechDispatcher } from '../core/user_interactions';
 import type { MultiWordFormStoreState } from '../reading/stores/multi_word_form_store';
 import { parseInlineMarkdown } from '../core/inline_markdown';
+import { getLanguageId } from '../core/language_config';
 
 // Import the popup system
 import { overlib } from '../ui/word_popup';
@@ -44,17 +45,6 @@ export { overlib, cClick, nd } from '../ui/word_popup';
 // and accessed via window at runtime: showRightFramesPanel, confirmDelete, successSound, failureSound
 // They are exported to window in globals.ts
 
-// Type for LWT_DATA global
-interface LwtLanguage {
-  id: number;
-}
-
-interface LwtDataGlobal {
-  language: LwtLanguage;
-}
-
-declare const LWT_DATA: LwtDataGlobal;
-
 /**************************************************************
  * Modern API-based popup content generators
  *
@@ -401,7 +391,7 @@ function createAudioElement(text: string): HTMLElement {
   });
   icon.style.cursor = 'pointer';
   icon.addEventListener('click', () => {
-    speechDispatcher(text, LWT_DATA.language.id);
+    speechDispatcher(text, getLanguageId());
   });
 
   container.appendChild(icon);
@@ -1281,7 +1271,7 @@ export function make_overlib_audio(txt: string): string {
   icon.style.cursor = 'pointer';
   icon.setAttribute(
     'onclick',
-    "speechDispatcher('" + escape_html_chars(txt) + "', '" + LWT_DATA.language.id + "')"
+    "speechDispatcher('" + escape_html_chars(txt) + "', '" + getLanguageId() + "')"
   );
   return icon.outerHTML;
 }

src/frontend/js/testing/test_ajax.ts

@@ -6,12 +6,13 @@
  * @since   3.0.0 Extracted from PHP inline scripts
  */
 
-import { LWT_DATA } from '../core/lwt_state';
 import { cClick } from '../ui/word_popup';
 import { speechDispatcher } from '../core/user_interactions';
 import { word_click_event_do_test_test, keydown_event_do_test_test } from './test_mode';
 import { startElapsedTimer } from './elapsed_timer';
 import { ReviewApi } from '../api/review';
+import { setCurrentWordId, setTestSolution, setAnswerOpened } from '../core/test_state';
+import { getLanguageId, initLanguageConfig } from '../core/language_config';
 
 // Interface for review data
 interface ReviewData {
@@ -71,8 +72,8 @@ export function prepareWordReading(termText: string, langId: number): void {
  * @param group HTML content for the term
  */
 export function insertNewWord(wordId: number, solution: string, group: string): void {
-  LWT_DATA.test.solution = solution;
-  LWT_DATA.word.id = wordId;
+  setTestSolution(solution);
+  setCurrentWordId(wordId);
 
   const termTestEl = document.getElementById('term-test');
   if (termTestEl) {
@@ -144,7 +145,7 @@ export async function testQueryHandler(
     );
     const utteranceCheckbox = document.getElementById('utterance-allowed') as HTMLInputElement | null;
     if (utteranceCheckbox?.checked) {
-      prepareWordReading(currentTest.word_text, LWT_DATA.language.id);
+      prepareWordReading(currentTest.word_text, getLanguageId());
     }
   }
 }
@@ -369,17 +370,21 @@ export function initTestInteractionGlobals(config: {
   translateUri: string;
   langCode: string;
 }): void {
-  LWT_DATA.language.id = config.langId;
-  LWT_DATA.language.dict_link1 = config.dict1Uri;
-  LWT_DATA.language.dict_link2 = config.dict2Uri;
-  LWT_DATA.language.translator_link = config.translateUri;
+  initLanguageConfig({
+    id: config.langId,
+    dictLink1: config.dict1Uri,
+    dictLink2: config.dict2Uri,
+    translatorLink: config.translateUri,
+    delimiter: '',
+    rtl: false
+  });
 
   // Set html lang attribute if we have a valid language code
   if (config.langCode && config.langCode !== config.translateUri) {
     document.documentElement.setAttribute('lang', config.langCode);
   }
 
-  LWT_DATA.test.answer_opened = false;
+  setAnswerOpened(false);
 }
 
 /**