https://ca.youngliving.com/cdn/shop/t/8/assets/paginated-list.js?v=144130368331020641971790871994

1import{Component}from"@theme/component";import{sectionRenderer}from"@theme/section-renderer";import{requestIdleCallback,viewTransition}from"@theme/utilities";import{ThemeEvents}from"@theme/events";export default class PaginatedList extends Component{pages=new Map;infinityScrollObserver;#resolveNextPagePromise=null;#resolvePreviousPagePromise=null;#imageRatioSetting=null;connectedCallback(){super.connectedCallback(),this.#storeImageRatioSettings(),this.#fetchPage("next"),this.#fetchPage("previous"),this.#observeViewMore(),document.addEventListener(ThemeEvents.FilterUpdate,this.#handleFilterUpdate)}#storeImageRatioSettings(){const firstCardGallery=this.querySelector('[ref="cardGallery"]');firstCardGallery&&(this.#imageRatioSetting=firstCardGallery.getAttribute("data-image-ratio"))}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.#processNewElements(),history.pushState("","",nextPage.url.toString()),requestIdleCallback(()=>{this.#fetchPage("next")}),window.setupRedeemButtons()}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.#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")}),window.setupRedeemButtons()}#processNewElements(){requestAnimationFrame(()=>{this.#imageRatioSetting==="adapt"?this.#fixAdaptiveAspectRatios():this.#applyFixedAspectRatio()})}#getUnprocessedGalleries(){return this.querySelectorAll(".card-gallery:not([data-aspect-ratio-applied])")}#markAsProcessed(gallery){gallery instanceof HTMLElement&&gallery.setAttribute("data-aspect-ratio-applied","true")}#getSafeImageAspectRatio(width,height){const rawRatio=width/height;return Math.max(.1,Math.min(10,rawRatio)).toFixed(3)}#applyAspectRatioToGallery(gallery,aspectRatio){if(!(gallery instanceof HTMLElement))return;gallery.style.setProperty("--gallery-aspect-ratio",aspectRatio),gallery.querySelectorAll(".product-media-container").forEach(container=>{container instanceof HTMLElement&&(container.style.aspectRatio=aspectRatio)}),this.#markAsProcessed(gallery)}#fixAdaptiveAspectRatios(){const newCardGalleries=this.#getUnprocessedGalleries();if(!newCardGalleries.length)return;const productRatioCache=new Map;

1newCardGalleries.forEach(gallery=>{if(!(gallery instanceof HTMLElement))return;const productId=gallery.getAttribute("data-product-id");if(productId&&productRatioCache.has(productId)){this.#applyAspectRatioToGallery(gallery,productRatioCache.get(productId));return}const img=gallery.querySelector("img");if(!img){this.#applyAspectRatioToGallery(gallery,"1");return}const loadAndSetRatio=()=>{if(!img.naturalWidth||!img.naturalHeight)return;const imgRatio=this.#getSafeImageAspectRatio(img.naturalWidth,img.naturalHeight);productId&&productRatioCache.set(productId,imgRatio),this.#applyAspectRatioToGallery(gallery,imgRatio)};img.complete?loadAndSetRatio():img.addEventListener("load",loadAndSetRatio,{once:!0})})}#applyFixedAspectRatio(){if(!this.#imageRatioSetting)return;const aspectRatio=this.#getAspectRatioValue(this.#imageRatioSetting);if(!aspectRatio)return;const newCardGalleries=this.#getUnprocessedGalleries();newCardGalleries.length&&requestAnimationFrame(()=>{newCardGalleries.forEach(gallery=>{gallery instanceof HTMLElement&&this.#applyAspectRatioToGallery(gallery,aspectRatio)})})}static ASPECT_RATIOS={square:"1",portrait:"0.8",landscape:"1.778"};#getAspectRatioValue(ratioSetting){return PaginatedList.ASPECT_RATIOS[ratioSetting]||null}#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 parsedPage=new DOMParser().parseFromString(pageHTML,"text/html"),gridElement=parsedPage.querySelector('[ref="grid"]');if(gridElement)return[...gridElement.querySelectorAll(':scope > [ref="cards[]"]'),...parsedPage.querySelectorAll("template[data-lock-pending]")]}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(mutations=>{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/8/assets/paginated-list.js.map?v=144130368331020641971790871994