From a494d5e0621f98a8d37f7a7320f9174c4804014a Mon Sep 17 00:00:00 2001
From: Manuel Kocher <manuel.kocher@tugraz.at>
Date: Mon, 2 Jan 2023 14:58:14 +0100
Subject: [PATCH] Add innerText to dbp-translation (cypress support), rework
showcase example
---
packages/common/dbp-common-demo.js | 12 ++++----
packages/common/src/translation.js | 45 +++++++++++++++++++-----------
2 files changed, 34 insertions(+), 23 deletions(-)
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 528318a8..0fb97d93 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -301,6 +301,7 @@ html {
<div class="control" id="dbp-translated-demo">
<dbp-translated subscribe="lang">
<div slot="de">
+ <!---->
Dieser Text ist Deutsch und wird Englisch werden wenn man die
Sprache auf Englisch stellt.
</div>
@@ -314,13 +315,12 @@ html {
<div class="content">
<h2>Translation Demo</h2>
<div class="control" id="dbp-translation-demo">
- <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><br/>
- <dbp-translation subscribe="lang, lang-dir" key="theme-switcher-demo"></dbp-translation>
+ <dbp-translation id="dbp-translation-link" subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation><br/>
+ <dbp-translation id="dbp-translation-showcase" subscribe="lang, lang-dir" key="toolkit-showcase"></dbp-translation><br/>
+ <dbp-translation id="dbp-translation-theme-switcher" subscribe="lang, lang-dir" key="theme-switcher-demo"></dbp-translation><br/>
<dbp-theme-switcher subscribe="lang, lang-dir"
- themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('dbp.themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('dbp.themes.dark-mode')}"}]'></dbp-theme-switcher>
- <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
- <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
- <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
+ themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'></dbp-theme-switcher>
+ <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation> <!-- shouldnt be displayed -->
</div>
</div>
</section>
diff --git a/packages/common/src/translation.js b/packages/common/src/translation.js
index 77b81738..5b3b89a6 100644
--- a/packages/common/src/translation.js
+++ b/packages/common/src/translation.js
@@ -15,6 +15,7 @@ export class Translation extends DBPLitElement {
// dir and i18next instance of translation overrides
this._i18n = createInstance();
this.langDir = '';
+ this.innerText = '';
}
@@ -72,17 +73,25 @@ export class Translation extends DBPLitElement {
this._i18n.options.fallbackNS :
getOverrideNamespace(this._i18n.options.fallbackNS);
+ let translation = "";
+
// request to i18n translation
- let translation = (() => {
- if (this.interpolation && this.unsafe)
- return unsafeHTML(this._i18n.t(this.key, this.interpolation));
- else if (this.interpolation)
- return this._i18n.t(this.key, this.interpolation);
- else if (this.unsafe)
- return unsafeHTML(this._i18n.t(this.key));
- else
- return this._i18n.t(this.key);
- })();
+ if (this.interpolation && this.unsafe) {
+ this.innerText = this._i18n.t(this.key, this.interpolation);
+ translation = unsafeHTML(this._i18n.t(this.key, this.interpolation));
+ }
+ else if (this.interpolation) {
+ this.innerText = this._i18n.t(this.key, this.interpolation);
+ translation = this._i18n.t(this.key, this.interpolation);
+ }
+ else if (this.unsafe) {
+ this.innerText = this._i18n.t(this.key);
+ translation = unsafeHTML(this._i18n.t(this.key));
+ }
+ else {
+ this.innerText = this._i18n.t(this.key);
+ translation = this._i18n.t(this.key);
+ }
@@ -92,16 +101,18 @@ export class Translation extends DBPLitElement {
let keyComment = "";
if ((this._i18n.exists(overrideNamespace + ":" + this.key) && this._i18n.hasResourceBundle(this.lang, overrideNamespace))
|| window.location.hash.includes('debug')) {
- keyComment = unsafeHTML("<!-- key: " + this.key + "-->");
+ keyComment = unsafeHTML("<!-- key: " + this.key + "-->");
} else if (this._i18n.hasResourceBundle(this.lang, overrideNamespace)){
- keyComment = unsafeHTML("<!-- key '" + this.key + "' not found! -->");
- translation = "";
- console.error("Key '" + this.key + "' not found!");
+ this.innerText = "";
+ translation = "";
+ keyComment = unsafeHTML("<!-- key '" + this.key + "' not found! -->");
+ console.error("Key '" + this.key + "' not found!");
} else {
- keyComment = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->");
- translation = "";
+ this.innerText = "";
+ translation = "";
+ keyComment = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->");
+ console.error("Key '" + this.key + "' and namespace '" + overrideNamespace + "' not found!");
}
-
// load translation text
return html`
${keyComment}
--
GitLab