tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

IMPR: Carousel accesability attributes

This commit is contained in:
Tony Air 2021-08-02 23:26:46 +02:00
parent 9df78276e9
commit c0d4f554ff
1 changed files with 75 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/js/_ui/_ui.carousel.js
View File

@ -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 = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
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 = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
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 = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
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 = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
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;