feat(download): add share button to download page
Introduce a new "Share" button on the download page to allow users to easily share the box link. - Add the share button markup and SVG icon to `download.html` - Include the `13-share.js` script in the base layout to handle the share action - Add CSS styling for the share button in `30-download.css`
This commit is contained in:
@@ -704,6 +704,11 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.download-share-button {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.upload-processing-alert {
|
||||
margin: 1rem 0;
|
||||
padding: .85rem 1rem;
|
||||
|
||||
50
backend/static/js/13-share.js
Normal file
50
backend/static/js/13-share.js
Normal file
@@ -0,0 +1,50 @@
|
||||
(function () {
|
||||
const shareButtons = document.querySelectorAll("[data-share-box]");
|
||||
if (shareButtons.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
shareButtons.forEach((button) => {
|
||||
const label = button.querySelector("[data-share-box-label]") || button;
|
||||
const shareData = {
|
||||
title: button.dataset.shareTitle || document.title,
|
||||
text: button.dataset.shareText || "",
|
||||
url: window.Warpbox.absoluteURL(button.dataset.shareUrl || window.location.href),
|
||||
};
|
||||
const canShare = typeof navigator.share === "function" && (!navigator.canShare || navigator.canShare(shareData));
|
||||
|
||||
label.textContent = canShare ? "Share" : "Copy Link";
|
||||
button.setAttribute("aria-label", canShare ? "Share this box" : "Copy box link");
|
||||
|
||||
button.addEventListener("click", async () => {
|
||||
if (canShare) {
|
||||
try {
|
||||
await navigator.share(shareData);
|
||||
return;
|
||||
} catch (error) {
|
||||
if (error && error.name === "AbortError") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
await copyShareURL(button, label, shareData.url, canShare);
|
||||
});
|
||||
});
|
||||
|
||||
async function copyShareURL(button, label, url, shareMode) {
|
||||
try {
|
||||
await window.Warpbox.writeClipboard(url);
|
||||
const previous = label.textContent;
|
||||
label.textContent = "Copied";
|
||||
window.setTimeout(() => {
|
||||
label.textContent = shareMode ? "Share" : "Copy Link";
|
||||
}, 1400);
|
||||
} catch (error) {
|
||||
if (window.Warpbox && typeof window.Warpbox.error === "function") {
|
||||
window.Warpbox.error("The share link could not be copied.", {
|
||||
title: "Copy failed",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user