Untitled

console.log('hW A003 started');

// add thumbnails
var thbs = document.querySelector('.product__hero-carousel-thumbs')
var feat = document.createElement('div');
feat.classList.add('product__hero-thumb','mb1','pr');
feat.id = 'thbfeat';
feat.innerHTML = '<button aria-label="Select image slide" class="image pa x y top left"><picture><img src="https://drive.google.com/uc?id=1tVnAQw3SugYt8vXhAysTXBmRJc47A8MA"></picture></button>';
var bnft = document.createElement('div');
bnft.classList.add('product__hero-thumb','mb1','pr');
bnft.id = 'thbbnft';
bnft.innerHTML = '<button aria-label="Select image slide" class="image pa x y top left"><picture><img src="https://drive.google.com/uc?id=1Y7_5SS2Xlkmf2k3LVst7Qj88EHX9YYGj"></picture></button>';
var ingr = document.createElement('div');
ingr.classList.add('product__hero-thumb','mb1','pr');
ingr.id = 'thbingr';
ingr.innerHTML = '<button aria-label="Select image slide" class="image pa x y top left"><picture><img src="https://drive.google.com/uc?id=1BIKck9NhHWc8FWu09HUdx6JPwO5uxQ5i"></picture></button>';
thbs.appendChild(feat);
thbs.appendChild(bnft);
thbs.appendChild(ingr);

// add dots
var dots = document.querySelector('.product__hero-dots')
var featd = document.createElement('button');
featd.classList.add('product__hero-dot');
featd.setAttribute('aria-label','Select image slide');
featd.id = 'dotfeat';
var bnftd = document.createElement('button');
bnftd.classList.add('product__hero-dot');
bnftd.setAttribute('aria-label','Select image slide');
bnftd.id = 'dotbnft';
var ingrd = document.createElement('button');
ingrd.classList.add('product__hero-dot');
ingrd.setAttribute('aria-label','Select image slide');
ingrd.id = 'dotingr';
dots.appendChild(featd);
dots.appendChild(bnftd);
dots.appendChild(ingrd);

// add carousel images
var cars = document.querySelector('main.site__wrapper .embla__container')
var feati = document.createElement('div');
feati.classList.add('keen-slider__slide');
feati.id = 'feati';
feati.setAttribute('style','min-width: calc(100% - 0px); max-width: calc(100% - 0px); transform: translate3d(0px, 0px, 0px);');
feati.innerHTML = '<div class="image pa x y top left"><picture><source srcset="https://drive.google.com/uc?id=1tVnAQw3SugYt8vXhAysTXBmRJc47A8MA" media="(min-width: 1000px)"><source srcset="https://drive.google.com/uc?id=1tVnAQw3SugYt8vXhAysTXBmRJc47A8MA" media="(min-width: 600px)"><img src="https://drive.google.com/uc?id=1tVnAQw3SugYt8vXhAysTXBmRJc47A8MA"></picture></div>';
var bnfti = document.createElement('div');
bnfti.classList.add('keen-slider__slide');
bnfti.id = 'bnfti';
bnfti.setAttribute('style','min-width: calc(100% - 0px); max-width: calc(100% - 0px); transform: translate3d(0px, 0px, 0px);');
bnfti.innerHTML = '<div class="image pa x y top left"><picture><source srcset="https://drive.google.com/uc?id=1Y7_5SS2Xlkmf2k3LVst7Qj88EHX9YYGj" media="(min-width: 1000px)"><source srcset="https://drive.google.com/uc?id=1Y7_5SS2Xlkmf2k3LVst7Qj88EHX9YYGj" media="(min-width: 600px)"><img src="https://drive.google.com/uc?id=1Y7_5SS2Xlkmf2k3LVst7Qj88EHX9YYGj"></picture></div>';
var ingri = document.createElement('div');
ingri.classList.add('keen-slider__slide');
ingri.id = 'ingri';
ingri.setAttribute('style','min-width: calc(100% - 0px); max-width: calc(100% - 0px); transform: translate3d(0px, 0px, 0px);');
ingri.innerHTML = '<div class="image pa x y top left"><picture><source srcset="https://drive.google.com/uc?id=1BIKck9NhHWc8FWu09HUdx6JPwO5uxQ5i" media="(min-width: 1000px)"><source srcset="https://drive.google.com/uc?id=1BIKck9NhHWc8FWu09HUdx6JPwO5uxQ5i" media="(min-width: 600px)"><img src="https://drive.google.com/uc?id=1BIKck9NhHWc8FWu09HUdx6JPwO5uxQ5i"></picture></div>';
cars.appendChild(feati);
cars.appendChild(bnfti);
cars.appendChild(ingri);

// select slide
document.addEventListener('click', function (event) {
  //console.log('clicked');
  if(!event.target.matches('.product__hero-thumb img, .product__hero-dots button')) return;
  //console.log('matched');
  var slides = cars.querySelectorAll('.keen-slider__slide');
  for(q=0;q<slides.length;q++) {
    if(slides[q].classList.contains('active')) {
      slides[q].classList.remove('active');
    }
  }
  var pos = '0px';
  var wdt = document.querySelector('.site__wrapper > .row > .col:first-child').offsetWidth;
  if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:first-child img, .product__hero-dots button:first-child')) {
    var pos = '0';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(1)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(2) img, .product__hero-dots button:nth-child(2)')) {
    var pos = '-' + wdt + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(2)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(3) img, .product__hero-dots button:nth-child(3)')) {
    var pos = '-' + wdt * 2 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(3)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(4) img, .product__hero-dots button:nth-child(4)')) {
    var pos = '-' + wdt * 3 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(4)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(5) img, .product__hero-dots button:nth-child(5)')) {
    var pos = '-' + wdt * 4 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(5)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(6) img, .product__hero-dots button:nth-child(6)')) {
    var pos = '-' + wdt * 5 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(6)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(7) img, .product__hero-dots button:nth-child(7)')) {
    var pos = '-' + wdt * 6 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(7)').classList.add('active');
  } else if(event.target.matches('.product__hero-carousel-thumbs > .product__hero-thumb:nth-child(8) img, .product__hero-dots button:nth-child(8)')) {
    var pos = '-' + wdt * 7 + 'px';
    document.querySelector('main.site__wrapper .keen-slider > .keen-slider__slide:nth-child(8)').classList.add('active');
  }
  //console.log(pos);
  for(s=0;s<slides.length;s++) {
    slides[s].setAttribute('style','min-width: calc(100% - 0px);max-width: calc(100% - 0px);transform: translate3d(' + pos + ', 0px, 0px);');
  }
  var thumbs = thbs.querySelectorAll('.product__hero-thumb');
  for(t=0;t<thumbs.length;t++) {
    if(thumbs[t].classList.contains('active')) {
      thumbs[t].classList.remove('active');
    }
  }
  var listdots = dots.querySelectorAll('.product__hero-dots button');
  for(l=0;l<listdots.length;l++) {
    if(listdots[l].classList.contains('active')) {
      listdots[l].classList.remove('active');
    }
  }
  if(event.target.matches('.product__hero-thumb img')) {
    event.target.closest('.product__hero-thumb').classList.add('active');
  } else {
    event.target.classList.add('active');
  }
  //console.log('done');
}, false);