shx-3d-render

snippets/shx-3d-render-input.liquid

@@ -30,6 +30,25 @@
 
 <script type="text/javascript">
 
+    let globalInputFormsObj = {
+        "test1": {
+            "value": {
+                "text1": "test"
+            },
+            "renderHTML": () => { 
+                return `
+                    <div id="shx-3d-render-input-container">
+                        <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>  
+                        <label class="form__label custom" for="your-label">Dein Text</label>
+                        <div class="field custom">
+                            <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="your-label" name="properties[Your label]" value="${this.value.text1}">
+                        </div>
+                    </div>
+                `;
+            }
+        }
+    };
+
     // create new html tag called "shx-input-forms"
     class InputFormsElement extends HTMLElement {
         constructor() {
@@ -58,7 +77,53 @@
 
             // edit inner html
             this.innerHTML = "";
+
+            for(let key in globalInputFormsObj) {
+                if(key === this.currentVariant) {
+                    this.innerHTML = globalInputFormsObj[key].renderHTML();
+                }
+            }
+
             console.log('reloadCurrentVariant', id, openAnimation);
+
+
+            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)'
+                    });
+            }
         }
     }