vicowa-web-components
Version:
106 lines (94 loc) • 6.16 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-string</title>
<script type="module" src="../../vicowa-image-gallery/vicowa-image-gallery.js"></script>
<script type="module" src="../../vicowa-translate/vicowa-translate.js"></script>
<style>
body[lang="en_US"] #english,
body[lang="nl_NL"] #dutch {
background-color: blue;
color: white;
}
#gallery4 {
--vicowa-image-gallery-tile-width: 150px;
--vicowa-image-gallery-tile-height: 100px;
}
#gallery5 {
margin-top: 1em;
}
vicowa-image-gallery > div[slot="custom-tile"] {
display: none;
}
</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>
<div>
<h3>Gallery1</h3>
All defaults
<vicowa-image-gallery id="gallery1"></vicowa-image-gallery>
</div>
<div>
<h3>Gallery2</h3>
No grid description and no grid tooltips
<vicowa-image-gallery id="gallery2" no-grid-description no-grid-tooltip></vicowa-image-gallery>
</div>
<div>
<h3>Gallery3</h3>
No grid description, no grid tooltips, no carousel description, no carousel tooltip
<vicowa-image-gallery id="gallery3" no-grid-description no-grid-tooltip no-carousel-description no-carousel-tooltip></vicowa-image-gallery>
</div>
<div>
<h3>Gallery4</h3>
No grid description, custom width and height
<vicowa-image-gallery id="gallery4" no-grid-description></vicowa-image-gallery>
</div>
<script type="module">
import translator from '../../utilities/translate.js';
import { createQuickAccess } from '/third_party/web-component-base-class/dist/tools.js';
const availableItems = createQuickAccess(document.body, 'id');
// 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'; });
const imageProvider = {
getImages() {
return new Promise((resolve) => {
resolve([
{ thumbNail: ["../resources/images/image1.jpg"], description: 'some description', tooltip: 'some tooltip' },
{ fullSize: ["../resources/images/image2.jpg"], description: 'Long description that will not fit on one line', tooltip: 'long tooltip, that will probably be wrapped by the system to make it not into a crazy long box' },
{ thumbNail: ["../resources/images/image3.jpg"], fullSize: ["../resources/images/image3.jpg"], description: 'description for image 3', tooltip: 'tooltip for image 3' },
{ thumbNail: ["../resources/images/image4.jpg"], fullSize: ["../resources/images/image4.jpg"], description: 'description for image 4', tooltip: 'tooltip for image 4' },
{ thumbNail: ["../resources/images/image5.jpg"], fullSize: ["../resources/images/image5.jpg"], description: 'description for image 5', tooltip: 'tooltip for image 5' },
{ thumbNail: ["../resources/images/image6.webp", "../resources/images/image6.jpg"], fullSize: ["../resources/images/image6.webp", "../resources/images/image6.jpg"], description: 'description for image 6', tooltip: 'tooltip for image 6' },
{ thumbNail: ["../resources/images/image7.webp", "../resources/images/image7.jpg"], fullSize: ["../resources/images/image7.webp", "../resources/images/image7.jpg"], description: 'description for image 7', tooltip: 'tooltip for image 7' },
{ thumbNail: ["../resources/images/image8.jpg"], fullSize: ["../resources/images/image8.jpg"], description: 'description for image 8', tooltip: 'tooltip for image 8' },
{ thumbNail: ["../resources/images/image1.jpg"], fullSize: ["../resources/images/image1.jpg"], description: 'description for image 1', tooltip: 'tooltip for image 1' },
{ thumbNail: ["../resources/images/image2.jpg"], fullSize: ["../resources/images/image2.jpg"], description: 'description for image 2', tooltip: 'tooltip for image 2' },
{ thumbNail: ["../resources/images/image3.jpg"], fullSize: ["../resources/images/image3.jpg"], description: 'description for image 3 again', tooltip: 'tooltip for image 3 again' },
{ thumbNail: ["../resources/images/image4.jpg"], fullSize: ["../resources/images/image4.jpg"], description: 'description for image 4 again', tooltip: 'tooltip for image 4 again' },
{ thumbNail: ["../resources/images/image5.jpg"], fullSize: ["../resources/images/image5.jpg"], description: 'description for image 5 again', tooltip: 'tooltip for image 5 again' },
{ thumbNail: ["../resources/images/image6.webp", "../resources/images/image6.jpg"], fullSize: ["../resources/images/image6.webp", "../resources/images/image6.jpg"], description: 'description for image 6 again', tooltip: 'tooltip for image 6 again' },
{ thumbNail: ["../resources/images/image7.webp", "../resources/images/image7.jpg"], fullSize: ["../resources/images/image7.webp", "../resources/images/image7.jpg"], description: 'description for image 7 again', tooltip: 'tooltip for image 7 again' },
{ thumbNail: ["../resources/images/image8.jpg"], fullSize: ["../resources/images/image8.jpg"], description: 'description for image 8 again', tooltip: 'tooltip for image 8 again' },
{ thumbNail: ["../resources/images/image1.jpg"], fullSize: ["../resources/images/image1.jpg"], description: 'description for image 1 again', tooltip: 'tooltip for image 9 again' },
]);
});
}
};
availableItems.gallery1.onAttached = (p_Control) => { p_Control.setImageProvider(imageProvider); };
availableItems.gallery2.onAttached = (p_Control) => { p_Control.setImageProvider(imageProvider); };
availableItems.gallery3.onAttached = (p_Control) => { p_Control.setImageProvider(imageProvider); };
availableItems.gallery4.onAttached = (p_Control) => { p_Control.setImageProvider(imageProvider); };
</script>
</body>
</html>