refactor checkbox JS utility

static/css/utils/inputs.scss

@@ -233,8 +233,8 @@ option {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
-}
 
-.file-container__label + .checkbox {
+  .checkbox {
-  margin-left: 12px;
+    margin-left: 12px;
+  }
 }

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:
+   * <input type='checkbox' uw-checkbox>
+   *
+   */
 
-  // turns native checkboxes into custom ones
+  var CHECKBOX_UTIL_NAME = 'checkbox';
-  window.utils.checkbox = function(input) {
+  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', element.id);
-      labelEl.setAttribute('for', input.id);
+
-      wrapperEl.appendChild(input);
+      wrapperEl.appendChild(element);
       wrapperEl.appendChild(labelEl);
 
-      if (siblingEl) {
+      parentEl.insertBefore(wrapperEl, siblingEl);
-        parentEl.insertBefore(wrapperEl, siblingEl);
+
-      } else {
+      element.classList.add(CHECKBOX_INITIALIZED_CLASS);
-        parentEl.appendChild(wrapperEl);
+
-      }
+      return {
+        name: CHECKBOX_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
     }
 
-    return {
+    return init();
-      scope: input,
-      destroy: function() {},
-    };
   }
 
+  inputUtilities.push({
+    name: CHECKBOX_UTIL_NAME,
+    selector: CHECKBOX_UTIL_SELECTOR,
+    setup: checkboxUtil,
+  });
+
   // turns native radio buttons into custom ones
   window.utils.radio = function(input) {
 

templates/multiFileField.hamlet

@@ -6,7 +6,7 @@ $newline never
       <li>
         <div .file-container>
           <label for=#{fuiHtmlId}>#{fuiTitle}
-          <input type="checkbox" uw-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId}>
+          <input type=checkbox uw-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId}>
 
   <div .file-input__info>
     _{MsgPreviouslyUploadedDeletionInfo}
@@ -21,7 +21,7 @@ $# new files
 
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs automatisch entpacken
-  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
+  <input type=checkbox uw-checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
   <div class="tooltip">
     <div class="tooltip__handle">
     <div class="tooltip__content">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.