shx-3d-render

main
Jan Umbach 2024-06-13 16:18:48 +02:00
parent cf0f474eb0
commit b4812c98fe
1 changed files with 10 additions and 9 deletions

View File

@ -15,7 +15,6 @@
{% endcomment %}
<shx-input-forms>
<p>shx-input-forms</p>
</shx-input-forms>
{% if product.images.size > 0 %}
@ -55,10 +54,12 @@
super();
// element functionality written in here
this.currentVariant = null;
this.container = null;
}
connectedCallback() {
this.innerHTML = "";
this.innerHTML = '<div class="shx-input-forms-container"></div>;
this.container = this.querySelector('.shx-input-forms-container');
}
initCurrentVariant(id) {
@ -76,7 +77,7 @@
this.currentVariant = id;
// edit inner html
this.innerHTML = "";
this.container.innerHTML = "";
for(let key in globalInputFormsObj) {
if(key === this.currentVariant) {
@ -89,18 +90,18 @@
if(openAnimation) {
// calculate of this height
let height = this.offsetHeight;
let height = this.container.offsetHeight;
this.style.height = '0px';
this.container.style.height = '0px';
function animate() {
anime({
targets: this,
targets: this.container,
height: height,
duration: 500,
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
complete: function() {
this.style.height = 'auto';
this.container.style.height = 'auto';
}
});
}
@ -116,9 +117,9 @@
});
}
} else {
this.style.opacity = 0;
this.container.style.opacity = 0;
anime({
targets: this,
targets: this.container,
opacity: 1,
duration: 500,
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'