https://www.arktos.be/global/js/lcp-swiper.js

1var LCPSwiper = {
2	swipers: null,
3	timer: null,
4	startDrag: false,
5	startX: 0,
6	scrollLeft: 0,
7	hasMoved: false,
8	velocity: 0,
9	minMove: 5,
10	maxWidth: 0,
11	init: function () {
12		var that = this;
13		that.swipers = $("[data-lcp-swiper] .partial__list, [data-lcp-swiper] [data-lcp-swiper-list]");
14
15		if (that.swipers.length > 0) {
16			// if (that.swipers.length > 0 && that.swipers.children().length > 2) {
17			that.checkHorizontalSwiper();
18			that.initSortableObserver();
19			$(window).on('resize', function (e) {
20				if (that.timer != null) {
21					clearTimeout(that.timer);
22				}
23				that.timer = setTimeout(function () {
24					that.checkHorizontalSwiper();
25				}, 300);
26			});
27			$(document).on('click', '[data-lcp-swiper-button]', function (e) {
28				e.preventDefault();
29				var btn = $(this);
30				that.goTo(btn);
31			});
32		}
33	},
34
35	initdragging: function (swiper, swiperList) {
36		var that = LCPSwiper;
37		if (swiper) {
38			LCPSwiper.checkScrollposition(swiperList);
39			swiperList.on('mousedown', that.startDragging);
40			swiperList.on('touchstart', that.stopDragging);
41
42			swiperList.on('mousemove', that.dragEvent);
43			swiperList.on('touchmove', that.dragEvent);
44
45			swiperList.on('mouseup', that.stopDragging);
46			swiperList.on('mouseleave', that.stopDragging);
47			swiperList.on('touchend', that.stopDragging);
48
49			swiperList.on('scroll', function () {
50				clearTimeout($.data(this, 'scrollTimer'));
51				$.data(this, 'scrollTimer', setTimeout(function () {
52					LCPSwiper.checkScrollposition(swiperList);
53				}, 150));
54			});
55		}
56	},
57
58	initSortableObserver: function () {
59		var that = this;
60		if (!window.MutationObserver) return;
61
62		var observer = new MutationObserver(function (mutations) {
63			mutations.forEach(function (mutation) {
64				if (mutation.type !== 'attributes' || mutation.attributeName !== 'class') return;
65
66				var target = $(mutation.target);
67				var isSortable = target.hasClass('ui-sortable');
68
69				if (isSortable) {
70					// Sorteer-modus actief: bewaar wrapper-referentie en verwijder data-lcp-swiper
71					// zodat alle CSS-selectors op [data-lcp-swiper] stoppen te matchen
72					var wrapper = target.closest('[data-lcp-swiper]');
73					if (wrapper.length > 0) {
74						target.data('lcp-swiper-wrapper', wrapper);
75						var originalVal = wrapper.attr('data-lcp-swiper');
76						wrapper.data('lcp-swiper-original', originalVal !== undefined ? originalVal : '');
77						wrapper.removeAttr('data-lcp-swiper');
78						wrapper.removeClass('swipe-active swipe-left swipe-right');
79						wrapper.find('[data-lcp-swiper-controls]').addClass('hidden');
80					}
81				} else {
82					// Sorteer-modus gestopt: herstel data-lcp-swiper en hercheck swiper-layout
83					var wrapper = target.data('lcp-swiper-wrapper');
84					if (wrapper && wrapper.length > 0) {
85						var original = wrapper.data('lcp-swiper-original');
86						if (original !== undefined) {
87							wrapper.attr('data-lcp-swiper', original);
88							wrapper.removeData('lcp-swiper-original');
89							target.removeData('lcp-swiper-wrapper');
90							setTimeout(function () {
91								that.checkHorizontalSwiper();
92							}, 100);
93						}
94					}
95				}
96			});
97		});
98
99		that.swipers.each(function () {
100			observer.observe(this, { attributes: true, attributeFilter: ['class'] });
101		});
102	},
103
104	buildNavs: function (swiper, swiperList) {
105		var bulletEl = swiper.find('[data-lcp-swiper-controls="bullets"] li:first').clone(),
106			bulletBtn = bulletEl.find('button'),
107			bulletNav = swiper.find('[data-lcp-swiper-controls="bullets"] > ul'),
108			swiperChildren = swiperList.children(),
109			swiperChildWidth = Math.ceil(swiperChildren.outerWidth());
110			var noOfVisibleItems = Math.ceil((swiper.innerWidth() - (swiperChildWidth/2)) / swiperChildWidth);
111			var swiperItemsCount = swiperChildren.length - noOfVisibleItems + 1;
112
113		bulletBtn.removeClass('active');
114		bulletBtn.find('.current-item').remove();
115
116		// console.log(swiperChildren, swiperChildWidth);
117		// console.log(swiperChildren.length, noOfVisibleItems, swiperItemsCount);
118
119		swiper.find('[data-lcp-swiper-controls="bullets"] li:first').siblings().remove();
120		for (var i = 1; i < swiperItemsCount; i++) {
121			var current = bulletEl.clone();
122			// console.log(current);
123
124			current.find('.lcp-swiper__navigation-item--count').html((i + 1));
125			bulletNav.append(current);
126		}
127
128		LCPSwiper.setNavActive(swiperList);
129		// console.log(slider);
130	},
131	startDragging: function (e) {
132		if ($(this).hasClass('ui-sortable') || $(this).closest('.ui-sortable').length > 0) return;
133		e.preventDefault();
134		e.stopPropagation();
135
136		var that = LCPSwiper;
137		that.swiperElm = this;
138		if (e.which !== 1 || that.startDrag) return; // enkel linkermuisknop
139
140		that.startDrag = true;
141		that.hasMoved = false;

142		that.startX = e.pageX - that.swiperElm.offsetLeft;
143		that.scrollLeft = that.swiperElm.scrollLeft;
144		that.swiperElm.classList.add('lcp-swiper-select');
145
146
147	},
148	dragEvent: function (e) {
149		if (!LCPSwiper.startDrag) { return; }
150		if ($(LCPSwiper.swiperElm).hasClass('ui-sortable') || $(LCPSwiper.swiperElm).closest('.ui-sortable').length > 0) {
151			LCPSwiper.startDrag = false;
152			return;
153		}
154		e.preventDefault();
155		e.stopPropagation();
156
157		setTimeout(() => {
158			var that = LCPSwiper;
159			const x = e.pageX - that.swiperElm.offsetLeft;
160			const scroll = (x - that.startX) * 1.5;
161
162			that.swiperElm.scrollLeft = that.scrollLeft - scroll;
163
164			if (Math.abs(scroll) > that.minMove) {
165				that.hasMoved = true;
166
167				const rawVelocity = (that.scrollLeft - that.swiperElm.scrollLeft) * 0.045;
168				const isNegative = rawVelocity < 0;
169
170				const thresholdNumber = 50;
171				const threshold = isNegative ? (-1 * thresholdNumber) : thresholdNumber;
172
173				if ((isNegative && rawVelocity > threshold) || (!isNegative && rawVelocity < threshold)) {
174					that.velocity = rawVelocity;
175				} else {
176					that.velocity = threshold;
177				}
178			}
179		}, 0); // Defer heavy tasks
180	},
181	stopDragging: function (e) {
182
183		var that = LCPSwiper;
184		if (e.which !== 1 || !that.startDrag) return; // enkel linkermuisknop
185
186		e.preventDefault();
187		e.stopPropagation();
188		//cancel click event a tag
189		if (!that.hasMoved) {
190			var elm = document.elementFromPoint(e.x, e.y);
191			if (elm != null) {
192				elm.click();
193			}
194		} else {
195
196			$(document).on('click.preventClick', 'a', function (event) {
197				event.preventDefault();
198				event.stopImmediatePropagation();
199				$(document).off('click.preventClick');
200			});
201		}
202		that.startDrag = false;
203
204		$(that.swiperElm).animate({
205			scrollLeft: that.getNextSnapPoint(),
206			easing: 'easeOutBounce'
207		}, 350 + that.velocity);
208	},
209	getNextSnapPoint: function () {
210		var that = LCPSwiper;
211		var scrollLeft = that.swiperElm.scrollLeft;
212		var children = that.swiperElm.children;
213
214		// Zorg ervoor dat er kinderen zijn
215		if (children.length === 0) {
216			return 0; // Geen snap-punt als er geen kinderen zijn
217		}
218
219		// Maak een array van de breedtes van elk item
220		var childWidths = Array.from(children).map(function(child) {
221			return child.offsetWidth;
222		});
223
224		var nextSnapPoint = 0;
225		var totalWidth = 0;
226		var childIndex = 0;
227
228		// Loop door alle kinderen en bereken welk item het meest in de buurt van het huidige scrollpunt is
229		for (var i = 0; i < childWidths.length; i++) {
230			totalWidth += childWidths[i];
231
232			// Controleer of het scrollLeft voorbij dit punt is
233			if (scrollLeft < totalWidth) {
234				childIndex = i;
235				break;
236			}
237		}
238
239		// Als er een restwaarde is (scrollLeft % breedte), bepalen of we naar het volgende item moeten scrollen
240		var remainder = scrollLeft - (totalWidth - childWidths[childIndex]);
241
242		if (remainder > 0 && remainder > childWidths[childIndex] / 2) {
243			childIndex++;
244		}
245
246		// Bereken het snap-punt
247		nextSnapPoint = childWidths.slice(0, childIndex).reduce(function(acc, curr) {
248			return acc + curr;
249		}, 0);
250
251		// Verifieer of het snap-punt binnen de geldige grenzen ligt
252		if (nextSnapPoint >

252 that.swiperElm.scrollWidth - childWidths[childWidths.length - 1]) {
253			nextSnapPoint = that.swiperElm.scrollWidth - childWidths[childWidths.length - 1];
254		}
255
256		return nextSnapPoint;
257	},
258	checkHorizontalSwiper: function () {
259		var that = this;
260		that.swipers.each(function (i) {
261			var swipeZone = $(this),
262				swiperWrapper = swipeZone.parent();
263				swiperControls = swiperWrapper.find('[data-lcp-swiper-controls]');
264
265			swipeZone.find('> :first-child').addClass('is-active');
266
267
268			// console.log(swipeZone, IcordisFrontent.hasScrollHorizontal(swipeZone), swiperWrapper);
269			// console.log(swiperControls);
270
271			if (IcordisFrontent.hasScrollHorizontal(swipeZone)) {
272				that.buildNavs(swiperWrapper, swipeZone);
273				that.initdragging(swiperWrapper, swipeZone);
274
275				swiperControls.data(swiperControls).each(function (e) {
276					var $this = $(this);
277					if ($this.data('lcp-swiper-controls') === 'buttons') {
278						$(this).removeClass('hidden');
279					} else if ($this.data('lcp-swiper-controls') === 'bullets') {
280						$(this).removeClass('hidden');
281					}
282				});
283
284				swiperWrapper.addClass('swipe-active');
285
286			} else {
287				swiperWrapper.removeClass('swipe-active swipe-left swipe-right');
288				swiperControls.addClass('hidden');
289			}
290		});
291	},
292	checkScrollposition: function (swiperList) {
293		var swipeZone = swiperList,
294			swiperWrapper = swipeZone.parent(),
295			scrollMarge =  1,
296			currentScrollPos = Math.ceil(swipeZone.scrollLeft());
297
298
299		// console.log(swipeZone);
300		// console.log(swiperWrapper, swipeZone, currentScrollPos);

301		// console.log(currentScrollPos + Math.ceil(swipeZone.innerWidth()),Math.ceil(swipeZone[0].scrollWidth));
302
303		if (currentScrollPos > 0) {
304			swiperWrapper
305				.addClass('swipe-left')
306				.find('[data-lcp-swiper-button].prev')
307				// .removeClass('hidden');
308				.removeClass('disabled').prop('disabled', false);
309		} else {
310			swiperWrapper
311				.removeClass('swipe-left')
312				.find('[data-lcp-swiper-button].prev')
313				.addClass('disabled').prop('disabled', true);
314				// .addClass('hidden');
315		}
316
317		if (
318			currentScrollPos + Math.ceil(swipeZone.innerWidth()) + scrollMarge >=
319			Math.ceil(swipeZone[0].scrollWidth)
320		) {
321			swiperWrapper
322				.removeClass('swipe-right')
323				.find('[data-lcp-swiper-button].next')
324				// .addClass('hidden');
325				.addClass('disabled').prop('disabled', true);
326		} else {
327			swiperWrapper
328				.addClass('swipe-right')
329				.find('[data-lcp-swiper-button].next')
330				// .removeClass('hidden');
331				.removeClass('disabled').prop('disabled', false);
332		}
333
334		LCPSwiper.setNavActive(swipeZone);
335	},
336	setNavActive: function (container) {
337		var $container = container;
338		var $children = $container.children();
339		var containerLeft = $container.scrollLeft();
340		var swiper = container.closest('[data-lcp-swiper]');
341		var btns = swiper.find('.lcp-swiper__navigation-link');
342		var ci = btns.find('.current-item');
343
344		var totalWidth = 0;
345
346		$children.removeClass('is-active'); // verwijder eerst bestaande classes
347
348		$children.each(function (i, child) {
349			var $child = $(child);
350			var childLeft = totalWidth;
351			var childRight = childLeft + $child.outerWidth();
352
353			totalWidth = childRight;
354
355			if (childRight > containerLeft + ($child.outerWidth() / 3)) {
356
357				$child.addClass('is-active');
358				btns.removeClass('active');
359				var btn = btns.eq(i);
360				btn.addClass('active');
361				ci.appendTo(btn);
362				return false;
363			}
364		});
365    },
366	goTo: function (btn) {
367		var swiper = btn.parents('[data-lcp-swiper]');
368		var swiperList = swiper.find('.partial__list, [data-lcp-swiper-list]');
369		var currentScrollPos = swiperList.scrollLeft();
370		var itemsWidth = Math.ceil(swiperList.children().innerWidth());
371
372		var btnType = btn.attr('data-lcp-swiper-button');
373		var index = 0;
374		var scrollTo = btn.hasClass('prev') ? itemsWidth : - itemsWidth;
375
376		var moveTo = 0; //currentScrollPos - scrollTo;
377
378		var items = swiperList.children();
379		var currentItem = null;
380
381		items.each(function () {
382			var item = $(this);
383
384			if (item.position().left >= 0 && item.position().left < swiperList.width()) {
385				currentItem = item;
386				return false; // Break de loop
387			}
388		});
389
390		if (currentItem) {
391			var currentItemWidth = Math.ceil(currentItem.innerWidth());
392
393			// Controleer of het een vorige of volgende knop is
394			if (btn.hasClass('prev')) {
395				moveTo = currentScrollPos - currentItem.prev().innerWidth();
396			} else {
397				moveTo = currentScrollPos + currentItemWidth;
398			}
399		}
400
401		if (btnType === 'nav') {
402			index = btn.parent().index();
403			moveTo = itemsWidth * index;
404		}
405
406		swiperList.stop().animate({
407			scrollLeft: moveTo
408		}, {
409			duration: 300,
410			// complete: function () { LCPSwiper.checkScrollposition(swiperList);}
411		});
412
413	},
414}
415
416$(function () {
417	LCPSwiper.init();
418});
419