remove previously uploaded files JS utility

messages/uniworx/de.msg

@@ -288,7 +288,10 @@ Settings: Individuelle Benutzereinstellungen
 SettingsUpdate: Einstellungen wurden gespeichert.
 Never: Nie
 
+PreviouslyUploadedInfo: Bereits hochgeladene Dateien:
+PreviouslyUploadedDeletionInfo: (Nicht ausgewählte Dateien werden gelöscht)
 MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)
+AddMoreFiles: Weitere Dateien hinzufügen:
 
 NrColumn: Nr
 SelectColumn: Auswahl
@@ -723,4 +726,4 @@ DBTIRowsMissing n@Int: #{pluralDE n "Eine Zeile ist" "Einige Zeile sind"} aus de
 MassInputAddDimension: Hinzufügen
 MassInputDeleteCell: Entfernen
 
-NavigationFavourites: Favoriten
+NavigationFavourites: Favoriten

static/css/utils/inputs.scss

@@ -210,15 +210,31 @@ option {
   border-radius: 3px;
 }
 
-.file-input__multi-info {
+.file-input__info {
   font-size: .9rem;
   font-style: italic;
-  margin-top: 10px;
+  margin: 10px 0;
   color: var(--color-fontsec);
 }
 
 .file-input__list {
-  margin-left: 15px;
+  margin-left: 40px;
   margin-top: 10px;
   font-weight: 600;
 }
+
+/* PREVIOUSLY UPLOADED FILES */
+
+.file-uploads-label {
+  margin-bottom: 10px;
+}
+
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.file-container__label + .checkbox {
+  margin-left: 12px;
+}

static/js/utils/inputs.js

@@ -174,34 +174,6 @@
     });
   }
 
-  // to remove previously uploaded files
-
-  var FILE_UPLOAD_CONTAINER_CLASS = 'file-container';
-  var FILE_UPLOAD_CONTAINER_CHECKED_CLASS = 'file-container--checked';
-
-  window.utils.fileCheckbox = function(input) {
-    // adds eventlistener(s)
-    function addListener(container) {
-      input.addEventListener('change', function(event) {
-        container.classList.toggle(FILE_UPLOAD_CONTAINER_CHECKED_CLASS, this.checked);
-      });
-    }
-
-    // initial setup
-    function init() {
-      var cont = input.parentNode;
-      while (cont !== document.body) {
-        if (cont.matches('.' + FILE_UPLOAD_CONTAINER_CLASS)) {
-          break;
-        }
-        cont = cont.parentNode;
-      }
-      addListener(cont);
-    }
-
-    return init();
-  }
-
   // turns native checkboxes into custom ones
   window.utils.checkbox = function(input) {
 

templates/multiFileField.hamlet

@@ -1,15 +1,22 @@
 $newline never
-$forall FileUploadInfo{..} <- fileInfos
+<!-- TODO: add $if to check if there were files uploaded already -->
-  <div .file-container :fuiChecked:.file-container--checked>
+  <div .file-uploads-label>_{MsgPreviouslyUploadedInfo}
-    <label .file-container__label.btn for=#{fuiHtmlId}>#{fuiTitle}
+  <ol .file-input__list>
-    <div .checkbox>
+    $forall FileUploadInfo{..} <- fileInfos
-      <input .file-container__checkbox.file-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId} type="checkbox">
+      <li>
-      <label for=#{fuiHtmlId}>
+        <div .file-container>
+          <label for=#{fuiHtmlId}>#{fuiTitle}
+          <input type="checkbox" uw-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId}>
+
+  <div .file-input__info>
+    _{MsgPreviouslyUploadedDeletionInfo}
+
+  <div .file-uploads-label>_{MsgAddMoreFiles}
 
 $# new files
 <input type="file" uw-file-upload name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
-<div .file-input__multi-info>
+<div .file-input__info>
     _{MsgMultiFileUploadInfo}
 
 <div .file-input__unpack>

templates/multiFileField.lucius

@@ -9,34 +9,3 @@
     margin-left: 7px;
   }
 }
-
-.file-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-
-  &.file-container--checked {
-
-    &::after {
-      content: none;
-    }
-
-    .file-container__label {
-      opacity: 1;
-    }
-  }
-
-  &::after {
-    /* TODO: get this from .msg-file */
-    content: '(wird entfernt)';
-    margin-left: 12px;
-  }
-
-  .checkbox {
-    margin-left: 12px;
-  }
-}
-
-.file-container__label {
-  opacity: 0.4;
-}