https://spenceltd.co.uk/wp-content/themes/spence/dist/js/block_peo…s-people-circles-js.b2504bb3b33b24a84e06.js

1"use strict";(self.webpackChunkcdrs_wp_theme=self.webpackChunkcdrs_wp_theme||[]).push([[1428],{6974:function(e,i,s){s.r(i);var t=s(6404),l=s(2112),o=s(8352);i.default={debug:!1,scrollTrigger:null,swiper:null,peopleSlider:null,peopleWrapper:null,slides:null,slideCount:0,windowWidth:null,containerWidth:null,isDesktop:!1,activePopup:null,initialized:!1,resizeObserver:null,mount(){this.log("<c-people-circles> has mounted"),this.windowWidth=window.innerWidth,this.isDesktop=this.windowWidth>1024,this.peopleSlider=this.comp.querySelector(".people-slider"),this.peopleWrapper=this.comp.querySelector(".swiper-wrapper"),this.slides=this.comp.querySelectorAll(".swiper-slide"),this.slideCount=this.slides.length,this.peopleSlider&&this.peopleWrapper&&this.slides.length?(this.log(`Found ${this.slideCount} slides`),this.initializeBasedOnScreenSize(),this.initialized=!0):this.log("Required elements not found","error")},initializeBasedOnScreenSize(){this.cleanup(),this.isDesktop?(this.log("Initializing desktop horizontal scroll"),this.setupHorizontalScroll()):(this.log("Initializing mobile swiper"),this.setupSwiper()),this.setupBioButtons()},setupSwiper(){this.peopleSlider.classList.add("swiper"),this.peopleWrapper.classList.add("swiper-wrapper"),t.os.killTweensOf(this.peopleSlider),t.os.killTweensOf(this.peopleWrapper),this.slides.forEach((e=>{e.classList.add("swiper-slide"),t.os.killTweensOf(e),t.os.set(e,{clearProps:"all"});const i=e.querySelector(".person-image img");i&&(t.os.killTweensOf(i),t.os.set(i,{clearProps:"all"}))})),t.os.set(this.peopleWrapper,{clearProps:"all"}),t.os.set(this.peopleSlider,{clearProps:"all"});let e=this.comp.querySelector(".swiper-pagination");e||(e=document.createElement("div"),e.className="swiper-pagination",this.peopleSlider.appendChild(e)),this.swiper=new l.A(this.peopleSlider,{modules:[o.Jq,o.U1,o.Vx,o.dK],slidesPerView:1,spaceBetween:40,loop:!1,a11y:{enabled:!0},pagination:{el:".swiper-pagination",clickable:!0,type:"bullets",dynamicBullets:!1,bulletClass:"swiper-pagination-bullet",bulletActiveClass:"swiper-pagination-bullet-active"},freeMode:{enabled:!1},touchEventsTarget:"container",touchRatio:1,touchAngle:45,simulateTouch:!0,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,breakpoints:{1024:{slidesPerView:1,spaceBetween:20}},on:{init:e=>{setTimeout((()=>{e.pagination.update()}),100)}}})},setupHorizontalScroll(){this.peopleSlider.classList.remove("swiper"),this.peopleWrapper.classList.remove("swiper-wrapper"),t.os.killTweensOf(this.peopleSlider),t.os.killTweensOf(this.peopleWrapper),this.slides.forEach((e=>{t.os.killTweensOf(e),e.classList.remove("swiper-slide"),t.os.set(e,{clearProps:"all"});const i=e.querySelector(".person-image img");i&&(t.os.killTweensOf(i),t.os.set(i,{clearProps:"all"}))})),this.containerWidth=0;const e=window.innerHeight+this.calculateScrollDistance();t.os.set(this.peopleSlider,{height:"calc(100vh - 80px)",minHeight:"500px",marginTop:40,marginBottom:40,alignItems:"center"});const i=window.innerHeight-40-40-60,s=Math.min(i,650),l=Math.max(90,Math.min(.14*this.windowWidth,86));this.containerWidth=(s+l)*this.slideCount,this.slides.forEach((e=>{e.style.width=`${s}px`}));const o=this.containerWidth+40,r=.44*this.windowWidth;t.os.set(this.peopleWrapper,{display:"flex",width:o,position:"relative",x:r,clearProps:"marginTop,marginBottom"}),this.slides.forEach(((e,i)=>{i<this.slides.length-1&&t.os.set(e,{marginRight:`${l}px`})}));const n=this.comp.querySelector(".block_outer");n?(t.os.set(this.comp,{height:"auto",minHeight:"100vh"}),t.os.set(n,{force3D:!0,position:"relative",overflow:"visible",clearProps:"height",paddingTop:0,paddingBottom:40,marginTop:0,marginBottom:0,display:"flex",flexDirection:"column",justifyContent:"flex-start",height:e}),this.slides.forEach((e=>{const i=e.querySelector(".person-circle");i&&t.os.set(i,{width:`${s}px`,height:`${s}px`,aspectRatio:"1/1",padding:0})})),setTimeout((()=>{this.initScrollTrigger(n,r,s,l)}),100)):this.log("Block outer element not found, skipping scroll animation","warn")},calculateScrollDistance(){const e=window.innerWidth,i=.44*e,s=-((Math.min(window.innerHeight-140,650)+Math.max(90,Math.min(.14*e,86)))*this.slideCount-e);return 1.05*Math.abs(i-s)},initScrollTrigger(e,i,s,l){const o=i-(this.slideCount-1)*(s+l)-this.windowWidth/2+s/2,r=1.05*Math.abs(i-o),n=.65*this.windowWidth,a=.85*this.windowWidth;this.scrollTrigger&&(this.scrollTrigger.kill(),this.scrollTrigger=null),t.os.set(e,{paddingTop:0,paddingBottom:40,marginTop:0,marginBottom:0,display:"flex",flexDirection:"column",justifyContent:"flex-start"});const h=this.comp.querySelector(".block-footer");h&&t.os.set(h,{bottom:40,zIndex:10}),this._scrollData={initialOffset:i,circleSize:s,slideGap:l,endX:o},this.scrollTrigger=t.uY.create({trigger:e,start:"top 40px",end:()=>

1{if(this._scrollData){const{initialOffset:e,circleSize:i,slideGap:s}=this._scrollData,t=e-(this.slideCount-1)*(i+s)-window.innerWidth/2+i/2;return`+=${1.05*Math.abs(e-t)}`}return`+=${r}`},pin:!0,pinType:"transform",pinReparent:!1,pinSpacing:!0,scrub:.5,id:"peopleCirclesScroller",fastScrollEnd:!0,preventOverlaps:!0,anticipatePin:1,invalidateOnRefresh:!0,onRefresh:e=>{if(this.initialized){t.os.set(this.peopleWrapper,{x:i});const s=window.innerHeight,l=Math.min(s-200,900),o=90,n=Math.max(o,Math.min(.14*this.windowWidth,86));if(this._scrollData){this._scrollData.circleSize=l,this._scrollData.slideGap=n;const e=i-(this.slideCount-1)*(l+n);this._scrollData.endX=e-this.windowWidth/2+l/2}this.slides.forEach(((e,i)=>{const s=e.querySelector(".person-circle");s&&t.os.set(s,{width:`${l}px`,height:`${l}px`,aspectRatio:"1/1",padding:0}),t.os.set(e,{width:`${l}px`,marginRight:i<this.slides.length-1?`${n}px`:0})})),e.vars.end=()=>{if(this._scrollData){const{initialOffset:e,circleSize:i,slideGap:s}=this._scrollData,t=e-(this.slideCount-1)*(i+s)-window.innerWidth/2+i/2;return`+=${1.05*Math.abs(e-t)}`}return`+=${r}`},e.refresh()}},onEnter:()=>{this.comp.classList.add("scroll-active")},onLeaveBack:()=>{this.comp.classList.remove("scroll-active")},onUpdate:e=>{this.initialized&&(this._frameId||(this._frameId=requestAnimationFrame((()=>{this._frameId=null;const i=Math.min(e.progress,1),{initialOffset:s,endX:l}=this._scrollData||{initialOffset:s,endX:l},o=s+i*(l-s);t.os.set(this.peopleWrapper,{x:o}),this.updateVisibleSlides(n,a)}))))}})},updateVisibleSlides(e,i){const s=window.innerWidth,t=s;this.comp.classList.contains("transitions-enabled")||this.comp.classList.add("transitions-enabled"),this.slides.forEach((l=>{const o=l.getBoundingClientRect();if(o.right<-300||o.left>t+300)return void(l.style.visibility="hidden");"hidden"===l.style.visibility&&(l.style.visibility="visible");const r=o.left+o.width/2,n=l.querySelector(".person-image img");if(n)if(r<e){const i=Math.max(0,r/e);n.style.transform=`scale(${i})`,n.style.opacity=i}else if(r>i){const e=r-i,t=.5*s,l=Math.max(0,1-e/t);n.style.transform=`scale(${l})`,n.style.opacity=l}else n.style.transform="scale(1)",n.style.opacity="1"}))},setupBioButtons(){const e=this.comp.querySelectorAll('[data-action="toggle-bio"]'),i=this.comp.querySelectorAll(".person-image"),s=this.comp.querySelectorAll(".bio-content");this._bioToggleHandlers=[],this._personImageHandlers=[],this._bioContentHandlers=[],e.forEach((e=>{const i=i=>{i.preventDefault(),i.stopPropagation();const s=e.closest(".person-circle");return s&&(s.classList.toggle("show-bio"),this.swiper&&(this.swiper.allowTouchMove=!s.classList.contains("show-bio"))),!1};e.addEventListener("click",i),this._bioToggleHandlers.push({element:e,handler:i})})),this.isDesktop&&(i.forEach((e=>{e.setAttribute("data-cursor","-text"),e.setAttribute("data-cursor-text","Bio");const i=i=>{const s=e.closest(".person-circle");s&&!s.classList.contains("show-bio")&&(s.classList.add("show-bio"),this.swiper&&(this.swiper.allowTouchMove=!1))};e.addEventListener("click",i),this._personImageHandlers.push({element:e,handler:i})})),s.forEach((e=>{e.setAttribute("data-cursor","-text"),e.setAttribute("data-cursor-text","Close");const i=i=>{if(i.target===e){const i=e.closest(".person-circle");i&&i.classList.contains("show-bio")&&(i.classList.remove("show-bio"),this.swiper&&(this.swiper.allowTouchMove=!0))}};e.addEventListener("click",i),this._bioContentHandlers.push({element:e,handler:i})})));this.comp.querySelectorAll('a[href="#"], a[href="javascript:void(0)"], a[data-action]').forEach((e=>{e.addEventListener("click",(e=>(e.preventDefault(),e.stopPropagation(),!1)))})),this.handleEscapeKey=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this.handleEscapeKey)},handleEscapeKey(e){if("Escape"===e.key){const e=this.comp.querySelectorAll(".person-circle.show-bio");e.length&&(e.forEach((e=>{e.classList.remove("show-bio")})),this.swiper&&(this.swiper.allowTouchMove=!0))}},handleResize(){const e=this.isDesktop;this.windowWidth=window.innerWidth,this.isDesktop=this.windowWidth>1024;const i=this.comp.querySelectorAll(".person-circle.show-bio");

1if(i.length&&i.forEach((e=>{e.classList.remove("show-bio")})),e!==this.isDesktop)this.log(`Screen size threshold crossed, was desktop: ${e}, is desktop: ${this.isDesktop}`),this.cleanupEventListeners(),this.initializeBasedOnScreenSize();else if(this.isDesktop){window.innerHeight,window.innerWidth;const e=40,i=40;t.os.set(this.peopleSlider,{height:`calc(100vh - ${e+i}px)`,minHeight:"500px",marginTop:e,marginBottom:i,alignItems:"center"});const s=window.innerHeight-e-i-60,l=Math.min(s,650);if(this.slides.forEach(((e,i)=>{const s=e.querySelector(".person-circle");s&&t.os.set(s,{width:`${l}px`,height:`${l}px`,aspectRatio:"1/1",padding:0}),t.os.set(e,{width:`${l}px`,marginRight:i<this.slides.length-1?`${l}px`:0})})),t.os.set(this.comp,{minHeight:"100vh"}),this._scrollData){this._scrollData.circleSize=l,this._scrollData.slideGap=l;const{initialOffset:e}=this._scrollData,i=e-(this.slideCount-1)*(l+l);this._scrollData.endX=i-this.windowWidth/2+l/2}this.scrollTrigger&&this.scrollTrigger.refresh()}else this.swiper&&this.swiper.update()},cleanupEventListeners(){this._bioToggleHandlers&&(this._bioToggleHandlers.forEach((({element:e,handler:i})=>{e.removeEventListener("click",i)})),this._bioToggleHandlers=[]),this._personImageHandlers&&(this._personImageHandlers.forEach((({element:e,handler:i})=>{e.removeEventListener("click",i)})),this._personImageHandlers=[]),this._bioContentHandlers&&(this._bioContentHandlers.forEach((({element:e,handler:i})=>{e.removeEventListener("click",i)})),this._bioContentHandlers=[])},cleanup(){this._frameId&&(cancelAnimationFrame(this._frameId),this._frameId=null),this.scrollTrigger&&(this.scrollTrigger.kill(),this.scrollTrigger=null),t.os.killTweensOf(this.peopleWrapper),t.os.killTweensOf(this.peopleSlider),this.slides&&this.slides.forEach((e=>{t.os.killTweensOf(e);const i=e.querySelector(".person-image img");i&&t.os.killTweensOf(i)})),this.swiper&&(this.swiper.destroy(!0,!0),this.swiper=null),this.slides&&(t.os.set(this.slides,{clearProps:"all"}),this.slides.forEach((e=>{const i=e.querySelector(".person-image img");i&&t.os.set(i,{clearProps:"all"})}))),this.peopleWrapper&&t.os.set(this.peopleWrapper,{clearProps:"all"}),this.peopleSlider&&t.os.set(this.peopleSlider,{clearProps:"all"});const e=this.comp.querySelector(".swiper-pagination");e&&(e.innerHTML=""),this.cleanupEventListeners()},unmount(){this.log("<c-people-circles> has unmounted"),this.initialized=!1,window.removeEventListener("resize",this.handleResize),document.removeEventListener("keydown",this.handleEscapeKey),this.cleanup()}}}}]);