feat: add shareable meme permalinks
This commit is contained in:
+133
-7
@@ -19,15 +19,23 @@ const submitUpload = document.querySelector('#submit-upload');
|
||||
const lightbox = document.querySelector('#lightbox');
|
||||
const lightboxImage = document.querySelector('#lightbox-image');
|
||||
const lightboxDownload = document.querySelector('#lightbox-download');
|
||||
const lightboxShare = document.querySelector('#lightbox-share');
|
||||
const lightboxId = document.querySelector('#lightbox-id');
|
||||
const shareModal = document.querySelector('#share-modal');
|
||||
const shareLink = document.querySelector('#share-link');
|
||||
const shareStatus = document.querySelector('#share-status');
|
||||
const copyShareLinkButton = document.querySelector('#copy-share-link');
|
||||
const scrollIndicator = document.querySelector('#scroll-indicator');
|
||||
|
||||
let currentPage = 0;
|
||||
let totalPages = 1;
|
||||
let isLoading = false;
|
||||
let latestValidationRun = 0;
|
||||
let activeShareTrigger = null;
|
||||
let shareStatusTimer = null;
|
||||
const viewedThisSession = new Set();
|
||||
const pendingViewTimers = new Map();
|
||||
const copiedFeedbackTimers = new WeakMap();
|
||||
|
||||
document.querySelector('#open-upload').addEventListener('click', () => {
|
||||
formStatus.textContent = '';
|
||||
@@ -36,6 +44,11 @@ document.querySelector('#open-upload').addEventListener('click', () => {
|
||||
document.querySelector('#close-upload').addEventListener('click', closeUpload);
|
||||
document.querySelector('#cancel-upload').addEventListener('click', closeUpload);
|
||||
document.querySelector('#close-lightbox').addEventListener('click', () => lightbox.close());
|
||||
document.querySelector('#close-share').addEventListener('click', () => shareModal.close());
|
||||
copyShareLinkButton.addEventListener('click', copyActiveShareLink);
|
||||
lightboxShare.addEventListener('click', async () => {
|
||||
await openShareDialog(lightboxShare.dataset.shareId, lightboxShare);
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', async () => {
|
||||
const validationRun = ++latestValidationRun;
|
||||
@@ -82,15 +95,21 @@ uploadForm.addEventListener('submit', async (event) => {
|
||||
});
|
||||
|
||||
grid.addEventListener('click', async (event) => {
|
||||
const shareButton = event.target.closest('[data-share-id]');
|
||||
if (shareButton) {
|
||||
await openShareDialog(shareButton.dataset.shareId, shareButton);
|
||||
return;
|
||||
}
|
||||
|
||||
const viewButton = event.target.closest('[data-view-id]');
|
||||
if (!viewButton) return;
|
||||
const card = viewButton.closest('.meme-card');
|
||||
lightboxImage.src = viewButton.dataset.viewUrl;
|
||||
lightboxImage.alt = card.querySelector('img').alt;
|
||||
lightboxDownload.href = viewButton.dataset.downloadUrl;
|
||||
lightboxId.textContent = `ID: ${shortId(viewButton.dataset.viewId)}`;
|
||||
lightbox.showModal();
|
||||
await recordViewOnce(viewButton.dataset.viewId);
|
||||
await openLightbox({
|
||||
id: viewButton.dataset.viewId,
|
||||
url: viewButton.dataset.viewUrl,
|
||||
downloadUrl: viewButton.dataset.downloadUrl,
|
||||
alt: card.querySelector('img').alt
|
||||
});
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
@@ -109,6 +128,7 @@ window.addEventListener('scroll', updateScrollIndicator, { passive: true });
|
||||
window.addEventListener('resize', updateScrollIndicator);
|
||||
refreshStatus();
|
||||
window.setInterval(refreshStatus, 5000);
|
||||
await openSharedMemeFromUrl();
|
||||
await loadMemes(1, { reset: true });
|
||||
observer.observe(feedLoader);
|
||||
|
||||
@@ -170,7 +190,8 @@ function renderMemes(memes, options = {}) {
|
||||
</div>
|
||||
<div class="action-group">
|
||||
<a class="text-action icon-only-action" href="${meme.downloadUrl}" aria-label="Download meme" title="Download meme"><span class="material-symbols-outlined" aria-hidden="true">download</span></a>
|
||||
<button class="text-action text-action-accent icon-only-action" type="button" data-view-id="${meme.id}" data-view-url="${meme.url}" data-download-url="${meme.downloadUrl}" aria-label="View full meme" title="View full meme"><span class="material-symbols-outlined" aria-hidden="true">visibility</span></button>
|
||||
<button class="text-action icon-only-action" type="button" data-share-id="${meme.id}" aria-label="Share meme" title="Share meme"><span class="material-symbols-outlined" aria-hidden="true">share</span></button>
|
||||
<button class="text-action icon-only-action" type="button" data-view-id="${meme.id}" data-view-url="${meme.url}" data-download-url="${meme.downloadUrl}" aria-label="View full meme" title="View full meme"><span class="material-symbols-outlined" aria-hidden="true">visibility</span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -187,6 +208,111 @@ function renderMemes(memes, options = {}) {
|
||||
observeViewedImages(cards);
|
||||
}
|
||||
|
||||
async function openSharedMemeFromUrl() {
|
||||
const match = window.location.pathname.match(/^\/meme\/([a-f0-9]{64})\/?$/);
|
||||
if (!match) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/memes/${match[1]}`);
|
||||
const payload = await response.json();
|
||||
if (!response.ok) throw new Error(payload.error || 'Meme not found.');
|
||||
await openLightbox({
|
||||
...payload.meme,
|
||||
alt: `Shared meme ${shortId(payload.meme.id)}`
|
||||
});
|
||||
} catch {
|
||||
window.location.replace('/');
|
||||
}
|
||||
}
|
||||
|
||||
async function openLightbox({ id, url, downloadUrl, alt }) {
|
||||
lightboxImage.src = url;
|
||||
lightboxImage.alt = alt;
|
||||
lightboxDownload.href = downloadUrl;
|
||||
lightboxShare.dataset.shareId = id;
|
||||
lightboxId.textContent = `ID: ${shortId(id)}`;
|
||||
if (!lightbox.open) lightbox.showModal();
|
||||
await recordViewOnce(id);
|
||||
}
|
||||
|
||||
async function openShareDialog(id, triggerButton = null) {
|
||||
if (!isMemeId(id)) return;
|
||||
activeShareTrigger = triggerButton;
|
||||
shareLink.value = new URL(`/meme/${id}`, window.location.origin).href;
|
||||
window.clearTimeout(shareStatusTimer);
|
||||
shareStatusTimer = null;
|
||||
shareStatus.textContent = '';
|
||||
resetCopiedFeedback(copyShareLinkButton);
|
||||
if (!shareModal.open) shareModal.showModal();
|
||||
}
|
||||
|
||||
async function copyActiveShareLink() {
|
||||
if (!shareLink.value) return;
|
||||
copyShareLinkButton.disabled = true;
|
||||
try {
|
||||
await copyText(shareLink.value);
|
||||
shareStatus.textContent = 'LINK_COPIED_TO_CLIPBOARD';
|
||||
showCopiedFeedback(copyShareLinkButton);
|
||||
if (activeShareTrigger) showCopiedFeedback(activeShareTrigger);
|
||||
window.clearTimeout(shareStatusTimer);
|
||||
shareStatusTimer = window.setTimeout(() => {
|
||||
shareStatus.textContent = '';
|
||||
shareStatusTimer = null;
|
||||
}, 2600);
|
||||
} catch {
|
||||
shareLink.focus();
|
||||
shareLink.select();
|
||||
shareStatus.textContent = 'COPY_UNAVAILABLE — SELECT_AND_COPY_THE_LINK';
|
||||
} finally {
|
||||
copyShareLinkButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showCopiedFeedback(button) {
|
||||
const icon = button.querySelector('.material-symbols-outlined');
|
||||
const label = button.querySelector('[data-copy-label]');
|
||||
if (!icon) return;
|
||||
|
||||
button.dataset.defaultIcon ||= icon.textContent.trim();
|
||||
if (label) button.dataset.defaultLabel ||= label.textContent.trim();
|
||||
button.dataset.defaultAriaLabel ||= button.getAttribute('aria-label') || '';
|
||||
button.dataset.defaultTitle ||= button.getAttribute('title') || '';
|
||||
|
||||
icon.textContent = 'check';
|
||||
if (label) label.textContent = 'COPIED';
|
||||
if (button.dataset.defaultAriaLabel) button.setAttribute('aria-label', 'Share link copied');
|
||||
if (button.dataset.defaultTitle) button.setAttribute('title', 'Share link copied');
|
||||
button.classList.add('is-copied');
|
||||
|
||||
window.clearTimeout(copiedFeedbackTimers.get(button));
|
||||
copiedFeedbackTimers.set(button, window.setTimeout(() => {
|
||||
resetCopiedFeedback(button);
|
||||
}, 2600));
|
||||
}
|
||||
|
||||
function resetCopiedFeedback(button) {
|
||||
const icon = button.querySelector('.material-symbols-outlined');
|
||||
const label = button.querySelector('[data-copy-label]');
|
||||
window.clearTimeout(copiedFeedbackTimers.get(button));
|
||||
copiedFeedbackTimers.delete(button);
|
||||
if (icon && button.dataset.defaultIcon) icon.textContent = button.dataset.defaultIcon;
|
||||
if (label && button.dataset.defaultLabel) label.textContent = button.dataset.defaultLabel;
|
||||
if (button.dataset.defaultAriaLabel) button.setAttribute('aria-label', button.dataset.defaultAriaLabel);
|
||||
if (button.dataset.defaultTitle) button.setAttribute('title', button.dataset.defaultTitle);
|
||||
button.classList.remove('is-copied');
|
||||
}
|
||||
|
||||
async function copyText(value) {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(value);
|
||||
return;
|
||||
}
|
||||
|
||||
shareLink.focus();
|
||||
shareLink.select();
|
||||
if (!document.execCommand('copy')) throw new Error('Clipboard unavailable.');
|
||||
}
|
||||
|
||||
async function validateClientFile(file) {
|
||||
if (!file) return 'SELECT A FILE.';
|
||||
if (!SAFE_TYPES.has(file.type)) return 'ONLY PNG AND JPEG ARE ACCEPTED.';
|
||||
|
||||
Reference in New Issue
Block a user