https://huisartsenpostenamsterdam.nl/en/wp-content/plugins/mindd-g…ndd-gezondheidsklachten-carrousel-public.js

1(function( $ ) {
2	'use strict';
3( () => {
4	class MinddKF {
5		#itemsPerFeed = [ 6, 3 ]; // 6 desktop, 3 mobile
6		#itemsPerPage = 6;
7		#list;
8
9		constructor( root ) {
10			const style = getComputedStyle( root );
11			this.#itemsPerFeed = [
12				style.getPropertyValue( '--items-desktop' ),
13				style.getPropertyValue( '--items-mobile' ),
14			].map( Number );
15			this.#addEvents( root );
16
17			this.#list = root.children[ 0 ];
18			this.#onResize(); // Set initial value
19		}
20
21		#addEvents = ( root ) => {
22			root.addEventListener( 'click', this.#onScrollFeed, false );
23			window.addEventListener( 'resize', this.#onResize, false );
24		};
25
26		#onScrollFeed = ( { target, currentTarget } ) => {
27			// Exit if no button is found
28			const btn = target.closest( '.mindd-kf__btn' );
29			if ( ! btn ) {
30				return;
31			}
32
33			let items = [];
34
35			// Move backwards
36			if ( btn.classList.contains( 'mindd-kf__btn--prev' ) ) {
37				this.#setDirection( currentTarget, 0 );
38				items = this.#changeElementPosition( this.#list, this.#list.children.length - 1, 'start' );
39			}
40
41			// Move forwards
42			if ( btn.classList.contains( 'mindd-kf__btn--next' ) ) {
43				this.#setDirection( currentTarget, 2 );
44				items = this.#changeElementPosition( this.#list, 0, 'end' );
45			}
46
47			this.#show( items );
48
49			setTimeout( () => {
50				// Reset direction
51				this.#setDirection( currentTarget, 1 );
52				this.#hide( items );
53
54				// Append reordered items
55				for ( const li of items ) {
56					this.#list.appendChild( li );
57				}
58			}, 500 ); // Timing must match CSS
59		};
60
61		/**
62		 *
63		 * @param {HTMLElement} element
64		 * @param {(0|1|2)}     direction - Direction for CSS animation, `0` = left, `1` = neutral, `2` = right
65		 */
66		#setDirection = ( element, direction ) => {
67			element.style.setProperty( '--direction', direction );
68		};
69
70		#show = ( items ) => {
71			for ( const li of items ) {
72				li.classList.add( 'mindd-kf__item--active' );
73				li.classList.add( 'mindd-kf__item--animating' );
74			}
75		};
76
77		#hide = ( items ) => {
78			for ( const li of items ) {
79				li.classList.remove( 'mindd-kf__item--active' );
80				li.classList.remove( 'mindd-kf__item--animating' );
81			}
82
83			for ( let i = 1; i <= this.#itemsPerPage; i++ ) {
84				items[ i ].classList.add( 'mindd-kf__item--active' );
85			}
86		};
87
88		/**
89		 * Change element position in given list
90		 *
91		 * @param {HTMLUListElement} list        - Parent node containing all DOM nodes
92		 * @param {number}           index       - index of element to reposition
93		 * @param {('start'|'end')}  destination - where to move the element
94		 */
95		#changeElementPosition = ( list, index, destination ) => {
96			const items = [ ...list.children ];
97			const item = items.splice( index, 1 )?.[ 0 ];
98
99			if ( ! item ) {
100				return;
101			}
102
103			if ( destination === 'start' ) {
104				items.unshift( item );
105			} else if ( destination === 'end' ) {
106				items.push( item );
107			}
108
109			return items;
110		};
111
112		#onResize = () => {
113			this.#itemsPerPage = window.innerWidth > 768 ? this.#itemsPerFeed[ 0 ] : this.#itemsPerFeed[ 1 ];
114			this.#hide( this.#list.children );
115		};
116	}
117
118	/**
119	 * Create instance for each feed
120	 */
121	const feeds = document.querySelectorAll( '.mindd-kf' );
122	for ( const feed of feeds ) {
123		new MinddKF( feed );
124	}
125} )();
126})( jQuery );