examples: Basic sample

2018-11-29 02:36:48 +01:00
parent f92f52bafa
commit 4aac5d2267
1 changed files with 94 additions and 0 deletions
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <title>i18n-js - Sample</title>
+</head>
+
+<body>
+    <header class="header">
+        <select id="language">
+        </select>
+    </header>
+    <div class="content">
+        <h1 class="title" data-i18n="title"></h1>
+        <p data-i18n="p1"></p>
+        <p data-i18n="p2"></p>
+    </div>
+</body>
+
+<script src='../i18n.js'></script>
+<script>
+    let languages = {
+        enUS: 'English (American)',
+        enGB: 'English (British)',
+        deDE: 'Deutsch',
+    };
+    let translations = {
+        enUS: {
+            title: 'Hello World',
+            p1: 'This is a sample of the capabilities of i18n.js by Xaymar. It can translate any kind of data in real time, as long as some kind of key value system is enough.',
+            p2: 'In case you were wondering, you can change the language with the dropdown.',
+            language: 'Language',
+        },
+        enGB: {
+            _base: 'enUS',
+        },
+        deDE: {
+            _base: 'enGB',
+            title: 'Hallo Welt',
+            p1: 'Dies ist ein Beispiel der Fähigkeiten von i18n.js, geschrieben von Xaymar. Es kann alle möglichen Daten in Echtzeitübersetzen, sofern ein Schlüssel-Wert-System genug ist.',
+            p2: 'Du kannst die Sprache mit dem Drop-Down ändern, falls du dich gewundert hattest.',
+            language: 'Sprache',
+        }
+    };
+
+    let defaultLang = 'enUS';
+    let i18n = {
+        language: new I18n('default'),
+        content: new I18n(defaultLang)
+    };
+
+    async function contentSwitchLanguage(language) {
+        if (!i18n.content.hasLanguage(language)) {
+            await i18n.content.loadLanguage(language, translations[language]);
+            console.log('loaded language %s', language);
+        }
+        await i18n.content.domTranslate(language);
+        console.log('translated page to language %s', language);
+    }
+
+    // Load default language
+    let contentPromise = i18n.content.loadLanguage(defaultLang, translations[defaultLang]);
+    let languagePromise = i18n.language.loadLanguage('default', languages);
+
+    // Fill Language Input with values, and hook it up to change the site language
+    let languageInput = document.getElementById('language');
+    for (let language in languages) {
+        let el = document.createElement('option');
+        el.dataset['language'] = language;
+        if (language == defaultLang) {
+            el.defaultSelected = true;
+        }
+        languageInput.appendChild(el);
+    }
+    languageInput.onchange = async (ev) => {
+        languageInput.disabled = true;
+        await contentSwitchLanguage(ev.target.selectedOptions[0].dataset['language']);
+        languageInput.disabled = false;
+    };
+
+    // Log language promise completion.
+    languagePromise.then(async (result) => {
+        console.log('I18n for Language field loaded.');
+        await i18n.language.domTranslate('default', 'data-language');
+        console.log('I18n for Language field ready.');
+    });
+    contentPromise.then(async (result) => {
+        await i18n.content.domTranslate(defaultLang);
+
+    });
+</script>
+
+</html>