https://www.tesa.com/relaunch2020/build/animated-mood-board.797d8d0f.js

1"use strict";(globalThis.webpackChunktesa_2016=globalThis.webpackChunktesa_2016||[]).push([[4757,4388],{2097:(e,a,l)=>{l.r(a),l.d(a,{default:()=>c});var t=l(5166),o=l(6030),n=l(7345),i=l(5274);const r={class:"mood-board__content"},d={class:"container"},u={class:"mood-board__media-wrapper",role:"presentation"},s={class:"grid-row mood-board__media-grid"},v=["href"],p=Object.assign({name:"AnimatedMoodBoard"},{__name:"AnimatedMoodBoard",props:{headline:{type:String,default:null},subline:{type:String,default:null},cta:{type:Object,default:()=>({})},media:{type:Array,default:()=>[]},boldHeadline:{type:Boolean,default:!1}},setup(e){var a;const l=null===(a=(0,t.FN)())||void 0===a?void 0:a.proxy,p=(0,t.iH)(null),c=(0,t.iH)(null),m=(0,t.iH)(null),y=(0,t.iH)(null),f=(0,t.iH)(!1),b=(0,t.iH)(!1),g=(0,t.iH)(0),_=(0,t.iH)(null);return(0,t.bv)(()=>{const e=new IntersectionObserver(a=>{let[n]=a;b.value=n.isIntersecting,n.isIntersecting&&!f.value&&(!function(){const e=[y.value,m.value[0],m.value[1],m.value[2]],a=[c.value,m.value[3],m.value[4]];f.value=!0,_.value=o.Z.timeline({easing:"easeOutSine",duration:1200,autoplay:!1}).add({targets:e,translateX:["-100vw","0"],opacity:["0.8","1"],delay:o.Z.stagger(400)}).add({targets:a,translateX:["100vw","0"],opacity:["0.8","1"],delay:o.Z.stagger(400)},600),p.value&&_.value.add({targets:[p.value],translateY:["100%","0"],opacity:["0","1"],duration:600})}(),function(){let e,a;new ResizeObserver(()=>{e=l.$el.getBoundingClientRect(),a=window.scrollY+e.top+100}).observe(l.$el);const o=()=>{if(!e)return;const l=(window.scrollY+window.innerHeight-a)/Math.max(e.height,2*window.innerHeight),t=Math.min(Math.max(l,0),1);t>g.value&&(g.value=t),g.value>=1&&window.removeEventListener("scroll",o,{passive:!0})};(0,t.Y3)(()=>{window.addEventListener("scroll",o,{passive:!0})})}(),e.disconnect())});e.observe(l.$el)}),(0,t.YP)(g,e=>{_.value&&_.value.seek(e*_.value.duration)}),(a,l)=>((0,t.wg)(),(0,t.iD)("section",{class:(0,t.C_)(["mood-board",[{"mood-board--animation-started":f.value},{"-is-intersecting":b.value}]])},[(0,t._)("div",r,[(0,t._)("div",d,[(0,t._)("div",{class:"mood-board__headline-wrapper",ref_key:"headlineElement",ref:y},[(0,t._)("h2",{class:(0,t.C_)(["headline headline--1",{"headline--ultrabold":e.boldHeadline}])},(0,t.zw)(e.headline),3)],512),l[0]||(l[0]=(0,t.Uk)()),(0,t._)("div",{class:"mood-board__subline-wrapper",ref_key:"sublineElement",ref:c},[(0,t._)("p",{class:(0,t.C_)(["headline headline--5",{"headline--ultrabold":e.boldHeadline}])},(0,t.zw)(e.subline),3)],512),l[1]||(l[1]=(0,t.Uk)()),(0,t._)("div",u,[(0,t._)("div",s,[((0,t.wg)(!0),(0,t.iD)(t.HY,null,(0,t.Ko)(e.media,(e,a)=>((0,t.wg)(),(0,t.j4)((0,t.LL)(e.content&&e.content.href?"a":"div"),{key:`mood-board-medium-${a}`,href:e.content&&e.content.href,class:(0,t.C_)(["mood-board__medium",[`mood-board__medium--${a+1}`,{"mood-board__medium--no-shadow":!e.medium.isOpaque}]]),ref_for:!0,ref_key:"medium",ref:m,tabindex:"-1"},{default:(0,t.w5)(()=>["video"===e.medium.type?((0,t.wg)(),(0,t.j4)(i.default,(0,t.dG)({key:0,ref_for:!0},e.medium,{"play-button":!1,"show-poster":!1,controls:!1,autoplay:!0,muted:!0,loop:!0}),null,16)):((0,t.wg)(),(0,t.j4)(n.Z,(0,t.dG)({key:1,ref_for:!0},e.medium,{variant:e.imageFormat,role:"presentation"}),null,16,["variant"]))]),_:2},1032,["href","class"]))),128))])]),l[2]||(l[2]=(0,t.Uk)()),e.cta&&e.cta.href?((0,t.wg)(),(0,t.iD)("div",{key:0,class:"mood-board__button-wrapper",ref_key:"button",ref:p},[(0,t._)("a",{class:"button button--cta-3 button--inline",href:e.cta.href},(0,t.zw)(e.cta.text),9,v)],512)):(0,t.kq)("v-if",!0)])])],2))}});const c=(0,l(3744).Z)(p,[["__scopeId","data-v-9ad5314c"]])},5274:(e,a,l)=>{l.r(a),l.d(a,{default:()=>c});var t=l(5166),o=l(7105),n=l(7651),i=l(7345);const r={class:"responsive-video"},d={class:"responsive-video__video-wrapper",ref:"videoContainer"},u=["preload","controls","controlslist","autoplay","muted","loop","aria-label","aria-hidden","title"],s=["media","src","type"],v={class:"play-button__inner"},p=Object.assign({name:"BaseVideo"},{__name:"BaseVideo",props:{freeze:{type:Boolean,default:!1},progressSteps:{type:Number,default:0},playAfterUnfreeze:{type:Boolean,default:!1},trackingLabel:{type:String,default:""},isMoodVideo:{type:Boolean,default:!1},stageSliderSlideIndex:{type:Number,default:null},aspectRatio:{type:Number,default:1},autoplay:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},controlsList:{type:String,default:"nodownload"},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},playButton:{type:Boolean,default:!0},poster:{type:Object,default:null},preload:{type:String,default:"metadata"},showPoster:{type:Boolean,default:!0},sources:{type:Array,default:()=>[]},description:{type:String,default:null}},emits:["ended","progress","startplaying","stopplaying"],setup(e,a){var l;let{expose:p,emit:c}=a;const m=window.matchMedia("(prefers-reduced-motion: reduce)").matches,y=null===(l=(0,t.FN)())||void 0===l?void 0:l.proxy,f=(0,t.iH)(null),b=e,g=c,_=(0,t.f3)("stageSliderState",null),{labelStore:h}=(0,o.b)({labelsRequired:["global"]}),w=(0,t.iH)(!1),k=(0,t.iH)(null),S=(0,t.iH)(!1),H=(0,t.iH)(null),B=(0,t.iH)(null),$=(0,t.iH)(null),q=(0,t.iH)(null),O=(0,t.Fl)(()=>{var e;const a=null==_||null===(e=_.getCurrentSlide)||void 0===e?void 0:e.call(_);return"number"==typeof b.stageSliderSlideIndex&&"number"==typeof a?a!==b.stageSliderSlideIndex:b.freeze}),C=(0,t.Fl)(()=>parseFloat(b.aspectRatio)<1),E=(0,t.Fl)(()=>b.autoplay&&b.loop&&b.muted&&!b.controls),L=(0,t.Fl)(()=>{var e;return b.description||(E.value?null===(e=h.value)||void 0===e?void 0:e["global.mood_video_description"]:null)}),j=(0,t.Fl)(()=>E.value&&m),I=(0,t.Fl)(()=>b.sources.slice().sort(function(e,a){return e.isMobile!==a.isMobile?e.isMobile?1:-1:e.mimeType!==a.mimeType?"video/webm"!==e.mimeType?1:-1:0}));function M(){return H.value||f.value||y.$el.querySelector("video")}function x(){const e=y.$el.querySelector("[data-responsive-video-mood-poster]"),a=y.$el.querySelector("[data-responsive-video-poster]");if(e&&(e.hidden=!j.value),!a)return;a.hidden=j.value||w.value;const l=a.querySelector("[data-responsive-video-poster-image]");l&&(l.hidden=S.value)}function F(){var e;O.value||j.value||(null===(e=M())||void 0===e||e.play())}function Y(){var e;null===(e=M())||void 0===e||e.pause()}function z(e){let{target:{currentTime:a,duration:l}}=e;k.value=Math.floor(a/l*b.progressSteps)}function D(){if(O.value)return Y();w.value=!0,S.value=!1,x(),g("startplaying")}function N(){w.value=!1,S.value=!0,x(),g("stopplaying")}function P(){w.value=!1,S.value=!1,x(),g("stopplaying"),g("ended"),k.value=null}function T(e){e.preventDefault(),F()}return(0,t.bv)(()=>{var e,a;H.value=f.value||y.$el.querySelector("video"),y.$el.querySelector("[data-responsive-video]")&&(H.value=y.$el.querySelector("[data-responsive-video]"),B.value={play:D,pause:N,timeupdate:z,ended:P}

1,Object.entries(B.value).forEach(e=>{let[a,l]=e;H.value.addEventListener(a,l)}),$.value=y.$el.querySelector("[data-responsive-video-poster]"),null===(a=$.value)||void 0===a||a.addEventListener("click",T)),x(),Object.prototype.hasOwnProperty.call((null===(e=M())||void 0===e?void 0:e.dataset)||{},"autoplay")&&!j.value&&(q.value=new IntersectionObserver(e=>{let[a]=e;a.isIntersecting?w.value||F():w.value&&Y()}),q.value.observe(y.$el))}),(0,t.Jd)(()=>{var e,a;H.value&&B.value&&Object.entries(B.value).forEach(e=>{let[a,l]=e;H.value.removeEventListener(a,l)}),null===(e=$.value)||void 0===e||e.removeEventListener("click",T),null===(a=q.value)||void 0===a||a.disconnect()}),(0,t.YP)(k,()=>{if(b.progressSteps>0&&"number"==typeof k.value){g("progress",k.value);const e=k.value/b.progressSteps*100;if(isNaN(e)||e<0||e>100)return;const a={name:"",details:{video_title:b.trackingLabel}};0===e?a.name="video_start":100===e?a.name="video_complete":(a.name="video_progress",a.details.video_progress=`${e}%`),n.Ng.trackGa4Event(a)}}),(0,t.YP)(O,()=>{O.value&&Y(),O.value||!b.playAfterUnfreeze||j.value||F()}),p({playing:w,play:F,pause:Y}),(a,l)=>{const o=(0,t.up)("Icon");return(0,t.wg)(),(0,t.iD)("div",r,[(0,t._)("div",d,[(0,t._)("video",{ref_key:"video",ref:f,preload:e.preload,class:(0,t.C_)({"mobile-aspect-ratio":C.value}),controls:e.controls,controlslist:e.controlsList,autoplay:e.autoplay&&!j.value,muted:e.muted,loop:e.loop,"aria-label":E.value?null:L.value,"aria-hidden":E.value?"true":null,title:E.value?" ":e.description,onPlay:D,onPause:N,onTimeupdate:z,onEnded:P,playsinline:""},[((0,t.wg)(!0),(0,t.iD)(t.HY,null,(0,t.Ko)(I.value,(e,a)=>((0,t.wg)(),(0,t.iD)("source",{key:`video-src-${a}`,media:e.minWidth?`(min-width: ${e.minWidth})`:"",src:e.path,type:e.mimeType},null,8,s))),128))],42,u)],512),l[0]||(l[0]=(0,t.Uk)()),e.poster&&e.showPoster&&!S.value&&!w.value||j.value?((0,t.wg)(),(0,t.j4)((0,t.SU)(i.Z),(0,t.dG)({key:0},e.poster,{preload:"metadata",class:"responsive-video__poster",onClick:T}),null,16)):(0,t.kq)("v-if",!0),l[1]||(l[1]=(0,t.Uk)()),e.playButton&&!w.value?((0,t.wg)(),(0,t.iD)("div",{key:1,class:"play-button",onClick:T},[(0,t._)("div",v,[(0,t.Wm)(o,{name:"play-fill"})])])):(0,t.kq)("v-if",!0)])}}});const c=(0,l(3744).Z)(p,[["__scopeId","data-v-420d4ad4"]])}}]);