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