https://www.beach2beacon.org/wp-content/themes/beachtobeacon_2_0/r…/js/block-functions.js?ver=1782745677

1const modalControl = document.querySelectorAll(".modal-control");
2modalControl.forEach(control => {
3	control.addEventListener('click', function() {
4		const direction = control.getAttribute('direction')
5		const currentModal = control.closest('.modal');
6		const currentIdx = parseInt(currentModal.dataset.idx);
7		const currentBlockID = control.closest('.modal').dataset.blockId;
8		const modals = document.querySelectorAll(".modal")
9		//hide all modals
10		modals && modals.forEach(modalElement => hideShowModal(modalElement, 'hide'))
11		const nextModalToShow = direction === 'left' ? currentIdx - 1 : currentIdx + 1;
12
13		//show the next one
14		const nextModalElement = document.querySelector(`.${currentBlockID}.modal[data-idx="${nextModalToShow}"]`)
15		hideShowModal(nextModalElement, 'show')
16	});
17});
18
19const imageWrappers = document.querySelectorAll(".gallery-image-wrapper");
20
21imageWrappers.forEach(imageWrapper => {
22	imageWrapper.addEventListener('click', () => openPhotoGalleryModal(imageWrapper));
23	imageWrapper.addEventListener('keydown', (event) => {
24		if (event.code === 'Space' || event.keyCode === 32) {
25			event.preventDefault();
26			openPhotoGalleryModal(imageWrapper);
27		}
28	});
29});
30
31function openPhotoGalleryModal(imageWrapper) {
32	const blockID = imageWrapper.closest('.ra-block').getAttribute('id');
33	const modalIdx = imageWrapper.dataset.idx;
34	const modals = document.querySelectorAll(".modal");
35	const nextModalElement = document.querySelector(`.${blockID}.modal[data-idx="${modalIdx}"]`);
36
37	console.log(imageWrapper, blockID, modalIdx, nextModalElement);
38
39	//hide all modals
40	modals && modals.forEach(modalElement => hideShowModal(modalElement, 'hide'));
41	//show only the next one
42	hideShowModal(nextModalElement, 'show');
43}
44
45const hideShowModal = (modalElement, visibilityState = 'hide') => {
46	if(!modalElement) return false;
47
48	let modalInstance = bootstrap.Modal.getOrCreateInstance(modalElement)
49	if(visibilityState === 'show') {
50		modalInstance.show();
51	} else {
52		modalInstance.hide();
53	}
54}