KAW-7686 Refactor

Netcentric · Aug 1, 2024 · c9fc64c · c9fc64c
1 parent aeb5eec
commit c9fc64c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 52 deletions.
diff --git 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
@@ -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,41 +111,46 @@ 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')) {
       slide.classList.add('carousel-slide-media-only');
     }
   });
 
-  const slideWrapper = document.createElement('div');
-  slideWrapper.classList.add('carousel-slide-wrapper');
-  slideWrapper.append(...slides);
+  return slidesList;
+}
+
+function buildSlideDotsNav(slides) {
+  const dotNav = document.createRange().createContextualFragment(
+    `<ul class="carousel-nav">
+      ${slides.map((_, index) => `
+        <li class="carousel-nav-item">
+          <button class="carousel-nav-button">${getTextLabel('Slide')} ${index}</button>
+        </li>
+      `).join('')}
+    </ul>`,
+  );
+
+  return dotNav.children[0];
+}
 
-  const buttons = document.createRange().createContextualFragment(`
-    <div class="carousel-buttons">
+function createArrowsButtons() {
+  const arrowButtons = document.createRange().createContextualFragment(`
+    <div class="carousel-arrow-buttons">
       <button aria-label="${getTextLabel('Prev slide')}">
         <span class="icon icon-arrow">
           <img data-icon-name="arrow" src="/icons/arrow.svg" alt="" loading="lazy">
@@ -159,33 +164,40 @@ export default async function decorate(block) {
     </div>
   `);
 
-  const carouselNav = document.createRange().createContextualFragment(
-    `<ul class="carousel-nav">
-      ${slides.map((_, index) => `
-        <li class="carousel-nav-item">
-          <button class="carousel-nav-button">${getTextLabel('Slide')} ${index}</button>
-        </li>
-      `).join('')}
-    </ul>`,
-  );
+  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
@@ -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)
-  );
-}