Merge branch 'feat/file_upload_ui' into 'master'

Simplified File Upload

See merge request !34

messages/de.msg

@@ -14,7 +14,7 @@ CourseEditOk       tid@TermIdentifier courseShortHand@Text: Kurs #{termToText ti
 CourseNewDupShort  tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht erstellt werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
 CourseEditDupShort tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht geändert werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
 FFSheetName: Name
-TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid} 
+TermCourseListHeading tid@TermIdentifier: Kursübersicht #{termToText tid}
 TermCourseListTitle tid@TermIdentifier: Kurse #{termToText tid}
 CourseEditHeading: Kurs editieren/anlegen
 CourseEditTitle: Kurs editieren/anlegen
@@ -75,3 +75,5 @@ SheetExercise: Aufgabenstellung
 SheetHint: Hinweise
 SheetSolution: Lösung
 SheetMarking: Korrekturhinweise
+
+MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)

templates/multiFileField.hamlet

@@ -7,8 +7,15 @@ $forall FileUploadInfo{..} <- fileInfos
       <label for=#{fuiHtmlId}>
 
 $# new files
-<input type="file" name=#{fieldName} multiple>
+<input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
+
+<div .file-input__multi-info>
+    _{MsgMultiFileUploadInfo}
 
 <div .file-input__unpack>
-  <label for=#{fieldId}_zip>ZIPs entpacken
+  <label for=#{fieldId}_zip>ZIPs automatisch entpacken
-  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
+  <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
+  <span .unpack-zip-info-toggler>?
+
+$# TODO: make modal available in this scope
+$# ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}

templates/multiFileField.lucius

@@ -0,0 +1,38 @@
+.file-input__unpack {
+  font-size: .9rem;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  .checkbox {
+    display: inline-block;
+    margin-left: 5px;
+  }
+}
+
+.file-input__multi-info {
+  font-size: .9rem;
+  font-style: italic;
+  margin-top: 10px;
+  color: var(--color-fontsec);
+}
+
+.unpack-zip-info-toggler {
+  background-color: var(--color-dark);
+  border-radius: 50%;
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 1.2rem;
+  color: white;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.file-input__list {
+  margin-left: 15px;
+  margin-top: 10px;
+  font-weight: 600;
+}

templates/standalone/inputs.julius

@@ -4,133 +4,67 @@
   window.utils = window.utils || {};
 
   // allows for multiple file uploads with separate inputs
-  window.utils.reactiveFileUpload = function(input, formGroup) {
+  window.utils.initializeFileUpload = function(input) {
-    var currValidInputCount = 0;
+    var isMulti = input.hasAttribute('multiple');
-    var addMore = false;
+    var fileList = isMulti ? addFileList() : null;
-    var inputName = input.getAttribute('name');
+    var label = addFileLabel();
-    var isMulti = input.hasAttribute('multiple') ? true : false;
-    var wrapper = formGroup;
-    // FileInput PseudoClass
-    function FileInput(container, input, label, remover) {
-      this.container = container;
-      this.input = input;
-      this.label = label;
-      this.remover = remover;
-      addListener(this);
 
-      this.addTo = function(parentElement) {
+    function renderFileList(files) {
-        parentElement.appendChild(this.container);
+      fileList.innerHTML = '';
-      }
+      Array.from(files).forEach(function(file, index) {
-      this.remove = function() {
+        var fileDisplayEl = document.createElement('li');
-        this.container.remove();
+        fileDisplayEl.innerHTML = file.name;
-      }
+        fileList.appendChild(fileDisplayEl);
-      this.wasValid = function() {
+      });
-        return this.container.classList.contains('file-input__container--valid');
-      }
     }
-    function addNextInput() {
+
-      var inputs = wrapper.querySelectorAll('.file-input__container');
+    function updateLabel(files) {
-      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
+      if (files.length) {
-        makeInput(inputName).addTo(wrapper);
-      }
-    }
-    // updates submitbutton and form-group-stripe
-    function updateForm() {
-      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
-      formGroup.classList.remove('form-group--has-error');
-      if (currValidInputCount > 0) {
-        if (formGroup.classList.contains('form-group')) {
-          formGroup.classList.add('form-group--valid')
-        }
         if (isMulti) {
-          addNextInput();
+          label.innerText = files.length + ' Dateien ausgwählt';
+        } else {
+          label.innerHTML = files[0].name;
         }
       } else {
-        if (formGroup.classList.contains('form-group')) {
+        resetFileLabel();
-          formGroup.classList.remove('form-group--valid')
-        }
       }
     }
-    // addseventlistener destInput
-    function addListener(fileInput) {
-      fileInput.input.addEventListener('change', function(event) {
-        if (fileInput.input.value.length > 0) {
-          // update label
-          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
-          var fileName = filePath[filePath.length - 1];
-          fileInput.label.innerHTML = fileName;
-          // increase count if this field was empty previously
-          if (!fileInput.wasValid()) {
-            currValidInputCount++;
-          }
-          fileInput.container.classList.add('file-input__container--valid')
-          // show next input
-        } else {
-          if (isMulti) {
-            currValidInputCount--;
-          }
-          clearInput(fileInput);
-        }
-        updateForm();
-      });
-      fileInput.input.addEventListener('focus', function() {
-        fileInput.container.classList.add('pseudo-focus');
-      });
-      fileInput.input.addEventListener('blur', function() {
-        fileInput.container.classList.remove('pseudo-focus');
-      });
-      fileInput.remover.addEventListener('click', function() {
-        if (fileInput.wasValid()) {
-          currValidInputCount--;
-        }
-        clearInput(fileInput);
-      });
-    }
 
-    // clears or removes fileinput based on multi-file or not
+    function addFileList() {
-    function clearInput(fileInput) {
+      var list = document.createElement('ol');
-      if (isMulti) {
+      list.classList.add('file-input__list');
-        fileInput.remove();
+      var unpackEl = input.parentElement.querySelector('.file-input__unpack');
+      if (unpackEl) {
+        input.parentElement.insertBefore(list, unpackEl);
       } else {
-        fileInput.container.classList.remove('file-input__container--valid')
+        input.parentElement.appendChild(list);
-        fileInput.label.innerHTML = '';
       }
-      updateForm();
+      return list;
     }
-    // create new wrapped input element with name name
+
-    function makeInput(name) {
+    function addFileLabel() {
-      var cont =      document.createElement('div');
+      var label = document.createElement('label');
-      var desc =      document.createElement('label');
+      label.classList.add('file-input__label');
-      var nextInput = document.createElement('input');
+      label.setAttribute('for', input.id);
-      var remover =   document.createElement('div');
+      input.parentElement.insertBefore(label, input);
-      cont.classList.add('file-input__container');
+      return label;
-      desc.classList.add('file-input__label', 'btn');
-      nextInput.classList.add('js-file-input');
-      desc.setAttribute('for', name + '-' + currValidInputCount);
-      remover.classList.add('file-input__remover');
-      nextInput.setAttribute('id', name + '-' + currValidInputCount);
-      nextInput.setAttribute('name', name);
-      nextInput.setAttribute('type', 'file');
-      cont.appendChild(nextInput);
-      cont.appendChild(desc);
-      cont.appendChild(remover);
-      return new FileInput(cont, nextInput, desc, remover);
     }
+
+    function resetFileLabel() {
+      // interpolate translated String here
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
+    }
+
     // initial setup
-    function setup() {
+    resetFileLabel();
-      var newInput = makeInput(inputName);
+    input.classList.add('file-input__input--hidden');
+    input.addEventListener('change', function() {
       if (isMulti) {
-        wrapper = document.createElement('div');
+        renderFileList(input.files);
-        wrapper.classList.add('file-input__wrapper');
-        console.log(wrapper);
-        // TODO: fix file input
-        formGroup.insertBefore(wrapper, input);
       }
-      input.remove();
+
-      newInput.addTo(wrapper);
+      updateLabel(input.files);
-      updateForm();
+    });
-    }
-    setup();
   }
 
   // to remove previously uploaded files
@@ -167,6 +101,7 @@
 
     if (!input.parentElement.classList.contains(type)) {
       var parentEl = input.parentElement;
+      var siblingEl = input.nextElementSibling;
       var wrapperEl = document.createElement('div');
       var labelEl = document.createElement('label');
       wrapperEl.classList.add(type);
@@ -174,7 +109,11 @@
       wrapperEl.appendChild(input);
       wrapperEl.appendChild(labelEl);
 
-      parentEl.appendChild(wrapperEl);
+      if (siblingEl) {
+        parentEl.insertBefore(wrapperEl, siblingEl);
+      } else {
+        parentEl.appendChild(wrapperEl);
+      }
     }
   }
 
@@ -194,11 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // initialize file-upload-fields
   Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
-    var formGroup = inp.parentNode;
+    window.utils.initializeFileUpload(inp);
-    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
-      formGroup = formGroup.parentNode;
-    }
-    window.utils.reactiveFileUpload(inp, formGroup);
   });
 
   // initialize file-checkbox-fields

templates/standalone/inputs.lucius

@@ -11,11 +11,12 @@ form {
   grid-template-columns: 1fr 3fr;
   grid-gap: 5px;
   justify-content: flex-start;
-  align-items: baseline;
+  align-items: center;
+  padding: 4px;
   border-left: 2px solid transparent;
 
   + .form-group {
-    margin-top: 17px;
+    margin-top: 13px;
   }
 }
 
@@ -23,6 +24,22 @@ form {
   font-weight: 600;
 }
 
+.form-group--required {
+
+  .form-group__label::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+}
+
+.form-group--has-error {
+  background-color: rgba(255, 0, 0, 0.1);
+
+  input, textarea {
+    border-color: var(--color-error) !important;
+  }
+}
+
 @media (max-width: 768px) {
   .form-group {
     grid-template-columns: 1fr;
@@ -63,33 +80,6 @@ input[type*="time"] {
   min-width: 240px;
 }
 
-.form-group--required {
-
-  .form-group__label::before {
-    content: '*';
-    position: absolute;
-    left: -14px;
-  }
-
-  input, textarea {
-    border-bottom-color: var(--color-primary);
-  }
-}
-
-.form-group--valid {
-
-  input, textarea {
-    border-bottom-color: var(--color-success);
-  }
-}
-
-.form-group--has-error {
-
-  input, textarea {
-    border-bottom-color: var(--color-error);
-  }
-}
-
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
@@ -128,6 +118,20 @@ textarea:focus {
   outline: 0;
 }
 
+/* OPTIONS */
+select,
+option {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 4px 13px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  outline: 0;
+  color: #363636;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+}
+
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
   position: relative;
@@ -176,9 +180,10 @@ input[type="checkbox"]:checked::after {
 
   label {
     display: block;
-    height: 30px;
+    height: 24px;
-    width: 30px;
+    width: 24px;
-    background-color: var(--color-grey);
+    background-color: #f3f3f3;
+    box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
     border-radius: 4px;
     color: white;
     cursor: pointer;
@@ -188,25 +193,14 @@ input[type="checkbox"]:checked::after {
   label::after {
     content: '';
     position: absolute;
-    top: 14px;
+    top: 11px;
-    left: 5px;
+    left: 3px;
     display: block;
-    width: 20px;
+    width: 18px;
-    height: 20px;
+    height: 2px;
-    background-color: white;
+    background-color: var(--color-font);
     transition: all .2s;
-  }
+    transform: scale(0.5, 0.1);
-
-  label::before {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
-  }
-
-  label::after {
-    width: 20px;
-    height: 2px;
-    transform: scale(0.1, 0.1);
   }
 
   :checked + label {
@@ -215,10 +209,12 @@ input[type="checkbox"]:checked::after {
   }
 
   :checked + label::before {
+    background-color: white;
     transform: scale(1, 1) rotate(45deg);
   }
 
   :checked + label::after {
+    background-color: white;
     transform: scale(1, 1) rotate(-45deg);
   }
 }
@@ -243,114 +239,17 @@ input[type="checkbox"]:checked::after {
 }
 
 /* CUSTOM FILE INPUT */
-input[type="file"].js-file-input {
+.file-input__label {
-  color: white;
-  width: 0.1px;
-  height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-  outline: 0;
-  border: 0;
-}
-.file-input__wrapper {
-  grid-column-start: 2;
-}
-.file-input__container,
-.file-checkbox__container,
-.file-input__unpack {
-  grid-column-start: 2;
-  margin: 4px 0;
-}
-.file-input__label,
-.file-input__remover,
-.file-checkbox__label,
-.file-checkbox__remover {
-  display: block;
-  border-radius: 2px;
-  padding: 5px 13px;
-  color: var(--color-lightwhite);
   cursor: pointer;
-}
+  display: inline-block;
-.file-input__label,
-.file-checkbox__label {
-  text-align: left;
-  position: relative;
-  height: 30px;
-}
-.file-checkbox__label {
-  background-color: var(--color-grey);
-  text-decoration: line-through;
-}
-.file-input__label.btn,
-.file-checkbox__label.btn {
-  padding: 5px 13px;
-}
-.file-input__label::after,
-.file-input__label::before {
-  position: absolute;
-  content: '';
-  background-color: white;
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  top: 50%;
-  left: 12px;
-  left: 50%;
-}
-
-.file-input__label::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-.file-input__label::before {
-  transform: translate(-50%, -50%);
-}
-.file-checkbox__checkbox {
-  margin-left: 10px;
-}
-.file-input__remover {
-  display: none;
-  width: 40px;
-  height: 30px;
-  text-align: center;
-  background-color: var(--color-warning);
-  position: relative;
-  margin-left: 10px;
-}
-.file-input__remover::before {
-  position: absolute;
-  content: '';
-  width: 16px;
-  height: 2px;
-  top: 14px;
-  left: 12px;
-  background-color: white;
-}
-.file-input__container--valid > .file-input__label {
   background-color: var(--color-light);
+  color: white;
+  padding: 10px 17px;
+  border-radius: 3px;
 }
-.file-checkbox__container--checked > .file-checkbox__label {
+.file-input__list {
-  text-decoration: none;
-  background-color: var(--color-lighter);
 
-  &.btn:hover {
-    background-color: var(--color-lighter);
-    text-decoration: line-through;
-  }
 }
-.file-input__container--valid > .file-input__label::before,
+.file-input__input--hidden {
-.file-input__container--valid > .file-input__label::after {
+  display: none;
-  content: none;
-}
-.file-input__container--valid > .file-input__remover {
-  display: block;
-}
-@media (max-width: 768px) {
-  .file-input__wrapper,
-  .file-input__container,
-  .file-checkbox__container,
-  .file-input__unpack {
-    grid-column-start: 1;
-  }
 }

templates/widgets/form.hamlet

@@ -6,7 +6,6 @@ $case formLayout
       <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label for=#{fvId view}>#{fvLabel view}
-        $# TODO: inputs should have proper placeholders
         <div .form-group__input>
           $# FIXME: file-input does not have `required` attribute, although set on form-group
           ^{fvInput view}

templates/widgets/form.julius

@@ -3,23 +3,25 @@
 
   window.utils = window.utils || {};
 
-  // registers input-listener for each element in <elements> (array) and
+  // registers input-listener for each element in <inputs> (array) and
-  // enables <button> if <validation> for these elements returns true
+  // enables <button> if <validation> for these inputs returns true
-  window.utils.reactiveButton = function(elements, button, validation) {
+  window.utils.reactiveButton = function(form, button, validation) {
-    if (elements.length == 0) {
+    var requireds = Array.from(form.querySelectorAll('[required]'));
+    if (requireds.length == 0) {
       return false;
     }
-    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
-    var eventType = checkboxes ? 'change' : 'input';
     updateButtonState();
-    elements.forEach(function(el) {
+
+    requireds.forEach(function(el) {
+      var checkbox = el.getAttribute('type') === 'checkbox';
+      var eventType = checkbox ? 'change' : 'input';
       el.addEventListener(eventType, function() {
         updateButtonState();
       });
     });
 
     function updateButtonState() {
-      if (validation.call(null, elements) === true) {
+      if (validation.call(null, requireds) === true) {
         button.removeAttribute('disabled');
       } else {
         button.setAttribute('disabled', 'true');
@@ -33,19 +35,21 @@ document.addEventListener('DOMContentLoaded', function() {
   // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
-    var requireds = form.querySelectorAll('[required]');
     var submitBtn = form.querySelector('[type=submit]');
-    if (submitBtn && requireds) {
+    if (submitBtn) {
-      window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) {
+      window.utils.reactiveButton(form, submitBtn, validateForm);
-        var done = true;
-        inputs.forEach(function(inp) {
-          var len = inp.value.trim().length;
-          if (done && len === 0) {
-            done = false;
-          }
-        });
-        return done;
-      });
     }
   });
+
+  function validateForm(inputs) {
+    var done = true;
+    inputs.forEach(function(inp) {
+      var len = inp.value.trim().length;
+      if (done && len === 0) {
+        done = false;
+      }
+    });
+    return done;
+  }
+
 });