https://tecidoskite.com.br/wp-content/themes/tecidoskite/assets/js/highlight.js?ver=7.1

1/**
2 * highlight.js — Carrossel de destaques (bloco tecidoskite/destaques)
3 */
4
5document.addEventListener( 'DOMContentLoaded', () => {
6
7	const section = document.querySelector( '.highlight' );
8	if ( ! section ) return;
9
10	// ─── Elementos ────────────────────────────────────────────────
11	const wrapper = section.querySelector( '.highlight__wrapper' );
12	const track   = section.querySelector( '.highlight__track' );
13	const btnPrev = section.querySelector( '.highlight__arrow--prev' );
14	const btnNext = section.querySelector( '.highlight__arrow--next' );
15
16	if ( ! track || ! wrapper ) return;
17
18	const items = [ ...track.children ];
19	if ( ! items.length ) return;
20
21	// ─── Estado ───────────────────────────────────────────────────
22	let currentOffset  = 0;
23	let cachedStep     = 0;
24	let cachedMaxOffset = 0;
25
26	// ─── Cachear dimensões (evita reflow a cada interação) ───────
27	function cacheDimensions() {
28		const gap = parseFloat( window.getComputedStyle( track ).gap ) || 0;
29		cachedStep      = items[ 0 ].offsetWidth + gap;
30		cachedMaxOffset = Math.max( 0, track.scrollWidth - wrapper.offsetWidth );
31	}
32
33	cacheDimensions();
34
35	// ─── Mover para offset ────────────────────────────────────────
36	function goToOffset( offset ) {
37		currentOffset = Math.max( 0, Math.min( offset, cachedMaxOffset ) );
38		track.style.transform = `translate3d(-${ currentOffset }px, 0, 0)`;
39		updateArrows();
40	}
41
42	// ─── Atualizar estado disabled das setas ─────────────────────
43	function updateArrows() {
44		if ( btnPrev ) btnPrev.disabled = currentOffset <= 0;
45		if ( btnNext ) btnNext.disabled = currentOffset >= cachedMaxOffset;
46	}
47
48	// ─── Setas ───────────────────────────────────────────────────
49	btnPrev?.addEventListener( 'click', () => {
50		goToOffset( currentOffset - cachedStep );
51	} );
52
53	btnNext?.addEventListener( 'click', () => {
54		goToOffset( currentOffset + cachedStep );
55	} );
56
57	// ─── Swipe mobile ─────────────────────────────────────────────
58	let touchStartX = 0;
59	const SWIPE_THRESHOLD = 30;
60
61	track.addEventListener( 'touchstart', ( e ) => {
62		touchStartX = e.touches[ 0 ].clientX;
63	}, { passive: true } );
64
65	track.addEventListener( 'touchend', ( e ) => {
66		const diff = touchStartX - e.changedTouches[ 0 ].clientX;
67		if ( Math.abs( diff ) > SWIPE_THRESHOLD ) {
68			goToOffset( currentOffset + ( diff > 0 ? cachedStep : -cachedStep ) );
69		}
70	}, { passive: true } );
71
72	// ─── Resize handler (debounce) ────────────────────────────────
73	let resizeTimer;
74
75	window.addEventListener( 'resize', () => {
76		clearTimeout( resizeTimer );
77		resizeTimer = setTimeout( () => {
78			cacheDimensions();
79			goToOffset( Math.min( currentOffset, cachedMaxOffset ) );
80		}, 150 );
81	} );
82
83	// ─── Inicialização ────────────────────────────────────────────
84	goToOffset( 0 );
85
86} );