asynchrones JavaScript
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
Sieht jetzt so aus:
lib/language-names.json:
~~~json
{
"de": "deutsch",
"en": "English",
"es": "español",
"tlh": "tlhIngan Hol"
}
~~~
lib/language-names.de.json:
~~~json
{
"de": "deutsch",
"en": "englisch",
"es": "spanisch",
"tlh": "klingonisch"
}
~~~
config/available-languages:
~~~json
["de", "es", "en"]
~~~
Markup (HTML):
~~~HTML
<ul id="lang-menu">
<template id="lang-menu-item">
<li><a></a></li>
</template>
<script src="lang-menu.js" async=""></script>
</ul>
~~~
lang-menu.js:
~~~JavaScript
var currentLanguage = document.documentElement.lang;
var urls = [
'config/available-languages.json',
'lib/language-names.json',
'lib/language-names.' + currentLanguage + '.json'
];
Promise.all(
urls.map(
url => fetch(url).then(response => response.json())
)
).then(values => {
var [availableLanguages, languageNames, localLanguageNames] = values;
var template = document.querySelector('#lang-menu-item');
availableLanguages.forEach(lang => {
if (lang != currentLanguage)
{
var clone = template.content.cloneNode(true);
var liElement = clone.querySelector('li');
var aElement = liElement.querySelector('a');
aElement.href = '?lang=' + lang;
aElement.hreflang = lang;
aElement.lang = lang;
aElement.textContent = languageNames[lang] || lang;
liElement.title = localLanguageNames[lang] || '';
template.parentNode.appendChild(clone);
}
});
});
~~~
Daraus generiertes Markup (DOM), wenn wir uns auf der deutschsprachigen Seite befinden (`<html lang="de">`{: .language-html}:
~~~HTML
<ul id="lang-menu">
<template id="lang-menu-item"></template>
<script src="lang-menu.js" async=""></script>
<li title="englisch"><a href="?lang=en" hreflang=en" lang=en">English</a></li>
<li title="spanisch"><a href="?lang=es" hreflang=es" lang=es">español</a></li>
</ul>
~~~
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)