https://natvral-lavde.com/cdn/shop/t/197/assets/paginated-list.js?v=95298315036233333871789580600

1import{Component}from"@theme/component";import{sectionRenderer}from"@theme/section-renderer";import{requestIdleCallback,viewTransition}from"@theme/utilities";import{ThemeEvents}from"@theme/events";import{PaginatedListAspectRatioHelper}from"@theme/paginated-list-aspect-ratio";export default class PaginatedList extends Component{pages=new Map;infinityScrollObserver;#resolveNextPagePromise=null;#resolvePreviousPagePromise=null;#aspectRatioHelper;connectedCallback(){super.connectedCallback();const templateCard=this.querySelector('[ref="cardGallery"]');templateCard&&(this.#aspectRatioHelper=new PaginatedListAspectRatioHelper({templateCard})),this.#fetchPage("next"),this.#fetchPage("previous"),this.#observeViewMore(),document.addEventListener(ThemeEvents.FilterUpdate,this.#handleFilterUpdate)}disconnectedCallback(){super.disconnectedCallback(),this.infinityScrollObserver&&this.infinityScrollObserver.disconnect(),document.removeEventListener(ThemeEvents.FilterUpdate,this.#handleFilterUpdate)}#observeViewMore(){const{viewMorePrevious,viewMoreNext}=this.refs;!viewMorePrevious&&!viewMoreNext||(this.infinityScrollObserver||(this.infinityScrollObserver=new IntersectionObserver(async entries=>{viewTransition.current&&await viewTransition.current;for(const entry of entries)if(entry.isIntersecting){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))return;const pageContent=await sectionRenderer.getSectionHTML(this.sectionId,!0,pageInfo.url);this.pages.set(pageNumber,pageContent)}async#renderNextPage(){const{grid}=this.refs;if(!grid)return;const nextPage=this.#getPage("next");if(!nextPage||!this.#shouldUsePage(nextPage))return;let nextPageItemElements=this.#getGridForPage(nextPage.page);if(!nextPageItemElements){const promise=new Promise(res=>{this.#resolveNextPagePromise=res});if(this.#fetchPage("next"),await promise,nextPageItemElements=this.#getGridForPage(nextPage.page),!nextPageItemElements)return}grid.append(...nextPageItemElements),this.#aspectRatioHelper.processNewElements(),history.pushState("","",nextPage.url.toString()),requestIdleCallback(()=>{this.#fetchPage("next")})}async#renderPreviousPage(){const{grid}=this.refs;if(!grid)return;const previousPage=this.#getPage("previous");if(!previousPage||!this.#shouldUsePage(previousPage))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)return}const scrollTop=window.scrollY,firstElement=grid.firstElementChild,oldHeight=firstElement?firstElement.getBoundingClientRect().top+window.scrollY:0;if(grid.prepend(...previousPageItemElements),this.#aspectRatioHelper.processNewElements(),history.pushState("","",previousPage.url.toString()),firstElement){const heightDiff=firstElement.getBoundingClientRect().top+window.scrollY-oldHeight;window.scrollTo({top:scrollTop+heightDiff,behavior:"instant"})}requestIdleCallback(()=>{this.#fetchPage("previous")})}#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.pages.clear(),this.#resolveNextPagePromise?.(),this.#resolvePreviousPagePromise?.(),this.#resolveNextPagePromise=null,this.#resolvePreviousPagePromise=null;const currentLastPage=this.refs.grid?.dataset.lastPage,observer=new MutationObserver(()=>{if(this.refs.grid?.dataset.lastPage!==currentLastPage){if(observer.disconnect(),!this.isConnected)return;this.#observeViewMore(),this.#fetchPage("next")}}),{grid}=this.refs;grid&&(observer.observe(grid,{attributes:!0,attributeFilter:["data-last-page"],childList:!0}),setTimeout(()=>{observer&&observer.disconnect()},3e3))}}
2//# sourceMappingURL=/cdn/shop/t/197/assets/paginated-list.js.map?v=95298315036233333871789580600