multiple file uploads in one form possible

closes #18

templates/default-layout.lucius

@@ -23,6 +23,7 @@
 
   /* THEME INDEPENDENT COLORS */
   --errorbase: red;
+  --warningbase: #fe7700;
 
 
   /* FONTS */

templates/widgets/form.julius

@@ -6,47 +6,92 @@
   }
 
   // makes <label> smaller if <input> is focussed
-  window.utils.reactiveInputLabel = function(input, label, staticLabel) {
+  window.utils.reactiveInputLabel = function(input, label) {
     // updates to dom
-    if (staticLabel === true) {
-      label.classList.remove('reactive-label');
-    }
     if (input.value.length > 0) {
-      if (staticLabel === false) {
+      label.classList.add('reactive-label--small');
-        label.classList.add('reactive-label--small');
-      }
-      if (label.parentElement.classList.contains('form-group')) {
-        label.parentElement.classList.add('form-group--valid');
-      }
-    } else {
-      label.parentElement.classList.remove('form-group--valid');
     }
     // add event listeners
-    if (staticLabel === false) {
+    input.addEventListener('focus', function() {
-      input.addEventListener('focus', function() {
+      label.classList.add('reactive-label--small');
-        label.classList.add('reactive-label--small');
+    });
-      });
+    label.addEventListener('click', function() {
-      label.addEventListener('click', function() {
+      label.classList.add('reactive-label--small');
-        label.classList.add('reactive-label--small');
+      input.focus();
-        input.focus();
+    });
-      });
+    input.addEventListener('blur', function() {
-      input.addEventListener('blur', function() {
+      if (input.value.length < 1) {
-        if (input.value.length < 1) {
+        label.classList.remove('reactive-label--small');
-          label.classList.remove('reactive-label--small');
-        }
-      });
-    }
-    input.addEventListener('input', function() {
-      if (label.parentElement.classList.contains('form-group')) {
-        if (input.value.length > 0) {
-          label.parentElement.classList.add('form-group--valid');
-        } else {
-          label.parentElement.classList.remove('form-group--valid');
-        }
       }
     });
   };
 
+  window.utils.reactiveFormGroup = function(formGroup, input, listen) {
+    // updates to dom
+    if (input.value.length > 0) {
+      formGroup.classList.add('form-group--valid');
+    } else {
+      formGroup.classList.remove('form-group--valid');
+    }
+    // add event listeners if told to listen
+    if (listen) {
+      input.addEventListener('input', function() {
+        console.log(input, 'got inpit');
+        if (input.value.length > 0) {
+          formGroup.classList.add('form-group--valid');
+        } else {
+          formGroup.classList.remove('form-group--valid');
+        }
+      });
+    }
+  };
+
+  window.utils.reactiveFileUpload = function(input, parent) {
+    var currInputCount = 0;
+    function showAddMore(destInput) {
+      var addMore = document.createElement('div');
+      addMore.classList.add('form-group__add-entry');
+      addMore.addEventListener('click', function() {
+        if (addMore.classList.contains('form-group__remove-entry')) {
+          addMore.remove();
+          destInput.remove();
+          currInputCount--;
+          updateParent();
+        } else {
+          addMore.classList.remove('form-group__add-entry');
+          addMore.classList.add('form-group__remove-entry');
+          var nextInput = document.createElement('input');
+          nextInput.setAttribute('name', destInput.getAttribute('name'));
+          nextInput.setAttribute('type', 'file');
+          addListener(nextInput);
+          parent.appendChild(nextInput);
+        }
+      });
+      parent.appendChild(addMore);
+    }
+    function updateParent() {
+      if (currInputCount > 0) {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.add('form-group--valid')
+        }
+      } else {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.remove('form-group--valid')
+        }
+      }
+    }
+    function addListener(destInput) {
+      destInput.addEventListener('change', function(event) {
+        if (destInput.value.length > 0) {
+          currInputCount++;
+          showAddMore(destInput);
+        }
+        updateParent();
+      });
+    }
+    addListener(input);
+  }
+
   // registers input-listener for each element in <elements> (array) and
   // enables <button> if <fn> for these elements returns true
   window.utils.reactiveButton = function(elements, button, fn) {
@@ -76,11 +121,23 @@ document.addEventListener('DOMContentLoaded', function() {
 
   Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
     var input = document.querySelector('#' + label.getAttribute('for'));
-    // dont be reactive if input is date, or checkbox/radioox
+    var parent = label.parentElement;
-      var type = input.getAttribute('type');
+    var type = input.getAttribute('type');
-      var badinputs = ['date', 'checkbox', 'radio', 'hidden'];
+    var isFileInput = /file/i.test(type);
-      var badregex = RegExp(badinputs.join('|'));
+    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
-    window.utils.reactiveInputLabel(input, label, badregex.test(type));
+    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
+
+    if (isInFormGroup) {
+      window.utils.reactiveFormGroup(parent, input, isListening);
+    }
+    if (isFileInput) {
+      window.utils.reactiveFileUpload(input, parent);
+    }
+    if (isListening) {
+      window.utils.reactiveInputLabel(input, label);
+    } else {
+      label.classList.remove('reactive-label');
+    }
   });
 
   // auto reactiveButton submit-buttons with required fields

templates/widgets/form.lucius

@@ -79,12 +79,13 @@ textarea:focus {
 .form-group {
   position: relative;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+  grid-template-columns: repeat(3, minmax(150px, max-content));
   align-items: center;
   margin: 10px 0;
   margin-left: -20px;
   padding-left: 10px;
   border-left: 8px solid transparent;
+  min-height: 30px;
 }
 
 .form-group--required {
@@ -98,6 +99,41 @@ textarea:focus {
 .form-group--has-error {
   border-left: 8px solid var(--errorbase) !important;
 }
+.form-group__add-entry,
+.form-group__remove-entry {
+  display: block;
+  width: 40px;
+  height: 30px;
+  background-color: var(--lightbase);
+  border-radius: 2px;
+  position: relative;
+  grid-column-start: 3;
+}
+.form-group__remove-entry {
+  background-color: var(--warningbase);
+}
+.form-group__remove-entry::after {
+  content: none;
+}
+.form-group__add-entry::before,
+.form-group__add-entry::after,
+.form-group__remove-entry::after {
+  content: '';
+  position: absolute;
+}
+.form-group__add-entry::before {
+  width: 4px;
+  height: 20px;
+  background-color: white;
+  transform: translate(18px, 5px);
+}
+.form-group__add-entry::after,
+.form-group__remove-entry::after {
+  width: 20px;
+  height: 4px;
+  background-color: white;
+  transform: translate(10px, 13px);
+}
 
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
@@ -241,3 +277,9 @@ input[type="checkbox"]:checked::after {
     /*font-size: 14px;*/
   }
 }
+
+
+/* CUSTOM FILE INPUT */
+input[type="file"] {
+  grid-column-start: 2;
+}