From c0d4f554ffa81298b9e5ae9b01a74e0271958335 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 2 Aug 2021 23:26:46 +0200 Subject: [PATCH] IMPR: Carousel accesability attributes --- src/js/_ui/_ui.carousel.js | 147 +++++++++++++++++++------------------ 1 file changed, 75 insertions(+), 72 deletions(-) diff --git a/src/js/_ui/_ui.carousel.js b/src/js/_ui/_ui.carousel.js index 4e675c6..7d15d36 100644 --- a/src/js/_ui/_ui.carousel.js +++ b/src/js/_ui/_ui.carousel.js @@ -2,82 +2,85 @@ import Events from '../_events'; import Carousel from 'bootstrap/js/src/carousel'; const CarouselUI = ((window) => { - const NAME = 'js-carousel'; + const NAME = 'js-carousel'; - const init = () => { - console.log(`${NAME}: init`); + const init = () => { + console.log(`${NAME}: init`); - document.querySelectorAll(`.${NAME}`).forEach((el, i) => { - const carousel = new Carousel(el); - // create next/prev arrows - if (el.dataset.bsArrows) { - const next = document.createElement('button'); - next.classList.add('carousel-control-next'); - next.setAttribute('type', 'button'); - next.setAttribute('data-bs-target', el.getAttribute('id')); - next.setAttribute('data-bs-slide', 'next'); - next.addEventListener('click', (e) => { - carousel.next(); + document.querySelectorAll(`.${NAME}`).forEach((el, i) => { + const carousel = new Carousel(el); + // create next/prev arrows + if (el.dataset.bsArrows) { + const next = document.createElement('button'); + next.classList.add('carousel-control-next'); + next.setAttribute('type', 'button'); + prev.setAttribute('aria-label', 'Next Slide'); + next.setAttribute('data-bs-target', el.getAttribute('id')); + next.setAttribute('data-bs-slide', 'next'); + next.addEventListener('click', (e) => { + carousel.next(); + }); + next.innerHTML = ''; + el.appendChild(next); + + const prev = document.createElement('button'); + prev.setAttribute('type', 'button'); + prev.setAttribute('aria-label', 'Previous Slide'); + prev.classList.add('carousel-control-prev'); + prev.setAttribute('data-bs-target', el.getAttribute('id')); + prev.setAttribute('data-bs-slide', 'prev'); + prev.addEventListener('click', (e) => { + carousel.prev(); + }); + prev.innerHTML = ''; + el.appendChild(prev); + } + + if (el.dataset.bsIndicators) { + const indicators = document.createElement('div'); + indicators.classList.add('carousel-indicators'); + const items = el.querySelectorAll('.carousel-item'); + let i = 0; + while (i < items.length) { + const ind = document.createElement('button'); + ind.setAttribute('type', 'button'); + ind.setAttribute('aria-label', 'Slide to #' + (i + 1)); + if (i == 0) { + ind.classList.add('active'); + } + ind.setAttribute('data-bs-target', el.getAttribute('id')); + ind.setAttribute('data-bs-slide-to', i); + + ind.addEventListener('click', (e) => { + const target = e.target; + carousel.to(target.getAttribute('data-bs-slide-to')); + indicators.querySelectorAll('.active').forEach((ind2) => { + ind2.classList.remove('active'); + }); + target.classList.add('active'); + }); + + indicators.appendChild(ind); + i++; + } + + el.appendChild(indicators); + el.addEventListener('slide.bs.carousel', (e) => { + el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => { + ind2.classList.remove('active'); + }); + el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => { + ind2.classList.add('active'); + }); + }); + + } + el.classList.add(`${NAME}-active`); }); - next.innerHTML = ''; - el.appendChild(next); + }; - const prev = document.createElement('button'); - prev.setAttribute('type', 'button'); - prev.classList.add('carousel-control-prev'); - prev.setAttribute('data-bs-target', el.getAttribute('id')); - prev.setAttribute('data-bs-slide', 'prev'); - prev.addEventListener('click', (e) => { - carousel.prev(); - }); - prev.innerHTML = ''; - el.appendChild(prev); - } - - if (el.dataset.bsIndicators) { - const indicators = document.createElement('div'); - indicators.classList.add('carousel-indicators'); - const items = el.querySelectorAll('.carousel-item'); - let i = 0; - while (i < items.length) { - const ind = document.createElement('button'); - ind.setAttribute('type', 'button'); - if (i == 0) { - ind.classList.add('active'); - } - ind.setAttribute('data-bs-target', el.getAttribute('id')); - ind.setAttribute('data-bs-slide-to', i); - - ind.addEventListener('click', (e) => { - const target = e.target; - carousel.to(target.getAttribute('data-bs-slide-to')); - indicators.querySelectorAll('.active').forEach((ind2) => { - ind2.classList.remove('active'); - }); - target.classList.add('active'); - }); - - indicators.appendChild(ind); - i++; - } - - el.appendChild(indicators); - el.addEventListener('slide.bs.carousel', (e) => { - el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => { - ind2.classList.remove('active'); - }); - el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => { - ind2.classList.add('active'); - }); - }); - - } - el.classList.add(`${NAME}-active`); - }); - }; - - window.addEventListener(`${Events.LODEDANDREADY}`, init); - window.addEventListener(`${Events.AJAX}`, init); + window.addEventListener(`${Events.LODEDANDREADY}`, init); + window.addEventListener(`${Events.AJAX}`, init); })(window); export default CarouselUI;