From 87da9dfae0d99cedbb67b4616ec1a3d3f7b9ca79 Mon Sep 17 00:00:00 2001
From: Manuel Kocher <manuel.kocher@tugraz.at>
Date: Wed, 27 Jul 2022 09:56:30 +0200
Subject: [PATCH] Add simple translation example to common showcase
---
packages/common/README.md | 53 ++++++++++++++++++-
packages/common/dbp-common-demo.js | 9 +++-
.../translation-overrides/de/translation.json | 4 +-
.../translation-overrides/en/translation.json | 4 +-
4 files changed, 66 insertions(+), 4 deletions(-)
diff --git a/packages/common/README.md b/packages/common/README.md
index 28399607..31d5fad0 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -37,7 +37,58 @@ You can use this web component to show translated html.
</dbp-translated>
```
-The English or German text will be shown according to the `lang` attribute.
+The English or German text will be shown according to the `lang` attribute.
+
+## Translation Web Component
+
+You can use this web component to translate text with 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.
+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>
+```
+The i18next translation files are namespaced with the tag name of the component which requests translations. In this case the tag name is `dbp-translation`.
+Thus, the translation files for english and german will look like this:
+```json
+{
+ "dbp-translation": {
+ "test": "Hallo"
+ }
+}
+```
+```json
+{
+ "dbp-translation": {
+ "test": "Hello"
+ }
+}
+```
+Furthermore, the component allows interpolation and unsafe translations. Thus, HTML can be injected, if the unsafe attribute is set. **Therefore, this feature has to be used with caution!**
+
+To use the component to display a link, interpolation and unsafe can be used like this:
+```html
+<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>
+```
+Where the translation files for english and german will look like this:
+```json
+{
+ "dbp-translation": {
+ "test": "Hallo",
+ "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>"
+ }
+}
+```
+```json
+{
+ "dbp-translation": {
+ "test": "Hello",
+ "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>"
+ }
+}
+```
+
+The resulting translations 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 f9e6ac69..8417ea0d 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -303,12 +303,19 @@ html {
</div>
</dbp-translated>
</div>
- <div class="control" id="dbp-translation-demo">
+ <div class="control" id="dbp-translation-text">
<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>
</div>
</div>
+ <div class="content">
+ <h2>Translation Demo</h2>
+ <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>
+ </div>
+ </div>
</section>
`;
}
diff --git a/toolkit-showcase/assets/translation-overrides/de/translation.json b/toolkit-showcase/assets/translation-overrides/de/translation.json
index 727ad091..d32411f8 100644
--- a/toolkit-showcase/assets/translation-overrides/de/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/de/translation.json
@@ -3,7 +3,9 @@
"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}}\" class=\"link\">interpolation</a> und escaping dargestellt werden.",
"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."
+ "intro": "Sollte nicht angezeigt werden. Dieser Text ist nur als test vorhanden.",
+ "link": "Hier ist ein klickbarer <a class=\"link\" href=\"{{- linkDE}}\">Link</a>",
+ "test": "Hallo"
},
"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 ac573073..7c9f1a94 100644
--- a/toolkit-showcase/assets/translation-overrides/en/translation.json
+++ b/toolkit-showcase/assets/translation-overrides/en/translation.json
@@ -3,7 +3,9 @@
"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}}\" class=\"link\">interpolation</a> and escaping.",
"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."
+ "intro": "This text is not supposed to be displayed. It is only here for testing.",
+ "link": "Here is a clickable <a class=\"link\" href=\"{{- linkEN}}\">link</a>",
+ "test": "Hello"
},
"dbp-theme-switcher": {
"color-mode": "Change theme",
--
GitLab