feat: customcontrol.updatei18n can now plural rules

ad235cb4 · Volker Schukai · 92b06429 · ad235cb4 · ad235cb4 · ad235cb4
Verified Commit ad235cb4 authored 2 years ago by Volker Schukai
--- a/application/example/i18n/providers/embed.mjs
+++ b/application/example/i18n/providers/embed.mjs
 import {Embed} from '@schukai/monster/source/i18n/providers/embed.mjs';

-// read from scritp tag with id i18n
+// read from script tag with id i18n
 const translation = new Embed('i18n');

--- a/application/source/dom/customelement.mjs
+++ b/application/source/dom/customelement.mjs
@@ -295,24 +295,44 @@ class CustomElement extends HTMLElement {
     * Before you can use this method, you must have loaded the translations.
     *
     * @returns {Monster.DOM.CustomElement}
+     * @throws {Error}  Cannot find element with translations. Add a translations object to the document.
     */
    updateI18n() {
-
        const translations = getDocumentTranslations();
        if (!translations) {
            return this;
        }

-        const labels = this.getOption("labels");
-        if (!isIterable(labels)) {
+        let labels = this.getOption("labels");
+        if (!(isObject(labels) || isIterable(labels))) {
            return this;
        }

        for (const key in labels) {
-            const text = translations.getText(key, labels[key]);
-            if (text !== labels[key]) {
+            const def = labels[key];
+
+            if (isString(def)) {
+                const text = translations.getText(key, def);
+                if (text !== def) {
                    this.setOption("labels." + key, text);
                }
+                continue;
+            } else if (isObject(def)) {
+                for (const k in def) {
+                    const d = def[k];
+                    
+                    const text = translations.getPluralRuleText(key, k, d);
+                    if (!isString(text)) {
+                        throw new Error("Invalid labels definition");
+                    }
+                    if (text !== d) {
+                        this.setOption("labels." + key + "." + k, text);
+                    }
+                }
+                continue;
+            }
+
+            throw new Error("Invalid labels definition");

        }
        return this;

--- a/application/source/i18n/translations.mjs
+++ b/application/source/i18n/translations.mjs
@@ -104,7 +104,7 @@ class Translations extends Base {
        } else {
            count = validateInteger(count);
            if (count === 0) {
-                // special handlig for zero count
+                // special handling for zero count
                if (r.hasOwnProperty("zero")) {
                    return validateString(r["zero"]);
                }

--- a/development/playground/i18n-control/index.html
+++ b/development/playground/i18n-control/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script type="module" src="main.mjs"></script>
+</head>
+<body>
+<h1>Updater</h1>
+
+<script type="application/json" data-monster-role="translations">
+    {
+        "theListContainsNoEntries": "translation1",
+        "key2": {
+            "other": "translation2"
+        },
+        "multi": {
+            "two": "translation3"
+        }
+    }
+</script>
+
+<monster-1>Monster1</monster-1>
+
+</body>
+</html>
--- a/development/playground/i18n-control/main.mjs
+++ b/development/playground/i18n-control/main.mjs
+import {Fetch} from '../../../application/source/i18n/providers/fetch.mjs';
+import {Updater} from '../../../application/source/dom/updater.mjs';
+import {CustomElement, registerCustomElement} from '../../../application/source/dom/customelement.mjs';
+import {domReady} from '../../../application/source/dom/ready.mjs';
+import {Embed} from '../../../application/source/i18n/providers/embed.mjs';
+
+
+class Monster1 extends CustomElement {
+
+
+    get defaults() {
+        return Object.assign(
+            {},
+            super.defaults,
+            {
+                labels: {
+                    theListContainsNoEntries: "The list contains no entries",
+                    multi: {
+                        zero: "Zero",
+                        one: "One",
+                        two: "Two",
+                        few: "Few",
+                        many: "Many",
+                        other: "Other"
+                        
+                    }
+                }
+            });
+    };
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-1";
+    }
+
+}
+
+
+domReady.then(() => {
+
+    Embed.assignTranslationsToElement().then(() => {
+        m1.updateI18n();
+        console.log(m1.getOption('labels'));
+        console.log(m1.getOption('labels.multi.two'));
+    });
+
+    const translation = new Embed('i18n');
+    const m1 = document.querySelector("monster-1");
+
+
+// read from scritp tag with id i18n
+
+
+});
+
+registerCustomElement(Monster1);
+
+//
+// const provider = new Fetch('translation.json', {
+//     method: 'GET',
+//     headers: {
+//         'Content-Type': 'application/json',
+//     },
+// });
+//
+// provider
+//     .assignToElement()
+//     .then(() => {
+//         new Updater(document.body, {}).run();
+//     })
+//     .catch((e) => {
+//         console.error(e);
+//     });
--- a/development/playground/i18n-control/translation.json
+++ b/development/playground/i18n-control/translation.json
+{
+  "key1": "value1",
+  "key2": "value2"
+}
\ No newline at end of file