local-content-pro/assets/js/lcp-ui.js

/* ACCORDION */
document.addEventListener('DOMContentLoaded', function () {
    // Find all elements with the class "lcp-accordion"
    var accordions = document.querySelectorAll('.lcp-accordion');

    accordions.forEach(function (accordion) {
        // Find all tabs within the current accordion
        var tabs = accordion.querySelectorAll('.lcp-accordion-tab');
        
        tabs.forEach(function (tab) {
            var header = tab.querySelector('h3');
            var content = tab.querySelector('.lcp-accordion-content');
            
            // Add click event to each header to toggle the content
            header.addEventListener('click', function () {
                // Toggle the 'active' class on the tab to show/hide content
                tab.classList.toggle('active');

                // Optional: Close other open tabs (if only one tab should be open at a time)
                tabs.forEach(function (otherTab) {
                    if (otherTab !== tab) {
                        otherTab.classList.remove('active');
                    }
                });
            });
        });
    });





});

/* TABS */
document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.tab-link');
    const panes = document.querySelectorAll('.tab-pane');
    const tabContainer = document.querySelector('.lcp-tab-container'); // The parent container

    // Only enable the hash functionality if the container has the class '.lcp-support-hash'
    if (tabContainer && tabContainer.classList.contains('lcp-support-hash')) {
        
        // Function to set the active tab based on the hash in the URL
        function setActiveTabFromHash() {
            const hash = window.location.hash; // Get the current URL hash
            if (hash) {
                const targetTab = document.querySelector(`.tab-link[data-tab="${hash.substring(1)}"]`); // Remove '#' from hash
                const targetPane = document.getElementById(hash.substring(1));

                // If both tab and pane exist, make them active
                if (targetTab && targetPane) {
                    tabs.forEach(link => link.classList.remove('active'));
                    panes.forEach(pane => pane.classList.remove('active'));

                    targetTab.classList.add('active');
                    targetPane.classList.add('active');
                } else {
                    console.error(`Tab or pane with ID '${hash}' not found.`);
                }
            }
        }

        // Set the active tab from the hash when the page loads
        setActiveTabFromHash();
    }
        // Handle tab clicks
        tabs.forEach(tab => {
            tab.addEventListener('click', function (event) {
                event.preventDefault();

                // Remove active class from all tabs and panes
                tabs.forEach(link => link.classList.remove('active'));
                panes.forEach(pane => pane.classList.remove('active'));

                // Add active class to the clicked tab
                tab.classList.add('active');

                // Get the target pane and update URL hash
                const targetPaneId = tab.dataset.tab;
                const targetPane = document.getElementById(targetPaneId);

                // Check if targetPane exists before trying to manipulate it
                if (targetPane) {
                    targetPane.classList.add('active');
                    if (tabContainer && tabContainer.classList.contains('lcp-support-hash')){
                    window.location.hash = targetPaneId; // Update the URL hash
                }
                } else {
                    console.error(`Tab pane with ID '${targetPaneId}' not found.`);
                }
            });
        });
    
});

/* REPEATER */
document.addEventListener('DOMContentLoaded', function() {
    // Function to initialize each repeater instance
    function initRepeater(repeater) {
        const firstRow = repeater.querySelector('.lcp-repeater-row');

        // Function to check if all required fields are filled
        function isRequiredFieldsFilled(row) {
            const requiredFields = row.querySelectorAll('[data-lcp-required="true"], [data-lcp-required-for-new-row="true"]');
            let valid = true;

            requiredFields.forEach(input => {
                // Check input type and value for validation
                if (input.type === 'number' && (input.value === '' || isNaN(input.value))) {
                    valid = false;
                } else if (input.type === 'checkbox' && !input.checked) {
                    valid = false;
                }
            });

            return valid;
        }

        // Function to create a new row by cloning the first row
        function addRepeaterRow() {
            const newRow = firstRow.cloneNode(true); // true means deep cloning (includes children)

            const inputs = newRow.querySelectorAll('input');
            inputs.forEach(input => input.value = '');  // Reset value for input fields
            newRow.querySelector('input[type="checkbox"]').checked = false; // Uncheck the checkbox

            repeater.insertBefore(newRow, repeater.querySelector('.lcp-repeater-add-row'));

            toggleAddRowButton();
            toggleSubmitButton();
        }

        // Function to toggle the "Add Row" button based on the required field for new rows
        function toggleAddRowButton() {
            const addRowButton = repeater.querySelector('.lcp-repeater-add-row');
            const rows = repeater.querySelectorAll('.lcp-repeater-row');

            let validForNewRow = true;

            rows.forEach(row => {
                const requiredForNewRowFields = row.querySelectorAll('[data-lcp-required-for-new-row="true"]');
                requiredForNewRowFields.forEach(input => {
                    if (input.value === '' || (input.type === 'checkbox' && !input.checked)) {
                        validForNewRow = false;
                    }
                });
            });

            addRowButton.disabled = !validForNewRow;
        }

        // Function to toggle the "Submit" button based on the validation of all rows
        function toggleSubmitButton() {
            const submitButton = repeater.querySelector('.lcp-repeater-submit');
            const rows = repeater.querySelectorAll('.lcp-repeater-row');

            let allValid = true;

            rows.forEach(row => {
                if (!isRequiredFieldsFilled(row)) {
                    allValid = false;
                }
            });

            submitButton.disabled = !allValid;
        }

        // Function to handle form submission, ensuring all required fields are filled
        function handleSubmit(event) {
            const submitButton = event.target;
            const actionType = submitButton.getAttribute('data-lcp-action'); // This will be used to pass data to the handler
            const rows = repeater.querySelectorAll('.lcp-repeater-row');
            let allValid = true;

            rows.forEach(row => {
                if (!isRequiredFieldsFilled(row)) {
                    allValid = false;
                }
            });

            if (allValid) {
                const repeaterData = [];

                rows.forEach(function(row) {
                    const rowData = {};
                    const inputs = row.querySelectorAll('input');

                    inputs.forEach(function(input) {
                        const key = input.getAttribute('data-lcp-repeater-key');
                        let value;

                        if (input.type === 'checkbox') {
                            value = input.checked; // Boolean value for checkbox
                        } else {
                            value = input.value; // Text or number inputs
                        }

                        rowData[key] = value; // Add key-value pair to rowData
                    });

                    repeaterData.push(rowData); // Add rowData to the repeaterData array
                });

                // Now just pass the data off to the handler
                if (typeof window[actionType] === 'function') {
                    window[actionType](repeaterData); // Calls the function (e.g., `lcpUpdateImageSizes`)
                }
            } else {
                alert("Please fill in all required fields.");
            }
        }

        // Event listener for adding a new row when a user clicks the "Add Row" button
        const addRowButtons = repeater.querySelectorAll('.lcp-repeater-add-row');
        addRowButtons.forEach(button => {
            button.addEventListener('click', function() {
                if (isRequiredFieldsFilled(firstRow)) {
                    addRepeaterRow();
                } else {
                    alert('Please fill in the required fields to add a new row.');
                }
            });
        });

        // Event listener for submitting the repeater form
        const submitButton = repeater.querySelector('.lcp-repeater-submit');
        submitButton.addEventListener('click', handleSubmit);

        // Initial validation for the add row button
        toggleAddRowButton();

        // Initial validation for the submit button
        toggleSubmitButton();

        // Added event listeners to handle any changes in input and trigger validation
        repeater.addEventListener('input', function() {
            toggleAddRowButton(); // Revalidate Add Row button
            toggleSubmitButton(); // Revalidate Submit button
        });
    }

    // Initialize each repeater on the page
    const repeaters = document.querySelectorAll('.lcp-repeater');
    repeaters.forEach(repeater => {
        initRepeater(repeater);
    });
});