From ef4383c9d0dd7b3d16810d3cff3e8d8543461d03 Mon Sep 17 00:00:00 2001
From: Manuel Kocher <manuel.kocher@tugraz.at>
Date: Tue, 14 Jun 2022 11:47:32 +0200
Subject: [PATCH] Implement translation overrides in theme-switcher
---
packages/theme-switcher/src/demo.js | 2 +-
packages/theme-switcher/src/i18n.js | 4 +++-
packages/theme-switcher/src/theme-switcher.js | 13 ++++++++++---
.../assets/theme-switcher.metadata.json | 2 +-
.../translation-overrides/de/translation.json | 6 +++++-
.../translation-overrides/en/translation.json | 6 +++++-
6 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
index 7f8725ea..0470dda4 100644
--- a/packages/theme-switcher/src/demo.js
+++ b/packages/theme-switcher/src/demo.js
@@ -101,7 +101,7 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
<p>${i18n.t('intro')}</p>
</div>
<div class="content">
- <dbp-theme-switcher
+ <dbp-theme-switcher subscribe="lang, lang-dir"
themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'></dbp-theme-switcher>
</div>
</section>
diff --git a/packages/theme-switcher/src/i18n.js b/packages/theme-switcher/src/i18n.js
index 0c6fedc8..96e80814 100644
--- a/packages/theme-switcher/src/i18n.js
+++ b/packages/theme-switcher/src/i18n.js
@@ -1,4 +1,4 @@
-import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance, setOverridesByGlobalCache} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
@@ -6,3 +6,5 @@ import en from './i18n/en/translation.json';
export function createInstance() {
return _createInstance({en: en, de: de}, 'de', 'en');
}
+
+export{setOverridesByGlobalCache};
diff --git a/packages/theme-switcher/src/theme-switcher.js b/packages/theme-switcher/src/theme-switcher.js
index cd138077..473c5b48 100644
--- a/packages/theme-switcher/src/theme-switcher.js
+++ b/packages/theme-switcher/src/theme-switcher.js
@@ -1,4 +1,4 @@
-import {createInstance} from './i18n.js';
+import {createInstance, setOverridesByGlobalCache} from './i18n.js';
import {html, css} from 'lit';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {AdapterLitElement, Icon} from '@dbp-toolkit/common';
@@ -15,6 +15,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
this.boundCloseAdditionalMenuHandler = this.hideModeMenu.bind(this);
this.detectBrowserDarkMode = false;
this.darkModeClass = 'dark-theme';
+ this.langDir = '';
}
static get properties() {
@@ -23,6 +24,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
lang: {type: String},
themes: {type: Array, attribute: 'themes'},
darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'},
+ langDir: {type: String, attribute: 'lang-dir'},
};
}
@@ -55,6 +57,11 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
this.loadTheme('light-theme');
this.detectInitialMode();
});
+ if (this.langDir) {
+ for(let lng of this._i18n.languages) {
+ setOverridesByGlobalCache(this._i18n, this);
+ }
+ }
}
detectInitialMode() {
@@ -158,8 +165,8 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
-
-
+
+
mode-button, button.button {
border: none;
}
diff --git a/toolkit-showcase/assets/theme-switcher.metadata.json b/toolkit-showcase/assets/theme-switcher.metadata.json
index 79d3bd98..b7b1ea74 100644
--- a/toolkit-showcase/assets/theme-switcher.metadata.json
+++ b/toolkit-showcase/assets/theme-switcher.metadata.json
@@ -14,5 +14,5 @@
"de": "Theme Switcher Web Komponente",
"en": "Theme-Switcher web component"
},
- "subscribe": "lang"
+ "subscribe": "lang, lang-dir"
}
diff --git a/toolkit-showcase/assets/translation-overrides/de/translation.json b/toolkit-showcase/assets/translation-overrides/de/translation.json
index 27d226dd..02197f36 100644
--- a/toolkit-showcase/assets/translation-overrides/de/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/de/translation.json
@@ -1,6 +1,10 @@
{
"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."
+ "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."
+ },
+ "dbp-theme-switcher": {
+ "color-mode": "Theme ändern"
}
}
diff --git a/toolkit-showcase/assets/translation-overrides/en/translation.json b/toolkit-showcase/assets/translation-overrides/en/translation.json
index e3cd5c38..f361db8c 100644
--- a/toolkit-showcase/assets/translation-overrides/en/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/en/translation.json
@@ -1,6 +1,10 @@
{
"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."
+ "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."
+ },
+ "dbp-theme-switcher": {
+ "color-mode": "Change theme"
}
}
--
GitLab