ba-block-cli
Version:
Auto-create blocks for WordPress ACF
112 lines (98 loc) • 5.04 kB
JavaScript
// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
// Find all compare sections
const compares = document.querySelectorAll('.compare-section');
if (compares && compares.length > 0) {
compares.forEach(function(compare) {
if (compare) {
// Related form
var relatedFormSelector = compare.getAttribute('data-related-form'),
relatedForm = false;
if (relatedFormSelector) {
var relatedFormContainer = document.getElementById(relatedFormSelector);
if (relatedFormContainer) {
var relatedForm = relatedFormContainer.querySelector('form');
}
}
// Add select
if (relatedForm) {
var packageType = relatedForm.querySelector('[name="package-type"]');
if (packageType) {
// Get packages
var packageLabels = compare.querySelectorAll('.package > .label'),
packageOptions = false;
if (packageLabels && packageLabels.length > 0) {
packageLabels.forEach(function(packageLabel) {
var pl = packageLabel.textContent;
packageOptions += '<option value="'+pl+'">'+pl+'</option>';
});
}
if (packageOptions) {
// Create package select
var packageSelect = document.createElement('select');
packageSelect.setAttribute('class', 'form-select');
packageSelect.setAttribute('name', 'package-type');
packageSelect.innerHTML = packageOptions;
// Update form
packageType.parentNode.replaceChild(packageSelect, packageType);
}
}
}
// Switcher
const items = compare.querySelectorAll('.package-switcher .item');
if (items && items.length > 0) {
items.forEach(function(item) {
// On item click
item.addEventListener('click', function() {
// Remove active classes
items.forEach(function(i) {
i.classList.remove('active');
});
// Change the prices
var selector = this.getAttribute('data-selector'),
changables = compare.querySelectorAll('.changable');
if (changables && changables.length > 0) {
changables.forEach(function(changable) {
if (changable.classList.contains(selector)) {
changable.classList.remove('d-none');
} else {
changable.classList.add('d-none');
}
});
}
// Activate this one
this.classList.add('active');
// Form change
if (relatedForm) {
var paymentType = relatedForm.querySelector('[name="payment-type"]');
if (paymentType) {
paymentType.value = this.textContent;
}
}
});
});
}
// Choose package
const chooses = compare.querySelectorAll('.js-choose');
if (chooses && chooses.length > 0) {
chooses.forEach(function(choose) {
// On item click
choose.addEventListener('click', function() {
// Get package name
var packageName = this.getAttribute('data-choose');
// Form change
if (relatedForm) {
var packageType = relatedForm.querySelector('[name="package-type"]');
console.log(relatedForm);
console.log(packageType);
if (packageType) {
packageType.value = packageName;
}
}
});
});
}
}
});
}
});