const Scroller= function (el){
console.log('new Scroller');
let slides = el.querySelectorAll('.ScrollerSlideVE')
let pagerWrapper = el.querySelector('.Scroller__pager')
let adaButtonShortcut = el.querySelector('.Scroller__ada-button-shortcut')
let paused = true;
let currentSlideId = 0
el.setAttribute('data-current-slide',currentSlideId)
let itemsInARow = el.getAttribute('data-items-in-row')
let increment = 100/itemsInARow;
//console.log(itemsInARow,increment);
let lastSlideId = 1;
let totalSlides = slides.length;
let prevButton = el.querySelector('.Scroller__prev-button');
let nextButton = el.querySelector('.Scroller__next-button');
let car = el.querySelector('.Scroller__car')
let pagers
function buildPager(){
let index = 0
let pagerHTML = ""
for (let i=0; i< slides.length; i++) {
if(index === 0 ){
pagerHTML+= ''
}else{
pagerHTML+= ' '
}
index++
}
pagerWrapper.innerHTML = pagerHTML;
pagers = el.querySelectorAll('.Scroller__pager > span')
for (let i = 0; i< pagers.length; i++) {
pagers[i].onclick = function(e){
lastSlideId = currentSlideId;
currentSlideId = e.currentTarget.getAttribute('data-index');
if(lastSlideId < currentSlideId){
gotoSlide('next');
}else{
gotoSlide('prev');
}
paused = true
}
}
}
buildPager()
function bindClickEvents(){
if(prevButton){
prevButton.onclick = function(e){
paused = true;
prev();
}
prevButton.onkeyup = function(e){
if (e.key === "Enter") {
paused = true
prev()
}
}
nextButton.onclick = function(e){
paused = true
next()
}
nextButton.onkeyup = function(e){
if (e.key === "Enter") {
paused = true
next()
}
}
}
}
bindClickEvents();
function prev(focus){
lastSlideId = currentSlideId;
if(currentSlideId > 0){
currentSlideId--;
}else{
currentSlideId = 0;
}
gotoSlide('prev',focus);
}
function next(focus){
lastSlideId = currentSlideId;
if(currentSlideId < totalSlides-1){
currentSlideId++;
}else{
currentSlideId = totalSlides-1;
}
gotoSlide('next',focus);
}
function getPagerByIndex(slideIndex){
let response = []
for (let i=0; i < pagers.length; i++) {
let pagerItem = pagers[i]
if(parseInt(pagerItem.getAttribute('data-index')) === parseInt(slideIndex)){
response.push(pagerItem)
}
}
return response
}
function getSlideByIndex(slideIndex){
let response = []
for (let i=0; i < slides.length; i++) {
let slideItem = slides[i]
if(parseInt(slideItem.getAttribute('data-index')) === parseInt(slideIndex)){
response.push(slideItem)
}
}
return response
}
function gotoSlide(dir,focus){
//console.log(dir,lastSlideId,currentSlideId,totalSlides);
//console.log(initialText);
gotoCurrentSlide(dir,focus);
}
function gotoCurrentSlide(dir,focus){
for (let i=0; i < pagers.length; i++) {
pagers[i].classList.remove('current-pager')
}
itemsInARow = el.getAttribute('data-items-in-row')
let vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(vw < 992 && vw > 767){
itemsInARow = 2
}else if(vw < 767){
itemsInARow = 1
}
increment = 100/itemsInARow;
// 3 items in view port 100/3 = 33%
let targetPos = currentSlideId*increment
if(pagers && pagers.length > 0) {
let currentPagers = getPagerByIndex(currentSlideId)
for (let i=0; i < currentPagers.length; i++) {
currentPagers[i].classList.add('current-pager')
}
if(focus === true){
let slideItems = getSlideByIndex(currentSlideId)
for (let i=0; i < slideItems.length; i++) {
slideItems[i].focus()
}
}
}
el.classList.remove('scroller__max-reached')
let maxPos = slides.length - itemsInARow
if(currentSlideId > maxPos){
targetPos = increment*maxPos
if('next' == dir){
car.parentNode.classList.add('scroller-bounce')
}
el.classList.add('scroller__max-reached')
}
// make sure there is no blank space at the end
//console.log(itemsInARow,slides.length,currentSlideId,maxPos)
if('next' == dir){
let timeout = setTimeout(function(){
car.parentNode.classList.remove('scroller-bounce')
clearTimeout(timeout)
},400)
}
//console.log(currentSlideId,targetPos);
el.setAttribute('data-current-slide',currentSlideId)
car.setAttribute('style','left:-'+targetPos+'%');
}
swipeDetect(el,next,prev);
function buildAdaControls(){
adaButtonShortcut.addEventListener('keydown',(event) => {
if (event.key === "Enter") {
pagerWrapper.focus()
}
}
)
pagerWrapper.addEventListener('keydown',(event) => {
if ( event.key === "ArrowLeft" ) {
prev()
}
if ( event.key === "ArrowRight" ) {
next()
}
if ( event.key === "ArrowUp" ) {
adaButtonShortcut.focus()
}
if ( event.key === "Enter" ) {
let slideItems = getSlideByIndex(currentSlideId)
slideItems[0].focus()
}
}
)
for (let i=0; i < slides.length; i++) {
let slideLabel = parseInt(i+1)
slides[i].setAttribute('aria-label','slide '+slideLabel+' of '+slides.length)
slides[i].addEventListener('keydown',(event) => {
if ( event.key === "ArrowLeft" ) {
prev(true)
}
if ( event.key === "ArrowRight" ) {
next(true)
}
if ( event.key === "ArrowUp" ) {
adaButtonShortcut.focus()
}
if ( event.key === "ArrowDown" ) {
pagerWrapper.focus()
}
}
)
}
}
buildAdaControls()
function WindowResizeEvent() {
gotoCurrentSlide('left');
}
window.onresize = WindowResizeEvent;
};