add tooltip for download buttons in vault

UtrechtUniversity · Aug 14, 2024 · cb02922 · cb02922
1 parent d39e39b
commit cb02922
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/vault/static/vault/js/vault.js b/vault/static/vault/js/vault.js
@@ -10,6 +10,8 @@ $(document).ajaxSend(function (e, request, settings) {
   }
 })
 
+let downloadChecksumReportTextTooltip
+let downloadChecksumReportCSVTooltip
 let preservableFormatsLists = null
 let currentFolder
 let dataPackage = null
@@ -24,6 +26,8 @@ $(function () {
   // Canonicalize path somewhat, for convenience.
   currentFolder = currentFolder.replace(/\/+/g, '/').replace(/\/$/, '')
 
+  createTooltips()
+
   if ($('#file-browser').length) {
     // startBrowsing(browsePageItems);
     startBrowsing()
@@ -49,8 +53,6 @@ $(function () {
 
     $('#showChecksumReport .collection').text(folder)
     $('#showChecksumReport .modal-body #checksumReport').html('')
-    $('#showChecksumReport .modal-footer .download-report-text').addClass('d-none')
-    $('#showChecksumReport .modal-footer .download-report-csv').addClass('d-none')
     $('#showChecksumReport .modal-footer .download-report-text').attr('href', downloadUrl + '&format=text')
     $('#showChecksumReport .modal-footer .download-report-csv').attr('href', downloadUrl + '&format=csv')
 
@@ -59,23 +61,35 @@ $(function () {
       let table = '<table class="table table-striped"><tbody>'
 
       table += '<thead><tr><th>Filename</th><th>Size</th><th>Checksum</th></tr></thead>'
-      $.each(data, function (index, obj) {
-        if (data.length > 0) {
+      if (data.length > 0) {
+        $.each(data, function (index, obj) {
           table += `<tr>
-                    <td>${obj.name}</td>
-                    <td>${obj.size}</td>
-                    <td>${obj.checksum}</td>
-                </tr>`
-          $('#showChecksumReport .modal-footer .download-report-text').removeClass('d-none')
-          $('#showChecksumReport .modal-footer .download-report-csv').removeClass('d-none')
+                      <td>${obj.name}</td>
+                      <td>${obj.size}</td>
+                      <td>${obj.checksum}</td>
+                  </tr>`
+        })
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.disable()
         }
-      })
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.disable()
+        }
+      } else {
+        $('#showChecksumReport .modal-footer .download-report-text').removeAttr('href')
+        $('#showChecksumReport .modal-footer .download-report-csv').removeAttr('href')
+        if (downloadChecksumReportTextTooltip) {
+          downloadChecksumReportTextTooltip.enable()
+        }
+        if (downloadChecksumReportCSVTooltip) {
+          downloadChecksumReportCSVTooltip.enable()
+        }
+      }
       table += '</tbody></table>'
 
       $('#showChecksumReport .modal-body #checksumReport').html(table)
       $('#showChecksumReport').modal('show')
     })
-  })
 
   $('body').on('click', 'a.action-check-for-unpreservable-files', function () {
     // Check for unpreservable file formats.
@@ -306,6 +320,16 @@ $(function () {
   })
 })
 
+function createTooltips () {
+  const downloadChecksumReportText = $('.download-report-text').parent()
+  downloadChecksumReportTextTooltip = new bootstrap.Tooltip(downloadChecksumReportText)
+  downloadChecksumReportTextTooltip.disable()
+
+  const downloadChecksumReportCSV = $('.download-report-csv').parent()
+  downloadChecksumReportCSVTooltip = new bootstrap.Tooltip(downloadChecksumReportCSV)
+  downloadChecksumReportCSVTooltip.disable()
+}
+
 function changeBrowserUrl (path) {
   let url = window.location.pathname
   if (typeof path !== 'undefined') {

diff --git a/vault/templates/vault/browse.html b/vault/templates/vault/browse.html
@@ -189,8 +189,12 @@ <h5 class="modal-title">
                 <div id="checksumReport"></div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
-                <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Cannot download as checksum report is empty">
+                    <a href="#" class="btn btn-outline-secondary download-report-text">Download as text</a>
+                </span>
+                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Cannot download as checksum report is empty">
+                    <a href="#" class="btn btn-outline-secondary download-report-csv">Download as CSV</a>
+                </span>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>