171 lines
6.6 KiB
Plaintext
171 lines
6.6 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 DrehTellerElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
// element functionality written in here
|
|
this.currentVariant = null;
|
|
|
|
this.video_wrapper_Clones = {};
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = "";
|
|
}
|
|
|
|
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 = "";
|
|
|
|
document.querySelectorAll('[thumbnail-alt-mobile]').forEach((thumbnail) => {
|
|
//console.log(thumbnail.getAttribute('thumbnail-alt-mobile'));
|
|
if (thumbnail.getAttribute('thumbnail-alt-mobile') === "__" + this.currentVariant) {
|
|
let videoWrapper = thumbnail.querySelector('.shx-video');
|
|
|
|
if (videoWrapper) {
|
|
|
|
// clone video to shadow dom
|
|
let videoWrapperClone = null;
|
|
if (this.video_wrapper_Clones[this.currentVariant]) {
|
|
videoWrapperClone = this.video_wrapper_Clones[this.currentVariant];
|
|
} else {
|
|
videoWrapperClone = videoWrapper.cloneNode(true);
|
|
this.video_wrapper_Clones[this.currentVariant] = videoWrapperClone;
|
|
}
|
|
|
|
this.appendChild(videoWrapperClone);
|
|
|
|
|
|
videoWrapperClone.classList.add('shx-video-for-desc');
|
|
|
|
// get video element
|
|
let videoElement = videoWrapperClone.querySelector('video');
|
|
// move video element out of his parent
|
|
videoWrapperClone.appendChild(videoElement);
|
|
|
|
|
|
// delete shx-video__wrapper element
|
|
videoWrapperClone.querySelector('.shx-video__wrapper').remove();
|
|
|
|
|
|
// pause all video
|
|
Object.keys(this.video_wrapper_Clones).forEach((key) => {
|
|
if (key !== this.currentVariant) {
|
|
this.video_wrapper_Clones[key].querySelector('video').pause();
|
|
}
|
|
});
|
|
|
|
videoElement.play();
|
|
|
|
if(openAnimation) {
|
|
// calculate of videoWrapperClone height
|
|
let height = videoWrapperClone.offsetHeight;
|
|
|
|
videoWrapperClone.style.height = '0px';
|
|
|
|
function animate() {
|
|
anime({
|
|
targets: videoWrapperClone,
|
|
height: height,
|
|
duration: 500,
|
|
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
|
|
complete: function() {
|
|
videoWrapperClone.style.height = 'auto';
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
//animejs fade in
|
|
//dom ready
|
|
|
|
if (document.getElementById('animejs-script').readyState === 'complete' || document.getElementById('animejs-script').readyState === 'loaded'){
|
|
animate();
|
|
} else {
|
|
document.getElementById('animejs-script').addEventListener('load', function() {
|
|
animate();
|
|
});
|
|
}
|
|
} else {
|
|
videoWrapperClone.style.opacity = 0;
|
|
anime({
|
|
targets: videoWrapperClone,
|
|
opacity: 1,
|
|
duration: 500,
|
|
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
class CustomVariantDescriptionElement extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
// "variant" is the id of the variant
|
|
this.variant = null;
|
|
this.currentVariant = null;
|
|
}
|
|
|
|
initVariantDescription(id) {
|
|
this.currentVariant = id;
|
|
|
|
// edit inner html
|
|
this.updateVariantDescription(id);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.style.display = 'none';
|
|
// "variant" is the id of the variant
|
|
this.variant = this.getAttribute('variant');
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
// Clean up the element when it is removed from the DOM.
|
|
}
|
|
|
|
updateVariantDescription(id) {
|
|
this.currentVariant = id;
|
|
|
|
//console.log(this.variant, this.currentVariant);
|
|
if(this.variant === this.currentVariant) {
|
|
this.style.display = 'block';
|
|
} else {
|
|
this.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
customElements.define('shx-drehteller', DrehTellerElement);
|
|
customElements.define('shx-variant-description', CustomVariantDescriptionElement);
|
|
</script>
|
|
|
|
|
|
{% endif %} |