86 lines
3.1 KiB
Plaintext
86 lines
3.1 KiB
Plaintext
{% assign content_type = content_type | default: 'awdawd' %}
|
|
|
|
{% if content_type == 'init' %}
|
|
|
|
<script type="text/javascript">
|
|
// create new html tag called "shx-drehteller"
|
|
|
|
class MyCustomElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
// element functionality written in here
|
|
this.currentVariant = null;
|
|
|
|
this.videoClones = {};
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `<div>Hello, world!</div>`;
|
|
}
|
|
|
|
initCurrentVariant(id) {
|
|
this.currentVariant = id;
|
|
|
|
// edit inner html
|
|
this.reloadCurrentVariant(id, true);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
// Clean up the element when it is removed from the DOM.
|
|
}
|
|
|
|
reloadCurrentVariant(id, openAnimation = false) {
|
|
this.currentVariant = id;
|
|
|
|
// edit inner html
|
|
this.innerHTML = `<div>Current variant: ${this.currentVariant}</div>`;
|
|
|
|
document.querySelectorAll('[thumbnail-alt-mobile]').forEach((thumbnail) => {
|
|
console.log(thumbnail.getAttribute('thumbnail-alt-mobile'));
|
|
if (thumbnail.getAttribute('thumbnail-alt-mobile') === "__" + this.currentVariant) {
|
|
let video = thumbnail.querySelector('.shx-video');
|
|
|
|
if (video) {
|
|
|
|
// clone video to shadow dom
|
|
let videoClone = null;
|
|
if (this.videoClones[this.currentVariant]) {
|
|
videoClone = this.videoClones[this.currentVariant];
|
|
} else {
|
|
videoClone = video.cloneNode(true);
|
|
this.videoClones[this.currentVariant] = videoClone;
|
|
}
|
|
|
|
this.appendChild(videoClone);
|
|
|
|
// get video element
|
|
let videoElement = this.querySelector('.shx-video');
|
|
videoElement.classList.add('shx-video-for-desc');
|
|
|
|
if(openAnimation) {
|
|
//animejs fade in
|
|
|
|
videoElement.style.height = '0ox';
|
|
|
|
anime({
|
|
targets: videoElement,
|
|
height: '100%',
|
|
duration: 300,
|
|
easing: 'easeOutQuad'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
customElements.define('shx-drehteller', MyCustomElement);
|
|
</script>
|
|
|
|
|
|
{% endif %} |