https://billet.aalborgzoo.dk/assets/standard-shop/scripts/imageList-56c49bffacb307d8a771e951d113f4a2.js

1/* global modal */
2/* exported imageList */
3const imageList = {
4
5	/**
6	 * Initialize an image list.
7	 *
8	 * @param {HTMLElement} imageList
9	 */
10	init: function(imageList) {
11		const $imageList = $(imageList);
12		const $main = $imageList.find('[data-type="main"]:first');
13		this.showByMain($main);
14	},
15
16	/**
17	 * Handle hover start on a main image.
18	 *
19	 * @param {HTMLElement} element
20	 */
21	onMouseEnter: function(element) {
22		$(element).find('[data-type="control"]').show();
23	},
24
25	/**
26	 * Handle hover end on a main image.
27	 *
28	 * @param {HTMLElement} element
29	 */
30	onMouseLeave: function(element) {
31		$(element).find('[data-type="control"]').hide();
32	},
33
34	/**
35	 * Show the previous image.
36	 *
37	 * @param {HTMLElement} element
38	 */
39	previous: function(element) {
40		const $imageList = $(element).closest('[data-type="imageList"]');
41		const $mains = $imageList.find('[data-type="main"]');
42		let $previousMain = null;
43		$mains.each(function() {
44			const $current = $(this);
45			if ($current.is(':visible')) {
46				return false;
47			}
48			$previousMain = $current;
49
50			return true;
51		});
52		if ( ! $previousMain) {
53			$previousMain = $mains.last();
54		}
55		this.showByMain($previousMain);
56	},
57
58	/**
59	 * Show the next image.
60	 *
61	 * @param {HTMLElement} element
62	 */
63	next: function(element) {
64		const $imageList = $(element).closest('[data-type="imageList"]');
65		const $mains = $imageList.find('[data-type="main"]');
66		let $nextMain = null;
67		let currentFound = false;
68		$mains.each(function() {
69			const $current = $(this);
70			if (currentFound) {
71				$nextMain = $current;
72
73				return false;
74			}
75			if ($current.is(':visible')) {
76				currentFound = true;
77			}
78
79			return true;
80		});

81		if ( ! $nextMain) {
82			$nextMain = $mains.first();
83		}
84		this.showByMain($nextMain);
85	},
86
87	/**
88	 * Scroll the thumb list.
89	 * @todo Implement
90	 *
91	 * @param {HTMLElement} element
92	 */
93	previousThumb: function(element) { // eslint-disable-line no-empty-function
94	},
95
96	/**
97	 * Scroll the thumb list.
98	 * @todo Implement
99	 *
100	 * @param {HTMLElement} element
101	 */
102	nextThumb: function(element) { // eslint-disable-line no-empty-function
103	},
104
105	/**
106	 * Change the active image by the image itself.
107	 *
108	 * @param {HTMLElement} element
109	 */
110	showByMain: function(element) {
111		const $main = $(element);
112		const imageId = $main.data('image-id');
113		const $imageList = $main.closest('[data-type="imageList"]');
114		$imageList.find('[data-type="main"]').not($main).hide();
115		$main.show();
116		const $thumbs = $imageList.find('[data-type="thumb"]').removeClass('active');
117		$thumbs.filter('[data-image-id="' + imageId + '"]').addClass('active');
118	},
119
120	/**
121	 * Change the active image by a thumb image.
122	 *
123	 * @param {HTMLElement} element
124	 */
125	showByThumb: function(element) {
126		const $thumb = $(element);
127		const imageId = $thumb.data('image-id');
128		const $imageList = $thumb.closest('[data-type="imageList"]');
129		const $mains = $imageList.find('[data-type="main"]').hide();
130		$mains.filter('[data-image-id="' + imageId + '"]').show();
131		$imageList.find('[data-type="thumb"]').removeClass('active');
132		$thumb.addClass('active');
133	},
134
135	/**
136	 * Open a modal with a zoom image.
137	 *
138	 * @param {string} imageUrl
139	 */
140	openModal: function(imageUrl) {
141		const img = document.createElement('img');
142		img.src = imageUrl;
143		img.classList.add('img-fluid');
144		const div = document.createElement('div');
145		div.classList.add('d-flex');
146		div.classList.add('justify-content-center');
147		div.appendChild(img);
148		modal.create('image', {
149			body: div,
150			size: 'xl',
151			buttons: ['button.close'],
152			reload: true,
153			backdrop: true
154		});
155	}
156
157};