feat(links): copy all download links for files added to frontend.

MR-MKZ · Jan 6, 2025 · 644f5af · 644f5af
1 parent 2a0563a
commit 644f5af
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 8 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -83,15 +83,35 @@ body {
     padding: 12px;
 }
 
-.pathContainer {
-    background: #56585fa6;
+.box {
     margin-bottom: 20px;
-    border-radius: 7px;
-    padding: 12px;
     position: sticky;
     top: 20px;
-    backdrop-filter: blur(3px);
     z-index: 1;
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 1fr 100px;
+}
+
+.box * {
+    border-radius: 7px;
+}
+
+.pathContainer {
+    background: #56585fa6;
+    padding: 12px;
+    backdrop-filter: blur(3px);
+    white-space: nowrap;
+    overflow: auto;
+}
+
+.linksContainer button {
+    border: none;
+    background-color: #0064ff;
+    height: 100%;
+    width: 100%;
+    color: white;
+    cursor: pointer;
 }
 
 .pathContainer span {

diff --git a/static/js/main.js b/static/js/main.js
@@ -52,6 +52,47 @@ const isVideo = (extension) => {
   return videoExtensions.indexOf(extension) > -1;
 }
 
+/**
+ * @returns {Array} array of links
+ */
+const getAllLinks = () => {
+    const files = document.getElementsByClassName("fileItem");
+    let links = [];
+
+    for (let a of files) {
+        links.push(a.href)
+    }
+
+    return links;
+}
+
+const copyAllLinks = () => {
+    let links = getAllLinks();    
+
+    links = links.join("\n");   
+
+    const copyText = async () => {
+        try {
+            await navigator.clipboard.writeText(links);
+        } catch (err) {
+            fallbackCopy(links);
+        }
+    };
+
+    const fallbackCopy = (links) => {
+        const textArea = document.createElement("textarea");
+        textArea.value = links;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+    };
+
+    copyText();
+
+    showNotification("Links copied successfully.");
+}
+
 const showNotification = (message) => {
     $(".notifContainer p").text(message)
     $(".notifContainer").addClass("show")

diff --git a/templates/main_page.html b/templates/main_page.html
@@ -20,8 +20,13 @@
             {% endfor %}
         </select>
     </div>
-    <div class="pathContainer">
-        <span>{{ current_path }}</span>
+    <div class="box">
+        <div class="pathContainer">
+            <span>{{ current_path }}</span>
+        </div>
+        <div class="linksContainer">
+            <button onclick="copyAllLinks()">Copy Links</button>
+        </div>
     </div>
     <div class="listContainer">
         {% if dir_contents[0] %}
@@ -40,7 +45,7 @@
             {% if dir_content.isFile %}
                 <span class="listItem file">
                         <icon id="{{ dir_content.icon }}"></icon>
-                        <a href="/download/{{ dir_content.path }}">{{ dir_content.name }}</a>
+                        <a class="fileItem" href="/download/{{ dir_content.path }}">{{ dir_content.name }}</a>
                     {% if dir_content.preview %}
                         <button class="showPreview" name="{{ dir_content.name }}"
                                 src="/download/{{ dir_content.path }}">