vicowa-web-components
Version:
89 lines (76 loc) • 3.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-string</title>
<script type="module" src="../../src/vicowa-image-container/vicowa-image-container.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;
}
vicowa-image-container {
width: 200px;
height: 200px;
box-shadow: 2px 2px 8px grey;
}
#lazyload-notvisible {
position: relative;
top: 4000px;
}
.bottom-spacer {
position: relative;
top: 5000px;
height: 10px;
}
.features {
font-family: sans-serif;
font-size: 15px;
}
.not-webp {
color: red;
font-weight: bold;
}
.webp .not-webp {
display: none;
}
</style>
</head>
<body lang="en_US">
<div class="features">
<p>webP support <span class="not-webp">Not</span> detected</p>
</div>
<vicowa-translate translation-location="../resources/translations"></vicowa-translate>
<div id="translations">
<button id="english">English</button>
<button id="dutch">Nederlands</button>
</div>
<vicowa-image-container id="img1" src="../resources/images/image1.jpg"></vicowa-image-container>
<vicowa-image-container id="img2" src="../resources/images/image2.jpg" description="image 2"></vicowa-image-container>
<vicowa-image-container id="img3" src="../resources/images/image3.jpg" tooltip="image 3"></vicowa-image-container>
<vicowa-image-container id="img4" src="../resources/images/image4.jpg" alt="Some image depicting something"></vicowa-image-container>
<vicowa-image-container id="img5" src="../resources/images/image5.jpg" description="image 6" tooltip="img 6" alt="Depicts something else"></vicowa-image-container>
<vicowa-image-container id="img6" src="../resources/images/image6.jpg" alternates='["../resources/images/image6.webp"]'></vicowa-image-container>
<vicowa-image-container id="img7" alternates='["../resources/images/image7.webp", "../resources/images/image7.jpg"]'></vicowa-image-container>
<vicowa-image-container id="img8" alternates='["../resources/images/image8.jpg"]'></vicowa-image-container>
<vicowa-image-container id="lazyload-visible" lazyload alternates='["../resources/images/image7lazy.jpg"]'></vicowa-image-container>
<vicowa-image-container id="lazyload-notvisible" lazyload alternates='["../resources/images/image8lazy.jpg"]'></vicowa-image-container>
<div class="bottom-spacer">End of page</div>
<script type="module">
import translator from '../../src/utilities/translate.js';
import features from '../../src/utilities/featureDetect.js';
if (features.webp) {
document.body.classList.add('webp');
}
// 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>