webpack-bootstrap-ui-kit/src/js/ui/carousel.js

94 lines
3.2 KiB
JavaScript
Raw Normal View History

2021-08-18 20:51:15 +02:00
import Events from "../_events";
import Carousel from "bootstrap/js/src/carousel";
2021-08-09 18:04:09 +02:00
const CarouselUI = ((window) => {
2021-08-18 20:51:15 +02:00
const NAME = "js-carousel";
2021-08-09 18:04:09 +02:00
const init = () => {
console.log(`${NAME}: init`);
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const carousel = new Carousel(el);
el.ui = carousel;
2021-08-09 18:04:09 +02:00
// create next/prev arrows
if (el.dataset.bsArrows) {
2021-08-18 20:51:15 +02:00
const next = document.createElement("button");
next.classList.add("carousel-control-next");
next.setAttribute("type", "button");
next.setAttribute("aria-label", "Next Slide");
next.setAttribute("data-bs-target", el.getAttribute("id"));
next.setAttribute("data-bs-slide", "next");
next.addEventListener("click", (e) => {
2021-08-09 18:04:09 +02:00
carousel.next();
});
2021-08-18 20:51:15 +02:00
next.innerHTML =
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
2021-08-09 18:04:09 +02:00
el.appendChild(next);
2021-08-18 20:51:15 +02:00
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) => {
2021-08-09 18:04:09 +02:00
carousel.prev();
});
2021-08-18 20:51:15 +02:00
prev.innerHTML =
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
2021-08-09 18:04:09 +02:00
el.appendChild(prev);
}
if (el.dataset.bsIndicators) {
2021-08-18 20:51:15 +02:00
const indicators = document.createElement("div");
indicators.classList.add("carousel-indicators");
const items = el.querySelectorAll(".carousel-item");
2021-08-09 18:04:09 +02:00
let i = 0;
while (i < items.length) {
2021-08-18 20:51:15 +02:00
const ind = document.createElement("button");
ind.setAttribute("type", "button");
ind.setAttribute("aria-label", `Slide to #${i + 1}`);
2021-08-09 18:04:09 +02:00
if (i == 0) {
2021-08-18 20:51:15 +02:00
ind.classList.add("active");
2021-08-09 18:04:09 +02:00
}
2021-08-18 20:51:15 +02:00
ind.setAttribute("data-bs-target", el.getAttribute("id"));
ind.setAttribute("data-bs-slide-to", i);
2021-08-09 18:04:09 +02:00
2021-08-18 20:51:15 +02:00
ind.addEventListener("click", (e) => {
2021-08-09 18:04:09 +02:00
const target = e.target;
2021-08-18 20:51:15 +02:00
carousel.to(target.getAttribute("data-bs-slide-to"));
indicators.querySelectorAll(".active").forEach((ind2) => {
ind2.classList.remove("active");
2021-08-09 18:04:09 +02:00
});
2021-08-18 20:51:15 +02:00
target.classList.add("active");
2021-08-09 18:04:09 +02:00
});
indicators.appendChild(ind);
i++;
}
el.appendChild(indicators);
2021-08-18 20:51:15 +02:00
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");
2021-08-09 18:04:09 +02:00
});
});
}
el.classList.add(`${NAME}-active`);
});
};
window.addEventListener(`${Events.LODEDANDREADY}`, init);
window.addEventListener(`${Events.AJAX}`, init);
})(window);
export default CarouselUI;