using local translations from presets.yaml for server

Author: andre-dietrich

dist/server/public/app.js

@@ -110,7 +110,7 @@ function renderPresets() {
     input.type = 'radio'
     input.name = 'preset'
     input.value = preset.id
-    input.dataset.descriptionKey = `presets.${preset.id}.description`
+    input.dataset.presetDescription = JSON.stringify(preset.description)
     input.dataset.presetOptions = JSON.stringify(preset.options)
     if (index === 0) input.checked = true
 
@@ -667,6 +667,18 @@ function initializeFormatDescription() {
     })
   })
 }
+// Pick the right language from a preset description object {de: '...', en: '...'}
+function getPresetDescription(descriptionData) {
+  if (!descriptionData) return ''
+  try {
+    const desc = JSON.parse(descriptionData)
+    const lang = window.i18n ? window.i18n.currentLanguage : 'en'
+    return desc[lang] || desc['en'] || ''
+  } catch {
+    return ''
+  }
+}
+
 // Preset description display
 function initializePresetDescription() {
   // Use event delegation since presets are loaded dynamically
@@ -675,9 +687,9 @@ function initializePresetDescription() {
       const descriptionBox = document.getElementById('preset-description')
       const descriptionText = descriptionBox.querySelector('p')
 
-      // Get translation key and translate
-      const descriptionKey = e.target.dataset.descriptionKey
-      const description = window.i18n ? window.i18n.t(descriptionKey) : ''
+      const description = getPresetDescription(
+        e.target.dataset.presetDescription,
+      )
 
       if (description) {
         descriptionText.innerHTML = description
@@ -694,8 +706,9 @@ function initializePresetDescription() {
     if (checkedPreset) {
       const descriptionBox = document.getElementById('preset-description')
       const descriptionText = descriptionBox.querySelector('p')
-      const descriptionKey = checkedPreset.dataset.descriptionKey
-      const description = window.i18n ? window.i18n.t(descriptionKey) : ''
+      const description = getPresetDescription(
+        checkedPreset.dataset.presetDescription,
+      )
 
       if (description) {
         descriptionText.innerHTML = description

dist/server/public/i18n.js

@@ -43,42 +43,43 @@ class I18n {
   }
 
   t(key, fallback = '') {
-    const translation = this.translations[this.currentLanguage]?.[key] ||
-                       this.translations[this.fallbackLanguage]?.[key] ||
-                       fallback ||
-                       key
+    const translation =
+      this.translations[this.currentLanguage]?.[key] ||
+      this.translations[this.fallbackLanguage]?.[key] ||
+      fallback ||
+      key
     return translation
   }
 
   // Update all elements with data-i18n attribute
   updatePageTranslations() {
-    document.querySelectorAll('[data-i18n]').forEach(element => {
+    document.querySelectorAll('[data-i18n]').forEach((element) => {
       const key = element.getAttribute('data-i18n')
       const translation = this.t(key)
-      
+
       if (translation.includes('<') && translation.includes('>')) {
         element.innerHTML = translation
       } else {
         element.textContent = translation
       }
     })
 
-    document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
+    document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
       const key = element.getAttribute('data-i18n-placeholder')
       element.placeholder = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-title]').forEach(element => {
+    document.querySelectorAll('[data-i18n-title]').forEach((element) => {
       const key = element.getAttribute('data-i18n-title')
       element.title = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-html]').forEach(element => {
+    document.querySelectorAll('[data-i18n-html]').forEach((element) => {
       const key = element.getAttribute('data-i18n-html')
       element.innerHTML = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-description]').forEach(element => {
+    document.querySelectorAll('[data-i18n-description]').forEach((element) => {
       const key = element.getAttribute('data-i18n-description')
       const translation = this.t(key)
       element.setAttribute('data-description', translation)
@@ -88,12 +89,13 @@ class I18n {
   updateDynamicContent() {
     // Update preset description if one is currently selected
     const checkedPreset = document.querySelector('input[name="preset"]:checked')
-    if (checkedPreset && checkedPreset.dataset.descriptionKey) {
+    if (checkedPreset && checkedPreset.dataset.presetDescription) {
       const descriptionBox = document.getElementById('preset-description')
       if (descriptionBox && descriptionBox.style.display !== 'none') {
         const descriptionText = descriptionBox.querySelector('p')
         if (descriptionText) {
-          const description = this.t(checkedPreset.dataset.descriptionKey)
+          const desc = JSON.parse(checkedPreset.dataset.presetDescription)
+          const description = desc[this.currentLanguage] || desc['en'] || ''
           descriptionText.innerHTML = description
         }
       }
@@ -116,7 +118,7 @@ class I18n {
     const removeButtons = document.querySelectorAll('.remove-file')
     if (removeButtons.length > 0) {
       const removeTitle = this.t('files.remove')
-      removeButtons.forEach(btn => {
+      removeButtons.forEach((btn) => {
         btn.title = removeTitle
       })
     }
@@ -131,16 +133,16 @@ class I18n {
 
   async init() {
     const savedLang = localStorage.getItem('language')
-    
+
     let initialLang = savedLang || navigator.language.split('-')[0] || 'en'
-    
+
     const supportedLanguages = ['en', 'de']
     if (!supportedLanguages.includes(initialLang)) {
       initialLang = 'en'
     }
 
     await this.loadLanguage(this.fallbackLanguage)
-    
+
     if (initialLang !== this.fallbackLanguage) {
       await this.loadLanguage(initialLang)
     }

dist/server/public/locales/de.json

@@ -243,11 +243,5 @@
   "status.autoRefresh": "Seite wird automatisch aktualisiert",
   "status.refreshNow": "Jetzt aktualisieren",
   "status.error": "Fehler",
-  "status.errorMessage": "Fehler beim Laden des Status",
-  "presets.moodle.description": "Moodle ist das weltweit am häufigsten verwendete Open-Source-Lernmanagementsystem. Diese Konfiguration verwendet SCORM 1.2 für maximale Kompatibilität mit Moodle 4.x. Für Moodle 3.x empfehlen wir stattdessen den iframe-Modus. <a href='https://moodle.org' target='_blank'>Mehr erfahren</a>",
-  "presets.ilias.description": "ILIAS ist ein leistungsstarkes Open-Source-LMS aus Deutschland. Diese Konfiguration nutzt SCORM 1.2 für bestmögliche Kompatibilität mit ILIAS-Versionen. <a href='https://www.ilias.de' target='_blank'>Mehr erfahren</a>",
-  "presets.opal.description": "OPAL (Online-Plattform für Akademisches Lehren und Lernen) ist das zentrale LMS für sächsische Hochschulen. Optimiert für SCORM 2004. <a href='https://bildungsportal.sachsen.de/opal' target='_blank'>Mehr erfahren</a>",
-  "presets.generic.description": "Universelle SCORM 2004 Konfiguration für beliebige Lernmanagementsysteme, die den SCORM 2004 Standard unterstützen. Funktioniert mit den meisten modernen LMS-Plattformen.",
-  "presets.openolat.description": "OpenOlat ist eine Open-Source E-Learning-Plattform aus der Schweiz. Diese Konfiguration nutzt SCORM 1.2 für volle Funktionalität. <a href='https://www.openolat.com' target='_blank'>Mehr erfahren</a>",
-  "presets.openedx.description": "Open edX ist die Open-Source-Plattform hinter edX.org und wird weltweit für MOOCs eingesetzt. Verwendet SCORM 2004 über das SCORM XBlock. <a href='https://openedx.org' target='_blank'>Mehr erfahren</a>"
+  "status.errorMessage": "Fehler beim Laden des Status"
 }

dist/server/public/locales/en.json

@@ -243,12 +243,5 @@
   "status.autoRefresh": "Page will refresh automatically",
   "status.refreshNow": "Refresh Now",
   "status.error": "Error",
-  "status.errorMessage": "Error loading status",
-  "presets.moodle3.description": "Moodle is the world's most widely used open-source learning management system. This configuration uses SCORM 1.2 for maximum compatibility with Moodle 3.x. <a href='https://moodle.org' target='_blank'>Learn more</a>",
-  "presets.moodle4.description": "Moodle is the world's most widely used open-source learning management system. This configuration uses SCORM 1.2 for maximum compatibility with Moodle 4.x. For Moodle 3.x we recommend using the iframe mode. <a href='https://moodle.org' target='_blank'>Learn more</a>",
-  "presets.ilias.description": "XXXILIAS is a powerful open-source LMS from Germany. This configuration uses SCORM 1.2 for best compatibility with ILIAS versions. <a href='https://www.ilias.de' target='_blank'>Learn more</a>",
-  "presets.opal.description": "OPAL (Online Platform for Academic Teaching and Learning) is the central LMS for Saxon universities. Optimized for SCORM 2004. <a href='https://bildungsportal.sachsen.de/opal' target='_blank'>Learn more</a>",
-  "presets.generic.description": "Universal SCORM 2004 configuration for any learning management systems that support the SCORM 2004 standard. Works with most modern LMS platforms.",
-  "presets.openolat.description": "OpenOlat is an open-source e-learning platform from Switzerland. This configuration uses SCORM 1.2 for full functionality. <a href='https://www.openolat.com' target='_blank'>Learn more</a>",
-  "presets.openedx.description": "Open edX is the open-source platform behind edX.org and is used worldwide for MOOCs. Uses SCORM 2004 via the SCORM XBlock. <a href='https://openedx.org' target='_blank'>Learn more</a>"
+  "status.errorMessage": "Error loading status"
 }

src/server/public/app.js

@@ -110,7 +110,7 @@ function renderPresets() {
     input.type = 'radio'
     input.name = 'preset'
     input.value = preset.id
-    input.dataset.descriptionKey = `presets.${preset.id}.description`
+    input.dataset.presetDescription = JSON.stringify(preset.description)
     input.dataset.presetOptions = JSON.stringify(preset.options)
     if (index === 0) input.checked = true
 
@@ -667,6 +667,18 @@ function initializeFormatDescription() {
     })
   })
 }
+// Pick the right language from a preset description object {de: '...', en: '...'}
+function getPresetDescription(descriptionData) {
+  if (!descriptionData) return ''
+  try {
+    const desc = JSON.parse(descriptionData)
+    const lang = window.i18n ? window.i18n.currentLanguage : 'en'
+    return desc[lang] || desc['en'] || ''
+  } catch {
+    return ''
+  }
+}
+
 // Preset description display
 function initializePresetDescription() {
   // Use event delegation since presets are loaded dynamically
@@ -675,9 +687,9 @@ function initializePresetDescription() {
       const descriptionBox = document.getElementById('preset-description')
       const descriptionText = descriptionBox.querySelector('p')
 
-      // Get translation key and translate
-      const descriptionKey = e.target.dataset.descriptionKey
-      const description = window.i18n ? window.i18n.t(descriptionKey) : ''
+      const description = getPresetDescription(
+        e.target.dataset.presetDescription,
+      )
 
       if (description) {
         descriptionText.innerHTML = description
@@ -694,8 +706,9 @@ function initializePresetDescription() {
     if (checkedPreset) {
       const descriptionBox = document.getElementById('preset-description')
       const descriptionText = descriptionBox.querySelector('p')
-      const descriptionKey = checkedPreset.dataset.descriptionKey
-      const description = window.i18n ? window.i18n.t(descriptionKey) : ''
+      const description = getPresetDescription(
+        checkedPreset.dataset.presetDescription,
+      )
 
       if (description) {
         descriptionText.innerHTML = description

src/server/public/i18n.js

@@ -43,42 +43,43 @@ class I18n {
   }
 
   t(key, fallback = '') {
-    const translation = this.translations[this.currentLanguage]?.[key] ||
-                       this.translations[this.fallbackLanguage]?.[key] ||
-                       fallback ||
-                       key
+    const translation =
+      this.translations[this.currentLanguage]?.[key] ||
+      this.translations[this.fallbackLanguage]?.[key] ||
+      fallback ||
+      key
     return translation
   }
 
   // Update all elements with data-i18n attribute
   updatePageTranslations() {
-    document.querySelectorAll('[data-i18n]').forEach(element => {
+    document.querySelectorAll('[data-i18n]').forEach((element) => {
       const key = element.getAttribute('data-i18n')
       const translation = this.t(key)
-      
+
       if (translation.includes('<') && translation.includes('>')) {
         element.innerHTML = translation
       } else {
         element.textContent = translation
       }
     })
 
-    document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
+    document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
       const key = element.getAttribute('data-i18n-placeholder')
       element.placeholder = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-title]').forEach(element => {
+    document.querySelectorAll('[data-i18n-title]').forEach((element) => {
       const key = element.getAttribute('data-i18n-title')
       element.title = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-html]').forEach(element => {
+    document.querySelectorAll('[data-i18n-html]').forEach((element) => {
       const key = element.getAttribute('data-i18n-html')
       element.innerHTML = this.t(key)
     })
 
-    document.querySelectorAll('[data-i18n-description]').forEach(element => {
+    document.querySelectorAll('[data-i18n-description]').forEach((element) => {
       const key = element.getAttribute('data-i18n-description')
       const translation = this.t(key)
       element.setAttribute('data-description', translation)
@@ -88,12 +89,13 @@ class I18n {
   updateDynamicContent() {
     // Update preset description if one is currently selected
     const checkedPreset = document.querySelector('input[name="preset"]:checked')
-    if (checkedPreset && checkedPreset.dataset.descriptionKey) {
+    if (checkedPreset && checkedPreset.dataset.presetDescription) {
       const descriptionBox = document.getElementById('preset-description')
       if (descriptionBox && descriptionBox.style.display !== 'none') {
         const descriptionText = descriptionBox.querySelector('p')
         if (descriptionText) {
-          const description = this.t(checkedPreset.dataset.descriptionKey)
+          const desc = JSON.parse(checkedPreset.dataset.presetDescription)
+          const description = desc[this.currentLanguage] || desc['en'] || ''
           descriptionText.innerHTML = description
         }
       }
@@ -116,7 +118,7 @@ class I18n {
     const removeButtons = document.querySelectorAll('.remove-file')
     if (removeButtons.length > 0) {
       const removeTitle = this.t('files.remove')
-      removeButtons.forEach(btn => {
+      removeButtons.forEach((btn) => {
         btn.title = removeTitle
       })
     }
@@ -131,16 +133,16 @@ class I18n {
 
   async init() {
     const savedLang = localStorage.getItem('language')
-    
+
     let initialLang = savedLang || navigator.language.split('-')[0] || 'en'
-    
+
     const supportedLanguages = ['en', 'de']
     if (!supportedLanguages.includes(initialLang)) {
       initialLang = 'en'
     }
 
     await this.loadLanguage(this.fallbackLanguage)
-    
+
     if (initialLang !== this.fallbackLanguage) {
       await this.loadLanguage(initialLang)
     }

src/server/public/locales/de.json

@@ -243,11 +243,5 @@
   "status.autoRefresh": "Seite wird automatisch aktualisiert",
   "status.refreshNow": "Jetzt aktualisieren",
   "status.error": "Fehler",
-  "status.errorMessage": "Fehler beim Laden des Status",
-  "presets.moodle.description": "Moodle ist das weltweit am häufigsten verwendete Open-Source-Lernmanagementsystem. Diese Konfiguration verwendet SCORM 1.2 für maximale Kompatibilität mit Moodle 4.x. Für Moodle 3.x empfehlen wir stattdessen den iframe-Modus. <a href='https://moodle.org' target='_blank'>Mehr erfahren</a>",
-  "presets.ilias.description": "ILIAS ist ein leistungsstarkes Open-Source-LMS aus Deutschland. Diese Konfiguration nutzt SCORM 1.2 für bestmögliche Kompatibilität mit ILIAS-Versionen. <a href='https://www.ilias.de' target='_blank'>Mehr erfahren</a>",
-  "presets.opal.description": "OPAL (Online-Plattform für Akademisches Lehren und Lernen) ist das zentrale LMS für sächsische Hochschulen. Optimiert für SCORM 2004. <a href='https://bildungsportal.sachsen.de/opal' target='_blank'>Mehr erfahren</a>",
-  "presets.generic.description": "Universelle SCORM 2004 Konfiguration für beliebige Lernmanagementsysteme, die den SCORM 2004 Standard unterstützen. Funktioniert mit den meisten modernen LMS-Plattformen.",
-  "presets.openolat.description": "OpenOlat ist eine Open-Source E-Learning-Plattform aus der Schweiz. Diese Konfiguration nutzt SCORM 1.2 für volle Funktionalität. <a href='https://www.openolat.com' target='_blank'>Mehr erfahren</a>",
-  "presets.openedx.description": "Open edX ist die Open-Source-Plattform hinter edX.org und wird weltweit für MOOCs eingesetzt. Verwendet SCORM 2004 über das SCORM XBlock. <a href='https://openedx.org' target='_blank'>Mehr erfahren</a>"
+  "status.errorMessage": "Fehler beim Laden des Status"
 }

src/server/public/locales/en.json

@@ -243,12 +243,5 @@
   "status.autoRefresh": "Page will refresh automatically",
   "status.refreshNow": "Refresh Now",
   "status.error": "Error",
-  "status.errorMessage": "Error loading status",
-  "presets.moodle3.description": "Moodle is the world's most widely used open-source learning management system. This configuration uses SCORM 1.2 for maximum compatibility with Moodle 3.x. <a href='https://moodle.org' target='_blank'>Learn more</a>",
-  "presets.moodle4.description": "Moodle is the world's most widely used open-source learning management system. This configuration uses SCORM 1.2 for maximum compatibility with Moodle 4.x. For Moodle 3.x we recommend using the iframe mode. <a href='https://moodle.org' target='_blank'>Learn more</a>",
-  "presets.ilias.description": "XXXILIAS is a powerful open-source LMS from Germany. This configuration uses SCORM 1.2 for best compatibility with ILIAS versions. <a href='https://www.ilias.de' target='_blank'>Learn more</a>",
-  "presets.opal.description": "OPAL (Online Platform for Academic Teaching and Learning) is the central LMS for Saxon universities. Optimized for SCORM 2004. <a href='https://bildungsportal.sachsen.de/opal' target='_blank'>Learn more</a>",
-  "presets.generic.description": "Universal SCORM 2004 configuration for any learning management systems that support the SCORM 2004 standard. Works with most modern LMS platforms.",
-  "presets.openolat.description": "OpenOlat is an open-source e-learning platform from Switzerland. This configuration uses SCORM 1.2 for full functionality. <a href='https://www.openolat.com' target='_blank'>Learn more</a>",
-  "presets.openedx.description": "Open edX is the open-source platform behind edX.org and is used worldwide for MOOCs. Uses SCORM 2004 via the SCORM XBlock. <a href='https://openedx.org' target='_blank'>Learn more</a>"
+  "status.errorMessage": "Error loading status"
 }