Changes to repeater ui, and completed MVP for custom image sizes
This commit is contained in:
Jeremy Rangel
32
assets/js/custom-image-sizes.js
Normal file
32
assets/js/custom-image-sizes.js
Normal file
@ -0,0 +1,32 @@
|
||||
function lcpUpdateImageSizes(imageSizes) {
|
||||
// Validate the input to ensure it's an array
|
||||
if (!Array.isArray(imageSizes)) {
|
||||
console.error('Invalid image sizes data');
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare the form data to send to WordPress to update the theme settings
|
||||
const updateData = new FormData();
|
||||
updateData.append('action', 'update_lcp_theme_settings'); // WordPress action hook
|
||||
updateData.append('image_sizes', JSON.stringify(imageSizes)); // Send image sizes as a JSON string
|
||||
updateData.append('nonce', customImageSizeAjax.nonce); // Send the nonce
|
||||
|
||||
console.log('Sending data to AJAX:', updateData); // Log the data for debugging
|
||||
|
||||
// Send the AJAX request
|
||||
fetch(customImageSizeAjax.ajax_url, {
|
||||
method: 'POST',
|
||||
body: updateData, // Send form data directly
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
console.log('Theme settings updated successfully.');
|
||||
} else {
|
||||
console.error('Failed to update theme settings:', data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating theme settings:', error);
|
||||
});
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log("I Tried"); // This will log the button element to the console
|
||||
|
||||
// Check if the 'Import Demo Posts' button exists
|
||||
const importButton = document.getElementById('import-demo-posts');
|
||||
@ -42,9 +41,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn('Import button not found.');
|
||||
}
|
||||
}
|
||||
|
||||
// Check if the 'Delete Demo Posts' button exists
|
||||
const deleteButton = document.getElementById('delete-demo-posts');
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user