Large Signpost Carousel: Default

import debounce from 'lodash.debounce';
import Glide from '@glidejs/glide';

export default ({
  largeSignpostCarouselElement,
  responsive = [],
  ...options
}) => {
  const slides = largeSignpostCarouselElement.querySelectorAll(
    '.glide__slides > li'
  );
  // let glide = '';
  let transformCount = 0;
  const breakpointSettings = {
    500: {
      perView: 1,
    },
    954: {
      perView: 1,
    },
    1200: {
      perView: 1,
    },
    ...responsive,
  };

  const getCurrentSettings = () => {
    const screenWidth = window.innerWidth;

    // Because the `perView` changes at different breakpoints, find
    // the relevant setting for the current screensize.
    // Filter out any settings that are smaller than the current size, and
    // then use the first in the list, as this will be the most relevant.
    // If none are available, assume we are using the biggest setting.

    // TODO: We should be able to reuse this, if we want to change the pagination
    // to scroll full pages, rather than individual items
    const breakpointSettingsForCurrentSize =
      Object.keys(breakpointSettings).filter(
        i => parseInt(i, 10) > screenWidth
      )[0] || Object.keys(breakpointSettings).slice(-1);

    return breakpointSettings[breakpointSettingsForCurrentSize];
  };

  const updateBulletSize = (dot, action) => {
    if (action === 'add') {
      largeSignpostCarouselElement
        .querySelector(
          `.glide-carousel__pagination > [data-glide-dir='=${dot}']`
        )
        .classList.add('small');
    } else {
      largeSignpostCarouselElement
        .querySelector(
          `.glide-carousel__pagination > [data-glide-dir='=${dot}']`
        )
        .classList.remove('small');
    }
  };

  const setBulletDefaultSize = () => {
    const maxDots = 5;
    const totalCount = slides.length;
    const navigationElements = largeSignpostCarouselElement.querySelectorAll(
      `.glide-carousel__pagination > [data-glide-dir]`
    );

    if (totalCount > maxDots) {
      navigationElements.forEach(item => {
        item.classList.remove('small');
      });
      transformCount = 0;
      // eslint-disable-next-line no-param-reassign
      largeSignpostCarouselElement.querySelector(
        '.glide-carousel__pagination'
      ).style.transform = 'translateX(0)';
      updateBulletSize(4, 'add');
    }
  };

  const setBulletSize = (currentSlide, nextSlide) => {
    const maxDots = 5;
    const transformXIntervalNext = -24;
    const transformXIntervalPrev = 24;
    const totalCount = slides.length;

    if (totalCount > maxDots) {
      if (nextSlide > currentSlide) {
        if (
          largeSignpostCarouselElement
            .querySelector(
              `.glide-carousel__pagination > [data-glide-dir='=${nextSlide}']`
            )
            .classList.contains('small')
        ) {
          if (
            !largeSignpostCarouselElement
              .querySelector(
                `.glide-carousel__pagination > [data-glide-dir]:last-child`
              )
              .classList.contains('small')
          ) {
            // eslint-disable-next-line operator-assignment
            transformCount = transformCount + transformXIntervalNext;
            updateBulletSize(nextSlide, 'remove');
            const nextSlidePlusOne = nextSlide + 1;

            updateBulletSize(nextSlidePlusOne, 'add');
            // eslint-disable-next-line no-param-reassign
            largeSignpostCarouselElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
            const pPointer = nextSlide - 3;
            const pPointerMinusOne = pPointer - 1;

            updateBulletSize(pPointerMinusOne, 'remove');
            updateBulletSize(pPointer, 'add');
          }
        } else {
          // eslint-disable-next-line no-lonely-if
          if (nextSlide === slides.length - 1) {
            const navigationElements = largeSignpostCarouselElement.querySelectorAll(
              `.glide-carousel__pagination > [data-glide-dir]`
            );

            navigationElements.forEach(item => {
              item.classList.remove('small');
            });
            updateBulletSize(slides.length - 5, 'add');
            transformCount = (slides.length - 5) * transformXIntervalNext;
            // eslint-disable-next-line no-param-reassign
            largeSignpostCarouselElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
          }
        }
      } else {
        // eslint-disable-next-line no-lonely-if
        if (
          largeSignpostCarouselElement
            .querySelector(
              `.glide-carousel__pagination > [data-glide-dir='=${nextSlide}']`
            )
            .classList.contains('small')
        ) {
          if (
            !largeSignpostCarouselElement
              .querySelector(
                `.glide-carousel__pagination > [data-glide-dir]:first-child`
              )
              .classList.contains('small')
          ) {
            // eslint-disable-next-line operator-assignment
            transformCount = transformCount + transformXIntervalPrev;
            updateBulletSize(nextSlide, 'remove');
            const nextSlidePlusOne = nextSlide - 1;

            updateBulletSize(nextSlidePlusOne, 'add');
            // eslint-disable-next-line no-param-reassign
            largeSignpostCarouselElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
            const nPointer = currentSlide + 3;
            const nPointerMinusOne = nPointer - 1;

            // console.log(`${nPointer} - ${nPointerMinusOne}`);
            updateBulletSize(nPointer, 'remove');
            updateBulletSize(nPointerMinusOne, 'add');
          }
        } else {
          // eslint-disable-next-line no-lonely-if
          if (nextSlide === 0) {
            setBulletDefaultSize();
          }
        }
      }
    }
  };

  const setSlideCount = currentIndex => {
    const slideCountBlock = largeSignpostCarouselElement.querySelector(
      `li:nth-child(${currentIndex +
        1}) .large-signpost-carousel__totalslides--count`
    );

    slideCountBlock.innerHTML = `${currentIndex + 1} / ${slides.length}`;
  };

  const showPaginationByPage = () => {
    // Glide shows a pagination button for each item, and doesn't provide
    // an option to navigate whole pages at a time.
    // This function hides extra individual dots, so that only the first item of
    // each page is shown. (Based on the `perView` setting).
    const { perView } = getCurrentSettings();

    const paginationElements = largeSignpostCarouselElement.querySelectorAll(
      `.glide-carousel__pagination button:not(:nth-child(${perView}n + 1))`
    );

    paginationElements.forEach(item => {
      item.classList.add('hidden');
    });

    setSlideCount(0);
    setBulletDefaultSize();
  };

  const showHideNavigation = () => {
    const maxPerView = getCurrentSettings().perView;
    const navigationElements = largeSignpostCarouselElement.querySelectorAll(
      '[data-glide-dir]'
    );

    if (!slides || slides.length <= maxPerView) {
      navigationElements.forEach(item => item.classList.add('hidden'));
      // eslint-disable-next-line no-param-reassign
      largeSignpostCarouselElement.querySelector(
        '.image-gallery__navigation'
      ).style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      largeSignpostCarouselElement.querySelector(
        '.image-gallery__totalslides'
      ).style.display = 'none';
      largeSignpostCarouselElement
        .querySelector('.glide__slides')
        .classList.add('singleslide');
      return;
    }
    navigationElements.forEach(item => item.classList.remove('hidden'));

    showPaginationByPage();
  };

  const addRemoveFocusEvent = (eventObj, action) => {
    if (action === 'focus') {
      eventObj.forEach(element => {
        element.addEventListener('focus', () => {
          largeSignpostCarouselElement
            .querySelector('.large-signpost-carousel__navigation')
            .classList.add('active');
          largeSignpostCarouselElement
            .querySelector('.large-signpost-carousel__playpause')
            .classList.add('active');
        });
      });
    } else {
      eventObj.forEach(element => {
        element.addEventListener('focusout', () => {
          largeSignpostCarouselElement
            .querySelector('.large-signpost-carousel__navigation')
            .classList.remove('active');
          largeSignpostCarouselElement
            .querySelector('.large-signpost-carousel__playpause')
            .classList.remove('active');
        });
      });
    }
  };

  const createPagination = () => {
    const bulletContainer = document.createElement('div');

    bulletContainer.classList.add('glide-carousel__pagination');
    bulletContainer.dataset.glideEl = 'controls[nav]';

    slides.forEach((slide, index) => {
      const button = document.createElement('button');

      button.dataset.glideDir = `=${index}`;
      button.tabIndex = '-1';
      bulletContainer.appendChild(button);

      addRemoveFocusEvent([slide.querySelector('a')], 'focus');
      addRemoveFocusEvent([slide.querySelector('a')], 'focusout');
    });

    largeSignpostCarouselElement
      .querySelector('.carousel-nav-wrapper')
      .appendChild(bulletContainer);
    showHideNavigation();
  };

  createPagination();

  window.addEventListener(
    'resize',
    debounce(() => {
      // Hide the navigation when we don't have more items than we can show on screen
      showHideNavigation();
    }, 250)
  );

  const glide = new Glide(largeSignpostCarouselElement, {
    perView: 1,
    autoplay: 10000,
    animationTimingFunc: 'ease-out',
    breakpoints: breakpointSettings,
    ...options,
  });

  const playBtn = largeSignpostCarouselElement.querySelector(
    '.large-signpost-carousel__cta--play'
  );
  const pauseBtn = largeSignpostCarouselElement.querySelector(
    '.large-signpost-carousel__cta--pause'
  );
  const prevBtn = largeSignpostCarouselElement.querySelector(
    '.large-signpost-carousel__cta--prev'
  );
  const nextBtn = largeSignpostCarouselElement.querySelector(
    '.large-signpost-carousel__cta--next'
  );

  glide.mount();

  glide.on('run', () => {
    const currentSlide = largeSignpostCarouselElement
      .querySelector(
        '.glide-carousel__pagination > [data-glide-dir].glide__bullet--active'
      )
      .getAttribute('data-glide-dir')
      .substr(1);
    const nextSlide = glide.index;

    // console.log(`${currentSlide} - ${nextSlide}`);
    // eslint-disable-next-line radix
    setBulletSize(parseInt(currentSlide), nextSlide);
    setSlideCount(nextSlide);
    updateBulletSize(nextSlide, 'remove');
  });
  playBtn.addEventListener('click', () => {
    // console.log('play');
    glide.play(10000);
    pauseBtn.classList.remove('hidden');
    playBtn.classList.add('hidden');
  });

  pauseBtn.addEventListener('click', () => {
    // console.log(glide.pause);
    glide.update({ autoplay: false });
    glide.pause();
    pauseBtn.classList.add('hidden');
    playBtn.classList.remove('hidden');
  });

  const focusElements = [playBtn, pauseBtn, prevBtn, nextBtn];

  addRemoveFocusEvent(focusElements, 'focus');
  addRemoveFocusEvent(focusElements, 'focusout');
  return glide;
};