Asli: custom toggle for descriptions

(function () {
    function triggerResize() {
        app.componentsManager.instances.disposable.filter(instance => instance && instance.name === 'Grid').forEach(instance => {
            if (instance && typeof instance._updateGrid) {
                instance._updateGrid();
            }
        });

        app.refresher.run();
    }

    function toggleHeight(el, show = true, duration = 0.3) {
        if (duration === 0) {
            gsap.set(el, {
                height: show ? 'auto' : 0,
                onComplete: triggerResize.bind(triggerResize)
            });
        } else {
            gsap.to(el, {
                height: show ? 'auto' : 0,
                duration,
                onComplete: triggerResize.bind(triggerResize),
                onUpdate: triggerResize.bind(triggerResize),
            });
        }
    }

    function initToggleMore(scope) {
    if (!scope) {
        return;
    }

    [...scope.querySelectorAll('.typography-description')].forEach((el) => {
        const toggleEllement = el.closest('[data-post-id]'); // select element to toggle more on click
        const parentEl = el.parentElement;
        const checkboxEl = document.createElement('input');
        const labelEl = document.createElement('label');
        const textEl = document.createElement('span');

        el.classList.add('toggle-more__target', 'overflow-hidden', 'd-block');

        // Set initial state checked or unchecked
        // checkboxEl.setAttribute('checked', 'checked'); // checked
        checkboxEl.removeAttribute('checked'); // unchecked

        checkboxEl.setAttribute('type', 'checkbox');
        checkboxEl.classList.add('toggle-more__checkbox');

        labelEl.classList.add('toggle-more__label');

        // textEl.textContent = 'Read more';
        textEl.classList.add('toggle-more__text');

        labelEl.appendChild(textEl);
        labelEl.appendChild(checkboxEl);
        labelEl.appendChild(el);

        parentEl.appendChild(labelEl);

        checkboxEl.addEventListener('change', (event) => {
            toggleHeight(el, checkboxEl.checked);
        });

        if (toggleEllement) {
            toggleEllement.classList.add('toggle-more', 'no-ajax', 'cursor-highlight');
            toggleEllement.addEventListener('click', (event) => {
                // Exclude inner links and buttons
                if (!event.target.closest('a') && !event.target.closest('button') ) {
                    event.preventDefault();
                    checkboxEl.checked = !checkboxEl.checked;
                    checkboxEl.dispatchEvent(new Event('change'));
                }
            });
        } else {
            labelEl.classList.add('cursor-highlight', 'pointer-events-inner-none');
        }

        // Set initial state
        toggleHeight(el, checkboxEl.checked, 0);
    });
}


    if (!!app?.options?.isElementorEditor) {
        console.log('Loading Elementor editor...');
        window.addEventListener('elementor/frontend/init', () => {
            console.log('Elementor editor loaded.');

            const masonryGridSkins = [
                'no-filter',
                'filter-top',
                'filter-sidebar',
            ];

            masonryGridSkins.forEach((skin) => {
                elementorFrontend.hooks.addAction(`frontend/element_ready/asli-widget-masonry-grid.${skin}`, ($scope) => {
                    const scope = $scope.get(0);

                    initToggleMore(scope);
                });
            });
        });
    } else {
        initToggleMore(app?.elements?.content);
    }
})();