diff --git a/packages/common/README.md b/packages/common/README.md
index 31d5fad02af3f77f2fd7e1f2c4b1b842c08c7d06..feddaa5a019d81e29e546f9a652a22ddfaea1a68 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 8417ea0da4ec537c0856fc92f10adf3e73b3889d..54088917322d425c3a6121b194396bd0a55d3064 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 51cf793c6cb4108b18d8cab47b63959663ec8590..0cc3370c234ffb26573a8edb6bd0f6293df9e7f5 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 e1036a6580fd180af131a4c2744c8c4fef2745fb..915dedadd2d08bdf8319154437aedd2a884416b2 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 d32411f821d8fcc36e0694324d5b46449cd9a381..cb549f7d4c9e56320a3b3749199b51ce0a0aab62 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 7c9f1a94cdd7c70ad8fcf961760a47c71a9bd014..777df296553741b9b365a55b7a60e7076123b1fe 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"
+ }
}
}