vicowa-web-components
Version:
56 lines (49 loc) • 2.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-string</title>
<script type="module" src="../../src/vicowa-string/vicowa-string.js"></script>
<script type="module" src="../../src/vicowa-translate/vicowa-translate.js"></script>
<style>
body[lang="en_US"] #english,
body[lang="nl_NL"] #dutch {
background-color: blue;
color: white;
}
</style>
</head>
<body lang="en_US">
<vicowa-translate translation-location="../resources/translations"></vicowa-translate>
<div id="translations">
<button id="english">English</button>
<button id="dutch">Nederlands</button>
</div>
Text as "string" attribute
<ul>
<li><vicowa-string string="test string 1"></vicowa-string></li>
<li><vicowa-string string="test string 2 %1$s element" plural-number=1 parameters='["1"]'></vicowa-string></li>
<li><vicowa-string string="test string 2 %1$s element" plural-number=2 parameters='["2"]'></vicowa-string></li>
<li><vicowa-string string="test string %2$s %1$s %3$s" parameters='["first", "second", "third"]'></vicowa-string></li>
</ul>
Text as vicowa-string content, advantage here is that if there is no javascript support or web component support the text will still show up.
Obviously any dynamic behavior like insertion of data will not work in that case.
<ul>
<li>The following is empty: <vicowa-string></vicowa-string></li>
<li><vicowa-string >test string 1</vicowa-string></li>
<li><vicowa-string plural-number=1 parameters='["1"]'>test string 2 %1$s element</vicowa-string></li>
<li><vicowa-string plural-number=2 parameters='["2"]'>test string 2 %1$s element</vicowa-string></li>
<li><vicowa-string parameters='["first", "second", "third"]'>test string %2$s %1$s %3$s</vicowa-string></li>
</ul>
<script type="module">
import translator from '../../src/utilities/translate.js';
// setup the translator
translator.addTranslationUpdatedObserver((p_Translator) => {
document.body.setAttribute('lang', p_Translator.language);
}, null);
translator.language = document.body.getAttribute('lang');
document.querySelector('#english').addEventListener('click', () => { translator.language = 'en_US'; });
document.querySelector('#dutch').addEventListener('click', () => { translator.language = 'nl_NL'; });
</script>
</body>
</html>