diff --git a/static/css/main.css b/static/css/main.css index 1702fb6..9affb10 100644 --- 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 index fa0e480..2399e40 100644 --- 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 index 2b56553..8ed9790 100644 --- a/templates/main_page.html +++ b/templates/main_page.html @@ -20,8 +20,13 @@ {% endfor %} -