https://www.sallys-shop.de/cdn/shop/t/60/assets/custom-pagination.js?v=32047515799163405131777298880

1import{isMobileBreakpoint}from"@theme/utilities";export function setupCustomPagination(carousel,options){const config=options["custom-pagination"];if(!config)return;const slides=carousel.querySelectorAll(`.${carousel.slideClass}`);slides.length!==0&&(createPaginationDOM(carousel,slides,config),bindPaginationEvents(carousel,config))}function createPaginationDOM(carousel,slides,config){const container=carousel.querySelector('[ref="custom-pagination"]');if(!container)return;carousel.currentPaginationMode=null,container.innerHTML="";const slideData=Array.from(slides).map((slide,index)=>{const textEl=slide.querySelector(config.textSelector||"[data-pagination-text]");return{text:textEl?.dataset.paginationText||`Slide ${index+1}`,id:textEl?.dataset.slideId||`slide-${index}`,index}}),shouldUseCombined=shouldUseCombinedPagination(slideData.length,config);if(shouldUseCombined){const isMobile=isMobileBreakpoint();container.classList.add("carousel__custom-pagination--combined"),container.classList.toggle("mobile-mode",isMobile),container.classList.toggle("desktop-mode",!isMobile)}const combinedPagination=document.createElement("div");combinedPagination.className="pagination-combined",combinedPagination.innerHTML=`
2    <div class="pagination-combined__text">${slideData[0]?.text||"Slide 1"}</div>
3    <div class="pagination-combined__progress">
4      <div class="pagination-combined__progress-bar"></div>
5    </div>
6  `,container.appendChild(combinedPagination),slideData.forEach((data,index)=>{const item=document.createElement("div");item.className="pagination-item",item.dataset.slideIndex=String(index),item.dataset.slideId=data.id,item.innerHTML=`
7      <div class="pagination-item__text">${data.text}</div>
8      <div class="pagination-item__progress">
9        <div class="pagination-item__progress-bar"></div>
10      </div>
11    `,container.appendChild(item)}),carousel.paginationItems=container.querySelectorAll(".pagination-item"),carousel.progressBars=container.querySelectorAll(".pagination-item__progress-bar"),carousel.combinedProgressBar=container.querySelector(".pagination-combined__progress-bar"),carousel.combinedText=container.querySelector(".pagination-combined__text"),carousel.slideData=slideData,carousel.shouldUseCombined=shouldUseCombined,handleCombinedPagination(carousel)}function bindPaginationEvents(carousel,config){carousel.paginationItems&&(carousel.paginationItems.forEach((item,index)=>{item.addEventListener("click",()=>{carousel.swiperInstance&&(carousel.lastResolvedOptions?.loop?carousel.swiperInstance.slideToLoop(index):carousel.swiperInstance.slideTo(index))})}),config.syncWithAutoplay&&carousel.lastResolvedOptions?.autoplay&&(carousel.autoplayDelay=carousel.lastResolvedOptions.autoplay.delay||5e3))}export function updateActivePagination(carousel,activeIndex){const shouldUseCombined=carousel.shouldUseCombined;if(!(!carousel.slideData||activeIndex<0||activeIndex>=carousel.slideData.length)){if(!shouldUseCombined&&carousel.paginationItems&&carousel.paginationItems.forEach((item,index)=>{item.classList.toggle("is-active",index===activeIndex)}),shouldUseCombined&&carousel.combinedText&&carousel.slideData){const currentSlideData=carousel.slideData[activeIndex];currentSlideData&&(carousel.combinedText.textContent=currentSlideData.text)}animateProgress(carousel,activeIndex)}}function animateProgress(carousel,activeIndex){if(carousel.progressAnimationRafId!==null&&(cancelAnimationFrame(carousel.progressAnimationRafId),carousel.progressAnimationRafId=null),carousel.autoplayDelay&&carousel.progressBars&&carousel.progressBars.forEach(bar=>{bar.style.transform="scaleX(0)",bar.style.transition="none"}),carousel.combinedProgressBar&&(carousel.combinedProgressBar.style.transition="none"),carousel.shouldUseCombined){if(carousel.combinedProgressBar&&carousel.slideData)if(carousel.autoplayDelay){carousel.combinedProgressBar.style.transform="scaleX(0)",carousel.combinedProgressBar.style.transition="none";const firstRaf=requestAnimationFrame(()=>{const secondRaf=requestAnimationFrame(()=>{carousel.progressAnimationRafId=null,carousel.combinedProgressBar.style.transition=`transform ${carousel.auto

11playDelay}ms linear`,carousel.combinedProgressBar.style.transform="scaleX(1)"});carousel.progressAnimationRafId=secondRaf});carousel.progressAnimationRafId=firstRaf}else{const progressPercent=(activeIndex+1)/carousel.slideData.length*100;carousel.combinedProgressBar.style.transition="transform 300ms ease",carousel.combinedProgressBar.style.transform=`scaleX(${progressPercent/100})`}}else if(carousel.autoplayDelay&&carousel.progressBars){const activeBar=carousel.progressBars[activeIndex];if(activeBar){const firstRaf=requestAnimationFrame(()=>{const secondRaf=requestAnimationFrame(()=>{carousel.progressAnimationRafId=null,activeBar.style.transition=`transform ${carousel.autoplayDelay}ms linear`,activeBar.style.transform="scaleX(1)"});carousel.progressAnimationRafId=secondRaf});carousel.progressAnimationRafId=firstRaf}}}function shouldUseCombinedPagination(slideCount,config){if(isMobileBreakpoint())return config.mobileCombined!==!1;const maxDesktopItems=config.maxDesktopItems||5;return config.autoDesktopCombine!==!1&&slideCount>maxDesktopItems}function handleCombinedPagination(carousel){updateCombinedPaginationState(carousel)}export function updateCombinedPaginationState(carousel){if(!carousel.slideData)return;const isMobile=isMobileBreakpoint(),shouldCombine=shouldUseCombinedPagination(carousel.slideData.length,carousel.lastResolvedOptions?.["custom-pagination"]||{}),newMode=shouldCombine?isMobile?"mobile-combined":"desktop-combined":"individual";if((carousel.currentPaginationMode||null)===newMode)return;if(carousel.currentPaginationMode=newMode,carousel.shouldUseCombined=shouldCombine,carousel.swiperInstance){const currentIndex=carousel.lastResolvedOptions?.loop?carousel.swiperInstance.realIndex??0:carousel.swiperInstance.activeIndex??0;updateActivePagination(carousel,currentIndex)}const container=carousel.querySelector('[ref="custom-pagination"]');container&&(container.classList.remove("carousel__custom-pagination--combined","mobile-mode","desktop-mode"),shouldCombine?(container.classList.add("carousel__custom-pagination--combined"),container.classList.add(isMobile?"mobile-mode":"desktop-mode"),carousel.paginationItems&&carousel.paginationItems.forEach(item=>{item.style.display="none"}),carousel.combinedProgressBar&&carousel.combinedText&&(carousel.combinedProgressBar.parentElement.parentElement.style.display="flex")):(carousel.paginationItems&&carousel.paginationItems.forEach(item=>{item.style.display="flex"}),carousel.combinedProgressBar&&carousel.combinedText&&(carousel.combinedProgressBar.parentElement.parentElement.style.display="none")))}
12//# sourceMappingURL=/cdn/shop/t/60/assets/custom-pagination.js.map?v=32047515799163405131777298880