th/hyprcrd
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slideshow

Browse Source
This commit is contained in:
th committed 2026-04-11 01:22:52 +02:00
1 parent 988a5410f7
commit 262b853c5b
18 files changed
+1305 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/js/modules/gallery.js
+51 -2
View File
@@ -28,6 +28,11 @@ function getReferencedUrls() {
while ((m = mdRe.exec(body)) !== null) urls.add(m[1].split(/\s/)[0]);
const htmlRe = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
while ((m = htmlRe.exec(body)) !== null) urls.add(m[1]);
const slideRe = /```slide-image\s*\n([\s\S]*?)(?:\n```|$)/g;
while ((m = slideRe.exec(body)) !== null) {
const srcMatch = m[1].match(/^\s*src\s*:\s*([^\n]+)/m);
if (srcMatch) urls.add(srcMatch[1].trim());
}
}
return urls;
}
@@ -78,6 +83,7 @@ export async function openGallery() {
<img src="${f.url}" class="w-full h-full object-cover opacity-60 rounded" loading="lazy">
<div style="position:absolute;top:4px;right:4px;display:flex;gap:4px;" class="opacity-0 group-hover:opacity-100 transition-opacity">
<button class="w-6 h-6 flex items-center justify-center bg-black/80 text-t-accent rounded border-0 cursor-pointer hover:bg-t-accent hover:text-t-bg transition-colors" data-new-orphan="${f.name}" title="new card"><i class="ph ph-plus text-sm"></i></button>
<button class="w-6 h-6 flex items-center justify-center bg-black/80 text-t-accent rounded border-0 cursor-pointer hover:bg-t-accent hover:text-t-bg transition-colors" data-new-slide="${f.name}" title="new slide (background)"><i class="ph ph-image-square text-sm"></i></button>
<button class="w-6 h-6 flex items-center justify-center bg-black/80 text-t-danger rounded border-0 cursor-pointer hover:bg-t-danger hover:text-t-bg transition-colors" data-del-orphan="${f.name}" title="delete"><i class="ph ph-trash text-sm"></i></button>
</div>
</div>
@@ -132,13 +138,25 @@ export async function openGallery() {
});
});
// Orphan: inline new slide button (creates image slide with slide-image block)
grid.querySelectorAll('[data-new-slide]').forEach(btn => {
btn.addEventListener('click', e => {
e.stopPropagation();
const name = btn.dataset.newSlide;
const label = name.replace(/\.[^.]+$/, '');
closeGallery();
const body = '```slide-image\nsrc: uploads/' + name + '\n```';
window._openModal({ id: null, title: label, body, color: '#38bdf8', bucket_id: null });
});
});
// Orphan: inline delete button
grid.querySelectorAll('[data-del-orphan]').forEach(btn => {
btn.addEventListener('click', async e => {
e.stopPropagation();
const name = btn.dataset.delOrphan;
if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
const ok = await showDialog({ title: 'delete_image', message: `"${name}" loeschen?`, danger: true, okLabel: 'delete' });
const ok = await showDialog({ title: 'delete_image', message: `Delete "${name}"?`, danger: true, okLabel: 'delete' });
if (!ok) return;
}
await fetch(`api/uploads/${name}`, { method: 'DELETE', headers: { 'X-CSRF-Token': getCsrf() } });
@@ -163,6 +181,9 @@ function openOrphanLightbox(file) {
<button class="orphan-lb-create flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent hover:text-t-bg transition-colors" style="border-radius:4px;">
<i class="ph ph-plus text-sm"></i><span class="font-pixel text-[10px]">new card</span>
</button>
<button class="orphan-lb-slide flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent hover:text-t-bg transition-colors" style="border-radius:4px;">
<i class="ph ph-image-square text-sm"></i><span class="font-pixel text-[10px]">new slide</span>
</button>
<button class="orphan-lb-delete flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-danger text-t-danger hover:bg-t-danger hover:text-t-bg transition-colors" style="border-radius:4px;">
<i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete</span>
</button>
@@ -183,8 +204,16 @@ function openOrphanLightbox(file) {
window._openModal({ id: null, title: name, body: `![${name}](${file.url})`, color: '#38bdf8', bucket_id: null });
});
overlay.querySelector('.orphan-lb-slide').addEventListener('click', async () => {
const name = file.url.split('/').pop().replace(/\.[^.]+$/, '');
close();
closeGallery();
const body = '```slide-image\nsrc: ' + file.url + '\n```';
window._openModal({ id: null, title: name, body, color: '#38bdf8', bucket_id: null });
});
overlay.querySelector('.orphan-lb-delete').addEventListener('click', async () => {
const ok = await showDialog({ title: 'delete_image', message: `"${file.name}" loeschen?`, danger: true, okLabel: 'delete' });
const ok = await showDialog({ title: 'delete_image', message: `Delete "${file.name}"?`, danger: true, okLabel: 'delete' });
if (!ok) return;
await fetch(`api/uploads/${file.name}`, { method: 'DELETE', headers: { 'X-CSRF-Token': getCsrf() } });
close();
@@ -201,3 +230,23 @@ export function closeGallery() {
$('gallery-close')?.addEventListener('click', closeGallery);
$('gallery')?.addEventListener('click', e => { if (e.target === $('gallery')) closeGallery(); });
$('gallery-btn')?.addEventListener('click', openGallery);
// Upload button
$('gallery-upload')?.addEventListener('click', () => $('gallery-upload-file')?.click());
$('gallery-upload-file')?.addEventListener('change', async e => {
const files = Array.from(e.target.files || []);
if (!files.length) return;
for (const file of files) {
const form = new FormData();
form.append('file', file, file.name);
try {
await fetch('api/upload', {
method: 'POST',
body: form,
headers: { 'X-CSRF-Token': getCsrf() },
});
} catch {}
}
e.target.value = '';
await openGallery();
});