From de31a4e253d727409e39de5392ad37de382ce4d5 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Fri, 30 Mar 2018 03:00:03 +0200
Subject: [PATCH] added frontend multi-file support for previously uploaded
 files

---
 templates/home.hamlet              | 23 ++++++++++++++++--
 templates/standalone/inputs.julius | 39 ++++++++++++++++++++++++++++--
 templates/widgets/modal.hamlet     |  2 +-
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/templates/home.hamlet b/templates/home.hamlet
index 4a42b7ce7..cd45490d2 100644
--- a/templates/home.hamlet
+++ b/templates/home.hamlet
@@ -69,5 +69,24 @@
           ^{btnWdgt}
     $if True
     $# meant to be 'if js-supported'
-      <li>
-        <button type="button" .toggler>Klick mich für Modal
+      <li><br>
+        Modals:
+        <button type="button" .toggler>Klick mich
+
+    <li><br>
+      Multi-File-Input für bereits hochgeladene Dateien:
+      <form>
+        <div .form-group>
+          <label .form-group__label>Datei(en)
+          $# file 1
+          <div .file-checkbox__container>
+            <label .file-checkbox__label.reactive-label.btn for="f2-1">Datenschutz.txt
+            <div .checkbox>
+              <input .file-checkbox id="f2-1" name="f2" value="Datenschutz.txt" type="checkbox">
+              <label for="f2-1">
+          $# file 2
+          <div .file-checkbox__container>
+            <label .file-checkbox__label.reactive-label.btn for="f2-2">fill-db.hs
+            <div .checkbox>
+              <input .file-checkbox id="f2-2" name="f2" value="fill-db.hs" type="checkbox">
+              <label for="f2-2">
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index 3337777cf..024d9fc18 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -148,6 +148,36 @@
     setup();
   }
 
+  // to remove previously uploaded files
+  window.utils.reactiveFileCheckbox = function(input, label, parent) {
+    // adds eventlistener(s)
+    function addListener(container) {
+      input.addEventListener('change', function(event) {
+        container.classList.toggle('file-checkbox__container--valid', this.checked);
+      });
+    }
+
+    // initial setup
+    function setup() {
+      var cont = input.parentNode;
+      while (cont !== document.body) {
+        if (cont.classList.contains('file-checkbox__container')) {
+          break;
+        }
+        cont = cont.parentNode;
+      }
+
+      // take care of properly moving elements
+      if (input.parentNode.classList.contains('checkbox')) {
+        input.parentNode.classList.add('file-checkbox__checkbox');
+      } else {
+        input.classList.add('file-checkbox__checkbox');
+      }
+      addListener(cont);
+    }
+    setup();
+  }
+
   window.utils.reactiveFormGroup = function(formGroup, input) {
     // updates to dom
     if (input.value.length > 0) {
@@ -179,16 +209,21 @@ document.addEventListener('DOMContentLoaded', function() {
 
     var parent = label.parentElement;
     var type = input.getAttribute('type');
-    var isFileInput = /file/i.test(type);
+    var isFileUpload = /file/i.test(type);
+    var isFileCheckbox = input.classList.contains('file-checkbox');
     var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
     var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
 
+
     if (isInFormGroup) {
       window.utils.reactiveFormGroup(parent, input);
     }
-    if (isFileInput) {
+    if (isFileUpload) {
       window.utils.reactiveFileUpload(input, parent);
     }
+    if (isFileCheckbox) {
+      window.utils.reactiveFileCheckbox(input, label, parent);
+    }
     if (isListening) {
       window.utils.reactiveInputLabel(input, label);
     } else {
diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet
index 3de0c76d4..7c2b7f899 100644
--- a/templates/widgets/modal.hamlet
+++ b/templates/widgets/modal.hamlet
@@ -11,7 +11,7 @@
     <div .form-group>
       <label .reactive-label for="inp3">Aktiv?
       <div .checkbox>
-        <input .js-file-checkbox id="inp3" name="f2" type="checkbox">
+        <input id="inp3" name="f2" type="checkbox">
         <label for="inp3">
     <div .form-group>
       <input type="submit" value="Submit">