108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
/*
|
|
==============================================================
|
|
*/
|
|
// SWIPER PASEK
|
|
class IdmSwiperProgress {
|
|
constructor(swiper, selector) {
|
|
this.swiper = swiper?.slider?.slider ?? swiper?.slider ?? swiper;
|
|
this.selector = selector;
|
|
this.scrollbarEl = null;
|
|
this.progressEl = null;
|
|
this.isDragging = false;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
const el = document.querySelector(this.selector);
|
|
if (!el || el.querySelector(".idm-scrollbar")) return;
|
|
|
|
el.insertAdjacentHTML(
|
|
"beforeend",
|
|
`<div class="idm-scrollbar swiper-scrollbar"><div class="idm-progress"></div></div>`
|
|
);
|
|
|
|
this.scrollbarEl = el.querySelector(".idm-scrollbar");
|
|
this.progressEl = this.scrollbarEl.querySelector(".idm-progress");
|
|
|
|
this.updateBarWidth();
|
|
this.addDragTracking();
|
|
|
|
this.swiper.on("progress", () => this.updateProgress());
|
|
this.swiper.on("breakpoint", () => {this.updateBarWidth()});
|
|
}
|
|
|
|
updateBarWidth() {
|
|
const { slidesPerGroup, slidesPerView } = this.swiper.params;
|
|
const totalSlides = this.swiper.slides.length;
|
|
|
|
const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
|
|
this.progressEl.style.width = `${progressWidth}%`;
|
|
|
|
if (progressWidth >= 100 || progressWidth <= 0) this.scrollbarEl.style.display = "none";
|
|
else this.scrollbarEl.style.display = "";
|
|
}
|
|
|
|
updateProgress() {
|
|
const progress = this.swiper.progress;
|
|
const { slidesPerGroup, slidesPerView } = this.swiper.params;
|
|
const totalSlides = this.swiper.slides.length;
|
|
|
|
const progressWidth = 100 / (((totalSlides - slidesPerView) / slidesPerGroup) + 1);
|
|
const newLeft = (100 - progressWidth) * progress;
|
|
this.progressEl.style.left = `${Math.min(
|
|
100 - progressWidth,
|
|
Math.max(0, newLeft)
|
|
)}%`;
|
|
}
|
|
|
|
addDragTracking() {
|
|
const handle = this.progressEl;
|
|
let grabOffset = 0;
|
|
let scrollbarWidth = 0;
|
|
let handleWidth = 0;
|
|
|
|
const startDrag = (e) => {
|
|
this.isDragging = true;
|
|
this.scrollbarEl.classList.add("--drag-start");
|
|
|
|
const rect = this.scrollbarEl.getBoundingClientRect();
|
|
const handleRect = handle.getBoundingClientRect();
|
|
scrollbarWidth = rect.width;
|
|
handleWidth = handleRect.width;
|
|
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
grabOffset = clientX - handleRect.left;
|
|
|
|
document.addEventListener("mousemove", handleDrag);
|
|
document.addEventListener("mouseup", stopDrag);
|
|
document.addEventListener("touchmove", handleDrag);
|
|
document.addEventListener("touchend", stopDrag);
|
|
};
|
|
|
|
const handleDrag = (e) => {
|
|
if (!this.isDragging) return;
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const rect = this.scrollbarEl.getBoundingClientRect();
|
|
let newLeftPx = clientX - rect.left - grabOffset;
|
|
const maxLeft = scrollbarWidth - handleWidth;
|
|
newLeftPx = Math.max(0, Math.min(maxLeft, newLeftPx));
|
|
const progress = newLeftPx / maxLeft;
|
|
this.swiper.setProgress(progress, 0);
|
|
};
|
|
|
|
const stopDrag = () => {
|
|
if (!this.isDragging) return;
|
|
this.isDragging = false;
|
|
document.removeEventListener("mousemove", handleDrag);
|
|
document.removeEventListener("mouseup", stopDrag);
|
|
document.removeEventListener("touchmove", handleDrag);
|
|
document.removeEventListener("touchend", stopDrag);
|
|
this.scrollbarEl.classList.remove("--drag-start");
|
|
this.swiper.slideReset(400);
|
|
};
|
|
|
|
handle.addEventListener("mousedown", startDrag);
|
|
handle.addEventListener("touchstart", startDrag);
|
|
}
|
|
} |