From 2a57a5f9cbda472d4d6d14fab7795298ab1b0bf3 Mon Sep 17 00:00:00 2001
From: Manuel Kocher <manuel.kocher@tugraz.at>
Date: Tue, 14 Jun 2022 13:05:05 +0200
Subject: [PATCH] Add translation overrides to theme-switcher-demo activity

---
 packages/theme-switcher/src/demo.js                      | 7 ++++++-
 .../assets/translation-overrides/de/translation.json     | 9 +++++++--
 .../assets/translation-overrides/en/translation.json     | 9 +++++++--
 toolkit-showcase/src/dbp-theme-switcher-demo-activity.js | 4 +++-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
index 0470dda4..3a9bc1ae 100644
--- a/packages/theme-switcher/src/demo.js
+++ b/packages/theme-switcher/src/demo.js
@@ -1,4 +1,4 @@
-import {createInstance} from './i18n';
+import {createInstance, setOverridesByGlobalCache} from './i18n';
 import {html, LitElement} from 'lit';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {ThemeSwitcher} from './theme-switcher';
@@ -12,6 +12,7 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
         this.url = '';
         this.selectedFiles = [];
         this.selectedFilesCount = 0;
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -23,11 +24,15 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
     static get properties() {
         return {
             lang: {type: String},
+            langDir: {type: String, attribute: "lang-dir"},
         };
     }
 
     connectedCallback() {
         super.connectedCallback();
+        if (this.langDir) {
+          setOverridesByGlobalCache(this._i18n, this);
+        }
     }
 
     update(changedProperties) {
diff --git a/toolkit-showcase/assets/translation-overrides/de/translation.json b/toolkit-showcase/assets/translation-overrides/de/translation.json
index 02197f36..c1127c41 100644
--- a/toolkit-showcase/assets/translation-overrides/de/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/de/translation.json
@@ -2,9 +2,14 @@
     "dbp-translation": {
       "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
       "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden.",
-      "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+      "color-mode": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
     },
     "dbp-theme-switcher": {
-      "color-mode": "Theme ändern"
+      "color-mode": "Theme ändern",
+      "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden."
+    },
+    "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."
     }
 }
diff --git a/toolkit-showcase/assets/translation-overrides/en/translation.json b/toolkit-showcase/assets/translation-overrides/en/translation.json
index f361db8c..483eb8d6 100644
--- a/toolkit-showcase/assets/translation-overrides/en/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/en/translation.json
@@ -2,9 +2,14 @@
     "dbp-translation": {
       "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
       "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping.",
-      "color-mode": "This text is not supposed to be displayed. It is only here for testing."
+      "color-mode": "This text is not supposed to be displayed. It is only here for testing.",
+      "intro": "This text is not supposed to be displayed. It is only here for testing."
     },
     "dbp-theme-switcher": {
-      "color-mode": "Change theme"
+      "color-mode": "Change theme",
+      "intro": "This text is not supposed to be displayed. It is only here for testing."
+    },
+    "dbp-theme-switcher-demo": {
+      "intro": "With the theme-switcher you can switch between multiple themes. For example, between Light Mode and Dark Mode."
     }
 }
diff --git a/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js b/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
index 7ff3ca19..df3d9317 100644
--- a/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
+++ b/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
@@ -12,6 +12,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
     constructor() {
         super();
         this.lang = 'en';
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -24,6 +25,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
         return {
             ...super.properties,
             lang: {type: String},
+            langDir: {type: String, attribute: "lang-dir"},
         };
     }
 
@@ -58,7 +60,7 @@ export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLit
     render() {
         return html`
             ${unsafeHTML(readme)}
-            <dbp-theme-switcher-demo id="demo" lang="${this.lang}"></dbp-theme-switcher-demo>
+            <dbp-theme-switcher-demo id="demo" lang="${this.lang}" lang-dir="${this.langDir}"></dbp-theme-switcher-demo>
         `;
     }
 }
-- 
GitLab