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;
  88.     // Bind `this` for use in callbacks
  89.     this.handleAutoPlay = this.handleAutoPlay.bind(this);
  90.     this.handleMouseOver = this.handleMouseOver.bind(this);
  91.     this.handleMouseOut = this.handleMouseOut.bind(this);
  92.     this.shiftSlide = this.shiftSlide.bind(this);
  93.     this.checkIndex = this.checkIndex.bind(this);
  94.     this.moveSlides = this.moveSlides.bind(this);
  95.     this.handleResize = this.handleResize.bind(this);
  96.     this.handleFocus = this.handleFocus.bind(this);
  97.   }
  99.   /**
  100.    * Initialise component.
  101.    */
  102.   init() {
  103.     if (!ECL) {
  104.       throw new TypeError('Called init but ECL is not present');
  105.     }
  106.     ECL.components = ECL.components || new Map();
  108.     this.btnPlay = queryOne(this.playSelector, this.element);
  109.     this.btnPause = queryOne(this.pauseSelector, this.element);
  110.     this.btnPrev = queryOne(this.prevSelector, this.element);
  111.     this.btnNext = queryOne(this.nextSelector, this.element);
  112.     this.slidesContainer = queryOne(this.slidesClass, this.element);
  113.     this.container = queryOne(this.containerClass, this.element);
  114.     this.content = queryOne(this.contentClass, this.element);
  115.     this.controls = queryOne(this.controlsClass, this.element);
  117.     this.slides = queryAll(this.slideClass, this.element);
  118.     this.total = this.slides.length;
  120.     // If only one slide, don't initialize ticker and hide controls
  121.     if (this.total <= 1 && this.controls) {
  122.       this.content.style.height = 'auto';
  123.       this.controls.style.display = 'none';
  124.       return false;
  125.     }
  127.     const firstSlide = this.slides[0];
  128.     const lastSlide = this.slides[this.slides.length - 1];
  129.     this.cloneFirstSLide = firstSlide.cloneNode(true);
  130.     this.cloneLastSLide = lastSlide.cloneNode(true);
  132.     // Clone first and last slide
  133.     this.slidesContainer.appendChild(this.cloneFirstSLide);
  134.     this.slidesContainer.insertBefore(this.cloneLastSLide, firstSlide);
  136.     // Refresh the slides variable after adding new cloned slides
  137.     this.slides = queryAll(this.slideClass, this.element);
  139.     // Initialize ticker position and size
  140.     this.handleResize();
  142.     // Activate autoPlay
  143.     this.handleAutoPlay();
  145.     // Bind events
  146.     if (this.attachClickListener && this.btnPlay && this.btnPause) {
  147.       this.btnPlay.addEventListener('click', this.handleAutoPlay);
  148.       this.btnPause.addEventListener('click', this.handleAutoPlay);
  149.     }
  150.     if (this.attachClickListener && this.btnNext) {
  151.       this.btnNext.addEventListener(
  152.         'click',
  153.         this.shiftSlide.bind(this, 1, true),
  154.       );
  155.     }
  156.     if (this.attachClickListener && this.btnPrev) {
  157.       this.btnPrev.addEventListener(
  158.         'click',
  159.         this.shiftSlide.bind(this, -1, true),
  160.       );
  161.     }
  162.     if (this.slidesContainer) {
  163.       this.slidesContainer.addEventListener('transitionend', this.checkIndex);
  164.       this.slidesContainer.addEventListener('mouseover', this.handleMouseOver);
  165.       this.slidesContainer.addEventListener('mouseout', this.handleMouseOut);
  166.     }
  167.     if (this.container) {
  168.       this.container.addEventListener('focus', this.handleFocus, true);
  169.     }
  170.     if (this.attachResizeListener) {
  171.       window.addEventListener('resize', this.handleResize);
  172.     }
  174.     // Set ecl initialized attribute
  175.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  176.     ECL.components.set(this.element, this);
  178.     return this;
  179.   }
  181.   /**
  182.    * Destroy component.
  183.    */
  184.   destroy() {
  185.     if (this.cloneFirstSLide && this.cloneLastSLide) {
  186.       this.cloneFirstSLide.remove();
  187.       this.cloneLastSLide.remove();
  188.     }
  189.     if (this.btnPlay) {
  190.       this.btnPlay.replaceWith(this.btnPlay.cloneNode(true));
  191.     }
  192.     if (this.btnPause) {
  193.       this.btnPause.replaceWith(this.btnPause.cloneNode(true));
  194.     }
  195.     if (this.btnNext) {
  196.       this.btnNext.replaceWith(this.btnNext.cloneNode(true));
  197.     }
  198.     if (this.btnPrev) {
  199.       this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
  200.     }
  201.     if (this.slidesContainer) {
  202.       this.slidesContainer.removeEventListener(
  203.         'transitionend',
  204.         this.checkIndex,
  205.       );
  206.       this.slidesContainer.removeEventListener(
  207.         'mouseover',
  208.         this.handleMouseOver,
  209.       );
  210.       this.slidesContainer.removeEventListener('mouseout', this.handleMouseOut);
  211.     }
  212.     if (this.container) {
  213.       this.container.removeEventListener('focus', this.handleFocus, true);
  214.     }
  215.     if (this.attachResizeListener) {
  216.       window.removeEventListener('resize', this.handleResize);
  217.     }
  218.     if (this.autoPlayInterval) {
  219.       clearInterval(this.autoPlayInterval);
  220.       this.autoPlay = null;
  221.     }
  222.     if (this.element) {
  223.       this.element.removeAttribute('data-ecl-auto-initialized');
  224.       ECL.components.delete(this.element);
  225.     }
  226.   }
  228.   /**
  229.    * Action to shift next or previous slide.
  230.    * @param {int} dir
  231.    * @param {Boolean} stopAutoPlay
  232.    */
  233.   shiftSlide(dir, stopAutoPlay) {
  234.     if (this.allowShift) {
  235.       this.index = dir === 1 ? this.index + 1 : this.index - 1;
  236.       this.moveSlides(true);
  237.     }
  238.     if (stopAutoPlay && this.autoPlay) {
  239.       this.handleAutoPlay();
  240.     }
  242.     this.allowShift = false;
  243.   }
  245.   /**
  246.    * Transition for the slides.
  247.    * @param {Boolean} transition
  248.    */
  249.   moveSlides(transition) {
  250.     const newOffset = this.slides[this.index].offsetTop;
  251.     const newHeight = this.slides[this.index].offsetHeight;
  252.     this.content.style.height = `${newHeight}px`;
  253.     this.slidesContainer.style.transitionDuration = transition ? '0.4s' : '1ms';
  254.     this.slidesContainer.style.transform = `translate3d(0px, -${newOffset}px, 0px)`;
  255.   }
  257.   /**
  258.    * Action to update slides index and position.
  259.    */
  260.   checkIndex() {
  261.     // Update index
  262.     if (this.index === 0) {
  263.       this.index = this.total;
  264.       this.moveSlides(false);
  265.     }
  266.     if (this.index === this.total + 1) {
  267.       this.index = 1;
  268.       this.moveSlides(false);
  269.     }
  271.     // Update pagination
  272.     const currentSlide = queryOne(this.currentSlideClass, this.element);
  273.     currentSlide.textContent = this.index;
  275.     // Update slides
  276.     if (this.slides) {
  277.       this.slides.forEach((slide, index) => {
  278.         const cta = queryOne('.ecl-link', slide);
  279.         if (this.index === index) {
  280.           slide.removeAttribute('inert', 'true');
  281.           if (cta) {
  282.             cta.removeAttribute('tabindex', -1);
  283.           }
  284.         } else {
  285.           slide.setAttribute('inert', 'true');
  286.           if (cta) {
  287.             cta.setAttribute('tabindex', -1);
  288.           }
  289.         }
  290.       });
  291.     }
  293.     this.allowShift = true;
  294.   }
  296.   /**
  297.    * Toggles play/pause slides.
  298.    */
  299.   handleAutoPlay() {
  300.     if (!this.autoPlay) {
  301.       this.autoPlayInterval = setInterval(() => {
  302.         this.shiftSlide(1);
  303.       }, 5000);
  304.       this.autoPlay = true;
  305.       const isFocus = document.activeElement === this.btnPlay;
  306.       this.btnPlay.style.display = 'none';
  307.       this.btnPause.style.display = 'flex';
  308.       if (isFocus) {
  309.         this.btnPause.focus();
  310.       }
  311.     } else {
  312.       clearInterval(this.autoPlayInterval);
  313.       this.autoPlay = false;
  314.       const isFocus = document.activeElement === this.btnPause;
  315.       this.btnPlay.style.display = 'flex';
  316.       this.btnPause.style.display = 'none';
  317.       if (isFocus) {
  318.         this.btnPlay.focus();
  319.       }
  320.     }
  321.   }
  323.   /**
  324.    * Trigger events on mouseover.
  325.    */
  326.   handleMouseOver() {
  327.     this.hoverAutoPlay = this.autoPlay;
  328.     if (this.hoverAutoPlay) {
  329.       this.handleAutoPlay();
  330.     }
  331.     return this;
  332.   }
  334.   /**
  335.    * Trigger events on mouseout.
  336.    */
  337.   handleMouseOut() {
  338.     if (this.hoverAutoPlay) {
  339.       this.handleAutoPlay();
  340.     }
  341.     return this;
  342.   }
  344.   /**
  345.    * Trigger events on resize.
  346.    */
  347.   handleResize() {
  348.     this.moveSlides(false);
  349.   }
  351.   /**
  352.    * Trigger events on focus.
  353.    * @param {Event} e
  354.    */
  355.   handleFocus(e) {
  356.     const focusElement = e.target;
  357.     // Disable autoplay if focus is on a slide CTA
  358.     if (
  359.       focusElement &&
  360.       focusElement.contains(document.activeElement) &&
  361.       this.autoPlay
  362.     ) {
  363.       this.handleAutoPlay();
  364.     }
  365.     return this;
  366.   }
  367. }
  369. export default NewsTicker;