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

{% assign content_type = content_type | default: 'body' %}

{% if content_type == 'body' %}

{% comment %}

<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]">
    </div>
</div>

{% endcomment %}

<shx-input-forms>
</shx-input-forms>

{% if product.images.size > 0 %}
  {% assign main_image = product.images.first %}
  <!-- Display the alt text -->
  <p>Main Image Alt Text: {{ main_image.alt }}</p>
{% else %}
  <p>No images available for this product.</p>
{% endif %}

{% elsif content_type == 'init' %}

<style>
    .shx-input-forms-container {
        overflow: hidden;
        
    }
</style>

<script type="text/javascript">

    let globalInputFormsObjValues = {
        "test1": {
            "text1": "test"            
        },
        "test2": {
            "text1": "test1",
            "text2": "test2"
        }
    };

    function genTextInput(inputID, labelText, inputName, inputVal) {
        return `
            <label class="form__label custom" for="${inputID}-label">${labelText}</label>
            <div class="field custom">
                <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="${inputID}" name="properties[${inputName}]" value="${inputVal}">
            </div>
        `;
    }

    let globalInputFormsObj = {
        "test1": {
            "renderHTML": () => {
                let html = ` 
                    <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
                `;

                html += genTextInput('custom-text-1', 'Custom Text 1', 'Custom Text 1', globalInputFormsObjValues['test1']['text1']);

                return html;
            }
        },"test2": {
            "renderHTML": () => { 
                let html = ` 
                    <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
                `;

                html += genTextInput('custom-text-1', 'Custom Text 1', 'Custom Text 1', globalInputFormsObjValues['test2']['text1']);
                html += genTextInput('custom-text-2', 'Custom Text 2', 'Custom Text 2', globalInputFormsObjValues['test2']['text2']);

                return html;
            }
        }
    };

    // create new html tag called "shx-input-forms"
    class InputFormsElement extends HTMLElement {
        constructor() {
            super();
            // element functionality written in here
            this.currentVariant = null;
            this.container = null;
        }

        connectedCallback() {
            this.innerHTML = '<div class="shx-input-forms-container"></div>';
            this.container = this.querySelector('.shx-input-forms-container');
        }

        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;
            let container = this.container;

            // edit inner html
            container.innerHTML = "";

            for(let key in globalInputFormsObj) {
                if(key === this.currentVariant) {
                    container.innerHTML = globalInputFormsObj[key].renderHTML();
                }
            }

            if(!container) {
                console.error('container not found');
                return;
            }



            console.log('reloadCurrentVariant', id, openAnimation);


            if(openAnimation) {
                // calculate of this height
                let height = container.offsetHeight;

                

                container.style.height = '0px';

                function animate() {
                    anime({
                        targets: container,
                        height: height,
                        duration: 500,
                        easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
                        complete: function() {
                            container.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 {
                container.style.opacity = 0;
                anime({
                        targets: container,
                        opacity: 1,
                        duration: 500,
                        easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
                    });
            }
        }
    }

    customElements.define('shx-input-forms', InputFormsElement);


</script>

{% endif %}