123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 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 };
|