From b943a24c79af5ffab580fea0adae53917d4177f5 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 1 Jul 2021 12:52:45 +0200
Subject: [PATCH] translation overrides: Use the real tag name when looking for
overrides
Instead of using the namespace which is hardcoded we use the tag name that was
used to register the element (or the "real" tag name in case of a scoped element).
This way if AppShell is regsitered as "dbp-some-app" it can still be overriden by
specifying "dbp-some-app" in the overrides object.
---
packages/common/i18next.js | 12 ++++++++----
packages/common/test/i18next.js | 13 +++++++------
.../language-select/src/dbp-language-select-demo.js | 6 +++---
3 files changed, 18 insertions(+), 13 deletions(-)
diff --git a/packages/common/i18next.js b/packages/common/i18next.js
index 9e9262a7..e22b6197 100644
--- a/packages/common/i18next.js
+++ b/packages/common/i18next.js
@@ -100,20 +100,24 @@ export function createInstance(languages, lng, fallback, namespace) {
* object is equal to removing all overrides.
*
* @param {i18next.i18n} i18n - The i18next instance
- * @param {object} overrides - The override data in the following format: "{language: {namespace: {key: value}}}"
+ * @param {HTMLElement} element - The element at which the overrides are targeted
+ * @param {object} overrides - The override data in the following format: "{language: {tag-name: {key: value}}}"
*/
-export function setOverrides(i18n, overrides) {
+export function setOverrides(i18n, element, overrides) {
// We add a special namespace which gets used with priority and falls back
// to the original one. This way we an change the overrides at runtime
// and can even remove them.
+
+ // The scoped mixin saves the real tag name under data-tag-name
+ let tagName = ((element.dataset && element.dataset.tagName) || element.tagName).toLowerCase();
let namespace = i18n.options.fallbackNS;
let overrideNamespace = getOverrideNamespace(namespace);
let hasOverrides = false;
for(let lng of i18n.languages) {
i18n.removeResourceBundle(lng, overrideNamespace);
- if (overrides[lng] === undefined || overrides[lng][namespace] === undefined)
+ if (overrides[lng] === undefined || overrides[lng][tagName] === undefined)
continue;
- let resources = overrides[lng][namespace];
+ let resources = overrides[lng][tagName];
hasOverrides = true;
i18n.addResourceBundle(lng, overrideNamespace, resources);
}
diff --git a/packages/common/test/i18next.js b/packages/common/test/i18next.js
index a2b5f5f2..dd311e5f 100644
--- a/packages/common/test/i18next.js
+++ b/packages/common/test/i18next.js
@@ -49,22 +49,23 @@ suite('i18next', () => {
});
test('overrides', () => {
- let namespace = 'ns';
+ let namespace = 'some-ns';
+ let element = document.createElement(namespace);
var inst = i18next.createInstance({en: {foo: 'bar'}}, 'en', 'en', namespace);
assert.equal(inst.t('foo'), 'bar');
assert.equal(inst.t('quux'), 'quux');
- i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+ i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
assert.equal(inst.t('quux'), 'bla');
assert.equal(inst.t('foo'), 'bar');
- i18next.setOverrides(inst, {en: {[namespace]: {}}});
+ i18next.setOverrides(inst, element, {en: {[namespace]: {}}});
assert.equal(inst.t('quux'), 'quux');
assert.equal(inst.t('foo'), 'bar');
- i18next.setOverrides(inst, {en: {[namespace]: {foo: 'hmm'}}});
+ i18next.setOverrides(inst, element, {en: {[namespace]: {foo: 'hmm'}}});
assert.equal(inst.t('foo'), 'hmm');
- i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+ i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
assert.equal(inst.t('foo'), 'bar');
assert.equal(inst.t('quux'), 'bla');
- i18next.setOverrides(inst, {});
+ i18next.setOverrides(inst, element, {});
assert.equal(inst.t('foo'), 'bar');
assert.equal(inst.t('quux'), 'quux');
});
diff --git a/packages/language-select/src/dbp-language-select-demo.js b/packages/language-select/src/dbp-language-select-demo.js
index cabad2ed..11b1264a 100644
--- a/packages/language-select/src/dbp-language-select-demo.js
+++ b/packages/language-select/src/dbp-language-select-demo.js
@@ -9,12 +9,12 @@ import {createInstance, setOverrides} from './i18n.js';
// This is an example on how to override translations at runtime
let OVERRIDES = {
'de': {
- 'translation': {
+ 'dbp-language-select-display': {
'demo': 'Überschrieben'
}
},
'en': {
- 'translation': {
+ 'dbp-language-select-display': {
'demo': 'Overridden'
}
}
@@ -26,7 +26,7 @@ class LanguageSelectDisplay extends AdapterLitElement {
super();
this.lang = 'de';
this._i18n = createInstance();
- setOverrides(this._i18n, OVERRIDES);
+ setOverrides(this._i18n, this, OVERRIDES);
}
static get properties() {
--
GitLab