news-ticker.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.currentSlideClass Selector for the counter current slide number
  13.  */
  14. export class NewsTicker {
  15.   /**
  16.    * @static
  17.    * Shorthand for instance creation and initialisation.
  18.    *
  19.    * @param {HTMLElement} root DOM element for component instantiation and scope
  20.    *
  21.    * @return {NewsTicker} An instance of News ticker.
  22.    */
  23.   static autoInit(root, { NEWS_TICKER: defaultOptions = {} } = {}) {
  24.     const newsTicker = new NewsTicker(root, defaultOptions);
  25.     newsTicker.init();
  26.     root.ECLNewsTicker = newsTicker;
  27.     return newsTicker;
  28.   }
  30.   constructor(
  31.     element,
  32.     {
  33.       playSelector = '[data-ecl-news-ticker-play]',
  34.       pauseSelector = '[data-ecl-news-ticker-pause]',
  35.       prevSelector = '[data-ecl-news-ticker-prev]',
  36.       nextSelector = '[data-ecl-news-ticker-next]',
  37.       containerClass = '.ecl-news-ticker__container',
  38.       contentClass = '.ecl-news-ticker__content',
  39.       slidesClass = '.ecl-news-ticker__slides',
  40.       slideClass = '.ecl-news-ticker__slide',
  41.       currentSlideClass = '.ecl-news-ticker__counter--current',
  42.       controlsClass = '.ecl-news-ticker__controls',
  43.       attachClickListener = true,
  44.       attachResizeListener = true,
  45.     } = {},
  46.   ) {
  47.     // Check element
  48.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  49.       throw new TypeError(
  50.         'DOM element should be given to initialize this widget.',
  51.       );
  52.     }
  54.     this.element = element;
  56.     // Options
  57.     this.playSelector = playSelector;
  58.     this.pauseSelector = pauseSelector;
  59.     this.prevSelector = prevSelector;
  60.     this.nextSelector = nextSelector;
  61.     this.containerClass = containerClass;
  62.     this.contentClass = contentClass;
  63.     this.slidesClass = slidesClass;
  64.     this.slideClass = slideClass;
  65.     this.currentSlideClass = currentSlideClass;
  66.     this.controlsClass = controlsClass;
  67.     this.attachClickListener = attachClickListener;
  68.     this.attachResizeListener = attachResizeListener;
  70.     // Private variables
  71.     this.container = null;
  72.     this.content = 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.autoPlay = null;
  82.     this.autoPlayInterval = null;
  83.     this.hoverAutoPlay = null;
  84.     this.resizeTimer = null;
  85.     this.cloneFirstSLide = null;
  86.     this.cloneLastSLide = null;
  87.     this.resizeTimer = null;
  89.     // Bind `this` for use in callbacks
  90.     this.handleAutoPlay = this.handleAutoPlay.bind(this);
  91.     this.handleMouseOver = this.handleMouseOver.bind(this);
  92.     this.handleMouseOut = this.handleMouseOut.bind(this);
  93.     this.shiftSlide = this.shiftSlide.bind(this);
  94.     this.checkIndex = this.checkIndex.bind(this);
  95.     this.moveSlides = this.moveSlides.bind(this);
  96.     this.handleResize = this.handleResize.bind(this);
  97.     this.handleFocus = this.handleFocus.bind(this);
  98.   }
  100.   /**
  101.    * Initialise component.
  102.    */
  103.   init() {
  104.     if (!ECL) {
  105.       throw new TypeError('Called init but ECL is not present');
  106.     }
  107.     ECL.components = ECL.components || new Map();
  109.     this.btnPlay = queryOne(this.playSelector, this.element);
  110.     this.btnPause = queryOne(this.pauseSelector, this.element);
  111.     this.btnPrev = queryOne(this.prevSelector, this.element);
  112.     this.btnNext = queryOne(this.nextSelector, this.element);
  113.     this.slidesContainer = queryOne(this.slidesClass, this.element);
  114.     this.container = queryOne(this.containerClass, this.element);
  115.     this.content = queryOne(this.contentClass, this.element);
  116.     this.controls = queryOne(this.controlsClass, this.element);
  118.     this.slides = queryAll(this.slideClass, this.element);
  119.     this.total = this.slides.length;
  121.     // If only one slide, don't initialize ticker and hide controls
  122.     if (this.total <= 1 && this.controls) {
  123.       this.content.style.height = 'auto';
  124.       this.controls.style.display = 'none';
  125.       return false;
  126.     }
  128.     const firstSlide = this.slides[0];
  129.     const lastSlide = this.slides[this.slides.length - 1];
  130.     this.cloneFirstSLide = firstSlide.cloneNode(true);
  131.     this.cloneLastSLide = lastSlide.cloneNode(true);
  133.     // Clone first and last slide
  134.     this.slidesContainer.appendChild(this.cloneFirstSLide);
  135.     this.slidesContainer.insertBefore(this.cloneLastSLide, firstSlide);
  137.     // Refresh the slides variable after adding new cloned slides
  138.     this.slides = queryAll(this.slideClass, this.element);
  140.     // Initialize ticker position and size
  141.     this.handleResize();
  143.     // Activate autoPlay
  144.     this.handleAutoPlay();
  146.     // Bind events
  147.     if (this.attachClickListener && this.btnPlay && this.btnPause) {
  148.       this.btnPlay.addEventListener('click', this.handleAutoPlay);
  149.       this.btnPause.addEventListener('click', this.handleAutoPlay);
  150.     }
  151.     if (this.attachClickListener && this.btnNext) {
  152.       this.btnNext.addEventListener(
  153.         'click',
  154.         this.shiftSlide.bind(this, 1, true),
  155.       );
  156.     }
  157.     if (this.attachClickListener && this.btnPrev) {
  158.       this.btnPrev.addEventListener(
  159.         'click',
  160.         this.shiftSlide.bind(this, -1, true),
  161.       );
  162.     }
  163.     if (this.slidesContainer) {
  164.       this.slidesContainer.addEventListener('transitionend', this.checkIndex);
  165.       this.slidesContainer.addEventListener('mouseover', this.handleMouseOver);
  166.       this.slidesContainer.addEventListener('mouseout', this.handleMouseOut);
  167.     }
  168.     if (this.container) {
  169.       this.container.addEventListener('focus', this.handleFocus, true);
  170.     }
  171.     if (this.attachResizeListener) {
  172.       window.addEventListener('resize', this.handleResize);
  173.     }
  175.     // Set ecl initialized attribute
  176.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  177.     ECL.components.set(this.element, this);
  179.     return this;
  180.   }
  182.   /**
  183.    * Destroy component.
  184.    */
  185.   destroy() {
  186.     if (this.cloneFirstSLide && this.cloneLastSLide) {
  187.       this.cloneFirstSLide.remove();
  188.       this.cloneLastSLide.remove();
  189.     }
  190.     if (this.btnPlay) {
  191.       this.btnPlay.replaceWith(this.btnPlay.cloneNode(true));
  192.     }
  193.     if (this.btnPause) {
  194.       this.btnPause.replaceWith(this.btnPause.cloneNode(true));
  195.     }
  196.     if (this.btnNext) {
  197.       this.btnNext.replaceWith(this.btnNext.cloneNode(true));
  198.     }
  199.     if (this.btnPrev) {
  200.       this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
  201.     }
  202.     if (this.slidesContainer) {
  203.       this.slidesContainer.removeEventListener(
  204.         'transitionend',
  205.         this.checkIndex,
  206.       );
  207.       this.slidesContainer.removeEventListener(
  208.         'mouseover',
  209.         this.handleMouseOver,
  210.       );
  211.       this.slidesContainer.removeEventListener('mouseout', this.handleMouseOut);
  212.     }
  213.     if (this.container) {
  214.       this.container.removeEventListener('focus', this.handleFocus, true);
  215.     }
  216.     if (this.attachResizeListener) {
  217.       window.removeEventListener('resize', this.handleResize);
  218.     }
  219.     if (this.autoPlayInterval) {
  220.       clearInterval(this.autoPlayInterval);
  221.       this.autoPlay = null;
  222.     }
  223.     if (this.element) {
  224.       this.element.removeAttribute('data-ecl-auto-initialized');
  225.       ECL.components.delete(this.element);
  226.     }
  227.   }
  229.   /**
  230.    * Action to shift next or previous slide.
  231.    * @param {int} dir
  232.    * @param {Boolean} stopAutoPlay
  233.    */
  234.   shiftSlide(dir, stopAutoPlay) {
  235.     if (this.allowShift) {
  236.       this.index = dir === 1 ? this.index + 1 : this.index - 1;
  237.       this.moveSlides(true);
  238.     }
  239.     if (stopAutoPlay && this.autoPlay) {
  240.       this.handleAutoPlay();
  241.     }
  243.     this.allowShift = false;
  244.   }
  246.   /**
  247.    * Transition for the slides.
  248.    * @param {Boolean} transition
  249.    */
  250.   moveSlides(transition) {
  251.     const newOffset = this.slides[this.index].offsetTop;
  252.     const newHeight = this.slides[this.index].offsetHeight;
  253.     this.content.style.height = `${newHeight}px`;
  254.     this.slidesContainer.style.transitionDuration = transition ? '0.4s' : '1ms';
  255.     this.slidesContainer.style.transform = `translate3d(0px, -${newOffset}px, 0px)`;
  256.   }
  258.   /**
  259.    * Action to update slides index and position.
  260.    */
  261.   checkIndex() {
  262.     // Update index
  263.     if (this.index === 0) {
  264.       this.index = this.total;
  265.       this.moveSlides(false);
  266.     }
  267.     if (this.index === this.total + 1) {
  268.       this.index = 1;
  269.       this.moveSlides(false);
  270.     }
  272.     // Update pagination
  273.     const currentSlide = queryOne(this.currentSlideClass, this.element);
  274.     currentSlide.textContent = this.index;
  276.     // Update slides
  277.     if (this.slides) {
  278.       this.slides.forEach((slide, index) => {
  279.         const cta = queryOne('.ecl-link', slide);
  280.         if (this.index === index) {
  281.           slide.removeAttribute('inert', 'true');
  282.           if (cta) {
  283.             cta.removeAttribute('tabindex', -1);
  284.           }
  285.         } else {
  286.           slide.setAttribute('inert', 'true');
  287.           if (cta) {
  288.             cta.setAttribute('tabindex', -1);
  289.           }
  290.         }
  291.       });
  292.     }
  294.     this.allowShift = true;
  295.   }
  297.   /**
  298.    * Toggles play/pause slides.
  299.    */
  300.   handleAutoPlay() {
  301.     if (!this.autoPlay) {
  302.       this.autoPlayInterval = setInterval(() => {
  303.         this.shiftSlide(1);
  304.       }, 5000);
  305.       this.autoPlay = true;
  306.       const isFocus = document.activeElement === this.btnPlay;
  307.       this.btnPlay.style.display = 'none';
  308.       this.btnPause.style.display = 'flex';
  309.       if (isFocus) {
  310.         this.btnPause.focus();
  311.       }
  312.     } else {
  313.       clearInterval(this.autoPlayInterval);
  314.       this.autoPlay = false;
  315.       const isFocus = document.activeElement === this.btnPause;
  316.       this.btnPlay.style.display = 'flex';
  317.       this.btnPause.style.display = 'none';
  318.       if (isFocus) {
  319.         this.btnPlay.focus();
  320.       }
  321.     }
  322.   }
  324.   /**
  325.    * Trigger events on mouseover.
  326.    */
  327.   handleMouseOver() {
  328.     this.hoverAutoPlay = this.autoPlay;
  329.     if (this.hoverAutoPlay) {
  330.       this.handleAutoPlay();
  331.     }
  332.     return this;
  333.   }
  335.   /**
  336.    * Trigger events on mouseout.
  337.    */
  338.   handleMouseOut() {
  339.     if (this.hoverAutoPlay) {
  340.       this.handleAutoPlay();
  341.     }
  342.     return this;
  343.   }
  345.   /**
  346.    * Trigger events on resize.
  347.    */
  348.   handleResize() {
  349.     clearTimeout(this.resizeTimer);
  350.     this.resizeTimer = setTimeout(() => {
  351.       this.moveSlides(false);
  352.     }, 100);
  353.   }
  355.   /**
  356.    * Trigger events on focus.
  357.    * @param {Event} e
  358.    */
  359.   handleFocus(e) {
  360.     const focusElement = e.target;
  361.     // Disable autoplay if focus is on a slide CTA
  362.     if (
  363.       focusElement &&
  364.       focusElement.contains(document.activeElement) &&
  365.       this.autoPlay
  366.     ) {
  367.       this.handleAutoPlay();
  368.     }
  369.     return this;
  370.   }
  371. }
  373. export default NewsTicker;