Антиейджинг продукти

(() => { 'use strict'; const mobileQuery = window.matchMedia('(max-width:767px)'); const init = () => { document.querySelectorAll('[data-als-three-videos-widget]').forEach((widget) => { if (widget.dataset.alsThreeVideosReady === 'true') return; widget.dataset.alsThreeVideosReady = 'true'; const viewport = widget.querySelector('.als-three-videos-section__viewport'); const track = widget.querySelector('.als-three-videos-section__track'); const cards = Array.from(widget.querySelectorAll('[data-als-three-video-card]')); const previous = widget.querySelector('.als-three-videos-section__nav--prev'); const next = widget.querySelector('.als-three-videos-section__nav--next'); const modal = widget.querySelector('[data-als-three-videos-modal]'); const player = widget.querySelector('[data-als-three-videos-player]'); const closeButton = widget.querySelector('.als-three-videos-modal__close'); if (!viewport || !track || !cards.length || !previous || !next || !modal || !player) return; let index = 0; let returnFocus = null; let dragStartX = 0; let dragStartY = 0; let dragStartScroll = 0; let isPointerDown = false; let didDrag = false; let updateFrame = 0; const measurements = () => { const gap = parseFloat(getComputedStyle(track).gap) || 16; const step = cards[0].getBoundingClientRect().width + gap; const visible = Math.max(1, Math.floor((viewport.clientWidth + gap) / step)); return { step, max: Math.max(0, cards.length - visible) }; }; const update = () => { updateFrame = 0; if (mobileQuery.matches) { track.style.transform = 'none'; previous.disabled = false; next.disabled = false; return; } const { step, max } = measurements(); index = Math.min(index, max); track.style.transform = `translateX(-${index * step}px)`; previous.disabled = index = max; }; const requestUpdate = () => { if (!updateFrame) updateFrame = window.requestAnimationFrame(update); }; const scrollMobile = (direction) => { const { step } = measurements(); const end = Math.max(0, viewport.scrollWidth - viewport.clientWidth); if (direction > 0 && viewport.scrollLeft >= end - 2) { viewport.scrollTo({ left: 0, behavior: 'smooth' }); } else if (direction < 0 && viewport.scrollLeft { const id = card?.dataset.youtubeId; if (!id) return; returnFocus = card; player.src = `https://www.youtube.com/embed/${encodeURIComponent(id)}?autoplay=1&rel=0&modestbranding=1&playsinline=1`; modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; closeButton?.focus({ preventScroll: true }); }; const closeVideo = () => { if (!modal.classList.contains('is-open')) return; player.src = ''; modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; returnFocus?.focus({ preventScroll: true }); returnFocus = null; }; widget.addEventListener('click', (event) => { if (event.target.closest('.als-three-videos-section__nav--prev')) { if (mobileQuery.matches) scrollMobile(-1); else { index = Math.max(0, index - 1); requestUpdate(); } return; } if (event.target.closest('.als-three-videos-section__nav--next')) { if (mobileQuery.matches) scrollMobile(1); else { index = Math.min(measurements().max, index + 1); requestUpdate(); } return; } if (event.target.closest('[data-als-three-videos-close]')) { closeVideo(); return; } const card = event.target.closest('[data-als-three-video-card]'); if (card && !mobileQuery.matches) { event.preventDefault(); openVideo(card); } }); widget.addEventListener('keydown', (event) => { const card = event.target.closest('[data-als-three-video-card]'); if (card && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); openVideo(card); } else if (event.key === 'Escape') { closeVideo(); } }); viewport.addEventListener('pointerdown', (event) => { if (!mobileQuery.matches) return; isPointerDown = true; didDrag = false; dragStartX = event.clientX; dragStartY = event.clientY; dragStartScroll = viewport.scrollLeft; viewport.classList.add('is-dragging'); }, { passive: true }); viewport.addEventListener('pointermove', (event) => { if (!mobileQuery.matches || !isPointerDown) return; const dx = event.clientX - dragStartX; const dy = event.clientY - dragStartY; if (Math.abs(dx) > 12 && Math.abs(dx) > Math.abs(dy)) { didDrag = true; viewport.scrollLeft = dragStartScroll - dx; } }, { passive: true }); viewport.addEventListener('pointerup', (event) => { if (!mobileQuery.matches) return; const card = event.target.closest('[data-als-three-video-card]'); isPointerDown = false; viewport.classList.remove('is-dragging'); if (card && !didDrag) { event.preventDefault(); event.stopPropagation(); openVideo(card); } window.setTimeout(() => { didDrag = false; }, 180); }); viewport.addEventListener('pointercancel', () => { isPointerDown = false; didDrag = false; viewport.classList.remove('is-dragging'); }); if ('ResizeObserver' in window) new ResizeObserver(requestUpdate).observe(viewport); else window.addEventListener('resize', requestUpdate, { passive: true }); mobileQuery.addEventListener?.('change', requestUpdate); update(); }); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } window.addEventListener('elementor/frontend/init', init); })();