mahmoody
/
matab-panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add bulk download button to image lightbox

This commit is contained in:
SajjadMahmoody 2026-06-02 16:10:52 +03:30
parent 4447002908
commit f4dbb458d1
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/Providers/Filament/AdminPanelProvider.php
View File

@ -309,6 +309,11 @@ function fixGalleryItems() {
->renderHook( ->renderHook(
PanelsRenderHook::BODY_END, PanelsRenderHook::BODY_END,
fn (): string => <<<'HTML' fn (): string => <<<'HTML'
<style>
#fi-lb-download{position:absolute;top:1rem;left:4.5rem;right:auto;z-index:10;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,0.15);border:none;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
#fi-lb-download:hover{background:rgba(255,255,255,0.35);transform:translateY(1px)}
#fi-lb-download:active{transform:translateY(2px)}
</style>
<div id="fi-lightbox"> <div id="fi-lightbox">
<div id="fi-lb-wrap"> <div id="fi-lb-wrap">
<img id="fi-lb-img" src="" alt=""> <img id="fi-lb-img" src="" alt="">
@ -322,6 +327,7 @@ function fixGalleryItems() {
</div> </div>
<button id="fi-lb-cap-toggle" title="نمایش یادداشت"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" style="width:20px;height:20px;"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h6M7 11h4m1 7l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v5a2 2 0 01-2 2h-2l-3 3z"/></svg></button> <button id="fi-lb-cap-toggle" title="نمایش یادداشت"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" style="width:20px;height:20px;"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h6M7 11h4m1 7l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v5a2 2 0 01-2 2h-2l-3 3z"/></svg></button>
<button id="fi-lb-close" title="بستن">✕</button> <button id="fi-lb-close" title="بستن">✕</button>
<button id="fi-lb-download" title="دانلود همه تصاویر"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" style="width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" d="M10 3v9m0 0l-3-3m3 3l3-3M4 16h12"/></svg></button>
<button id="fi-lb-prev" title="قبلی">&#8249;</button> <button id="fi-lb-prev" title="قبلی">&#8249;</button>
<button id="fi-lb-next" title="بعدی">&#8250;</button> <button id="fi-lb-next" title="بعدی">&#8250;</button>
<div id="fi-lb-counter">1 / 1</div> <div id="fi-lb-counter">1 / 1</div>
@ -339,6 +345,7 @@ function fixGalleryItems() {
var lbPrev = document.getElementById('fi-lb-prev'); var lbPrev = document.getElementById('fi-lb-prev');
var lbNext = document.getElementById('fi-lb-next'); var lbNext = document.getElementById('fi-lb-next');
var lbClose = document.getElementById('fi-lb-close'); var lbClose = document.getElementById('fi-lb-close');
var lbDownload = document.getElementById('fi-lb-download');
var lbCaption = document.getElementById('fi-lb-caption'); var lbCaption = document.getElementById('fi-lb-caption');
var lbCapBody = document.getElementById('fi-lb-cap-body'); var lbCapBody = document.getElementById('fi-lb-cap-body');
var lbCapClose = document.getElementById('fi-lb-cap-close'); var lbCapClose = document.getElementById('fi-lb-cap-close');
@ -486,6 +493,30 @@ function onKey(e) {
lbWrap.addEventListener('click', function (e) { if (e.target === lbWrap) hideLightbox(); }); lbWrap.addEventListener('click', function (e) { if (e.target === lbWrap) hideLightbox(); });
lbClose.addEventListener('click', hideLightbox); lbClose.addEventListener('click', hideLightbox);
if (lbDownload) lbDownload.addEventListener('click', function () {
var toDownload = images.slice();
toDownload.forEach(function (url, i) {
setTimeout(function () {
fetch(url)
.then(function (r) {
if (!r.ok) throw new Error('fetch failed');
return r.blob();
})
.then(function (blob) {
var objUrl = URL.createObjectURL(blob);
var a = document.createElement('a');
var ext = (url.split('?')[0].split('.').pop() || 'jpg').toLowerCase();
a.href = objUrl;
a.download = 'image-' + (i + 1) + '.' + ext;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(function () { URL.revokeObjectURL(objUrl); }, 10000);
})
.catch(function () { window.open(url, '_blank'); });
}, i * 700);
});
});
lbPrev.addEventListener('click', function () { navigate(-1); }); lbPrev.addEventListener('click', function () { navigate(-1); });
lbNext.addEventListener('click', function () { navigate(1); }); lbNext.addEventListener('click', function () { navigate(1); });
if (lbCapClose) lbCapClose.addEventListener('click', function () { if (lbCapClose) lbCapClose.addEventListener('click', function () {