Fix translations after moving JSONs

src/GrampsJs.js

@@ -22,7 +22,11 @@ import {
  updateSettings,
  apiRefreshAuthToken,
 } from './api.js'
-import {grampsStrings, additionalStrings} from './strings.js'
+import {
+ grampsStrings,
+ getFrontendStrings,
+ frontendLanguages,
+} from './strings.js'
 import {fireEvent, getBrowserLanguage} from './util.js'
 import './dayjs_locales.js'
 
@@ -601,8 +605,9 @@ export class GrampsJs extends LitElement {
  window.addEventListener('settings:changed', this._handleSettings.bind(this))
  }
 
- _loadFrontendStrings(lang) {
- this._strings = {...this._strings, ...additionalStrings[lang]}
+ async _loadFrontendStrings(lang) {
+ const additionalStrings = await getFrontendStrings(lang)
+ this._strings = {...this._strings, ...additionalStrings}
  this._strings.__lang__ = lang
  this._lang = lang
  }
@@ -806,27 +811,31 @@ export class GrampsJs extends LitElement {
  return Boolean(grampsStrings[0] in this._strings)
  }
 
- _loadStrings(strings, lang) {
+ async _loadStrings(strings, lang) {
  this._loadingStrings = true
- apiPost(`/api/translations/${lang}`, {strings}, true, false).then(data => {
- this._loadingStrings = false
- if ('data' in data) {
- this._strings = data.data.reduce(
- (obj, item) =>
- Object.assign(obj, {[item.original]: item.translation}),
- {}
- )
- if (lang in additionalStrings) {
- this._strings = Object.assign(additionalStrings[lang], this._strings)
- }
- this._strings.__lang__ = lang
- this._lang = lang
- fireEvent(this, 'language:changed', {lang})
- }
- if ('error' in data) {
- this._showError(data.error)
+ const data = await apiPost(
+ `/api/translations/${lang}`,
+ {strings},
+ true,
+ false
+ )
+ this._loadingStrings = false
+ if ('data' in data) {
+ this._strings = data.data.reduce(
+ (obj, item) => Object.assign(obj, {[item.original]: item.translation}),
+ {}
+ )
+ if (frontendLanguages.includes(lang)) {
+ const additionalStrings = await getFrontendStrings(lang)
+ this._strings = Object.assign(additionalStrings, this._strings)
  }
- })
+ this._strings.__lang__ = lang
+ this._lang = lang
+ fireEvent(this, 'language:changed', {lang})
+ }
+ if ('error' in data) {
+ this._showError(data.error)
+ }
  }
 
  _showError(msg) {

src/strings.js

@@ -1,9 +1,69 @@
-import translations from './lang/index.js'
 /*
 All strings that need to be translated
 */
 
-export const additionalStrings = translations
+// existing languages for frontend strings
+export const frontendLanguages = [
+ 'ar',
+ 'ca',
+ 'de_AT',
+ 'en_GB',
+ 'es',
+ 'ga',
+ 'hu',
+ 'it',
+ 'mk',
+ 'nn',
+ 'pt_PT',
+ 'sk',
+ 'sr',
+ 'tr',
+ 'zh_CN',
+ 'bg',
+ 'cs',
+ 'de',
+ 'en',
+ 'fi',
+ 'he',
+ 'ja',
+ 'nb',
+ 'pl',
+ 'ro',
+ 'sl',
+ 'sv',
+ 'uk',
+ 'zh_HK',
+ 'br',
+ 'da',
+ 'el',
+ 'eo',
+ 'fr',
+ 'hr',
+ 'is',
+ 'lt',
+ 'lv',
+ 'nl',
+ 'pt_BR',
+ 'ru',
+ 'sq',
+ 'ta',
+ 'vi',
+ 'zh_TW',
+]
+
+// will hold the frontend strings by language code
+const frontendStrings = {}
+
+export async function getFrontendStrings(lang) {
+ if (!(lang in frontendStrings) && frontendLanguages.includes(lang)) {
+ const resp = await fetch(`/lang/${lang}.json`)
+ try {
+ frontendStrings[lang] = await resp.json()
+ // eslint-disable-next-line no-empty
+ } catch {}
+ }
+ return frontendStrings[lang] ?? {}
+}
 
 export const grampsStrings = [
  '_Back',

src/util.js

@@ -5,7 +5,7 @@ import dayjs from 'dayjs/esm'
 import relativeTime from 'dayjs/esm/plugin/relativeTime'
 
 import {asteriskIcon, crossIcon} from './icons.js'
-import {additionalStrings} from './strings.js'
+import {frontendLanguages} from './strings.js'
 import {hex6ToCss, hex12ToCss} from './color.js'
 
 dayjs.extend(relativeTime)
@@ -374,10 +374,10 @@ export function getBrowserLanguage() {
  // get browser language and replace all '-' with '_'
  // since the strings from backend comes with underscore
  const browserLang = navigator.language.replaceAll('-', '_')
- if (browserLang in additionalStrings) {
+ if (frontendLanguages.includes(browserLang)) {
  return browserLang
  }
- if (browserLang.split('_')[0] in additionalStrings) {
+ if (frontendLanguages.includes(browserLang.split('_')[0])) {
  return browserLang.split('_')[0]
  }
  return null