From c9fc64cc995366195f6f8c8af0fec5accdc0315e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Thu, 1 Aug 2024 10:59:39 +0200 Subject: [PATCH] KAW-7686 Refactor --- blocks/carousel/carousel.css | 12 +++--- blocks/carousel/carousel.js | 80 +++++++++++++++++++++--------------- scripts/helpers.js | 12 ------ 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index a9e73b1..231f05e 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -23,11 +23,11 @@ overflow: hidden; } -.carousel-buttons { +.carousel-arrow-buttons { display: none; } -.carousel-buttons button { +.carousel-arrow-buttons button { width: 34px; height: 34px; padding: 0; @@ -38,16 +38,16 @@ margin: 0 30px; } -.carousel-buttons button:first-of-type { +.carousel-arrow-buttons button:first-of-type { transform: translateY(-50%) rotate(180deg); } -.carousel-buttons button:last-of-type { +.carousel-arrow-buttons button:last-of-type { transform: translateY(-50%); right: 0; } -.carousel-buttons button img { +.carousel-arrow-buttons button img { width: 24px; height: 24px; display: flex; @@ -113,7 +113,7 @@ --slide-part-on-edge: 0.5; } - .carousel-buttons { + .carousel-arrow-buttons { display: flex; } diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js index 5f8b979..9e66d28 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/carousel/carousel.js @@ -1,5 +1,5 @@ import { getTextLabel } from '../../scripts/scripts.js'; -import { addSwiping, callOnIntersection, isElementInViewport } from '../../scripts/helpers.js'; +import { addSwiping, callOnIntersection } from '../../scripts/helpers.js'; const SLIDE_CHANGE_DIRECTION = { NEXT: 'next', @@ -111,28 +111,19 @@ function setAutoPlayForVideos(block) { // autoplaying videos only when visible on the screan callOnIntersection(videos, (isIntersecting, target) => { if (isIntersecting) { + target.muted = true; target.play(); return; } target.pause(); }); - - // using setTimout to make sure that the elemnt is already added to the DOM - setTimeout(() => { - if (videos[0] && isElementInViewport(videos[0])) { - videos[0].muted = true; - videos[0].play(); - } - }, 100); } -export default async function decorate(block) { - const slides = [...block.querySelectorAll(':scope > div > div ')]; - - slides.forEach((slide) => { +function buildSlides(slidesList) { + slidesList.forEach((slide) => { slide.classList.add('carousel-slide'); - slide.parentElement.replaceWith(slide); + slide.parentElement.replaceWith(slide); // removing wrapping parent element slide.innerHTML = slide.innerHTML.trim(); // removing spaces and new lines if (slide.childElementCount === 1 && slide.querySelector('picture, video')) { @@ -140,12 +131,26 @@ export default async function decorate(block) { } }); - const slideWrapper = document.createElement('div'); - slideWrapper.classList.add('carousel-slide-wrapper'); - slideWrapper.append(...slides); + return slidesList; +} + +function buildSlideDotsNav(slides) { + const dotNav = document.createRange().createContextualFragment( + ``, + ); + + return dotNav.children[0]; +} - const buttons = document.createRange().createContextualFragment(` -
+function createArrowsButtons() { + const arrowButtons = document.createRange().createContextualFragment(` +
`); - const carouselNav = document.createRange().createContextualFragment( - ``, - ); + return arrowButtons.children[0]; +} + +export default async function decorate(block) { + const slides = [...block.querySelectorAll(':scope > div > div ')]; + + buildSlides(slides); + + const slideWrapper = document.createElement('div'); + slideWrapper.classList.add('carousel-slide-wrapper'); + slideWrapper.append(...slides); + + const arrowsButtons = createArrowsButtons(); + const donNav = buildSlideDotsNav(slides); block.append(slideWrapper); - block.append(buttons.children[0]); - block.append(carouselNav.children[0]); + block.append(arrowsButtons); + block.append(donNav); - const onIndexUpdate = (activeIndex) => { + const onActiveSlideIndexUpdate = (activeIndex) => { const navButtons = [...block.querySelectorAll('.carousel-nav .carousel-nav-button')]; navButtons.forEach((el) => el.classList.remove('carousel-nav-button-active')); navButtons[activeIndex].classList.add('carousel-nav-button-active'); }; - const { getActiveSlideIndex, setActiveSlideIndex } = createCarouselStateManager(onIndexUpdate); + const { + getActiveSlideIndex, setActiveSlideIndex, + } = createCarouselStateManager(onActiveSlideIndexUpdate); - onIndexUpdate(getActiveSlideIndex()); + onActiveSlideIndexUpdate(getActiveSlideIndex()); recalcSlidePositions(slides, getActiveSlideIndex(), null); - [...block.querySelectorAll('.carousel-buttons button')].forEach((button, btnIndex) => { + [...block.querySelectorAll('.carousel-arrow-buttons button')].forEach((button, btnIndex) => { button.addEventListener('click', () => { const activeIndex = getActiveSlideIndex(); if (btnIndex === 0) { diff --git a/scripts/helpers.js b/scripts/helpers.js index ba44491..c4a8da0 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -62,15 +62,3 @@ export function callOnIntersection(elements, onChange) { observer.observe(video); }); } - -// check if any part of the element is in a viewport -export function isElementInViewport(el) { - const rect = el.getBoundingClientRect(); - - return ( - rect.bottom > 0 - && rect.right > 0 - && rect.top < (window.innerHeight || document.documentElement.clientHeight) - && rect.left < (window.innerWidth || document.documentElement.clientWidth) - ); -}