From 4ae5e919b36033964ae5c57792170e98d86aa010 Mon Sep 17 00:00:00 2001
From: Manuel Kocher <manuel.kocher@tugraz.at>
Date: Wed, 27 Jul 2022 11:29:15 +0200
Subject: [PATCH] Add translation overrides example to showcase
---
packages/common/README.md | 56 ++++++++++++++++++-
packages/common/dbp-common-demo.js | 13 ++++-
packages/common/src/i18n/de/translation.json | 4 ++
packages/common/src/i18n/en/translation.json | 4 ++
.../translation-overrides/de/translation.json | 6 ++
.../translation-overrides/en/translation.json | 6 ++
6 files changed, 85 insertions(+), 4 deletions(-)
diff --git a/packages/common/README.md b/packages/common/README.md
index 31d5fad0..feddaa5a 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -39,11 +39,12 @@ You can use this web component to show translated html.
The English or German text will be shown according to the `lang` attribute.
-## Translation Web Component
+## Translation Web Component and translation overrides
-You can use this web component to translate text with i18next.
+You can use the `dbp-translation` web component to translate text using i18next.
The English or German text will be shown according to the subscribed `lang` attribute.
Additionally, this component subscribes the `lang-dir` attribute to retrieve the directory where the i18n translation files are located.
+If the component does not subscribe to `lang-dir`, the default translations are used!
To get the translation of the key `test`, the component can be used like this:
```html
<dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation>
@@ -87,8 +88,57 @@ Where the translation files for english and german will look like this:
}
}
```
+Moreover, already exisiting translations using i18next can be overriden by the same engine.
+To do this, the tag name of the component where the translations should be overridden is used in the translation.json file.
+To override the `dbp-theme-switcher` component, add the tag name and the keys that should be overriden to the translation files.
+Namespaces can also be overriden. They have to be added to the tag of the component using them.
+Furthermore, the default translations can still be used, however they are in a different i18n namespace.
+The default namespace is called `translation` and the override namespace is called `--translation-override`. The override namespace is set as default, when overrides are set.
+To use translations from another namespace, the namespace has to be defined by using the name of the namespace as a prefix to the key, joined with a colon in between (`ns:key`).
+Therefore, two `dbp-theme-switcher` components, one with overrides and one without, can be displayed using the following code:
+```html
+<dbp-theme-switcher subscribe="lang, lang-dir"
+ themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('themes.dark-mode')}"}]'></dbp-theme-switcher>
+<dbp-theme-switcher subscribe="lang"
+ themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('translation:themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('translation:themes.dark-mode')}"}]'></dbp-theme-switcher>
+```
+with the following translation files:
+```json
+{
+ "dbp-translation": {
+ "test": "Hallo",
+ "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>"
+ },
+ "dbp-theme-switcher": {
+ "color-mode": "Theme ändern"
+ },
+ "dbp-common-demo": {
+ "themes": {
+ "dark-mode": "Neuer dunkler Modus",
+ "light-mode": "Neuer heller Modus"
+ }
+ }
+}
+```
+```json
+{
+ "dbp-translation": {
+ "test": "Hello",
+ "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>"
+ },
+ "dbp-theme-switcher": {
+ "color-mode": "Change theme"
+ },
+ "dbp-common-demo": {
+ "themes": {
+ "dark-mode": "New dark mode",
+ "light-mode": "New light mode"
+ }
+ }
+}
+```
-The resulting translations can be seen in the section Translation Demo further down the page.
+The resulting translations example can be seen in the section Translation Demo further down the page.
## Overriding slots in nested web components
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 8417ea0d..54088917 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -1,4 +1,4 @@
-import {createInstance} from './src/i18n.js';
+import {createInstance, setOverridesByGlobalCache, getOverrideNamespace} from './src/i18n.js';
import {css, html, LitElement} from 'lit';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from './utils.js';
@@ -20,6 +20,8 @@ import {
export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
+
+ // necessary because activity does not extend adapter
this._i18n = createInstance();
this.lang = this._i18n.language;
this.noAuth = false;
@@ -57,6 +59,11 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
super.connectedCallback();
this._i18n.changeLanguage(this.lang);
+ // necessary because activity does not extend adapter
+ if (this.langDir) {
+ setOverridesByGlobalCache(this._i18n, this);
+ }
+
this.updateComplete.then(() => {});
}
@@ -314,6 +321,10 @@ html {
<div class="control" id="dbp-translation-demo">
<dbp-translation subscribe="lang, lang-dir" key="test"></dbp-translation><br/>
<dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation>
+ <dbp-theme-switcher subscribe="lang, lang-dir"
+ themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('themes.dark-mode')}"}]'></dbp-theme-switcher>
+ <dbp-theme-switcher subscribe="lang"
+ themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('translation:themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('translation:themes.dark-mode')}"}]'></dbp-theme-switcher>
</div>
</div>
</section>
diff --git a/packages/common/src/i18n/de/translation.json b/packages/common/src/i18n/de/translation.json
index 51cf793c..0cc3370c 100644
--- a/packages/common/src/i18n/de/translation.json
+++ b/packages/common/src/i18n/de/translation.json
@@ -7,5 +7,9 @@
"api-documentation-server": "Verbindung zum apiDocumentation API Server {{apiDocUrl}} fehlgeschlagen!",
"error-api-server": "Verbindung zum API Server {{apiUrl}} fehlgeschlagen!",
"error-hydra-documentation-url-not-set": "Hydra apiDocumentation URL wurden für server {{apiUrl}} nicht gesetzt!"
+ },
+ "themes": {
+ "light-mode": "Light Mode",
+ "dark-mode": "Dark Mode"
}
}
diff --git a/packages/common/src/i18n/en/translation.json b/packages/common/src/i18n/en/translation.json
index e1036a65..915dedad 100644
--- a/packages/common/src/i18n/en/translation.json
+++ b/packages/common/src/i18n/en/translation.json
@@ -7,5 +7,9 @@
"api-documentation-server": "Connection to apiDocumentation server {{apiDocUrl}} failed!",
"error-api-server": "Connection to api server {{apiUrl}} failed!",
"error-hydra-documentation-url-not-set": "Hydra apiDocumentation url was not set for server {{apiUrl}}!"
+ },
+ "themes": {
+ "light-mode": "Light Mode",
+ "dark-mode": "Dark Mode"
}
}
diff --git a/toolkit-showcase/assets/translation-overrides/de/translation.json b/toolkit-showcase/assets/translation-overrides/de/translation.json
index d32411f8..cb549f7d 100644
--- a/toolkit-showcase/assets/translation-overrides/de/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/de/translation.json
@@ -13,5 +13,11 @@
},
"dbp-theme-switcher-demo": {
"intro": "Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten, wie z.B. zwischen Light- und Dark Mode."
+ },
+ "dbp-common-demo": {
+ "themes": {
+ "dark-mode": "Neuer dunkler Modus",
+ "light-mode": "Neuer heller Modus"
+ }
}
}
diff --git a/toolkit-showcase/assets/translation-overrides/en/translation.json b/toolkit-showcase/assets/translation-overrides/en/translation.json
index 7c9f1a94..777df296 100644
--- a/toolkit-showcase/assets/translation-overrides/en/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/en/translation.json
@@ -13,5 +13,11 @@
},
"dbp-theme-switcher-demo": {
"intro": "With the theme-switcher you can switch between multiple themes. For example, between Light Mode and Dark Mode."
+ },
+ "dbp-common-demo": {
+ "themes": {
+ "dark-mode": "New dark mode",
+ "light-mode": "New light mode"
+ }
}
}
--
GitLab