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());
th.innerHTML = '';
th.insertBefore(checkAllCheckbox, null);
utilInstances.push(window.utils.setup('checkboxRadio', checkAllCheckbox));
utilInstances.push(window.utils.setup('checkbox', checkAllCheckbox));
checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
setupCheckboxListeners();

View File

@ -13,10 +13,16 @@
var utilInstances = [];
// checkboxes / radios
var checkboxes = Array.from(wrapper.querySelectorAll('input[type="checkbox"], input[type="radio"]'));
// checkboxes
var checkboxes = Array.from(wrapper.querySelectorAll('input[type="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
@ -167,17 +173,15 @@
};
}
// turns native checkboxes and radio buttons into custom ones
window.utils.checkboxRadio = function(input) {
// turns native checkboxes into custom ones
window.utils.checkbox = function(input) {
var type = input.getAttribute('type');
if (!input.parentElement.classList.contains(type)) {
if (!input.parentElement.classList.contains('checkbox')) {
var parentEl = input.parentElement;
var siblingEl = input.nextElementSibling;
var wrapperEl = document.createElement('div');
var labelEl = document.createElement('label');
wrapperEl.classList.add(type);
wrapperEl.classList.add('checkbox');
labelEl.setAttribute('for', input.id);
wrapperEl.appendChild(input);
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() {},
};
}
})();