Add frontend functionality for checksum feature

ui/script.js

@@ -153,13 +153,21 @@ function rpc (call, args, cb) {
   xhr.open('POST', location.origin + window.extraPath + '/rpc')
   xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
   xhr.send(JSON.stringify({ call, args }))
-  xhr.onload = cb
+  // set the callback function (cb) to true to copy the response to the clipboard
+  if (cb === true) {
+    xhr.onload = () => {
+      navigator.clipboard.writeText(xhr.responseText)
+    };
+  } else {
+    xhr.onload = cb
+  }
   xhr.onerror = () => flicker(sadBadge)
 }
 
 const mkdirCall = (path, cb) => rpc('mkdirp', [prependPath(path)], cb)
 const rmCall = (path1, cb) => rpc('rm', [prependPath(path1)], cb)
 const mvCall = (path1, path2, cb) => rpc('mv', [path1, path2], cb)
+const sumCall = (path, type) => {rpc('sum', [prependPath(path), type], true)}
 
 // File upload
 let totalDone = 0
@@ -383,7 +391,7 @@ function resetView () {
   scrollToArrow()
 }
 
-window.quitAll = () => helpOff() || picsOff() || videosOff() || padOff() || pdfOff()
+window.quitAll = () => helpOff() || sumsOff() || picsOff() || videosOff() || padOff() || pdfOff()
 
 // Mkdir icon
 window.mkdirBtn = function () {
@@ -659,6 +667,33 @@ function helpOff () {
   return true
 }
 
+// checksums
+function getSum (type) {
+  sumCall(getASelected().innerText, type)
+  sumsOff()
+}
+
+const isSumsMode = () => sums.style.display === 'block'
+
+const sumsToggle = () => isSumsMode() ? sumsOff() : sumsOn()
+
+function sumsOn () {
+  if (getASelected().innerText.endsWith('/')) {
+    alert('cannot checksum a directory')
+    return
+  }
+  sums.style.display = 'block'
+  table.style.display = 'none'
+}
+
+window.sumsOff = sumsOff
+function sumsOff () {
+  if (!isSumsMode()) return
+  sums.style.display = 'none'
+  table.style.display = 'table'
+  return true
+}
+
 // Paste handler
 const cuts = []
 function onPaste () {
@@ -759,6 +794,9 @@ document.body.addEventListener('keydown', e => {
         case 'KeyH':
           return prevent(e) || isRo() || helpToggle()
 
+        case 'KeyZ':
+          return prevent(e) || isRo() || sumsToggle()
+
         case 'KeyX':
           return prevent(e) || isRo() || onCut()
 
@@ -784,6 +822,20 @@ document.body.addEventListener('keydown', e => {
         case 'ArrowRight':
           return prevent(e) || dl(getASelected())
       }
+    } else if (isSumsMode()) {
+        switch (e.code) {
+          case 'Digit1':
+            return prevent(e) || isRo() || getSum('sha1')
+
+          case 'Digit2':
+            return prevent(e) || isRo() || getSum('sha256')
+
+          case 'Digit3':
+            return prevent(e) || isRo() || getSum('sha512')
+
+          case 'Digit5':
+            return prevent(e) || isRo() || getSum('md5')
+        }
     }
   } else {
       // Workaround Firefox requirement for transient activation

ui/style.css

@@ -344,12 +344,8 @@ h1 > span:hover {
   right: 30px;
 }
 
-#helpHead {
+#helpTable,
-  margin-top: 60px;
+#sumsTable {
-  text-align: center;
-}
-
-#helpTable {
   border-collapse: collapse;
   width: 70%;
   max-width: 790px;
@@ -360,7 +356,8 @@ h1 > span:hover {
   overflow-y: auto;
 }
 
-#helpTable td {
+#helpTable td,
+#sumsTable td {
   width: 200px;
   padding: 9px;
   border: 1px solid #fff;
@@ -369,7 +366,8 @@ h1 > span:hover {
   margin: 0;
 }
 
-#help {
+#help,
+#sums {
   background-color: black;
   position: absolute;
   top: 0px;

ui/ui.tmpl

@@ -30,6 +30,7 @@
         <tr><td>Ctrl/Meta + M</td><td>create a new directory</td></tr>
         <tr><td>Ctrl/Meta + X</td><td>cut selected path</td></tr>
         <tr><td>Ctrl/Meta + V</td><td>paste previously selected paths to directory</td></tr>
+        <tr><td>Ctrl/Meta + Z</td><td>copy checksums of selected file</td></tr>
         <tr><td>Ctrl + click</td><td>download selected item as archive</td></tr>
         <tr><td>click file icon </td><td>rename item</td></tr>
         <tr><td>double click file icon</td><td>delete item</td></tr>
@@ -38,6 +39,14 @@
         <tr><td>any other letter</td><td>fuzzy search</td></tr>
     </tbody></table></div>
 
+    <div onclick="window.sumsOff()" style="display: none;" id="sums"><table id="sumsTable"><tbody>
+        <tr><td>Key</td><td>Hash Algorithm</td></tr>
+        <tr><td>1</td><td>copy sha1 sum</td></tr>
+        <tr><td>2</td><td>copy sha256 sum</td></tr>
+        <tr><td>3</td><td>copy sha512 sum</td></tr>
+        <tr><td>5</td><td>copy md5 sum</td></tr>
+    </tbody></table></div>
+
     <div style="display: none;" onclick="window.quitAll()" id="quitAll"><i style="display: none;" id="toast">cant reach server</i></div>
     <textarea style="display: none;" id="text-editor"></textarea>
     <div id="drop-grid"></div>