https://beauterra.com/app/plugins/mayoly-widget/assets/js/pictograms-slider.js?ver=1791193151

1/**
2 * Mayoly Pictograms Slider (mobile only)
3 *
4 * @package Mayoly\Widgets
5 */
6
7(function () {
8	'use strict';
9
10	class PictogramsSlider {
11		constructor(wrapper) {
12			this.wrapper    = wrapper;
13			this.track      = wrapper.querySelector('.mayoly-pictograms');
14			this.items      = wrapper.querySelectorAll('.mayoly-pictograms__item');
15			this.dotsContainer = wrapper.querySelector('.mayoly-pictograms__dots');
16			this.current    = 0;
17			this.total      = this.items.length;
18
19			if ( this.total === 0 ) return;
20
21			this.buildDots();
22			this.goTo(0);
23		}
24
25		buildDots() {
26			this.dotsContainer.innerHTML = '';
27			this.items.forEach( (_, i) => {
28				const btn = document.createElement('button');
29				btn.className = 'mayoly-pictograms__dot';
30				btn.setAttribute('aria-label', 'Pictogramme ' + (i + 1));
31				btn.addEventListener('click', () => this.goTo(i));
32				this.dotsContainer.appendChild(btn);
33			});
34		}
35
36		goTo(index) {
37			this.current = index;
38
39			const offset = index * 100;
40			this.track.style.transform = 'translateX(-' + offset + '%)';
41
42			this.dotsContainer.querySelectorAll('.mayoly-pictograms__dot').forEach((dot, i) => {
43				dot.classList.toggle('is-active', i === index);
44			});
45		}
46	}
47
48	function initSliders() {
49		if ( window.innerWidth > 1024 ) return;
50
51		document.querySelectorAll('.mayoly-pictograms-wrapper').forEach(wrapper => {
52			if ( ! wrapper._pictoSlider ) {
53				wrapper._pictoSlider = new PictogramsSlider(wrapper);
54			}
55		});
56	}
57
58	function destroySliders() {
59		document.querySelectorAll('.mayoly-pictograms-wrapper').forEach(wrapper => {
60			if ( wrapper._pictoSlider ) {
61				const track = wrapper.querySelector('.mayoly-pictograms');
62				if ( track ) track.style.transform = '';
63				wrapper._pictoSlider = null;
64			}
65		});
66	}
67
68	function onResize() {
69		if ( window.innerWidth <= 1024 ) {
70			initSliders();
71		} else {
72			destroySliders();
73		}
74	}
75
76	document.addEventListener('DOMContentLoaded', initSliders);
77	window.addEventListener('resize', onResize);
78
79	// Elementor editor support
80	window.addEventListener('elementor/frontend/init', function() {
81		if ( window.elementorFrontend && window.elementorFrontend.hooks ) {
82			window.elementorFrontend.hooks.addAction('frontend/element_ready/mayoly-content-pictograms.default', function() {
83				onResize();
84			});
85		}
86	});
87})();