https://trygraymatter.com/cdn/shop/t/139/assets/product-gallery-variant.js?v=165224599066888022191781705724

1(()=>{"use strict";const NS=window.ProductGalleryVariant=window.ProductGalleryVariant||{},cache=new Map,rIC=window.requestIdleCallback||(cb=>setTimeout(()=>cb({timeRemaining:()=>16}),1)),GALLERY_SELECTOR="[data-product-gallery]",keyOf=(sectionId,variantId,mode="main")=>`${sectionId}:${mode}:${variantId}`;async function fetchGalleryHTMLString({productUrl,sectionId,sectionDomId,variantId,mode="main",signal}){const k=keyOf(sectionId,variantId,mode);if(cache.has(k))return cache.get(k);const url=new URL(productUrl,window.location.origin);url.searchParams.set("variant",variantId),url.searchParams.set("section_id",sectionId);const res=await fetch(url.toString(),{credentials:"same-origin",signal});if(!res.ok)throw new Error(`Section render ${res.status}`);const html=await res.text(),freshSection=new DOMParser().parseFromString(html,"text/html").getElementById(sectionDomId);if(!freshSection)throw new Error(`Could not find section #${sectionDomId} in response`);const freshGallery=freshSection.querySelector(GALLERY_SELECTOR);if(!freshGallery)throw new Error(`Could not find ${GALLERY_SELECTOR} inside #${sectionDomId}`);const galleryHTML=freshGallery.outerHTML;return cache.set(k,galleryHTML),galleryHTML}function buildFromHTML(html){const tpl=document.createElement("template");return tpl.innerHTML=html,tpl.content.firstElementChild}async function decodeImages(root){const imgs=Array.from(root.querySelectorAll("img"));if(!imgs.length)return;const hero=imgs[0];if(hero){try{hero.fetchPriority="high"}catch{}hero.loading="eager",hero.dataset?.src&&!hero.src&&(hero.src=hero.dataset.src),hero.dataset?.srcset&&!hero.srcset&&(hero.srcset=hero.dataset.srcset)}await Promise.all(imgs.map(img=>(img.dataset?.src&&!img.src&&(img.src=img.dataset.src),img.dataset?.srcset&&!img.srcset&&(img.srcset=img.dataset.srcset),img.decode?.().catch(()=>{}))))}async function smoothReplace(oldNode,newNode,doReplace){if(!(typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches)&&typeof document.startViewTransition=="function"){await document.startViewTransition(()=>{doReplace()}).finished;return}const h=oldNode.getBoundingClientRect().height,prev={minHeight:oldNode.style.minHeight,pos:oldNode.style.position,opacity:oldNode.style.opacity,transition:oldNode.style.transition};oldNode.style.minHeight=h+"px",oldNode.style.position="relative",oldNode.style.opacity="0.001",doReplace(),requestAnimationFrame(()=>{const live=oldNode.parentNode?oldNode:newNode;live.style.transition="opacity 180ms ease",live.style.opacity="1",setTimeout(()=>{live.style.minHeight=prev.minHeight||"",live.style.position=prev.pos||"",live.style.opacity=prev.opacity||"",live.style.transition=prev.transition||""},220)})}function init(sectionEl){if(!sectionEl||sectionEl.__pgvInitialized)return;sectionEl.__pgvInitialized=!0;let sectionDomId=sectionEl.id;const sectionId=sectionEl.dataset.sectionId,mainProductUrl=sectionEl.dataset.productUrl||window.location.pathname,subProductUrl=sectionEl.dataset.subProductUrl||null,historyOn=sectionEl.dataset.enableHistoryState==="true";let mainProductData=null;const productJsonEl=sectionEl.querySelector("[data-product-json]");if(productJsonEl?.textContent)try{mainProductData=JSON.parse(productJsonEl.textContent)}catch(e){console.error("[pgv] Failed to parse main product JSON",e)}let subProductData=null;const subJsonEl=sectionEl.querySelector("[data-sub-product-json]");if(subJsonEl?.textContent)try{subProductData=JSON.parse(subJsonEl.textContent)}catch(e){console.error("[pgv] Failed to parse sub product JSON",e)}function getMainVariantById(id){if(!mainProductData||!Array.isArray(mainProductData.variants))return null;const sid=String(id);return mainProductData.variants.find(v=>String(v.id)===sid)||null}function findSubVariantFor(mainVariantId){if(!subProductData||!Array.isArray(subProductData.variants))return null;const mainVar=getMainVariantById(mainVariantId);return mainVar&&subProductData.variants.find(v=>v.option1===mainVar.option1&&v.option2===mainVar.option2&&v.option3===mainVar.option3)||null}function isSubscriptionSelected(){const spInput=sectionEl.querySelector('input[name="selling_plan"], select[name="selling_plan"]');return!!(spInput&&spInput.value)}let lastVariantId=new URL(window.location.href).searchParams.get("variant")||sectionEl.querySelector('input[name="id"]')?.value||null,isRendering=!1,inFlight=null;function fireGalleryLifecycle(galleryEl){galleryEl.dispatchEvent(new Event("theme:gallery:load",{bubbles:!0})),requestAnimationFrame(()=>window.dispatchEvent(new Event("resize")))}function bindIdInput(){const idInput=sectionEl.querySelector('input[name="id"]');idInput&&idInput.addEventListener("change",()=>renderVariant(String(idInput.value)))}bindIdInput();function bindSellingPlanChange(){sectionEl.addEventListener("change",e=>

1{if(!e.target.matches('input[name="selling_plan"], select[name="selling_plan"]'))return;const vid=sectionEl.querySelector('input[name="id"]')?.value;vid&&renderVariant(String(vid),{force:!0})})}bindSellingPlanChange();async function swapGalleryOnly(galleryHTML){const freshGallery=buildFromHTML(galleryHTML);await decodeImages(freshGallery);const liveGallery2=sectionEl.querySelector(GALLERY_SELECTOR);if(!liveGallery2){const url=new URL(mainProductUrl,window.location.origin),vid=lastVariantId||sectionEl.querySelector('input[name="id"]')?.value;url.searchParams.set("variant",vid||""),url.searchParams.set("section_id",sectionId);const html=await(await fetch(url.toString(),{credentials:"same-origin"})).text(),freshSection=new DOMParser().parseFromString(html,"text/html").getElementById(sectionDomId);freshSection&&(await decodeImages(freshSection),await smoothReplace(sectionEl,freshSection,()=>sectionEl.replaceWith(freshSection)),sectionEl=freshSection,sectionDomId=sectionEl.id||sectionDomId,bindIdInput(),bindSellingPlanChange());return}await smoothReplace(liveGallery2,freshGallery,()=>{liveGallery2.replaceWith(freshGallery)}),fireGalleryLifecycle(freshGallery),freshGallery.dataset.galleryReady="true",freshGallery.removeAttribute("data-hide-until-ready")}async function actuallyRenderVariant(mainVariantId){if(!mainVariantId||isRendering)return;const mode=isSubscriptionSelected()&&!!(subProductUrl&&subProductData)?"sub":"main";if(mainVariantId===lastVariantId&&mode==="main")return;isRendering=!0,inFlight&&inFlight.abort(),inFlight=new AbortController;let targetVariantId=mainVariantId,productUrlToUse=mainProductUrl;if(mode==="sub"){const subVar=findSubVariantFor(mainVariantId);subVar&&(targetVariantId=String(subVar.id)),productUrlToUse=subProductUrl}try{const galleryHTML=await fetchGalleryHTMLString({productUrl:productUrlToUse,sectionId,sectionDomId,variantId:String(targetVariantId),mode,signal:inFlight.signal});if(await swapGalleryOnly(galleryHTML),lastVariantId=String(mainVariantId),historyOn){const u=new URL(window.location.href);u.searchParams.set("variant",mainVariantId),window.history.replaceState({},"",u.toString())}}catch(e){e.name!=="AbortError"&&console.error("[pgv]",e)}finally{isRendering=!1,inFlight=null}}let t;const renderVariant=(idRaw,opts={})=>{const id=String(idRaw);if(clearTimeout(t),opts.force){actuallyRenderVariant(id);return}t=setTimeout(()=>actuallyRenderVariant(id),40)};function readVariantIds(sec){const el=sec.querySelector("[data-product-json]");if(!el?.textContent)return[];try{return(JSON.parse(el.textContent)?.variants||[]).map(v=>String(v.id))}catch{return[]}}const allVariantIds=readVariantIds(sectionEl);rIC(()=>{const cur=sectionEl.querySelector('input[name="id"]')?.value;allVariantIds.filter(v=>v!==cur).slice(0,8).forEach((vid,i)=>{rIC(async()=>{try{await fetchGalleryHTMLString({productUrl:mainProductUrl,sectionId,sectionDomId,variantId:vid,mode:"main"})}catch{}},{timeout:1500+i*120})})}),document.addEventListener("mouseover",e=>{const input=e.target?.closest?.('input[type="radio"][data-single-option-selector]');if(!input)return;const vid=String(input.dataset.variantId||input.value||"");if(!vid)return;const k=keyOf(sectionId,vid,"main");cache.has(k)||rIC(async()=>{try{await fetchGalleryHTMLString({productUrl:mainProductUrl,sectionId,sectionDomId,variantId:vid,mode:"main"})}catch{}})},{passive:!0});const handleVariantChange=vid=>vid&&renderVariant(String(vid));document.addEventListener("variantChanged",e=>handleVariantChange(e?.detail?.variantId)),document.addEventListener("variant:change",e=>handleVariantChange(e?.detail?.variant?.id||e?.detail?.variantId)),document.addEventListener("product:variant-change",e=>handleVariantChange(e?.detail?.variant?.id||e?.detail?.variantId));const nowId=sectionEl.querySelector('input[name="id"]')?.value,liveGallery=sectionEl.querySelector(GALLERY_SELECTOR);if(nowId&&liveGallery){lastVariantId=String(nowId);const seedKey=keyOf(sectionId,String(nowId),"main");cache.has(seedKey)||cache.set(seedKey,liveGallery.outerHTML);const subscriptionOn=isSubscriptionSelected(),hasSubProduct=!!(subProductUrl&&subProductData);liveGallery.hasAttribute("data-hide-until-ready")&&subscriptionOn&&hasSubProduct?renderVariant(String(nowId),{force:!0}):(liveGallery.dataset.galleryReady="true",liveGallery.removeAttribute("data-hide-until-ready"))}NS.renderVariant=id=>renderVariant(String(id))}function boot(root=document){root.querySelectorAll('[data-product-gallery-dynamic="true"]').forEach(init)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>boot(document)):boot(document),document.addEventListener("shopify:section:load",e=>boot(e.target||document)),document.addEventListener("shopify:section:select",e=>boot(e.target||document)),window.ProductGalleryVariant={...window.ProductGalleryVariant||{},init,boot}})();
2//# sourceMappingURL=/cdn/shop/t/139/assets/product-gallery-variant.js.map?v=165224599066888022191781705724