https://www.thecrabtreew6.co.uk/dist/gk-jss-app/js/UgcCarousel.40bc1b89.js

1"use strict";(globalThis["webpackChunkgk_jss_app"]=globalThis["webpackChunkgk_jss_app"]||[]).push([[4732],{20832:(e,a,l)=>{l.r(a),l.d(a,{default:()=>ke});l(17642),l(15024),l(31698);var u=l(20641),i=l(50953),s=l(90033),t=l(94626),o=l(56820),c=l(99940),n=l(90989),r=l(7316),d=l(10434),v=l(50258),_=l(83868),k=l(34317);const m={key:0,class:"ugc-carousel-item__play"},g=(0,u.pM)({__name:"UgcCarouselItem",props:{item:{}},emits:["item-click","item-view"],setup(e,{emit:a}){const l=a,i=(0,u.rk)("itemRef"),{stop:s}=(0,_.BLq)(i,(([e])=>{e?.isIntersecting&&(l("item-view"),s())})),t=()=>{l("item-click")};return(a,l)=>((0,u.uX)(),(0,u.CE)("article",{ref_key:"itemRef",ref:i,class:"ugc-carousel-item"},[(0,u.Lk)("button",{class:"ugc-carousel-item__btn",onClick:t},[(0,u.bF)(k.A,{class:"ugc-carousel-item__image","desktop-url":e.item.imageUrl,"desktop-alt":e.item.userName,"lazy-loading":"lazy"},null,8,["desktop-url","desktop-alt"]),e.item.videoUrl?((0,u.uX)(),(0,u.CE)("div",m,[...l[0]||(l[0]=[(0,u.Lk)("i",{class:"icon icon-Play-empty","aria-hidden":"true"},null,-1)])])):(0,u.Q3)("",!0)])],512))}}),p=g,b=p;var f=l(34598);const y={class:"ugc-carousel-placeholder"},C={class:"ugc-carousel-placeholder__loader"},h={__name:"UgcCarouselPlaceholder",setup(e){return(e,a)=>((0,u.uX)(),(0,u.CE)("div",y,[((0,u.uX)(),(0,u.CE)(u.FK,null,(0,u.pI)(4,(e=>(0,u.Lk)("div",{key:e,class:"ugc-carousel-placeholder__item"},[(0,u.Lk)("div",C,[(0,u.bF)(f.A)])]))),64))]))}},R=h,w=R;var L=l(12744),E=l(9199);const x={class:"ugc-carousel-modal"},X={class:"ugc-carousel-modal__body"},F={class:"ugc-carousel-modal__media"},P=["src","muted"],U=["aria-label"],I={class:"ugc-carousel-modal__info"},A={class:"ugc-carousel-modal__username"},K={class:"ugc-carousel-modal__nav"},W=["aria-label","aria-current","onClick"],S=(0,u.pM)({__name:"UgcCarouselModal",props:{items:{},initialIndex:{default:0},trackNextSlide:{type:Function,default:()=>{}},trackPrevSlide:{type:Function,default:()=>{}}},emits:["close","item-view"],setup(e,{emit:a}){const{t:l}=(0,v.s9)(),t=e,o=a,c=(0,i.KR)(t.initialIndex),n=(0,i.KR)(!0),r=(0,i.KR)(!1),d=(0,u.rk)("videoRef"),_=(0,u.rk)("bulletsRef"),m=(0,u.EW)((()=>t.items[c.value])),g=()=>{const e=d.value;e&&(e.paused?e.play():e.pause())},p=()=>{n.value=!n.value},b=e=>{c.value=e},y=()=>{c.value=0===c.value?t.items.length-1:c.value-1,t.trackPrevSlide()},C=()=>{c.value=c.value===t.items.length-1?0:c.value+1,t.trackNextSlide()},h=()=>{if(!_.value)return;const e=_.value.children[c.value];e&&e.scrollIntoView({inline:"center",block:"nearest",behavior:"smooth"})};(0,u.wB)(c,(()=>{r.value=!1,(0,u.dY)(h),o("item-view",c.value)}));const R=e=>{"ArrowLeft"===e.code&&(e.stopPropagation(),y()),"ArrowRight"===e.code&&(e.stopPropagation(),C())};return(0,u.sV)((()=>{window.addEventListener("keydown",R),o("item-view",c.value)})),(0,u.xo)((()=>{window.removeEventListener("keydown",R)})),(a,t)=>((0,u.uX)(),(0,u.Wv)(L["default"],{"is-visible":!0,"modal-name":m.value.userName,title:`${c.value+1}/${e.items.length}`,"close-on-click-outside":"",onCloseModal:t[2]||(t[2]=e=>a.$emit("close"))},{default:(0,u.k6)((()=>[(0,u.Lk)("div",x,[(0,u.Lk)("div",X,[(0,u.Lk)("div",F,[(0,u.bF)(f.A,{class:"ugc-carousel-modal__loader"}),m.value.videoUrl?((0,u.uX)(),(0,u.CE)(u.FK,{key:0},[(0,u.Lk)("video",{ref_key:"videoRef",ref:d,class:"ugc-carousel-modal__video",src:m.value.videoUrl,muted:n.value,autoplay:"",loop:"",playsinline:"",onClick:g,onPlay:t[0]||(t[0]=e=>r.value=!1),onPause:t[1]||(t[1]=e=>r.value=!0)},null,40,P),r.value?((0,u.uX)(),(0,u.CE)("button",{key:0,class:"ugc-carousel-modal__play-btn","aria-label":"Play",onClick:g},[...t[3]||(t[3]=[(0,u.Lk)("i",{class:"icon icon-Play-empty","aria-hidden":"true"},null,-1)])])):(0,u.Q3)("",!0),(0,u.Lk)("button",{class:"ugc-carousel-modal__mute-btn","aria-label":n.value?"Unmute":"Mute",type:"button",onClick:p},[(0,u.Lk)("i",{class:(0,s.C4)(["icon",n.value?"icon-Sound-muted":"icon-Sound-playing"]),"aria-hidden":"true"},null,2)],8,U)],64)):((0,u.uX)(),(0,u.Wv)(k.A,{key:1,class:"ugc-carousel-modal__image","desktop-url":m.value.imageUrl,"desktop-alt":m.value.userName},null,8,["desktop-url","desktop-alt"]))]),(0,u.Lk)("div",I,[(0,u.Lk)("p",A,"@"+(0,s.v_)(m.value.userName),1),(0,u.bo)(((0,u.uX)(),(0,u.CE)("p",{key:m.value.description,class:"ugc-carousel-modal__description"})),[[(0,i.R1)(E.A),{dynamicText:m.value.description,maxLength:108,showMoreText:(0,i.R1)(l)("ugc-read-more"),showLessText:(0,i.R1)(l)("ugc-read-less"),buttonClass:"link"}]])])]),(0,u.Lk)("div",K,[(0,u.Lk)("button",{class:"ugc-carousel-modal__nav-btn","aria-label":"Previous item",type:"button",onClick:y},[...t[4]||(t[4]=[(0,u.Lk)("i",{class:"icon icon-Back","aria-hidden":"true"},null,-1)])]),(0,u.Lk)("div",{ref_key:"bulletsRef",ref:_,class:"ugc-carousel-modal__bullets"},[((0,u.uX)(!0),(0,u.CE)(u.FK,null,(0,u.pI)(e.items,((e,a)=>((0,u.uX)(),(0,u.CE)("button",{key:a,class:(0,s.C4)(["ugc-carousel-modal__bullet",{"ugc-carousel-modal__bullet--active":a===c.value}]),"aria-label":`Go to item ${a+1}`,"aria-current":a===c.value?"true":void 0,onClick:e=>b(a)},null,10,W)))),128))],512),(0,u.Lk)("button",{class:"ugc-carousel-modal__nav-btn","aria-label":"Next item",type:"button",onClick:C},[...t[5]||(t[5]=[(0,u.Lk)("i",{class:"icon icon-Forward","aria-hidden":"true"},null,-1)])])])])])),_:1},8,["modal-name","title"]))}}),V=S,M=V;var N=l(46810),Q=l(10141),$=l(23041);const O=e=>(0,$.A)({url:e,timeout:1e4}),B=e=>(0,Q.I)({queryKey:["ugc",e],queryFn:()=>O(e),retry:3,refetchOnWindowFocus:!1,refetchOnReconnect:!0,refetchOnMount:!0}),T=B;var q=l(11858),z=l(20002),G=l(26901),j=l(37463),J=l(7e4);const Y={class:"ugc-carousel__container container"},D={class:"ugc-carousel__header"},H={class:"ugc-carousel__header-text"},Z={key:0,class:"ugc-carousel__nav","aria-label":"UGC carousel navigation"},ee=["id"],ae=["id"],le={key:0,class:"ugc-carousel__error"},ue={key:1,class:"ugc-carousel__no-items"},ie={class:"sr-only",role:"alert","aria-live":"polite"},se={class:"sr-only",role:"alert","aria-live":"polite"},te={key:0,class:"ugc-carousel__swiper"},oe={class:"ugc-carousel__container container"},ce={key:0,class:"ugc-carousel__cta"},ne={key:1,class:"ugc-carousel__nav ugc-carousel__nav--mobile","aria-label":"UGC carousel navigation"},re=["id"],de=["id"],ve=(0,u.pM)({__name:"UgcCarousel",props:{fields:{default:()=>({})},rendering:{},params:{default:()=>({})}},setup(e){const{t:a}=(0,v.s9)(),l=e,_=(0,q.A)(),{isMedia:k}=(0,z.A)("(min-width: 768px)"),{isMedia:m}=(0,z.A)("(min-width: 1024px)"),g=[r.Vx,r.Jq],p=(0,i.KR)(null),f=(0,i.KR)(!1),y=(0,i.KR)(null),C=(0,u.EW)((()=>l.fields)),h=(0,u.EW)((()=>C.value?.apiUrl?.value??"")),{data:R,isLoading:L,isError:E}=T(h.value),{trackNextSlide:x,trackPrevSlide:X}=(0,j.r)({componentName:"ugc_carousel"},p),{trackPromotionView:F,trackPromotionSelect:P}=(0,J.E)({componentName:"ugc_carousel"}),U=(e,a)=>({promotion_id:C.value?.heading?.value??"",promotion_name:C.value?.heading?.value??"",creative_name:e.postUrl,creative_slot:a+1}),I=new Set,A=e=>{I.has(e)||(I.add(e),F(U(K.value[e],e)))},K=(0,u.EW)((()=>R.value?.data||[])),W=(0,u.EW)((()=>K.value.length>0)),S=(0,u.EW)((()=>!!C.value?.facebookPageUrl?.value||!!C.value?.instagramPageUrl?.value)),V=(0,u.EW)((()=>m.value?4:k.value?2:1)),Q=(0,u.EW)((()=>!L.value&&W.value&&K.value.length>V.value)),$={0:{slidesPerView:1.15,slidesOffsetBefore:26,slidesOffsetAfter:26},[(0,G.U)(768)??0]:{slidesPerView:2.3,slidesOffsetBefore:46,slidesOffsetAfter:46},[(0,G.U)(1024)??0]:{slidesPerView:4,slidesOffsetBefore:0,slidesOffsetAfter:0}},O=e=>{p.value=e},B=()=>

1{p.value?.navigation?.init(),p.value?.navigation?.update()},ve=()=>{f.value=!0},_e=()=>{f.value=!1},ke=e=>{if(f.value&&null===y.value)return"ArrowLeft"===e.code?p.value?.slidePrev():"ArrowRight"===e.code?p.value?.slideNext():void 0},me=e=>{P(U(K.value[e],e)),y.value=e},ge=()=>{y.value=null};return(l,r)=>((0,u.uX)(),(0,u.CE)("section",{class:"ugc-carousel",onFocusin:ve,onFocusout:_e,onKeydown:ke},[(0,u.Lk)("div",Y,[(0,u.Lk)("div",D,[(0,u.Lk)("div",H,[(0,u.bF)((0,i.R1)(t.E),{class:"ugc-carousel__title font-l",field:C.value.heading,tag:e.params.headingType??"h2"},null,8,["field","tag"]),(0,u.bo)((0,u.bF)((0,i.R1)(o.s),{class:"ugc-carousel__description",field:C.value.description,tag:"p"},null,8,["field"]),[[(0,i.R1)(n.A),"ugc_carousel"]])]),Q.value&&(0,i.R1)(k)?((0,u.uX)(),(0,u.CE)("nav",Z,[(0,u.Lk)("button",{id:`ugc-carousel__nav-prev__${(0,i.R1)(_)}`,class:"ugc-carousel__nav-btn"},[...r[0]||(r[0]=[(0,u.Lk)("i",{class:"icon icon-Back","aria-hidden":"true"},null,-1)])],8,ee),(0,u.Lk)("button",{id:`ugc-carousel__nav-next__${(0,i.R1)(_)}`,class:"ugc-carousel__nav-btn"},[...r[1]||(r[1]=[(0,u.Lk)("i",{class:"icon icon-Forward","aria-hidden":"true"},null,-1)])],8,ae)])):(0,u.Q3)("",!0)]),(0,i.R1)(E)?((0,u.uX)(),(0,u.CE)("p",le,(0,s.v_)((0,i.R1)(a)("ugc-carousel-error-message")),1)):W.value||(0,i.R1)(L)?(0,u.Q3)("",!0):((0,u.uX)(),(0,u.CE)("p",ue,(0,s.v_)((0,i.R1)(a)("ugc-carousel-no-items")),1))]),(0,u.Lk)("div",{class:(0,s.C4)(["ugc-carousel__content",{container:(0,i.R1)(m)}])},[(0,i.R1)(L)?((0,u.uX)(),(0,u.CE)(u.FK,{key:0},[(0,u.Lk)("span",ie,(0,s.v_)((0,i.R1)(a)("ugc-content-loading")),1),(0,u.bF)(w)],64)):W.value?((0,u.uX)(),(0,u.CE)(u.FK,{key:1},[(0,u.Lk)("span",se,(0,s.v_)((0,i.R1)(a)("ugc-content-loaded")),1),!(0,i.R1)(c.isServer)()&&K.value.length>V.value?((0,u.uX)(),(0,u.CE)("div",te,[(0,u.bF)((0,i.R1)(d.RC),{modules:g,navigation:{prevEl:`#ugc-carousel__nav-prev__${(0,i.R1)(_)}`,nextEl:`#ugc-carousel__nav-next__${(0,i.R1)(_)}`},a11y:{slideLabelMessage:"{{index}} of {{slidesLength}}"},breakpoints:$,"space-between":16,onSwiper:O,onResize:B},{default:(0,u.k6)((()=>[((0,u.uX)(!0),(0,u.CE)(u.FK,null,(0,u.pI)(K.value,((e,a)=>((0,u.uX)(),(0,u.Wv)((0,i.R1)(d.qr),{key:a},{default:(0,u.k6)((()=>[(0,u.bF)(b,{item:e,onItemClick:e=>me(a),onItemView:e=>A(a)},null,8,["item","onItemClick","onItemView"])])),_:2},1024)))),128))])),_:1},8,["navigation"])])):((0,u.uX)(),(0,u.CE)("div",{key:1,class:(0,s.C4)(["ugc-carousel__items",{container:!(0,i.R1)(m)}])},[((0,u.uX)(!0),(0,u.CE)(u.FK,null,(0,u.pI)(K.value,((e,a)=>((0,u.uX)(),(0,u.CE)("div",{key:a,class:"ugc-carousel__item-wrapper"},[(0,u.bF)(b,{item:e,onItemClick:e=>me(a),onItemView:e=>A(a)},null,8,["item","onItemClick","onItemView"])])))),128))],2))],64)):(0,u.Q3)("",!0)],2),(0,u.Lk)("div",oe,[S.value?((0,u.uX)(),(0,u.CE)("div",ce,[C.value.facebookPageUrl.value?((0,u.uX)(),(0,u.Wv)(N.A,{key:0,type:"link",variant:"secondary",icon:"icon-Facebook",link:{href:C.value.facebookPageUrl.value,text:(0,i.R1)(a)("ugc-follow-us"),target:"_blank",linktype:"external"}},null,8,["link"])):(0,u.Q3)("",!0),C.value.instagramPageUrl.value?((0,u.uX)(),(0,u.Wv)(N.A,{key:1,type:"link",variant:"secondary",icon:"icon-Instagram",link:{href:C.value.instagramPageUrl.value,text:(0,i.R1)(a)("ugc-follow-us"),target:"_blank",linktype:"external"}},null,8,["link"])):(0,u.Q3)("",!0)])):(0,u.Q3)("",!0),Q.value&&!(0,i.R1)(k)?((0,u.uX)(),(0,u.CE)("nav",ne,[(0,u.Lk)("button",{id:`ugc-carousel__nav-prev__${(0,i.R1)(_)}`,class:"ugc-carousel__nav-btn"},[...r[2]||(r[2]=[(0,u.Lk)("i",{class:"icon icon-Back","aria-hidden":"true"},null,-1)])],8,re),(0,u.Lk)("button",{id:`ugc-carousel__nav-next__${(0,i.R1)(_)}`,class:"ugc-carousel__nav-btn"},[...r[3]||(r[3]=[(0,u.Lk)("i",{class:"icon icon-Forward","aria-hidden":"true"},null,-1)])],8,de)])):(0,u.Q3)("",!0)]),null!==y.value?((0,u.uX)(),(0,u.Wv)(M,{key:0,items:K.value,"initial-index":y.value,"track-next-slide":(0,i.R1)(x),"track-prev-slide":(0,i.R1)(X),onClose:ge,onItemView:A},null,8,["items","initial-index","track-next-slide","track-prev-slide"])):(0,u.Q3)("",!0)],32))}}),_e=ve,ke=_e}}]);

2//# sourceMappingURL=UgcCarousel.40bc1b89.js.map