https://www.johnnykel.ly/_astro/ProjectCarousel.astro_astro_type_script_index_0_lang.tx9uQkUu.js

1import{P as m}from"./player.es.DBTo2Wjx.js";class x extends HTMLElement{currentIndex=0;totalSlides=0;slides=null;slidesContainer=null;isTransitioning=!1;lowPowerFirstNavPending=!1;displayIndex=1;projectsInfo=[];infoOverlay=null;infoBackdrop=null;infoToggle=null;contentPanels=null;galleryStates=new Map;touchStartX=0;isDragging=!1;dragOffset=0;connectedCallback(){this.totalSlides=parseInt(this.dataset.totalSlides||"0",10);const e=parseInt(this.dataset.initialIndex||"0",10);if(this.currentIndex=e,this.slidesContainer=this.querySelector(".slides"),this.totalSlides===0)return;this.createClones(),this.slides=this.querySelectorAll("[data-slide-index]");const t=this.querySelector("[data-projects-info]");if(t?.textContent&&(this.projectsInfo=JSON.parse(t.textContent)),this.infoOverlay=this.querySelector("[data-info-overlay]"),this.infoBackdrop=this.querySelector("[data-info-backdrop]"),this.infoToggle=this.querySelector("[data-info-toggle]"),this.contentPanels=this.querySelectorAll("[data-content-index]"),this.displayIndex=this.totalSlides<2?this.currentIndex:this.currentIndex+1,this.stripHiddenOrientationVideos(),this.setupNavigation(),this.setupKeyboard(),this.setupTouch(),this.setupPlayButtons(),this.setupInfoOverlay(),this.setupTeaserVideos(),this.setupTransitionEnd(),this.slidesContainer){this.slidesContainer.style.transition="none";const s=-this.displayIndex*100;this.slidesContainer.style.transform=`translateX(${s}%)`,this.slidesContainer.offsetHeight,this.slidesContainer.style.transition=""}this.playCurrentVideo(),setTimeout(()=>{const r=this.slides?.[this.displayIndex]?.querySelector("video.slide-video");r&&r.paused&&(this.lowPowerFirstNavPending=!0,this.setupGestureUnlock())},500),window.addEventListener("resize",()=>{this.playCurrentVideo()}),this.updateOverlayContent(this.currentIndex),this.dispatchProjectChange(this.currentIndex),window.addEventListener("video-modal-closed",()=>{this.playCurrentVideo();const s=this.getAttribute("data-meta-title")||"";s&&(document.title=s)}),window.addEventListener("navigate-to-project",(s=>{const{slug:r}=s.detail;r&&this.navigateToProjectBySlug(r)}))}navigateToProjectBySlug(e){const t=this.projectsInfo.findIndex(l=>l.slug===e);if(t===-1)return;const s=t+1;if(this.slidesContainer){this.slidesContainer.style.transition="none";const l=-s*100;this.slidesContainer.style.transform=`translateX(${l}%)`,this.slidesContainer.offsetHeight,this.slidesContainer.style.transition=""}this.currentIndex=t,this.displayIndex=s,this.updateOverlayContent(t),this.dispatchProjectChange(t),this.playCurrentVideo();const n=this.slides?.[s]?.querySelector("[data-video-id]"),o=n?.dataset.videoId,a=n?.dataset.aspectRatio;o&&this.openVideoModal(o,a)}setupGestureUnlock(){const e=()=>{document.removeEventListener("pointerdown",e,!0),this.querySelectorAll("video.slide-video").forEach(t=>{const s=t.closest(".slide-video-wrapper");!s||s.offsetParent===null||t.play().catch(()=>{})}),setTimeout(()=>{this.lowPowerFirstNavPending=!1},2e3)};document.addEventListener("pointerdown",e,!0)}stripHiddenOrientationVideos(){this.slides?.forEach(e=>{e.querySelectorAll("video.slide-video").forEach(t=>{const s=t.closest(".slide-video-wrapper");s&&s.offsetParent===null&&(t.removeAttribute("autoplay"),t.removeAttribute("src"),t.removeAttribute("data-src"))})})}setupTeaserVideos(){this.slides?.forEach(n=>{n.querySelectorAll("video.slide-video").forEach(o=>{o.addEventListener("playing",()=>{const a=n.querySelector(".slide-poster");a&&!a.hasAttribute("data-pinned")&&a.setAttribute("data-hidden","")}),o.addEventListener("pause",()=>{const a=n.querySelector(".slide-poster");a&&a.removeAttribute("data-hidden")})})});const t=this.slides?.[this.displayIndex]?.querySelector("video.slide-video");let s=!1;const r=()=>{s||(s=!0,this.querySelectorAll("video.slide-video[data-src]").forEach(n=>{const o=n.closest(".slide-video-wrapper");!o||o.offsetParent===null||(n.src=n.dataset.src,n.removeAttribute("data-src"))}))};t?.addEventListener("playing",r,{once:!0}),setTimeout(r,3e3)}createClones(){if(!this.slidesContainer||this.totalSlides<2)return;

1const e=this.slidesContainer.querySelectorAll("[data-slide-index]"),t=e[0],s=e[this.totalSlides-1];if(!t||!s)return;const r=t.cloneNode(!0);r.setAttribute("data-slide-index","clone-first"),r.setAttribute("data-clone","first");const n=s.cloneNode(!0);n.setAttribute("data-slide-index","clone-last"),n.setAttribute("data-clone","last"),[r,n].forEach(o=>{o.querySelectorAll("video").forEach(a=>{a.src&&(a.dataset.src=a.src,a.removeAttribute("src"),a.preload="none")})}),this.slidesContainer.appendChild(r),this.slidesContainer.insertBefore(n,t)}setupTransitionEnd(){this.slidesContainer?.addEventListener("transitionend",e=>{e.target!==this.slidesContainer||e.propertyName!=="transform"||this.totalSlides<2||(this.displayIndex===0?this.teleportToSlide(this.totalSlides):this.displayIndex===this.totalSlides+1&&this.teleportToSlide(1))})}teleportToSlide(e){if(!this.slidesContainer)return;this.slidesContainer.style.transition="none",this.displayIndex=e;const t=-e*100;this.slidesContainer.style.transform=`translateX(${t}%)`,this.slidesContainer.offsetHeight,this.slidesContainer.style.transition="",this.isTransitioning=!1,this.playCurrentVideo()}setupNavigation(){const e=this.querySelector('[data-action="prev"]'),t=this.querySelector('[data-action="next"]');e?.addEventListener("click",()=>this.prev()),t?.addEventListener("click",()=>this.next())}setupKeyboard(){document.addEventListener("keydown",e=>{const t=this.getBoundingClientRect();t.top<window.innerHeight&&t.bottom>0&&(e.key==="ArrowLeft"?(e.preventDefault(),this.prev()):e.key==="ArrowRight"&&(e.preventDefault(),this.next()))})}setupTouch(){const e=this.querySelector(".carousel-container");e&&(e.addEventListener("touchstart",t=>{if(this.isTransitioning)return;const s=t.touches[0];this.touchStartX=s.clientX,this.isDragging=!0,this.dragOffset=0,this.setAttribute("data-dragging",""),this.slidesContainer&&(this.slidesContainer.style.transition="none")},{passive:!0}),e.addEventListener("touchmove",t=>{if(!this.isDragging)return;const s=t.touches[0];this.dragOffset=s.clientX-this.touchStartX,this.updateDragPosition()},{passive:!0}),e.addEventListener("touchend",()=>{if(!this.isDragging){this.removeAttribute("data-dragging");return}this.isDragging=!1,this.finishDrag()}))}updateDragPosition(){if(!this.slidesContainer)return;const e=-this.displayIndex*100,t=this.dragOffset/window.innerWidth*100;this.slidesContainer.style.transform=`translateX(calc(${e}% + ${t}%))`}resetDragPosition(){if(!this.slidesContainer)return;this.slidesContainer.style.transition="";const e=-this.displayIndex*100;this.slidesContainer.style.transform=`translateX(${e}%)`}finishDrag(){this.slidesContainer&&(this.slidesContainer.style.transition=""),this.dragOffset>50?this.prev():this.dragOffset<-50?this.next():(this.resetDragPosition(),this.removeAttribute("data-dragging")),this.dragOffset=0}setupPlayButtons(){this.querySelectorAll("[data-video-id]").forEach(t=>{t.addEventListener("click",()=>{const s=t.dataset.videoId,r=t.dataset.aspectRatio;s&&this.openVideoModal(s,r)})})}setupInfoOverlay(){this.querySelector("[data-info-toggle]")?.addEventListener("click",()=>this.toggleInfoOverlay()),this.infoBackdrop?.addEventListener("click",t=>{(t.target===this.infoBackdrop||t.target.closest("[data-info-close]"))&&this.closeInfoOverlay()}),this.addEventListener("click",t=>{const r=t.target.closest("[data-zoom-url]");if(r){window.dispatchEvent(new CustomEvent("open-image-zoom",{detail:{url:r.dataset.zoomUrl,alt:r.dataset.zoomAlt||""}}));return}}),this.addEventListener("click",t=>{const r=t.target.closest("[data-video-poster-play]");if(!r)return;const n=r.closest("[data-video-poster-overlay]"),o=r.closest("[data-video-poster-wrapper]");if(!n||!o)return;n.setAttribute("data-hidden","");const a=o.querySelector("video");if(a){a.play();return}const l=o.querySelector("iframe");if(l){const d=l.dataset.src;d?(l.src=d,l.removeAttribute("data-src")):l.src.includes("autoplay=0")&&(l.src=l.src.replace("autoplay=0","autoplay=1"))}}),this.addEventListener("click",t=>{const r=t.target.closest("[data-gallery-action]");if(!r)return;const n=r.closest("[data-gallery-block]");if(!n)return;const o=n.dataset.blockKey;if(!o)return;const a=r.dataset.galleryAction;a==="prev"&&this.galleryPrev(o),a==="next"&&this.galleryNext(o)})}updateActiveSlideOnScroll(e){const t=this.galleryStates.get(e);if(!t)return;const s=t.slidesEl.querySelectorAll(".gallery-slide"),r=t.container.getBoundingClientRect(),n=r.left+r.

1width/2;let o=0,a=1/0;if(s.forEach((l,d)=>{const h=l.getBoundingClientRect(),g=h.left+h.width/2,p=Math.abs(n-g);p<a&&(a=p,o=d)}),t.index=o,t.realCount>1){const l=t.realCount+2;if(o===0){t.index=t.realCount,t.container.style.scrollSnapType="none";const d=s[t.realCount];t.container.scrollLeft=d.offsetLeft-(t.container.clientWidth-d.offsetWidth)/2,requestAnimationFrame(()=>{t.container.style.scrollSnapType=""})}else if(o===l-1){t.index=1,t.container.style.scrollSnapType="none";const d=s[1];t.container.scrollLeft=d.offsetLeft-(t.container.clientWidth-d.offsetWidth)/2,requestAnimationFrame(()=>{t.container.style.scrollSnapType=""})}}s.forEach((l,d)=>{d===t.index?(l.setAttribute("data-active",""),this.playGallerySlideVideo(l)):(l.removeAttribute("data-active"),this.pauseGallerySlideVideo(l))})}toggleInfoOverlay(){this.infoOverlay?.hasAttribute("data-open")?this.closeInfoOverlay():this.openInfoOverlay()}openInfoOverlay(){this.infoOverlay?.setAttribute("data-open",""),this.infoBackdrop?.setAttribute("data-open","");const e=this.infoOverlay?.querySelector(".info-content");e&&requestAnimationFrame(()=>{e.scrollTop=0}),window.dispatchEvent(new CustomEvent("info-overlay-opened"))}closeInfoOverlay(){this.infoOverlay?.removeAttribute("data-open"),this.infoBackdrop?.removeAttribute("data-open"),this.pauseAudibleOverlayVideos(),window.dispatchEvent(new CustomEvent("info-overlay-closed"))}pauseAudibleOverlayVideos(){this.infoOverlay?.querySelectorAll("[data-video-poster-wrapper] iframe").forEach(e=>{if(!(e.src||e.dataset.src||"").includes("muted=1"))try{new m(e).pause()}catch{}}),this.infoOverlay?.querySelectorAll("video").forEach(e=>{e.muted||e.paused||e.pause()})}updateOverlayContent(e){const t=this.projectsInfo[e];if(!t)return;this.infoToggle&&(t.hasInfo?this.infoToggle.removeAttribute("data-hidden"):(this.infoToggle.setAttribute("data-hidden",""),this.closeInfoOverlay())),this.contentPanels?.forEach((n,o)=>{o===e?n.setAttribute("data-active",""):n.removeAttribute("data-active")}),this.galleryStates.clear();const s=this.contentPanels?.[e];if(!s)return;s.querySelectorAll("[data-gallery-block]").forEach(n=>{const o=n.dataset.blockKey;if(!o)return;const a=t.content.find(i=>i._key===o&&i._type==="contentGallery");if(!a||!a.items)return;const l=n.querySelector("[data-gallery-container]"),d=n.querySelector("[data-gallery-slides]");if(!l||!d)return;const h=a.items.length,g='<svg width="100%" viewBox="0 0 152 292" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M148.25 145.528L3.5 287.556L3.5 3.50009L148.25 145.528Z" stroke="currentColor" stroke-width="7" stroke-linejoin="round"/></svg>',p=(i,c="")=>{const y=c?` style="${c}"`:"";return`<div class="video-poster-overlay" data-video-poster-overlay><img src="${i}" alt=""${y} /><button class="video-poster-play" data-video-poster-play aria-label="Play video">${g}</button></div>`},S=(i,c,y=!1)=>{const v=i.mediaType==="video";let u="",A="";if(v&&i.vimeoVideoId)if(i.showControls&&i.posterUrl)u=`<div class="video-poster-wrapper" data-video-poster-wrapper>${`<iframe data-src="https://player.vimeo.com/video/${i.vimeoVideoId}?autoplay=1" frameborder="0" allow="autoplay; fullscreen" loading="lazy"></iframe>`}${p(i.posterUrl)}</div>`;else{const f=i.showControls?"autoplay=0":"background=1&autoplay=1&loop=1&muted=1";u=`<iframe src="https://player.vimeo.com/video/${i.vimeoVideoId}?${f}" frameborder="0" allow="autoplay; fullscreen" loading="lazy"></iframe>`}else if(v&&i.url)if(i.showControls){const f=`<video src="${i.url}" controls playsinline preload="metadata"></video>`;i.posterUrl?u=`<div class="video-poster-wrapper" data-video-poster-wrapper>${f}${p(i.posterUrl)}</div>`:u=f}else u=`<video src="${i.url}" autoplay muted loop playsinline></video>`;else if(i.url){const f=i.imageWidth&&i.imageHeight?` width="${i.imageWidth}" height="${i.imageHeight}"`:"",I=i.zoomUrl?` data-zoom-url="${i.zoomUrl}" data-zoom-alt="${i.alt}"`:"";u=`<img src="${i.url}" alt="${i.alt}"${f}${I} />`}return i.caption&&(A=`<p class="media-caption">${i.caption}</p>`),`<div class="gallery-slide" data-gallery-index="${c}"${y?" data-clone":""}>${u}${A}</div>`},w=a.items.map((i,c)=>S(i,c)).join("");if(h>

11){const i=a.items[h-1],c=a.items[0],y=S(i,h-1,!0),v=S(c,0,!0);d.innerHTML=y+w+v}else d.innerHTML=w;const C=h>1?1:0;if(this.galleryStates.set(o,{index:C,realCount:h,container:l,slidesEl:d}),h>1){const c=d.querySelectorAll(".gallery-slide")[1];c&&(l.style.scrollSnapType="none",l.scrollLeft=c.offsetLeft-(l.clientWidth-c.offsetWidth)/2,l.style.scrollSnapType="")}d.querySelectorAll(".gallery-slide").forEach((i,c)=>{c===C?i.setAttribute("data-active",""):i.removeAttribute("data-active")}),n.querySelectorAll(".gallery-arrow").forEach(i=>{i.style.display=(a.items?.length||0)>1?"":"none"}),l.addEventListener("scrollend",()=>this.updateActiveSlideOnScroll(o))})}galleryPrev(e){const t=this.galleryStates.get(e);!t||t.realCount<=1||(t.index=t.index-1,this.updateGalleryPosition(e))}galleryNext(e){const t=this.galleryStates.get(e);!t||t.realCount<=1||(t.index=t.index+1,this.updateGalleryPosition(e))}updateGalleryPosition(e){const t=this.galleryStates.get(e);if(!t)return;const s=t.slidesEl.querySelectorAll(".gallery-slide"),r=s[t.index];r&&r.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),s.forEach((n,o)=>{o===t.index?(n.setAttribute("data-active",""),this.playGallerySlideVideo(n)):(n.removeAttribute("data-active"),this.pauseGallerySlideVideo(n))})}playGallerySlideVideo(e){e.querySelectorAll("video").forEach(t=>{t.play().catch(()=>{})}),e.querySelectorAll("iframe").forEach(t=>{new m(t).play().catch(()=>{})})}pauseGallerySlideVideo(e){e.querySelectorAll("video").forEach(t=>{t.pause()}),e.querySelectorAll("iframe").forEach(t=>{new m(t).pause().catch(()=>{})})}openVideoModal(e,t){const s=this.projectsInfo[this.currentIndex],r=this.getAttribute("data-meta-title")||"";s&&(document.title=r?`${s.title} | ${r}`:s.title),window.dispatchEvent(new CustomEvent("open-video-modal",{detail:{videoId:e,aspectRatio:t}}))}prev(){if(this.isTransitioning)return;const e=this.displayIndex-1,t=this.currentIndex===0?this.totalSlides-1:this.currentIndex-1;this.goToSlide(t,e)}next(){if(this.isTransitioning)return;const e=this.displayIndex+1,t=this.currentIndex===this.totalSlides-1?0:this.currentIndex+1;this.goToSlide(t,e)}goToSlide(e,t){if(e===this.currentIndex||!this.slides||!this.slidesContainer)return;this.isTransitioning=!0;const s=t!==void 0?t:e+1;if(this.displayIndex=s,this.lowPowerFirstNavPending){this.lowPowerFirstNavPending=!1;const n=this.slides[s],o=n?.querySelector(".slide-poster");o&&(o.setAttribute("data-pinned",""),o.removeAttribute("data-hidden")),n?.querySelectorAll("video.slide-video").forEach(a=>{const l=a.closest(".slide-video-wrapper");!l||l.offsetParent===null||a.addEventListener("timeupdate",()=>{o&&(o.removeAttribute("data-pinned"),o.setAttribute("data-hidden",""))},{once:!0})})}const r=-s*100;this.slidesContainer.style.transform=`translateX(${r}%)`,this.currentIndex=e,this.updateOverlayContent(e),this.dispatchProjectChange(e),setTimeout(()=>{this.playCurrentVideo(),this.displayIndex>0&&this.displayIndex<=this.totalSlides&&(this.isTransitioning=!1),this.removeAttribute("data-dragging")},500)}playCurrentVideo(){if(!this.slides)return;this.slides[this.displayIndex]?.querySelectorAll("video.slide-video").forEach(t=>{const s=t.closest(".slide-video-wrapper");!s||s.offsetParent===null||!t.getAttribute("src")&&t.dataset.src&&(t.src=t.dataset.src,t.removeAttribute("data-src"))})}dispatchProjectChange(e){const t=this.projectsInfo[e];t&&(t.slug&&history.replaceState({projectSlug:t.slug},"",`/projects/${t.slug}`),window.dispatchEvent(new CustomEvent("project-change",{detail:{title:t.title}})))}}customElements.define("project-carousel",x);