package.modules.thumbs.mjs Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of swiper Show documentation
Show all versions of swiper Show documentation
Most modern mobile touch slider and framework with hardware accelerated transitions
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
import { l as isObject, e as elementChildren } from '../shared/utils.mjs';
function Thumb(_ref) {
let {
swiper,
extendParams,
on
} = _ref;
extendParams({
thumbs: {
swiper: null,
multipleActiveThumbs: true,
autoScrollOffset: 0,
slideThumbActiveClass: 'swiper-slide-thumb-active',
thumbsContainerClass: 'swiper-thumbs'
}
});
let initialized = false;
let swiperCreated = false;
swiper.thumbs = {
swiper: null
};
function onThumbClick() {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
const clickedIndex = thumbsSwiper.clickedIndex;
const clickedSlide = thumbsSwiper.clickedSlide;
if (clickedSlide && clickedSlide.classList.contains(swiper.params.thumbs.slideThumbActiveClass)) return;
if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
let slideToIndex;
if (thumbsSwiper.params.loop) {
slideToIndex = parseInt(thumbsSwiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
} else {
slideToIndex = clickedIndex;
}
if (swiper.params.loop) {
swiper.slideToLoop(slideToIndex);
} else {
swiper.slideTo(slideToIndex);
}
}
function init() {
const {
thumbs: thumbsParams
} = swiper.params;
if (initialized) return false;
initialized = true;
const SwiperClass = swiper.constructor;
if (thumbsParams.swiper instanceof SwiperClass) {
swiper.thumbs.swiper = thumbsParams.swiper;
Object.assign(swiper.thumbs.swiper.originalParams, {
watchSlidesProgress: true,
slideToClickedSlide: false
});
Object.assign(swiper.thumbs.swiper.params, {
watchSlidesProgress: true,
slideToClickedSlide: false
});
swiper.thumbs.swiper.update();
} else if (isObject(thumbsParams.swiper)) {
const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
Object.assign(thumbsSwiperParams, {
watchSlidesProgress: true,
slideToClickedSlide: false
});
swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
swiperCreated = true;
}
swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);
swiper.thumbs.swiper.on('tap', onThumbClick);
return true;
}
function update(initial) {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
// Activate thumbs
let thumbsToActivate = 1;
const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
thumbsToActivate = swiper.params.slidesPerView;
}
if (!swiper.params.thumbs.multipleActiveThumbs) {
thumbsToActivate = 1;
}
thumbsToActivate = Math.floor(thumbsToActivate);
thumbsSwiper.slides.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));
if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
for (let i = 0; i < thumbsToActivate; i += 1) {
elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index="${swiper.realIndex + i}"]`).forEach(slideEl => {
slideEl.classList.add(thumbActiveClass);
});
}
} else {
for (let i = 0; i < thumbsToActivate; i += 1) {
if (thumbsSwiper.slides[swiper.realIndex + i]) {
thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);
}
}
}
const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
const currentThumbsIndex = thumbsSwiper.activeIndex;
let newThumbsIndex;
let direction;
if (thumbsSwiper.params.loop) {
const newThumbsSlide = thumbsSwiper.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`)[0];
newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
} else {
newThumbsIndex = swiper.realIndex;
direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
}
if (useOffset) {
newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
}
if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
if (thumbsSwiper.params.centeredSlides) {
if (newThumbsIndex > currentThumbsIndex) {
newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
} else {
newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
}
} else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) ;
thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
}
}
}
on('beforeInit', () => {
const {
thumbs
} = swiper.params;
if (!thumbs || !thumbs.swiper) return;
if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {
const document = getDocument();
const getThumbsElementAndInit = () => {
const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;
if (thumbsElement && thumbsElement.swiper) {
thumbs.swiper = thumbsElement.swiper;
init();
update(true);
} else if (thumbsElement) {
const eventName = `${swiper.params.eventsPrefix}init`;
const onThumbsSwiper = e => {
thumbs.swiper = e.detail[0];
thumbsElement.removeEventListener(eventName, onThumbsSwiper);
init();
update(true);
thumbs.swiper.update();
swiper.update();
};
thumbsElement.addEventListener(eventName, onThumbsSwiper);
}
return thumbsElement;
};
const watchForThumbsToAppear = () => {
if (swiper.destroyed) return;
const thumbsElement = getThumbsElementAndInit();
if (!thumbsElement) {
requestAnimationFrame(watchForThumbsToAppear);
}
};
requestAnimationFrame(watchForThumbsToAppear);
} else {
init();
update(true);
}
});
on('slideChange update resize observerUpdate', () => {
update();
});
on('setTransition', (_s, duration) => {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
thumbsSwiper.setTransition(duration);
});
on('beforeDestroy', () => {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
if (swiperCreated) {
thumbsSwiper.destroy();
}
});
Object.assign(swiper.thumbs, {
init,
update
});
}
export { Thumb as default };