117 lines
4.4 KiB
JavaScript
117 lines
4.4 KiB
JavaScript
// JavaScript code (lcp-svg-repeater.js) to handle adding/removing rows dynamically
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Add row
|
|
document.getElementById('add-svg-row').addEventListener('click', function () {
|
|
const container = document.getElementById('svg-repeater-container');
|
|
const newRow = document.createElement('div');
|
|
newRow.classList.add('repeater-row');
|
|
newRow.innerHTML = `
|
|
<input type="text" name="lcp_custom_svgs[][name]" placeholder="SVG Name" />
|
|
<textarea name="lcp_custom_svgs[][path]" placeholder="SVG Path"></textarea>
|
|
<button type="button" class="remove-row">Remove</button>
|
|
`;
|
|
container.appendChild(newRow);
|
|
});
|
|
|
|
// Remove row
|
|
document.getElementById('svg-repeater-container').addEventListener('click', function (event) {
|
|
if (event.target.classList.contains('remove-row')) {
|
|
event.target.closest('.repeater-row').remove();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// REPEATERS
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Function to add a new row to the repeater
|
|
function addRepeaterRow(repeaterElement) {
|
|
const newRow = repeaterElement.querySelector('.lcp-repeater-row').cloneNode(true); // Clone the first row
|
|
repeaterElement.appendChild(newRow);
|
|
|
|
// Add remove functionality to the new row's remove button
|
|
const removeButton = newRow.querySelector('.remove-row');
|
|
removeButton.addEventListener('click', function() {
|
|
newRow.remove(); // Remove the row when the button is clicked
|
|
});
|
|
}
|
|
|
|
// Find all .lcp-repeater elements in the DOM
|
|
const repeaters = document.querySelectorAll('.lcp-repeater');
|
|
|
|
repeaters.forEach(function(repeaterElement) {
|
|
// Add event listener for the "Add Row" button
|
|
const addButton = repeaterElement.querySelector('.add-row');
|
|
addButton.addEventListener('click', function() {
|
|
addRepeaterRow(repeaterElement); // Add a new row when clicked
|
|
});
|
|
|
|
// Initially, make sure each row has a remove button functionality
|
|
const rows = repeaterElement.querySelectorAll('.lcp-repeater-row');
|
|
rows.forEach(function(row) {
|
|
const removeButton = row.querySelector('.remove-row');
|
|
removeButton.addEventListener('click', function() {
|
|
row.remove(); // Remove the row when the remove button is clicked
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// REPEATERS
|
|
// Example html:
|
|
// <div class="my-repeater-container">
|
|
// <div class="my-repeater-row">
|
|
// <input type="text" name="field_1[]">
|
|
// <input type="text" name="field_2[]">
|
|
// <input type="text" name="field_3[]">
|
|
//<button class="delete-repeater-row">Delete Row</button>
|
|
//</div>
|
|
//<button class="new-repeater-row">Click to add a new row</button>
|
|
//</div>
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Get all repeater containers
|
|
const repeaterContainers = document.querySelectorAll('.my-repeater-container');
|
|
|
|
// Loop through each repeater container and initialize the functionality
|
|
repeaterContainers.forEach(function (container) {
|
|
const newRowButton = container.querySelector('.new-repeater-row');
|
|
const rowTemplate = container.querySelector('.my-repeater-row');
|
|
|
|
// Hide the row template (we will clone it)
|
|
rowTemplate.style.display = 'none';
|
|
|
|
// Add event listener for the 'Add New Row' button
|
|
newRowButton.addEventListener('click', function () {
|
|
// Clone the row template
|
|
const newRow = rowTemplate.cloneNode(true);
|
|
|
|
// Make sure the new row is visible
|
|
newRow.style.display = 'flex'; // or 'block' based on your layout
|
|
|
|
// Reset input values in the new row
|
|
const inputs = newRow.querySelectorAll('input');
|
|
inputs.forEach(input => input.value = '');
|
|
|
|
// Add the new row to the repeater container
|
|
container.insertBefore(newRow, newRowButton);
|
|
});
|
|
|
|
// Handle deleting rows
|
|
container.addEventListener('click', function (e) {
|
|
if (e.target && e.target.classList.contains('delete-repeater-row')) {
|
|
const rowToDelete = e.target.closest('.my-repeater-row');
|
|
if (rowToDelete) {
|
|
rowToDelete.remove();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|