Changes to repeater ui, and completed MVP for custom image sizes

assets/js/lcp-ui.js

@@ -94,3 +94,157 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     
 });
+
+/* 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);
+    });
+});
+