Add share menu, group buttons #252

Author: Forceu

build/go-generate/minifyStaticContent.go

@@ -137,6 +137,6 @@ func fileExists(filename string) bool {
 // Auto-generated content below, do not modify
 // Version codes can be changed in updateVersionNumbers.go
 
-const jsAdminVersion = 9
+const jsAdminVersion = 10
 const jsE2EVersion = 5
-const cssMainVersion = 4
+const cssMainVersion = 5

build/go-generate/updateVersionNumbers.go

@@ -11,10 +11,10 @@ import (
 	"strings"
 )
 
-const versionJsAdmin = 9
+const versionJsAdmin = 10
 const versionJsDropzone = 5
-const versionJsE2EAdmin = 5
-const versionCssMain = 4
+const versionJsE2EAdmin = 6
+const versionCssMain = 5
 
 const fileMain = "../../cmd/gokapi/Main.go"
 const fileMinify = "../../build/go-generate/minifyStaticContent.go"

…rver/web/static/css/min/gokapi.min.4.css …rver/web/static/css/min/gokapi.min.5.cssinternal/webserver/web/static/css/min/gokapi.min.4.css renamed to internal/webserver/web/static/css/min/gokapi.min.5.css internal/webserver/web/static/css/min/gokapi.min.4.css renamed to internal/webserver/web/static/css/min/gokapi.min.5.css

@@ -3,7 +3,7 @@
 // go generate ./...
 
 
-var clipboard = new ClipboardJS('.btn');
+var clipboard = new ClipboardJS('.copyurl');
 
 var toastId;
 

internal/webserver/web/static/js/admin_ui_allPages.js

@@ -689,12 +689,11 @@ function addRow(item) {
     }
     cellDownloadCount.innerText = item.DownloadCount;
 
-    // === URL Link ===
     const link = document.createElement('a');
     link.href = item.UrlDownload;
     link.target = '_blank';
     link.style.color = 'inherit';
-    link.id = 'url-href-'+item.Id;
+    link.id = 'url-href-' + item.Id;
     link.textContent = item.Id;
 
     cellUrl.appendChild(link);
@@ -707,12 +706,37 @@ function addRow(item) {
         cellUrl.appendChild(icon);
     }
 
+    cellButtons.appendChild(createButtonGroup(item));
+
+
+    cellFilename.classList.add('newItem');
+    cellFileSize.classList.add('newItem');
+    cellRemainingDownloads.classList.add('newItem');
+    cellStoredUntil.classList.add('newItem');
+    cellDownloadCount.classList.add('newItem');
+    cellUrl.classList.add('newItem');
+    cellButtons.classList.add('newItem');
+    cellFileSize.setAttribute('data-order', item.SizeBytes);
+
+    changeRowCount(true, row);
+    return item.Id;
+}
+
+function createButtonGroup(item) {
+    const groupContainer = document.createElement("div");
+    groupContainer.className = "btn-toolbar";
+    groupContainer.setAttribute("role", "toolbar");
+
+    const group1 = document.createElement("div");
+    group1.className = "btn-group me-2";
+    group1.setAttribute("role", "group");
+
     // === Button: Copy URL ===
     const copyUrlBtn = document.createElement('button');
     copyUrlBtn.type = 'button';
     copyUrlBtn.className = 'copyurl btn btn-outline-light btn-sm';
     copyUrlBtn.dataset.clipboardText = item.UrlDownload;
-    copyUrlBtn.id = 'url-button-'+item.Id;
+    copyUrlBtn.id = 'url-button-' + item.Id;
     copyUrlBtn.title = 'Copy URL';
 
     const copyIcon = document.createElement('i');
@@ -724,61 +748,95 @@ function addRow(item) {
         showToast(1000);
     });
 
-    cellButtons.appendChild(copyUrlBtn);
-    cellButtons.appendChild(document.createTextNode(' '));
-
-    // === Button: Copy Hotlink ===
-    const hotlinkBtn = document.createElement('button');
-    hotlinkBtn.type = 'button';
-    hotlinkBtn.className = 'copyurl btn btn-outline-light btn-sm';
-    hotlinkBtn.title = 'Copy Hotlink';
-
-    const hotlinkIcon = document.createElement('i');
-    hotlinkIcon.className = 'bi bi-copy';
-    hotlinkBtn.appendChild(hotlinkIcon);
-    hotlinkBtn.appendChild(document.createTextNode(' Hotlink'));
-
-    if (item.UrlHotlink) {
-        hotlinkBtn.dataset.clipboardText = item.UrlHotlink;
-        hotlinkBtn.addEventListener('click', () => {
-            showToast(1000);
-        });
+    group1.appendChild(copyUrlBtn);
+
+    // Dropdown toggle for Hotlink
+    const btnDropdown1 = document.createElement("button");
+    btnDropdown1.type = "button";
+    btnDropdown1.className = "btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split";
+    btnDropdown1.setAttribute("data-bs-toggle", "dropdown");
+    btnDropdown1.setAttribute("aria-expanded", "false");
+    group1.appendChild(btnDropdown1);
+
+    const dropdown1 = document.createElement("ul");
+    dropdown1.className = "dropdown-menu dropdown-menu-end";
+    dropdown1.setAttribute("data-bs-theme", "dark");
+
+    const liDr1 = document.createElement("li");
+    const aDr1 = document.createElement("a");
+    if (item.UrlHotlink !== "") {
+        aDr1.className = "dropdown-item copyurl";
+        aDr1.title = "Copy hotlink";
+        aDr1.setAttribute("data-clipboard-text", item.UrlHotlink);
+        aDr1.onclick = () => showToast(1000);
+        aDr1.innerHTML = `<i class="bi bi-copy"></i> Hotlink`;
     } else {
-        hotlinkBtn.disabled = true;
-    }
-
-    cellButtons.appendChild(hotlinkBtn);
-    cellButtons.appendChild(document.createTextNode(' '));
-
-    // === Button: QR Code ===
-    const qrBtn = document.createElement('button');
-    qrBtn.type = 'button';
-    qrBtn.className = 'btn btn-outline-light btn-sm';
-    qrBtn.title = 'QR Code';
-    qrBtn.id = 'qrcode-'+item.Id;
-
-    const qrIcon = document.createElement('i');
-    qrIcon.className = 'bi bi-qr-code';
-    qrBtn.appendChild(qrIcon);
-
-    qrBtn.addEventListener('click', () => {
-        showQrCode(item.UrlDownload);
-    });
-
-    cellButtons.appendChild(qrBtn);
-    cellButtons.appendChild(document.createTextNode(' '));
+        aDr1.className = "dropdown-item";
+        aDr1.innerText = "Hotlink not available";
+    }
+    liDr1.appendChild(aDr1);
+    dropdown1.appendChild(liDr1);
+    group1.appendChild(dropdown1);
+
+    // Share button
+    const btnShare = document.createElement("button");
+    btnShare.type = "button";
+    btnShare.className = "btn btn-outline-light btn-sm";
+    btnShare.title = "Share";
+    btnShare.onclick = () => shareUrl(item.Id);
+    btnShare.innerHTML = `<i class="bi bi-share"></i>`;
+    group1.appendChild(btnShare);
+
+
+    // Dropdown toggle 
+    const btnDropdown2 = document.createElement("button");
+    btnDropdown2.type = "button";
+    btnDropdown2.className = "btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split";
+    btnDropdown2.setAttribute("data-bs-toggle", "dropdown");
+    btnDropdown2.setAttribute("aria-expanded", "false");
+    group1.appendChild(btnDropdown2);
+
+    const dropdown2 = document.createElement("ul");
+    dropdown2.className = "dropdown-menu dropdown-menu-end";
+    dropdown2.setAttribute("data-bs-theme", "dark");
+
+    const qrLi = document.createElement("li");
+    const qrA = document.createElement("a");
+    qrA.className = "dropdown-item";
+    qrA.id = `qrcode-${item.Id}`;
+    qrA.title = "Open QR Code";
+    qrA.onclick = () => showQrCode(item.UrlDownload);
+    qrA.innerHTML = `<i class="bi bi-qr-code"></i> QR Code`;
+    qrLi.appendChild(qrA);
+    dropdown2.appendChild(qrLi);
+
+    const emailLi = document.createElement("li");
+    const emailA = document.createElement("a");
+    emailA.className = "dropdown-item";
+    emailA.title = "Share via email";
+    emailA.target = "_blank";
+    emailA.href = `mailto:?body=${encodeURIComponent(item.UrlDownload)}`;
+    emailA.innerHTML = `<i class="bi bi-envelope"></i> Email`;
+    emailLi.appendChild(emailA);
+    dropdown2.appendChild(emailLi);
+    group1.appendChild(dropdown2);
+
+    // Button group for Edit/Delete
+    const group2 = document.createElement("div");
+    group2.className = "btn-group me-2";
+    group2.setAttribute("role", "group");
 
     // === Button: Edit ===
-    const editBtn = document.createElement('button');
-    editBtn.type = 'button';
-    editBtn.className = 'btn btn-outline-light btn-sm';
-    editBtn.title = 'Edit';
+    const btnEdit = document.createElement('button');
+    btnEdit.type = 'button';
+    btnEdit.className = 'btn btn-outline-light btn-sm';
+    btnEdit.title = 'Edit';
 
     const editIcon = document.createElement('i');
     editIcon.className = 'bi bi-pencil';
-    editBtn.appendChild(editIcon);
+    btnEdit.appendChild(editIcon);
 
-    editBtn.addEventListener('click', () => {
+    btnEdit.addEventListener('click', () => {
         showEditModal(
             item.Name,
             item.Id,
@@ -792,38 +850,28 @@ function addRow(item) {
         );
     });
 
-    cellButtons.appendChild(editBtn);
-    cellButtons.appendChild(document.createTextNode(' '));
+    group2.appendChild(btnEdit);
 
     // === Button: Delete ===
-    const deleteBtn = document.createElement('button');
-    deleteBtn.type = 'button';
-    deleteBtn.className = 'btn btn-outline-danger btn-sm';
-    deleteBtn.title = 'Delete';
-    deleteBtn.id = 'button-delete-'+item.Id;
+    const btnDelete = document.createElement('button');
+    btnDelete.type = 'button';
+    btnDelete.className = 'btn btn-outline-danger btn-sm';
+    btnDelete.title = 'Delete';
+    btnDelete.id = 'button-delete-' + item.Id;
 
     const deleteIcon = document.createElement('i');
     deleteIcon.className = 'bi bi-trash3';
-    deleteBtn.appendChild(deleteIcon);
+    btnDelete.appendChild(deleteIcon);
 
-    deleteBtn.addEventListener('click', () => {
+    btnDelete.addEventListener('click', () => {
         deleteFile(item.Id);
     });
+    group2.appendChild(btnDelete);
 
-    cellButtons.appendChild(deleteBtn);
-
-
-    cellFilename.classList.add('newItem');
-    cellFileSize.classList.add('newItem');
-    cellRemainingDownloads.classList.add('newItem');
-    cellStoredUntil.classList.add('newItem');
-    cellDownloadCount.classList.add('newItem');
-    cellUrl.classList.add('newItem');
-    cellButtons.classList.add('newItem');
-    cellFileSize.setAttribute('data-order', item.SizeBytes);
+    groupContainer.appendChild(group1);
+    groupContainer.appendChild(group2);
 
-    changeRowCount(true, row);
-    return item.Id;
+    return groupContainer;
 }
 
 function sanitizeId(str) {
@@ -895,7 +943,7 @@ function showToastFileDeletion(id) {
 }
 
 function hideFileToast() {
-	document.getElementById("toastnotificationUndo").classList.remove("show");
+    document.getElementById("toastnotificationUndo").classList.remove("show");
 }
 
 function handleUndo(button) {
@@ -909,3 +957,15 @@ function handleUndo(button) {
             console.error('Error:', error);
         });
 }
+
+function shareUrl(id) {
+    if (!navigator.share) {
+        return;
+    }
+    let filename = document.getElementById("cell-name-" + id).innerText;
+    let url = document.getElementById("url-href-" + id).getAttribute("href");
+    navigator.share({
+        title: filename,
+        url: url,
+    })
+}

internal/webserver/web/static/js/admin_ui_upload.js

@@ -170,6 +170,8 @@ function decryptFileEntry(id, filename, cipher) {
     let datatable = $('#maintable').DataTable();
     const rows = datatable.rows().nodes();
 
+	
+
     for (let i = 0; i < rows.length; i++) {
         const cell = datatable.cell(i, 0).node();
         if ("cell-name-" + id === $(cell).attr("id")) {
@@ -180,7 +182,7 @@ function decryptFileEntry(id, filename, cipher) {
             cellNode.textContent = filename;
             if (!url.includes(cipher)) {
                 if (IncludeFilename) {
-                    url = url.replace("/Encrypted%20File", "/" + encodeURI(filename));
+                    url = url.replace("/Encrypted%20File", "/" + encodeURIComponent(filename));
                 }
                 url = url + "#" + cipher;
                 urlLink.setAttribute("href", url);
@@ -192,6 +194,7 @@ function decryptFileEntry(id, filename, cipher) {
             let button = buttonNode.querySelector("button");
             button.setAttribute("data-clipboard-text", url);
             document.getElementById("qrcode-"+id).onclick = function() {showQrCode(url);};
+            document.getElementById("email-"+id).href = "mailto:?body="+encodeURIComponent(url);
             datatable.cell(i, 6).node(buttonNode);
             break;
         }