split checkboxRadio js util into two separate utils

This commit is contained in:
Felix Hamann 2019-03-03 17:49:17 +01:00
parent 616fdee4fc
commit 18c1cc7466
2 changed files with 37 additions and 10 deletions

View File

@ -82,7 +82,7 @@
checkAllCheckbox.setAttribute('id', getCheckboxId()); checkAllCheckbox.setAttribute('id', getCheckboxId());
th.innerHTML = ''; th.innerHTML = '';
th.insertBefore(checkAllCheckbox, null); th.insertBefore(checkAllCheckbox, null);
utilInstances.push(window.utils.setup('checkboxRadio', checkAllCheckbox)); utilInstances.push(window.utils.setup('checkbox', checkAllCheckbox));
checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput); checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
setupCheckboxListeners(); setupCheckboxListeners();

View File

@ -13,10 +13,16 @@
var utilInstances = []; var utilInstances = [];
// checkboxes / radios // checkboxes
var checkboxes = Array.from(wrapper.querySelectorAll('input[type="checkbox"], input[type="radio"]')); var checkboxes = Array.from(wrapper.querySelectorAll('input[type="checkbox"]'));
checkboxes.filter(isNotInitialized).forEach(function(checkbox) { checkboxes.filter(isNotInitialized).forEach(function(checkbox) {
utilInstances.push(window.utils.setup('checkboxRadio', checkbox)); utilInstances.push(window.utils.setup('checkbox', checkbox));
});
// radios
var radios = Array.from(wrapper.querySelectorAll('input[type="radio"]'));
radios.filter(isNotInitialized).forEach(function(radio) {
utilInstances.push(window.utils.setup('radio', radio));
}); });
// file-uploads // file-uploads
@ -167,17 +173,15 @@
}; };
} }
// turns native checkboxes and radio buttons into custom ones // turns native checkboxes into custom ones
window.utils.checkboxRadio = function(input) { window.utils.checkbox = function(input) {
var type = input.getAttribute('type'); if (!input.parentElement.classList.contains('checkbox')) {
if (!input.parentElement.classList.contains(type)) {
var parentEl = input.parentElement; var parentEl = input.parentElement;
var siblingEl = input.nextElementSibling; var siblingEl = input.nextElementSibling;
var wrapperEl = document.createElement('div'); var wrapperEl = document.createElement('div');
var labelEl = document.createElement('label'); var labelEl = document.createElement('label');
wrapperEl.classList.add(type); wrapperEl.classList.add('checkbox');
labelEl.setAttribute('for', input.id); labelEl.setAttribute('for', input.id);
wrapperEl.appendChild(input); wrapperEl.appendChild(input);
wrapperEl.appendChild(labelEl); wrapperEl.appendChild(labelEl);
@ -195,4 +199,27 @@
}; };
} }
// turns native radio buttons into custom ones
window.utils.radio = function(input) {
if (!input.parentElement.classList.contains('radio')) {
var parentEl = input.parentElement;
var siblingEl = input.nextElementSibling;
var wrapperEl = document.createElement('div');
wrapperEl.classList.add('radio');
wrapperEl.appendChild(input);
if (siblingEl && siblingEl.matches('label')) {
wrapperEl.appendChild(siblingEl);
}
input.classList.add(JS_INITIALIZED_CLASS);
parentEl.appendChild(wrapperEl);
}
return {
destroy: function() {},
};
}
})(); })();