diff --git a/packages/common/i18next.js b/packages/common/i18next.js index 22f445cb18077b2ffdaf5e206095c9df985e9a5e..26d78a3feb15f3e36925406da26633cf9f71a95d 100644 --- a/packages/common/i18next.js +++ b/packages/common/i18next.js @@ -50,19 +50,26 @@ export function humanFileSize(bytes, si = false) { * @param {object} languages - Mapping from languages to translation objects * @param {string} lng - The default language * @param {string} fallback - The fallback language to use for unknown languages or untranslated keys + * @param {string} [namespace] - The i18next namespace to load, defaults to 'translation' * @returns {i18next.i18n} A new independent i18next instance */ -export function createInstance(languages, lng, fallback) { +export function createInstance(languages, lng, fallback, namespace) { + if (namespace === undefined) + namespace = 'translation'; + var options = { lng: lng, fallbackLng: fallback, debug: false, + ns: [namespace + '-override'], + defaultNS: namespace + '-override', + fallbackNS: [namespace], initImmediate: false, // Don't init async resources: {}, }; Object.keys(languages).forEach(function(key) { - options['resources'][key] = {translation: languages[key]}; + options['resources'][key] = {[namespace]: languages[key]}; }); var i18n = i18next.createInstance(); diff --git a/packages/language-select/src/dbp-language-select-demo.js b/packages/language-select/src/dbp-language-select-demo.js index 8a303139f1c0a0003ec9faf6f1ce3e3d56451c6d..2bbf7395ca5853be0680e1ca3441055f2167a171 100644 --- a/packages/language-select/src/dbp-language-select-demo.js +++ b/packages/language-select/src/dbp-language-select-demo.js @@ -4,13 +4,39 @@ import * as commonUtils from '@dbp-toolkit/common/utils'; import { ScopedElementsMixin } from '@open-wc/scoped-elements'; import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element"; import {Provider} from "@dbp-toolkit/provider"; +import {i18n} from './i18n.js'; +// This is an example on how to override translations at runtime +let OVERRIDES = { + 'de': { + 'translation': { + 'demo': 'Überschrieben' + } + }, + 'en': { + 'translation': { + 'demo': 'Overridden' + } + } +}; + +function applyOverrides(i18n, namespace, overrides) { + for(let lang of Object.keys(overrides)) { + let data = overrides[lang][namespace]; + if (data !== undefined) { + i18n.addResourceBundle(lang, namespace + '-override', data); + } + } +} class LanguageSelectDisplay extends AdapterLitElement { constructor() { super(); this.lang = 'de'; + this._i18n = i18n.cloneInstance(); + // FIXME: this overrides the translations for all clones + applyOverrides(this._i18n, 'translation', OVERRIDES); } static get properties() { @@ -19,8 +45,18 @@ class LanguageSelectDisplay extends AdapterLitElement { }; } + update(changedProperties) { + changedProperties.forEach((oldValue, propName) => { + switch (propName) { + case 'lang': + this._i18n.changeLanguage(this.lang); + } + }); + super.update(changedProperties); + } + render() { - return html`${this.lang}`; + return html`<b>${this.lang}: ${this._i18n.t('demo')}</b>`; } } diff --git a/packages/language-select/src/i18n/de/translation.json b/packages/language-select/src/i18n/de/translation.json index 625365129e7744b3c3351625f77dae484f24c399..f19ffd1c9ee2210bd784f187a46233b53a4d25b8 100644 --- a/packages/language-select/src/i18n/de/translation.json +++ b/packages/language-select/src/i18n/de/translation.json @@ -2,5 +2,6 @@ "de": "Deutsch", "en": "Englisch", "de-action": "Auf Deutsch anzeigen", - "en-action": "Auf Englisch anzeigen" + "en-action": "Auf Englisch anzeigen", + "demo": "Hallo Welt" } diff --git a/packages/language-select/src/i18n/en/translation.json b/packages/language-select/src/i18n/en/translation.json index 1177302e3a9fad1e64b4d800673db9db0ea25cf8..52ba2b38f51b974f89fea0960cc19e1c569ee5d7 100644 --- a/packages/language-select/src/i18n/en/translation.json +++ b/packages/language-select/src/i18n/en/translation.json @@ -2,5 +2,6 @@ "de": "German", "en": "English", "de-action": "Switch to German", - "en-action": "Switch to English" + "en-action": "Switch to English", + "demo": "Hello World" }