diff --git a/static/css/utils/inputs.scss b/static/css/utils/inputs.scss index 08cc8fe63..8169ec170 100644 --- a/static/css/utils/inputs.scss +++ b/static/css/utils/inputs.scss @@ -233,8 +233,8 @@ option { display: flex; align-items: center; margin-bottom: 10px; -} -.file-container__label + .checkbox { - margin-left: 12px; + .checkbox { + margin-left: 12px; + } } diff --git a/static/js/utils/inputs.js b/static/js/utils/inputs.js index 294fbae05..eca09c94a 100644 --- a/static/js/utils/inputs.js +++ b/static/js/utils/inputs.js @@ -175,33 +175,72 @@ setup: fileInputUtil, }) + /** + * + * Checkbox Utility + * wraps native checkbox + * + * Attribute: uw-checkbox + * (element must be an input of type='checkbox') + * + * Example usage: + * + * + */ - // turns native checkboxes into custom ones - window.utils.checkbox = function(input) { + var CHECKBOX_UTIL_NAME = 'checkbox'; + var CHECKBOX_UTIL_SELECTOR = 'input[type="checkbox"][uw-checkbox]'; + + var CHECKBOX_CLASS = 'checkbox'; + var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized'; + + var checkboxUtil = function(element) { + + function init() { + if (!element) { + throw new Error('Checkbox utility cannot be setup without an element!'); + } + + if (element.classList.contains(CHECKBOX_INITIALIZED_CLASS)) { + throw new Error('Checkbox utility already initialized!'); + } + + if (element.parentElement.classList.contains(CHECKBOX_CLASS)) { + throw new Error('Checkbox element\'s wrapper already has class "' + CHECKBOX_CLASS + '"!'); + } + + var siblingEl = element.nextElementSibling; + var parentEl = element.parentElement; - if (!input.parentElement.classList.contains('checkbox')) { - var parentEl = input.parentElement; - var siblingEl = input.nextElementSibling; var wrapperEl = document.createElement('div'); + wrapperEl.classList.add(CHECKBOX_CLASS); + var labelEl = document.createElement('label'); - wrapperEl.classList.add('checkbox'); - labelEl.setAttribute('for', input.id); - wrapperEl.appendChild(input); + labelEl.setAttribute('for', element.id); + + wrapperEl.appendChild(element); wrapperEl.appendChild(labelEl); - if (siblingEl) { - parentEl.insertBefore(wrapperEl, siblingEl); - } else { - parentEl.appendChild(wrapperEl); - } + parentEl.insertBefore(wrapperEl, siblingEl); + + element.classList.add(CHECKBOX_INITIALIZED_CLASS); + + return { + name: CHECKBOX_UTIL_NAME, + element: element, + destroy: function() {}, + }; } - return { - scope: input, - destroy: function() {}, - }; + return init(); } + inputUtilities.push({ + name: CHECKBOX_UTIL_NAME, + selector: CHECKBOX_UTIL_SELECTOR, + setup: checkboxUtil, + }); + // turns native radio buttons into custom ones window.utils.radio = function(input) { diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet index 17c46197a..c64686d47 100644 --- a/templates/multiFileField.hamlet +++ b/templates/multiFileField.hamlet @@ -6,7 +6,7 @@ $newline never