Add translation overrides example to showcase

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
 

packages/common/dbp-common-demo.js

-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>

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"
     }
 }

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"
     }
 }

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"
+      }
     }
 }

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"
+      }
     }
 }