Merge branch 'feat/file_inputs' into 'master'

Small refinements and Multi-File-Checkboxes for previously uploaded files

See merge request !19

templates/home.hamlet

@@ -67,5 +67,26 @@
       Knopf-Test:
         <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
           ^{btnWdgt}
-    <li>
+    $if True
-      <button type="button" .toggler>Klick mich für Modal
+    $# meant to be 'if js-supported'
+      <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">

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 {

templates/standalone/inputs.lucius

@@ -138,7 +138,6 @@ input[type="checkbox"]:checked::after {
 .checkbox,
 .radio {
   position: relative;
-  margin: 3px;
 
   > [type="checkbox"],
   > [type="radio"] {
@@ -147,8 +146,9 @@ input[type="checkbox"]:checked::after {
 
   > label {
     display: block;
-    padding: 7px 13px 7px 30px;
+    height: 30px;
-    background-color: var(--darkbase);
+    width: 30px;
+    background-color: var(--greybase);
     border-radius: 4px;
     color: white;
     cursor: pointer;
@@ -158,8 +158,8 @@ input[type="checkbox"]:checked::after {
   > label::after {
     content: '';
     position: absolute;
-    top: 15px;
+    top: 14px;
-    left: 4px;
+    left: 5px;
     display: block;
     width: 20px;
     height: 20px;
@@ -170,13 +170,13 @@ input[type="checkbox"]:checked::after {
   > label::before {
     width: 20px;
     height: 2px;
-    transform: scale(0.8, 0.1);
+    transform: scale(0.1, 0.1);
   }
 
   > label::after {
     width: 20px;
     height: 2px;
-    transform: scale(0.8, 0.1);
+    transform: scale(0.1, 0.1);
   }
 
   > :checked + label {
@@ -184,12 +184,27 @@ input[type="checkbox"]:checked::after {
     text-decoration: underline;
   }
 
-  &:hover > label::before,
+  &:hover > label {
+    background-color: var(--lighterbase);
+  }
+
+  &:hover > label::before {
+    transform: scale(0.8, 0.4);
+  }
+
   > :checked + label::before {
     transform: scale(1, 1) rotate(45deg);
   }
 
-  &:hover > label::after,
+  > :checked + label:hover::after,
+  > :checked + label:hover::before {
+    transform: scale(1, 1) rotate(0deg);
+  }
+
+  &:hover > label::after {
+    transform: scale(0.8, 0.4);
+  }
+
   > :checked + label::after {
     transform: scale(1, 1) rotate(-45deg);
   }
@@ -248,25 +263,34 @@ input[type="file"].js-file-input {
   outline: 0;
   border: 0;
 }
-.file-input__container {
+.file-input__container,
+.file-checkbox__container {
   grid-column-start: 2;
   display: flex;
   justify-content: space-between;
 }
 .file-input__label,
-.file-input__remover {
+.file-input__remover,
+.file-checkbox__label,
+.file-checkbox__remover {
   display: block;
   border-radius: 2px;
   padding: 5px 13px;
   color: var(--whitebase);
   cursor: pointer;
 }
-.file-input__label {
+.file-input__label,
+.file-checkbox__label {
   text-align: left;
   position: relative;
   height: 30px;
 }
-.file-input__label.btn {
+.file-checkbox__label {
+  background-color: var(--greybase);
+  text-decoration: line-through;
+}
+.file-input__label.btn,
+.file-checkbox__label.btn {
   padding: 5px 13px;
 }
 .file-input__label::after,
@@ -288,6 +312,9 @@ input[type="file"].js-file-input {
 .file-input__label::before {
   transform: translate(-50%, -50%);
 }
+.file-checkbox__checkbox {
+  margin-left: 10px;
+}
 .file-input__remover {
   display: none;
   width: 40px;
@@ -309,6 +336,15 @@ input[type="file"].js-file-input {
 .file-input__container--valid > .file-input__label {
   background-color: var(--lightbase);
 }
+.file-checkbox__container--valid > .file-checkbox__label {
+  text-decoration: none;
+  background-color: var(--lighterbase);
+
+  &:hover {
+    background-color: var(--greybase);
+    text-decoration: line-through;
+  }
+}
 .file-input__container--valid > .file-input__label::before,
 .file-input__container--valid > .file-input__label::after {
   content: none;
@@ -317,7 +353,8 @@ input[type="file"].js-file-input {
   display: block;
 }
 @media (max-width: 999px) {
-  .file-input__container {
+  .file-input__container,
+  .file-checkbox__container {
     grid-column-start: 1;
   }
 }

templates/widgets/modal.hamlet

@@ -9,7 +9,9 @@
       <label .reactive-label for="inp2">Kürzel
       <input type="text" id="inp2">
     <div .form-group>
-      <label .reactive-label for="inp3">Semester
+      <label .reactive-label for="inp3">Aktiv?
-      <input type="text" id="inp3">
+      <div .checkbox>
+        <input id="inp3" name="f2" type="checkbox">
+        <label for="inp3">
     <div .form-group>
       <input type="submit" value="Submit">