carousel.js

  1. import { queryOne, queryAll } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.toggleSelector Selector for toggling element
  7.  * @param {String} options.prevSelector Selector for prev element
  8.  * @param {String} options.nextSelector Selector for next element
  9.  * @param {String} options.contentClass Selector for the content container
  10.  * @param {String} options.slidesClass Selector for the slides container
  11.  * @param {String} options.slideClass Selector for the slide items
  12.  * @param {String} options.navigationClass Selector for the navigation container
  13.  * @param {String} options.currentSlideClass Selector for the counter current slide number
  14.  */
  15. export class Carousel {
  16.   /**
  17.    * @static
  18.    * Shorthand for instance creation and initialisation.
  19.    *
  20.    * @param {HTMLElement} root DOM element for component instantiation and scope
  21.    *
  22.    * @return {Carousel} An instance of Carousel.
  23.    */
  24.   static autoInit(root, { CAROUSEL: defaultOptions = {} } = {}) {
  25.     const carousel = new Carousel(root, defaultOptions);
  26.     carousel.init();
  27.     root.ECLCarousel = carousel;
  28.     return carousel;
  29.   }
  31.   constructor(
  32.     element,
  33.     {
  34.       playSelector = '.ecl-carousel__play',
  35.       pauseSelector = '.ecl-carousel__pause',
  36.       prevSelector = '.ecl-carousel__prev',
  37.       nextSelector = '.ecl-carousel__next',
  38.       containerClass = '.ecl-carousel__container',
  39.       slidesClass = '.ecl-carousel__slides',
  40.       slideClass = '.ecl-carousel__slide',
  41.       currentSlideClass = '.ecl-carousel__current',
  42.       navigationItemsClass = '.ecl-carousel__navigation-item',
  43.       controlsClass = '.ecl-carousel__controls',
  44.       attachClickListener = true,
  45.       attachResizeListener = true,
  46.     } = {},
  47.   ) {
  48.     // Check element
  49.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  50.       throw new TypeError(
  51.         'DOM element should be given to initialize this widget.',
  52.       );
  53.     }
  55.     this.element = element;
  57.     // Options
  58.     this.playSelector = playSelector;
  59.     this.pauseSelector = pauseSelector;
  60.     this.prevSelector = prevSelector;
  61.     this.nextSelector = nextSelector;
  62.     this.containerClass = containerClass;
  63.     this.slidesClass = slidesClass;
  64.     this.slideClass = slideClass;
  65.     this.currentSlideClass = currentSlideClass;
  66.     this.navigationItemsClass = navigationItemsClass;
  67.     this.controlsClass = controlsClass;
  68.     this.attachClickListener = attachClickListener;
  69.     this.attachResizeListener = attachResizeListener;
  71.     // Private variables
  72.     this.container = null;
  73.     this.slides = null;
  74.     this.btnPlay = null;
  75.     this.btnPause = null;
  76.     this.btnPrev = null;
  77.     this.btnNext = null;
  78.     this.index = 1;
  79.     this.total = 0;
  80.     this.allowShift = true;
  81.     this.activeNav = null;
  82.     this.autoPlay = null;
  83.     this.autoPlayInterval = null;
  84.     this.hoverAutoPlay = null;
  85.     this.resizeTimer = null;
  86.     this.posX1 = 0;
  87.     this.posX2 = 0;
  88.     this.posInitial = 0;
  89.     this.posFinal = 0;
  90.     this.threshold = 80;
  91.     this.navigationItems = null;
  92.     this.navigation = null;
  93.     this.controls = null;
  94.     this.direction = 'ltr';
  95.     this.cloneFirstSLide = null;
  96.     this.cloneLastSLide = null;
  97.     this.executionCount = 0;
  98.     this.maxExecutions = 5;
  100.     // Bind `this` for use in callbacks
  101.     this.handleAutoPlay = this.handleAutoPlay.bind(this);
  102.     this.handleMouseOver = this.handleMouseOver.bind(this);
  103.     this.handleMouseOut = this.handleMouseOut.bind(this);
  104.     this.shiftSlide = this.shiftSlide.bind(this);
  105.     this.checkIndex = this.checkIndex.bind(this);
  106.     this.moveSlides = this.moveSlides.bind(this);
  107.     this.handleResize = this.handleResize.bind(this);
  108.     this.dragStart = this.dragStart.bind(this);
  109.     this.dragEnd = this.dragEnd.bind(this);
  110.     this.dragAction = this.dragAction.bind(this);
  111.     this.handleFocus = this.handleFocus.bind(this);
  112.     this.handleKeyboardOnPlay = this.handleKeyboardOnPlay.bind(this);
  113.     this.handleKeyboardOnBullets = this.handleKeyboardOnBullets.bind(this);
  114.     this.checkBannerHeights = this.checkBannerHeights.bind(this);
  115.     this.resetBannerHeights = this.resetBannerHeights.bind(this);
  116.   }
  118.   /**
  119.    * Initialise component.
  120.    */
  121.   init() {
  122.     if (!ECL) {
  123.       throw new TypeError('Called init but ECL is not present');
  124.     }
  125.     ECL.components = ECL.components || new Map();
  127.     this.btnPlay = queryOne(this.playSelector, this.element);
  128.     this.btnPause = queryOne(this.pauseSelector, this.element);
  129.     this.btnPrev = queryOne(this.prevSelector, this.element);
  130.     this.btnNext = queryOne(this.nextSelector, this.element);
  131.     this.slidesContainer = queryOne(this.slidesClass, this.element);
  132.     this.container = queryOne(this.containerClass, this.element);
  133.     this.navigation = queryOne('.ecl-carousel__navigation', this.element);
  134.     this.navigationItems = queryAll(this.navigationItemsClass, this.element);
  135.     this.controls = queryOne(this.controlsClass, this.element);
  136.     this.currentSlide = queryOne(this.currentSlideClass, this.element);
  137.     this.direction = getComputedStyle(this.element).direction;
  139.     this.slides = queryAll(this.slideClass, this.element);
  140.     this.total = this.slides.length;
  142.     // If only one slide, don't initialize carousel and hide controls
  143.     if (this.total <= 1) {
  144.       if (this.btnNext) {
  145.         this.btnNext.style.display = 'none';
  146.       }
  147.       if (this.btnPrev) {
  148.         this.btnPrev.style.display = 'none';
  149.       }
  150.       if (this.controls) {
  151.         this.controls.style.display = 'none';
  152.       }
  153.       if (this.slidesContainer) {
  154.         this.slidesContainer.style.display = 'block';
  155.       }
  156.       return false;
  157.     }
  159.     // Start initializing carousel
  160.     const firstSlide = this.slides[0];
  161.     const lastSlide = this.slides[this.slides.length - 1];
  163.     // Clone first and last slide
  164.     this.cloneFirstSLide = firstSlide.cloneNode(true);
  165.     this.cloneLastSLide = lastSlide.cloneNode(true);
  166.     this.slidesContainer.appendChild(this.cloneFirstSLide);
  167.     this.slidesContainer.insertBefore(this.cloneLastSLide, firstSlide);
  169.     // Refresh the slides variable after adding new cloned slides
  170.     this.slides = queryAll(this.slideClass, this.element);
  172.     // Initialize position of slides and size of the carousel
  173.     this.slides.forEach((slide) => {
  174.       slide.style.width = `${100 / this.slides.length}%`;
  175.     });
  176.     this.handleResize();
  178.     // Initialze pagination and navigation
  179.     this.checkIndex();
  181.     // Bind events
  182.     if (this.navigationItems) {
  183.       this.navigationItems.forEach((nav, index) => {
  184.         nav.addEventListener(
  185.           'click',
  186.           this.shiftSlide.bind(this, index + 1, true),
  187.         );
  188.       });
  189.     }
  190.     if (this.navigation) {
  191.       this.navigation.addEventListener('keydown', this.handleKeyboardOnBullets);
  192.     }
  193.     if (this.attachClickListener && this.btnPlay && this.btnPause) {
  194.       this.btnPlay.addEventListener('click', this.handleAutoPlay);
  195.       this.btnPause.addEventListener('click', this.handleAutoPlay);
  196.     }
  197.     if (this.btnPlay) {
  198.       this.btnPlay.addEventListener('keydown', this.handleKeyboardOnPlay);
  199.     }
  200.     if (this.attachClickListener && this.btnNext) {
  201.       this.btnNext.addEventListener(
  202.         'click',
  203.         this.shiftSlide.bind(this, 'next', true),
  204.       );
  205.     }
  206.     if (this.attachClickListener && this.btnPrev) {
  207.       this.btnPrev.addEventListener(
  208.         'click',
  209.         this.shiftSlide.bind(this, 'prev', true),
  210.       );
  211.     }
  213.     if (this.slidesContainer) {
  214.       // Mouse events
  215.       this.slidesContainer.addEventListener('mouseover', this.handleMouseOver);
  216.       this.slidesContainer.addEventListener('mouseout', this.handleMouseOut);
  218.       // Touch events
  219.       this.slidesContainer.addEventListener('touchstart', this.dragStart);
  220.       this.slidesContainer.addEventListener('touchend', this.dragEnd);
  221.       this.slidesContainer.addEventListener('touchmove', this.dragAction);
  222.       this.slidesContainer.addEventListener('transitionend', this.checkIndex);
  223.     }
  224.     if (this.container) {
  225.       this.container.addEventListener('focus', this.handleFocus, true);
  226.     }
  227.     if (this.attachResizeListener) {
  228.       window.addEventListener('resize', this.handleResize);
  229.     }
  231.     // Set ecl initialized attribute
  232.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  233.     ECL.components.set(this.element, this);
  235.     return this;
  236.   }
  238.   /**
  239.    * Destroy component.
  240.    */
  241.   destroy() {
  242.     if (this.cloneFirstSLide && this.cloneLastSLide) {
  243.       this.cloneFirstSLide.remove();
  244.       this.cloneLastSLide.remove();
  245.     }
  246.     if (this.btnPlay) {
  247.       this.btnPlay.replaceWith(this.btnPlay.cloneNode(true));
  248.     }
  249.     if (this.btnPause) {
  250.       this.btnPause.replaceWith(this.btnPause.cloneNode(true));
  251.     }
  252.     if (this.btnNext) {
  253.       this.btnNext.replaceWith(this.btnNext.cloneNode(true));
  254.     }
  255.     if (this.btnPrev) {
  256.       this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
  257.     }
  258.     if (this.slidesContainer) {
  259.       this.slidesContainer.removeEventListener(
  260.         'mouseover',
  261.         this.handleMouseOver,
  262.       );
  263.       this.slidesContainer.removeEventListener('mouseout', this.handleMouseOut);
  264.       this.slidesContainer.removeEventListener('touchstart', this.dragStart);
  265.       this.slidesContainer.removeEventListener('touchend', this.dragEnd);
  266.       this.slidesContainer.removeEventListener('touchmove', this.dragAction);
  267.       this.slidesContainer.removeEventListener(
  268.         'transitionend',
  269.         this.checkIndex,
  270.       );
  271.     }
  272.     if (this.container) {
  273.       this.container.removeEventListener('focus', this.handleFocus, true);
  274.     }
  275.     if (this.navigationItems) {
  276.       this.navigationItems.forEach((nav) => {
  277.         nav.replaceWith(nav.cloneNode(true));
  278.       });
  279.     }
  280.     if (this.attachResizeListener) {
  281.       window.removeEventListener('resize', this.handleResize);
  282.     }
  283.     if (this.autoPlayInterval) {
  284.       clearInterval(this.autoPlayInterval);
  285.       this.autoPlay = null;
  286.     }
  287.     if (this.element) {
  288.       this.element.removeAttribute('data-ecl-auto-initialized');
  289.       ECL.components.delete(this.element);
  290.     }
  291.   }
  293.   /**
  294.    * Set the banners height above the xl breakpoint
  295.    */
  296.   checkBannerHeights() {
  297.     this.executionCount += 1;
  298.     if (this.executionCount > this.maxExecutions) {
  299.       clearInterval(this.intervalId);
  300.       this.executionCount = 0;
  301.       return;
  302.     }
  303.     const heightValues = this.slides.map((slide) => {
  304.       const banner = queryOne('.ecl-banner', slide);
  305.       const height = parseInt(banner.style.height, 10);
  306.       if (banner.style.height === 'auto') {
  307.         return 0;
  308.       }
  309.       if (Number.isNaN(height) || height === 100) {
  310.         return 1;
  311.       }
  313.       return height;
  314.     });
  316.     const elementHeights = heightValues.filter(
  317.       (height) => height !== undefined,
  318.     );
  320.     const tallestElementHeight = Math.max(...elementHeights);
  321.     // We stop checking the heights of the banner if we know that all the slides
  322.     // have height: auto; or if a banner with an height that is not 100% or undefined is found.
  323.     if (
  324.       (elementHeights.length === this.slides.length &&
  325.         tallestElementHeight === 0) ||
  326.       tallestElementHeight > 1
  327.     ) {
  328.       clearInterval(this.intervalId);
  330.       if (tallestElementHeight > 0) {
  331.         this.executionCount = 0;
  332.         this.slides.forEach((slide) => {
  333.           let bannerImage = null;
  334.           const banner = queryOne('.ecl-banner', slide);
  335.           if (banner) {
  336.             bannerImage = queryOne('img', banner);
  337.             banner.style.height = `${tallestElementHeight}px`;
  338.           }
  339.           if (bannerImage) {
  340.             bannerImage.style.aspectRatio = 'auto';
  341.           }
  342.         });
  343.       }
  344.     }
  345.   }
  347.   /**
  348.    * Set the banners height below the xl breakpoint
  349.    */
  350.   resetBannerHeights() {
  351.     this.slides.forEach((slide) => {
  352.       const banner = queryOne('.ecl-banner', slide);
  353.       let bannerImage = null;
  354.       if (banner) {
  355.         banner.style.height = '';
  356.         bannerImage = queryOne('img', banner);
  357.         if (bannerImage) {
  358.           bannerImage.style.aspectRatio = '';
  359.         }
  360.       }
  361.     });
  362.   }
  364.   /**
  365.    * TouchStart handler.
  366.    * @param {Event} e
  367.    */
  368.   dragStart(e) {
  369.     e = e || window.event;
  371.     this.posInitial = this.slidesContainer.offsetLeft;
  373.     if (e.type === 'touchstart') {
  374.       this.posX1 = e.touches[0].clientX;
  375.     }
  376.   }
  378.   /**
  379.    * TouchMove handler.
  380.    * @param {Event} e
  381.    */
  382.   dragAction(e) {
  383.     e = e || window.event;
  385.     if (e.type === 'touchmove') {
  386.       e.preventDefault();
  387.       this.posX2 = this.posX1 - e.touches[0].clientX;
  388.       this.posX1 = e.touches[0].clientX;
  389.     }
  391.     this.slidesContainer.style.left = `${
  392.       this.slidesContainer.offsetLeft - this.posX2
  393.     }px`;
  394.   }
  396.   /**
  397.    * TouchEnd handler.
  398.    */
  399.   dragEnd() {
  400.     this.posFinal = this.slidesContainer.offsetLeft;
  401.     if (this.posFinal - this.posInitial < -this.threshold) {
  402.       this.shiftSlide('next', true);
  403.     } else if (this.posFinal - this.posInitial > this.threshold) {
  404.       this.shiftSlide('prev', true);
  405.     } else {
  406.       this.slidesContainer.style.left = `${this.posInitial}px`;
  407.     }
  408.   }
  410.   /**
  411.    * Action to shift next or previous slide.
  412.    * @param {int|string} dir
  413.    * @param {Boolean} stopAutoPlay
  414.    */
  415.   shiftSlide(dir, stopAutoPlay) {
  416.     if (this.allowShift) {
  417.       if (typeof dir === 'number') {
  418.         this.index = dir;
  419.       } else {
  420.         this.index = dir === 'next' ? this.index + 1 : this.index - 1;
  421.       }
  422.       this.moveSlides(true);
  423.     }
  424.     if (stopAutoPlay && this.autoPlay) {
  425.       this.handleAutoPlay();
  426.     }
  428.     this.allowShift = false;
  429.   }
  431.   /**
  432.    * Transition for the slides.
  433.    * @param {Boolean} transition
  434.    */
  435.   moveSlides(transition) {
  436.     const newOffset = this.container.offsetWidth * this.index;
  437.     this.slidesContainer.style.transitionDuration = transition ? '0.4s' : '0s';
  438.     if (this.direction === 'rtl') {
  439.       this.slidesContainer.style.right = `-${newOffset}px`;
  440.     } else {
  441.       this.slidesContainer.style.left = `-${newOffset}px`;
  442.     }
  443.   }
  445.   /**
  446.    * Action to update slides index and position.
  447.    */
  448.   checkIndex() {
  449.     // Update index
  450.     if (this.index === 0) {
  451.       this.index = this.total;
  452.     }
  453.     if (this.index === this.total + 1) {
  454.       this.index = 1;
  455.     }
  457.     // Move slide without transition to ensure infinity loop
  458.     this.moveSlides(false);
  460.     // Update pagination
  461.     if (this.currentSlide) {
  462.       this.currentSlide.textContent = this.index;
  463.     }
  465.     // Update slides
  466.     if (this.slides) {
  467.       this.slides.forEach((slide, index) => {
  468.         const cta = queryOne('.ecl-link--cta', slide);
  469.         if (this.index === index) {
  470.           slide.removeAttribute('inert', 'true');
  471.           if (cta) {
  472.             cta.removeAttribute('tabindex', -1);
  473.           }
  474.         } else {
  475.           slide.setAttribute('inert', 'true');
  476.           if (cta) {
  477.             cta.setAttribute('tabindex', -1);
  478.           }
  479.         }
  480.       });
  481.     }
  483.     // Update navigation
  484.     if (this.navigationItems) {
  485.       this.navigationItems.forEach((nav, index) => {
  486.         if (this.index === index + 1) {
  487.           nav.setAttribute('aria-current', 'true');
  488.         } else {
  489.           nav.removeAttribute('aria-current', 'true');
  490.         }
  491.       });
  492.     }
  494.     this.allowShift = true;
  495.   }
  497.   /**
  498.    * Toggles play/pause slides.
  499.    */
  500.   handleAutoPlay() {
  501.     if (!this.autoPlay) {
  502.       this.autoPlayInterval = setInterval(() => {
  503.         this.shiftSlide('next');
  504.       }, 5000);
  505.       this.autoPlay = true;
  506.       const isFocus = document.activeElement === this.btnPlay;
  507.       this.btnPlay.style.display = 'none';
  508.       this.btnPause.style.display = 'flex';
  509.       if (isFocus) {
  510.         this.btnPause.focus();
  511.       }
  512.     } else {
  513.       clearInterval(this.autoPlayInterval);
  514.       this.autoPlay = false;
  515.       const isFocus = document.activeElement === this.btnPause;
  516.       this.btnPlay.style.display = 'flex';
  517.       this.btnPause.style.display = 'none';
  518.       if (isFocus) {
  519.         this.btnPlay.focus();
  520.       }
  521.     }
  522.   }
  524.   /**
  525.    * Trigger events on mouseover.
  526.    */
  527.   handleMouseOver() {
  528.     this.hoverAutoPlay = this.autoPlay;
  529.     if (this.hoverAutoPlay) {
  530.       this.handleAutoPlay();
  531.     }
  532.     return this;
  533.   }
  535.   /**
  536.    * Trigger events on mouseout.
  537.    */
  538.   handleMouseOut() {
  539.     if (this.hoverAutoPlay) {
  540.       this.handleAutoPlay();
  541.     }
  542.     return this;
  543.   }
  545.   /**
  546.    * Trigger events on resize.
  547.    */
  548.   handleResize() {
  549.     const vw = Math.max(
  550.       document.documentElement.clientWidth || 0,
  551.       window.innerWidth || 0,
  552.     );
  553.     clearInterval(this.intervalId);
  554.     clearTimeout(this.resizeTimer);
  555.     let containerWidth = 0;
  556.     // We set 250ms delay which is higher than the 200ms delay in the banner.
  557.     this.resizeTimer = setTimeout(() => {
  558.       if (vw >= 998) {
  559.         this.intervalId = setInterval(this.checkBannerHeights, 100);
  560.       } else {
  561.         this.resetBannerHeights();
  562.       }
  563.     }, 250);
  565.     if (vw >= 768) {
  566.       containerWidth = this.container.offsetWidth;
  567.     } else {
  568.       containerWidth = this.container.offsetWidth + 15;
  569.     }
  571.     this.slidesContainer.style.width = `${
  572.       containerWidth * this.slides.length
  573.     }px`;
  575.     this.moveSlides(false);
  577.     // Add class to set a left margin to banner content and avoid arrow overlapping
  578.     if (vw >= 1140 && vw <= 1260) {
  579.       this.container.classList.add('ecl-carousel-container--padded');
  580.     } else {
  581.       this.container.classList.remove('ecl-carousel-container--padded');
  582.     }
  584.     // Desactivate autoPlay for mobile or activate autoPlay onLoad for desktop
  585.     if ((vw <= 768 && this.autoPlay) || (vw > 768 && this.autoPlay === null)) {
  586.       this.handleAutoPlay();
  587.     }
  588.   }
  590.   /**
  591.    * @param {Event} e
  592.    */
  593.   handleKeyboardOnPlay(e) {
  594.     if (e.key === 'Tab' && e.shiftKey) {
  595.       return;
  596.     }
  598.     switch (e.key) {
  599.       case 'Tab':
  600.       case 'ArrowRight':
  601.         e.preventDefault();
  602.         this.activeNav = queryOne(
  603.           `${this.navigationItemsClass}[aria-current="true"]`,
  604.         );
  605.         if (this.activeNav) {
  606.           this.activeNav.focus();
  607.         }
  608.         if (this.autoPlay) {
  609.           this.handleAutoPlay();
  610.         }
  611.         break;
  613.       default:
  614.     }
  615.   }
  617.   /**
  618.    * @param {Event} e
  619.    */
  620.   handleKeyboardOnBullets(e) {
  621.     const focusedEl = document.activeElement;
  622.     switch (e.key) {
  623.       case 'Tab':
  624.         if (e.shiftKey) {
  625.           e.preventDefault();
  626.           if (focusedEl.previousSibling) {
  627.             this.shiftSlide('prev', true);
  628.             setTimeout(() => focusedEl.previousSibling.focus(), 400);
  629.           } else {
  630.             this.btnPlay.focus();
  631.           }
  632.         } else if (focusedEl.nextSibling) {
  633.           e.preventDefault();
  634.           this.shiftSlide('next', true);
  635.           setTimeout(() => focusedEl.nextSibling.focus(), 400);
  636.         }
  637.         break;
  639.       case 'ArrowRight':
  640.         if (focusedEl.nextSibling) {
  641.           e.preventDefault();
  642.           this.shiftSlide('next', true);
  643.           setTimeout(() => focusedEl.nextSibling.focus(), 400);
  644.         }
  645.         break;
  647.       case 'ArrowLeft':
  648.         if (focusedEl.previousSibling) {
  649.           this.shiftSlide('prev', true);
  650.           setTimeout(() => focusedEl.previousSibling.focus(), 400);
  651.         } else {
  652.           this.btnPlay.focus();
  653.         }
  654.         break;
  656.       default:
  657.       // Handle other key events here
  658.     }
  659.   }
  661.   /**
  662.    * Trigger events on focus.
  663.    * @param {Event} e
  664.    */
  665.   handleFocus(e) {
  666.     const focusElement = e.target;
  667.     // Disable autoplay if focus is on a slide CTA
  668.     if (
  669.       focusElement &&
  670.       focusElement.contains(document.activeElement) &&
  671.       this.autoPlay
  672.     ) {
  673.       this.handleAutoPlay();
  674.     }
  675.     return this;
  676.   }
  677. }
  679. export default Carousel;