Adds option to download multiple files at once for published projects #1175

physionet-django/project/templates/project/files_panel.html

@@ -1,19 +1,27 @@
 <div class="card-header">
-  Folder Navigation:
-  {% spaceless %}
-    <span class="dir-breadcrumbs">
-      {% for breadcrumb in dir_breadcrumbs %}
-        {% if forloop.counter == dir_breadcrumbs|length %}
-          <span class="dir-breadcrumb-self">{{ breadcrumb.name }}</span>
-        {% else %}
-          <a href="{{ breadcrumb.rel_path }}#files-panel"
-             onclick="return navigateDir('{{ breadcrumb.full_subdir }}')"
-             class="dir-breadcrumb-up">{{ breadcrumb.name }}</a>
-          <span class="dir-breadcrumb-sep">/</span>
-        {% endif %}
-      {% endfor %}
-    </span>
-  {% endspaceless %}
+  <div class="files-panel-text">
+    <div class="files-panel-button-container">
+      <button class="btn btn-primary files-panel-button-all" onclick="downloadAll()">Download All Items</button>
+    </div>
+    <div class="files-panel-button-container">
+      <button class="btn btn-primary files-panel-button" onclick="downloadMultiple()">Download Selected Items</button>
+    </div>
+    Folder Navigation:
+    {% spaceless %}
+      <span class="dir-breadcrumbs">
+        {% for breadcrumb in dir_breadcrumbs %}
+          {% if forloop.counter == dir_breadcrumbs|length %}
+            <span class="dir-breadcrumb-self">{{ breadcrumb.name }}</span>
+          {% else %}
+            <a href="{{ breadcrumb.rel_path }}#files-panel"
+              onclick="return navigateDir('{{ breadcrumb.full_subdir }}')"
+              class="dir-breadcrumb-up">{{ breadcrumb.name }}</a>
+            <span class="dir-breadcrumb-sep">/</span>
+          {% endif %}
+        {% endfor %}
+      </span>
+    {% endspaceless %}
+  </div>
 </div>
 {% if file_error %}
 <div class="card-body">
@@ -30,11 +38,13 @@
     </div>
   {% endif %}
 <table class="files-panel">
+  <col class="files-panel-select"></col>
   <col class="files-panel-name"></col>
   <col class="files-panel-size"></col>
   <col class="files-panel-date"></col>
   <thead>
     <tr>
+      <th></th>
       <th>Name</th>
       <th>Size</th>
       <th>Modified</th>
@@ -43,20 +53,23 @@
   <tbody>
   {% if subdir %}
     <tr class="parentdir">
+      <td></td>
       <td><a href="../#files-panel" onclick="return navigateDir('{{ parent_dir }}')">Parent Directory</a></td>
       <td></td>
       <td></td>
     </tr>
   {% endif %}
   {% for dir in display_dirs %}
     <tr class="subdir">
+      <td></td>
       <td><a href="{{ dir.name }}/#files-panel" onclick="return navigateDir('{{ dir.full_subdir }}')">{{ dir.name }}</a></td>
       <td></td>
       <td></td>
     </tr>
   {% endfor %}
   {% for file in display_files %}
     <tr>
+      <td><input class="file-check-input" type="checkbox" value="{{ file.download_url }}" onclick="showButton()"></td>
       <td><a href="{{ file.url }}">{{ file.name }}</a>
         <a class="download" href="{{ file.download_url }}"
            title="Download {{ file.name }}">
@@ -86,4 +99,32 @@
     });
     return false
   }
+  // Only display the "Download Selected Items" button if boxes are checked
+  function showButton(){
+    var all_files = document.getElementsByClassName("file-check-input");
+    var any_checked = [];
+    for (var i = 0; i < all_files.length; i++) {
+      any_checked.push(all_files[i].checked);
+    }
+    if (any_checked.includes(true)) {
+      document.getElementsByClassName("files-panel-button")[0].style.display = "inline";
+    } else {
+      document.getElementsByClassName("files-panel-button")[0].style.display = "none";
+    }
+  }
+  // Download multiple files at once
+  function downloadAll(){
+    var all_files = document.getElementsByClassName("file-check-input");
+    for (var i = 0; i < all_files.length; i++) {
+      window.open(all_files[i].value);
+    }
+  }
+  function downloadMultiple(){
+    var all_files = document.getElementsByClassName("file-check-input");
+    for (var i = 0; i < all_files.length; i++) {
+      if (all_files[i].checked) {
+        window.open(all_files[i].value);
+      }
+    }
+  }
 </script>

physionet-django/static/custom/css/physionet.css

@@ -509,15 +509,30 @@ table.files-panel {
 .files-panel thead {
   border: none;
 }
-.files-panel-name { width: 100%; }
+.files-panel-text {
+  display: flex;
+  align-items: center;
+}
+.files-panel-button-container { padding-right: 0.25em; }
+.files-panel-button-all {
+  float: right;
+  padding-right: 1em;
+}
+.files-panel-button {
+  display: none;
+  float: right;
+  padding-right: 1em;
+}
+.files-panel-select { width: 2em; }
+.files-panel-name { width: 100%; text-align: left; }
 .files-panel-size { width: 6em; }
 .files-panel-date { width: 8em; }
 .files-panel-checkbox { width: 2em; }
-.files-panel td + td, .files-panel th + th { text-align: right; }
-.files-panel td + td + td, .files-panel th + th + th { text-align: center; }
-.files-panel td + td + td + td, .files-panel th + th + th + th { text-align: right; }
+.files-panel td + td + td, .files-panel th + th +th { text-align: right; }
+.files-panel td + td + td + td, .files-panel th + th + th +th { text-align: center; }
+.files-panel td + td + td + td + td, .files-panel th + th + th + th +th { text-align: right; }
 
-.files-panel td:first-child:before {
+.files-panel td:nth-child(2):before {
   content: "\F15B"; /* file */
   font-family: "Font Awesome 5 Free";
   font-weight: 400;
@@ -526,7 +541,7 @@ table.files-panel {
   width: 1.5em;
   margin-right: 0.5em;
 }
-.files-panel tr.subdir td:first-child:before {
+.files-panel tr.subdir td:nth-child(2):before {
   content: "\F07C"; /* folder-open */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
@@ -535,7 +550,7 @@ table.files-panel {
   width: 1.5em;
   margin-right: 0.5em;
 }
-.files-panel tr.parentdir td:first-child:before {
+.files-panel tr.parentdir td:nth-child(2):before {
   content: "\F106"; /* angle-up */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;