https://klavi.fr/cdn/shop/t/9/assets/paginated-list.js?v=154959014272394486761772395452

1import{Component}from"@theme/component";import{ThemeEvents}from"@theme/events";import{sectionRenderer}from"@theme/section-renderer";import{requestIdleCallback}from"@theme/utilities";const PAGINATION_TYPES={NUMBER:"number",LOAD_MORE:"load-more",INFINITE:"infinite"};export default class PaginatedList extends Component{pages=new Map;infinityScrollObserver;#resolveNextPagePromise=null;#resolvePreviousPagePromise=null;#paginationType;#isLoading=!1;#preloadEnabled=!0;#filterUpdateController=null;connectedCallback(){super.connectedCallback(),this.#paginationType=this.getAttribute("pagination-type")||PAGINATION_TYPES.NUMBER,this.#preloadEnabled=this.getAttribute("preload")!=="false",this.#paginationType!==PAGINATION_TYPES.NUMBER&&this.#initializeJSPagination()}disconnectedCallback(){super.disconnectedCallback(),this.#paginationType!==PAGINATION_TYPES.NUMBER&&this.#cleanupJSPagination()}#initializeJSPagination(){switch(this.#paginationType){case PAGINATION_TYPES.LOAD_MORE:this.#initializeLoadMore();break;case PAGINATION_TYPES.INFINITE:this.#initializeInfiniteScroll();break}document.addEventListener(ThemeEvents.FilterUpdate,this.#handleFilterUpdate)}#cleanupJSPagination(){this.infinityScrollObserver&&this.infinityScrollObserver.disconnect(),document.removeEventListener(ThemeEvents.FilterUpdate,this.#handleFilterUpdate)}#initializeLoadMore(){this.#attachLoadMoreListener(),this.#preloadEnabled&&this.#fetchPage("next")}#attachLoadMoreListener(){const loadMoreBtn=this.querySelector('[ref="loadMoreBtn"]');loadMoreBtn&&loadMoreBtn._paginatedListAttached!==!0&&(loadMoreBtn._paginatedListAttached=!0,loadMoreBtn.addEventListener("click",()=>this.#handleLoadMore()))}#initializeInfiniteScroll(){this.#observeViewMore(),this.#preloadEnabled&&(this.#fetchPage("next"),this.#fetchPage("previous"))}async#handleLoadMore(){if(this.#isLoading)return;const loadMoreBtn=this.querySelector('[ref="loadMoreBtn"]');if(loadMoreBtn){loadMoreBtn.classList.add("btn--loading");try{await this.#renderNextPage();const currentBtn=this.querySelector('[ref="loadMoreBtn"]');if(!currentBtn)return;const nextNextPage=this.#getPage("next");(!nextNextPage||!this.#shouldUsePage(nextNextPage))&&(currentBtn.style.display="none")}catch(error){console.error("Error loading more content:",error)}finally{const finalBtn=this.querySelector('[ref="loadMoreBtn"]');finalBtn&&finalBtn.classList.remove("btn--loading")}}}#observeViewMore(){const{viewMorePrevious,viewMoreNext}=this.refs;!viewMorePrevious&&!viewMoreNext||(this.infinityScrollObserver&&this.infinityScrollObserver.disconnect(),this.infinityScrollObserver=new IntersectionObserver(entries=>{for(const entry of entries)if(entry.isIntersecting&&!this.#isLoading){const{viewMorePrevious:viewMorePrevious2,viewMoreNext:viewMoreNext2}=this.refs;entry.target===viewMorePrevious2?this.#renderPreviousPage():entry.target===viewMoreNext2&&this.#renderNextPage()}},{rootMargin:"100px"}),viewMorePrevious&&this.infinityScrollObserver.observe(viewMorePrevious),viewMoreNext&&this.infinityScrollObserver.observe(viewMoreNext))}#shouldUsePage(pageInfo){if(!pageInfo)return!1;const{grid}=this.refs,lastPage=grid?.dataset.lastPage;return!(!lastPage||pageInfo.page<1||pageInfo.page>Number(lastPage))}async#fetchPage(type){const page=this.#getPage(type),resolvePromise=()=>{type==="next"?(this.#resolveNextPagePromise?.(),this.#resolveNextPagePromise=null):(this.#resolvePreviousPagePromise?.(),this.#resolvePreviousPagePromise=null)};if(!page||!this.#shouldUsePage(page)){resolvePromise();return}await this.#fetchSpecificPage(page.page,page.url),resolvePromise()}async#fetchSpecificPage(pageNumber,url=void 0){const pageInfo={page:pageNumber,url};if(!url){const newUrl=new URL(window.location.href);newUrl.searchParams.set("page",pageNumber.toString()),newUrl.hash="",pageInfo.url=newUrl}if(this.#shouldUsePage(pageInfo))try{const pageContent=await sectionRenderer.getSectionHTML(this.sectionId,!0,pageInfo.url);this.pages.set(pageNumber,pageContent)}catch(error){throw console.error(`Error fetching page ${pageNumber}:`,error),error}}async#renderNextPage(){if(this.#isLoading)return;const{grid}=this.refs;if(grid){this.#isLoading=!0,this.#paginationType===PAGINATION_TYPES.INFINITE&&this.#showLoadingState("next");try{const nextPage=this.#getPage("next");if(!nextPage||!this.#shouldUsePage(nextPage)){this.#hideViewMoreElement("next");return}let nextPageItemElements=this.#getGridForPage(nextPage.page);if((!nextPageItemElements||nextPageItemElements.length===0)&&(await this.#fetchSpecificPage(nextPage.page,nextPage.url),nextPageItemElements=this.#getGridForPage(nextPage.page),!nextPageItemElements||nextPageItemElements.length===0)){this.#hideViewMoreElement("next");return}grid.append(...nextPageItemElements),this.#paginationType===PAGINATION_TYPES.INFINITE&&history.pushState("","",nextPage.url.toString());const nextNextPage=this.#getPage("next");(!nextNextPage||!this.#shouldUsePage(nextNextPage))&&this.#hideViewMoreElement("next"),this.#preloadEnabled&&requestIdleCallback(()=>{this.#fetchPage("next")})}catch(error){console.error("Error loading next page:",error)}finally{this.#isLoading=!1,this.#paginationType===PAGINATION_TYPES.INFINITE&&this.#hideLoadingState("next")}}}async#renderPreviousPage(){if(this.#isLoading)return;const{grid}=this.refs;if(grid){this.#isLoading=!0,this.#paginationType===PAGINATION_TYPES.INFINITE&&this.#showLoadingState("previous");try{const previousPage=this.#getPage("previous");if(!previousPage||!this.#shouldUsePage(previousPage)){this.#hideViewMoreElement("previous");return}let previousPageItemElements=this.#getGridForPage(previousPage.page);if(!previousPageItemElements){const promise=new Promise(res=>{this.#resolvePreviousPagePromise=res});if(this.#fetchPage("previous"),await promise,previousPageItemElements=this.#getGridForPage(previousPage.page),!previousPageItemElements){this.#hideViewMoreElement("previous");return}}const scrollTop=window.scrollY,firstElement=grid.firstElementChild,oldHeight=firstElement?firstElement.getBoundingClientRect().top+window.scrollY:0;grid.prepend(...previousPageItemElements),this.#paginationType===PAGINATION_TYPES.INFINITE&&history.pushState("","",previousPage.url.toString());const prevPrevPage=this.#getPage("previous");if((!prevPrevPage||!this.#shouldUsePage(prevPrevPage))&&this.#hideViewMoreElement("previous"),firstElement){const heightDiff=firstElement.getBoundingClientRect().top+window.scrollY-oldHeight;window.scrollTo({top:scrollTop+heightDiff,behavior:"instant"})}this.#preloadEnabled&&requestIdleCallback(()=>{this.#fetchPage("previous")})}catch(error){console.error("Error loading previous page:",error)}finally{this.#isLoading=!1,this.#paginationType===PAGINATION_TYPES.INFINITE&&this.#hideLoadingState("previous")}}}#showLoadingState(type){const element=this.refs[type==="previous"?"viewM

1orePrevious":"viewMoreNext"];element&&element.classList.add("btn--loading")}#hideLoadingState(type){const element=this.refs[type==="previous"?"viewMorePrevious":"viewMoreNext"];element&&element.classList.remove("btn--loading")}#hideViewMoreElement(type){const element=this.refs[type==="previous"?"viewMorePrevious":"viewMoreNext"];element&&(element.style.display="none",this.infinityScrollObserver&&this.infinityScrollObserver.unobserve(element))}#getPage(type){const{cards}=this.refs,isPrevious=type==="previous";if(!Array.isArray(cards))return;const targetCard=cards[isPrevious?0:cards.length-1];if(!targetCard)return;const currentCardPage=Number(targetCard.dataset.page),page=isPrevious?currentCardPage-1:currentCardPage+1,url=new URL(window.location.href);return url.searchParams.set("page",page.toString()),url.hash="",{page,url}}#getGridForPage(page){const pageHTML=this.pages.get(page);if(!pageHTML)return;const gridElement=new DOMParser().parseFromString(pageHTML,"text/html").querySelector('[ref="grid"]');if(gridElement)return gridElement.querySelectorAll(':scope > [ref="cards[]"]')}get sectionId(){const id=this.getAttribute("section-id");if(!id)throw new Error("The section-id attribute is required");return id}#handleFilterUpdate=()=>{this.#filterUpdateController&&this.#filterUpdateController.abort(),this.#filterUpdateController=new AbortController;const signal=this.#filterUpdateController.signal;this.pages.clear(),this.#resolveNextPagePromise?.(),this.#resolvePreviousPagePromise?.(),this.#resolveNextPagePromise=null,this.#resolvePreviousPagePromise=null,this.#isLoading=!1;let hasProcessed=!1;const observer=new MutationObserver(()=>{if(signal.aborted||hasProcessed){observer.disconnect();return}if(!this.isConnected){observer.disconnect();return}hasProcessed=!0,observer.disconnect(),this.#paginationType===PAGINATION_TYPES.INFINITE?this.#observeViewMore():this.#paginationType===PAGINATION_TYPES.LOAD_MORE&&this.#attachLoadMoreListener(),this.#preloadEnabled&&this.#fetchPage("next")}),{grid}=this.refs;grid&&(observer.observe(grid,{attributes:!0,attributeFilter:["data-last-page"],childList:!0}),setTimeout(()=>{!signal.aborted&&observer&&observer.disconnect()},3e3))}}
2//# sourceMappingURL=/cdn/shop/t/9/assets/paginated-list.js.map?v=154959014272394486761772395452