shorten long urls in web UI

stv0g · Jun 10, 2022 · 832ee56 · 832ee56
1 parent aa7bfbd
commit 832ee56
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -20,7 +20,7 @@ <h4 class="subtitle">A terascale file uploader</h4>
         <div class="container">
             <div class="row">
                 <div class="col-12 gy-3">
-                    <div id="result" class="alert mb-0 align-items-center d-flex d-none" role="alert"></div>
+                    <div id="result" class="alert mb-0 align-items-center justify-content-between d-flex d-none" role="alert"></div>
                 </div>
                 <div class="col-12 gy-3">
                     <div id="statistics" class="card d-none">

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -15,6 +15,7 @@ import { apiRequest } from "./api";
 import { Config, Server } from "./config";
 import { Chart } from "./chart";
 import { Dropzone } from "./dropzone";
+import { shortUrl } from "./utils";
 
 var progressBar: ProgressBar;
 var config: Config;
@@ -65,16 +66,17 @@ function alert(cls: string, msg: string, url?: string, icon?: string) {
     elm.innerHTML += `<span>${msg}</span>`;
 
     if (url) {
-        elm.innerHTML += `<a class="alert-link ms-auto" id="copy" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></a>`;
-        elm.innerHTML += `<a class="alert-link" id="upload-url" href="${url}">${url}</a>`;
+        let displayUrl = shortUrl(url);
+        elm.innerHTML += `<a class="alert-link" id="upload-url" href="${url}">${displayUrl}</a>`;
+        elm.innerHTML += `<a class="alert-link" id="copy" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></a>`;
 
         // Setup copy to clipboard
         let btnCopy = document.getElementById("copy");
         let spanUrl = document.getElementById("upload-url");
         let tooltip = new Tooltip(btnCopy);
 
         btnCopy.addEventListener("click", async (ev: Event) => {
-            await navigator.clipboard.writeText(spanUrl.innerText);
+            await navigator.clipboard.writeText(url);
 
             tooltip.dispose();
             btnCopy.title = "Copied! 🥳";

diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -29,3 +29,38 @@ export function arraybufferEqual(a: ArrayBuffer, b: ArrayBuffer) {
 
     return true;
 }
+
+export function shortUrl(url: string, l?: number){
+    var l = typeof(l) != "undefined" ? l : 32;
+    var chunk_l = (l/2);
+    var url = url.replace("http://","").replace("https://","");
+
+    if (url.length <= l) {
+        return url;
+    }
+
+    var start_chunk = shortString(url, chunk_l, false);
+    var end_chunk = shortString(url, chunk_l, true);
+    return start_chunk + ".." + end_chunk;
+}
+
+function shortString(s: string, l: number, reverse?: boolean){
+    var stop_chars = [' ','/', '&'];
+    var acceptable_shortness = l * 0.80; // When to start looking for stop characters
+    var reverse = typeof(reverse) != "undefined" ? reverse : false;
+    var s = reverse ? s.split("").reverse().join("") : s;
+    var short_s = "";
+
+    for (var i=0; i < l-1; i++) {
+        short_s += s[i];
+        if (i >= acceptable_shortness && stop_chars.indexOf(s[i]) >= 0) {
+            break;
+        }
+    }
+
+    if (reverse) {
+        return short_s.split("").reverse().join("");
+    }
+
+    return short_s;
+}