// Custom JS to initialize slick slider (github.com/kenwheeler/slick) and then build a play/pause toggle button // Uses slick-specific methods & slick events. See slick events at: 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() {

if ( ! document.querySelector(HERO_SLIDER_CLASSNAME) )
  return;

watchForSlickInit(initSlick);

} // // USAGE: // // import initSliders from './sliders.js'; // // document.addEventListener('DOMContentLoaded', function() { // initSliders(); // }); export default initSliders;