import PhotoSwipeLightbox from 'photoswipe/lightbox';
document.addEventListener('livewire:navigated', () => {
const lightbox = new PhotoSwipeLightbox({
gallery: '#album',
children: 'a',
bgOpacity: 1,
arrowPrevSVG: '',
arrowNextSVG: '',
closeSVG: '',
zoomSVG: '',
pswpModule: () => import('photoswipe')
});
lightbox.on('uiRegister', function() {
lightbox.pswp.ui.registerElement({
name: 'download-button',
order: 9,
isButton: true,
tagName: 'button',
html: '',
onInit: (el, pswp) => {
el.setAttribute('download', '');
el.setAttribute('target', '_blank');
el.setAttribute('rel', 'noopener');
pswp.on('change', () => {
el.href = pswp.currSlide.data.element.dataset.pswpDownload;
});
}
});
lightbox.pswp.ui.registerElement({
name: 'makeCover',
ariaLabel: 'Make this Image the Album Cover',
order: 8,
isButton: true,
html: '',
onInit: (el, pswp) => {
pswp.on('change', () => {
el.querySelector('.is-cover').classList.toggle('hidden', pswp.currSlide.data.element.dataset.isCover === 'false')
el.querySelector('.no-cover').classList.toggle('hidden', pswp.currSlide.data.element.dataset.isCover === 'true')
});
},
onClick: (event, el) => {
Livewire.dispatch(`image.makeCover`, {
image_id: pswp.currSlide.data.element.dataset.id
});
pswp.currSlide.data.element.dataset.isCover = 'true';
el.querySelector('.is-cover').classList.toggle('hidden', pswp.currSlide.data.element.dataset.isCover === 'false')
el.querySelector('.no-cover').classList.toggle('hidden', pswp.currSlide.data.element.dataset.isCover === 'true')
ToastinTakin.success("Das Cover wurde ausgetauscht");
}
});
lightbox.pswp.ui.registerElement({
name: 'rotate-button-cw',
ariaLabel: 'Rotate clockwise',
order: 7,
isButton: true,
html: '',
onClick: (event, el) => {
pswp.close();
Livewire.dispatch(`image.rotate`, {
image_id: pswp.currSlide.data.element.dataset.id,
direction: 'cw'
});
}
});
lightbox.pswp.ui.registerElement({
name: 'rotate-button-ccw',
ariaLabel: 'Rotate counter-clockwise',
order: 6,
isButton: true,
html: '',
onClick: (event, el) => {
pswp.close();
Livewire.dispatch(`image.rotate`, {
image_id: pswp.currSlide.data.element.dataset.id,
direction: 'cw'
});
}
});
});
lightbox.init();
document.addEventListener('livewire:init', () => {
Livewire.hook('morph.added', ({ el }) => {
if(el.dataset.pswpWidth !== undefined) {
if(lightbox.pswp !== undefined) {
lightbox.pswp.options.dataSource.items.push(el);
}
}
});
});
});