https://halloijburg.nl/web/js/imageModal.js?modified=1758051526418

1// Also needs surroundingimpl
2document.ready(function(){
3	document.body.on("click", ".cx_open-image-modal", function(e) {
4		
5		e.stopPropagation();
6		e.preventDefault();
7		
8		var currentTarget = this;
9		
10		// Append image modal to body if it does not exist
11		if (!document.querySelector(".cx_img-modal")) {
12			const template = document.createElement('template');
13				template.innerHTML = '\n\
14					<div class="cx_img-modal" role="dialog" tabindex="-1">\n\
15						<div class="cx_img-modal-dialog" role="document">\n\
16							<a class="go_button go_button-border cx_close-button">+</a>\n\
17						</div>\n\
18					</div>'; 
19			document.body.append(template.content);
20			template.remove();
21		}
22		
23		var imageModal = document.querySelector('.cx_img-modal');
24		var imageDialog = imageModal.querySelector(".cx_img-modal-dialog");
25		
26		// Remove previous defined tooltips, images, hearths
27		var element = document.querySelector('.cx_img-modal .tooltip');
28		if (element) {
29			element.remove();
30		}
31		element = document.querySelector('.cx_img-modal .cx_img-modal-dialog img');
32		if (element) {
33			element.remove();
34		}
35		element = document.querySelector('.cx_img-modal .cx_img-modal-dialog .cx_img-modal-caption');
36		if (element) {
37			element.remove();
38		}
39		element = document.querySelector('.cx_img-modal .cx_img-modal-dialog .go_hearth');
40		if (element) {
41			element.remove();
42		}
43
44		var caption = this.dataset.caption;
45		var score = this.dataset.score;
46		var imageUrl = this.dataset.imageurl;
47		imageModal.classList.remove('hidden');
48		
49		// Add image
50		var template = document.createElement('template');
51		template.innerHTML = '<img src="' + imageUrl + '" alt="large-image">';
52		var img = template.content.firstElementChild;
53		template.remove();
54		imageDialog.append(img);
55		
56		// Caption
57		if (caption) {
58			img.classList.add('cx_img-modal-img-has-caption');
59			imageDialog.append('<div class="cx_img-modal-caption">' + caption + '</div>');
60		}
61		
62		// Score
63		if (score) {
64			var template = document.createElement('template');
65			template.innerHTML = '<i class="fa fa-heart go_hearth go_hearth-mobile go_hearth-modal" aria-hidden="true" data-bs-container=".cx_img-modal"><span class="go_hearth-mobile-number">' +  score + '</span></i>';
66			imageDialog.append(template.content);
67			var hearthModal = document.querySelector('go_hearth-modal');
68			if (score == 1) {
69				var tooltip = new bootstrap.Tooltip(hearthModal, ({
70					title: "Op dit moment is hiervoor in totaal " + score + " hartje gegeven", 
71					container: ".cx_img-modal"
72				}))
73			} else {
74				var tooltip = new bootstrap.Tooltip(hearthModal, ({
75					title: "Op dit moment zijn hiervoor in totaal " + score + " hartjes gegeven", 
76					container: ".cx_img-modal"
77				}))
78			}
79		}
80		
81		// Click events
82		imageModal.on('click', function(e){
83			this.classList.add('hidden');
84		});
85		
86		document.querySelector(".cx_close-button").on('click', function(e) {
87			this.closest('.cx_img-modal').classList.add('hidden');
88		});
89		
90		imageModal.on('click', 'img', function(e){
91			e.stopPropagation();
92		})
93		
94		// Prev / Next buttons of [data-imageThumb]
95		var prevBtn = document.querySelector('.cx_image-modal-btn-prev');
96		if (prevBtn) {
97			prevBtn.remove();
98		}
99		var nextBtn = document.querySelector('.cx_image-modal-btn-next');
100		if (nextBtn) {
101			nextBtn.remove();
102		}
103		
104		var imageThumbs = document.querySelectorAll('[data-imageThumb]');
105		if (imageThumbs.length > 1) {
106			var dataImageUrl = currentTarget.dataset.imageurl;
107			var currentThumb = document.querySelector('[data-imageThumb][data-imageurl="' + dataImageUrl + '"]');
108			var index;
109			for (let i = 0; i < imageThumbs.length; i++) {
110				let item = imageThumbs[i];
111				if (item == currentThumb) {
112					index = i;
113					break;
114				}
115			}
116			
117			if (index > 0) {
118				var prev = imageThumbs[index - 1];
119				var template = document.createElement('template');
120				template.innerHTML = '<a href="#" class="cx_open-image-modal cx_image-modal-btn-prev" data-imageurl="' + prev.dataset.imageurl + '"><span class="carousel-control-prev-icon"></span></a>';
121				var a = template.content.firstElementChild;
122				var caption = prev.dataset.caption;
123				if (caption) {
124					a.setAttribute('data-caption', caption);
125				}
126				imageDialog.prepend(a);
127			}
128			
129			if (index < imageThumbs.length - 1) {
130				var next = imageThumbs[index + 1];
131				var template = document.createElement('template');
132				template.innerHTML = '<a href="#" class="cx_open-image-modal cx_image-modal-btn-next" data-imageurl="' + next.dataset.imageurl + '"><span class="carousel-control-next-icon"></span></i></a>';
133				var a = template.content.firstElementChild;
134				var caption = next.dataset.caption;
135				if (caption) {
136					a.setAttribute('data-caption', caption);
137				}
138				imageDialog.prepend(a);
139			}
140		}
141	});	
142});