sliders.js in kcc-gem-theme-1.52.34

- old
+ new
@@ -1,15 +1,88 @@
+// Custom JS to initialize slick slider (https://github.com/kenwheeler/slick) and then build a play/pause toggle button
+// Uses slick-specific methods & slick events. See slick events at: https://github.com/kenwheeler/slick/#events
+const HERO_SLIDER_CLASSNAME = '.hero-slider__slider';  // Our classname for the hero-slider's DOM parent
+const SLICK_PLAY = 'slickPlay';  // Methods unique to slick
+const SLICK_PAUSE = 'slickPause';  // Methods unique to slick
+const SLICK_NEXT_SLIDE = 'slickNext';  // Methods unique to slick
+const play = 'Play';
+const pause = 'Pause';
+// =============================================================================================== //
+// TODO:                                                                                           //
+//                                                                                                 //
+//    Rewrite below prevArrow & nextArrow as <button> elements (like slick's default arrows).      //
+//                                                                                                 //
+// =============================================================================================== //
+
+function initSlick() {
+  $(HERO_SLIDER_CLASSNAME).slick({
+    dots: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    prevArrow:'<button type="button" data-role="none" class="prev slick-prev" aria-label="Previous" role="button" style="display: block;">Previous</button>',  // TODO: change to <button> el
+    nextArrow:'<button type="button" data-role="none" class="next slick-next" aria-label="Next" role="button" style="display: block;">Next</button>'  // TODO: change to <button> el
+  });
+}
+
+function setAttributeOnEl(el, attr, value) {
+  return el.setAttribute(attr, value);
+}
+
+function toggleSlickPlayState(el, slickState, newButtonText) {
+  const newButtonTextIsPause = newButtonText === pause;
+
+  $(HERO_SLIDER_CLASSNAME).slick(slickState);
+  setAttributeOnEl(el, 'aria-label', newButtonText);
+  el.classList.toggle('hero-slider__button--play');
+  el.innerHTML = newButtonText;
+
+  newButtonTextIsPause ? $(HERO_SLIDER_CLASSNAME).slick(SLICK_NEXT_SLIDE) : null;
+}
+
+function watchForElementClicks(el) {
+  el.addEventListener('click', function(e) {
+    let buttonTextIsPause = el.innerHTML === 'Pause';
+
+    buttonTextIsPause ? toggleSlickPlayState(el, SLICK_PAUSE, play) : toggleSlickPlayState(el, SLICK_PLAY, pause);
+  });
+}
+
+function createButton() {
+  const SLICK_PARENT_EL = document.querySelector(HERO_SLIDER_CLASSNAME);
+  const button = document.createElement('button');
+  const initialButtonText = 'Pause';
+
+  setAttributeOnEl(button, 'role', 'button');
+  setAttributeOnEl(button, 'type', 'button');
+  setAttributeOnEl(button, 'aria-label', 'Pause');
+  setAttributeOnEl(button, 'style', 'display: block;');
+  button.innerHTML = initialButtonText;
+  button.classList.add('hero-slider__button--toggle');
+  SLICK_PARENT_EL.appendChild(button);
+  watchForElementClicks(button);
+}
+
+function watchForSlickInit(initFunction) {
+  // slick's on 'init' function (See events in slick docs):
+  $(HERO_SLIDER_CLASSNAME).on('init', function(event, slick){ // According to slick doc's; you have to call a $(slick).on('init', function(){ //... }); before you initialize slick
+    createButton();
+  });
+  initFunction();  // Initializing slick after the above `.on('init', function() {})`
+}
+
 function initSliders() {
-  function initSlick() {
-    $('.hero-slider__slider').slick({
-      dots: true,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      autoplay: true,
-      autoplaySpeed: 3000,
-      prevArrow:'<img alt="Previous slide" class="a-left control-c prev slick-prev" src="/assets/img/dbl-prev.svg">',
-      nextArrow:'<img alt="Next slide" class="a-right control-c next slick-next" src="/assets/img/dbl-next.svg">'
-    });
-  }
-  document.querySelector('.hero-slider__slider') ? initSlick() : null;
+  if ( ! document.querySelector(HERO_SLIDER_CLASSNAME) )
+    return;
+
+  watchForSlickInit(initSlick);
 }
+//
+//  USAGE:
+//
+//    import initSliders from './sliders.js';
+//
+//    document.addEventListener('DOMContentLoaded', function() {
+//      initSliders();
+//    });
 export default initSliders;