https://www.tesa.com/relaunch2020/build/timeline.9b9fd5e3.js

1"use strict";(globalThis.webpackChunktesa_2016=globalThis.webpackChunktesa_2016||[]).push([[3831],{6064:(e,l,i)=>{i.r(l),i.d(l,{default:()=>y});var a=i(5166),t=i(7347),n=i.n(t);const u={class:"container"},o={class:"timeline__wrapper"},s={class:"timeline__slider-wrapper"},r={class:"timeline__input-range-wrapper"},v=["min","max","step"],c={class:"timeline__overlay"},d={class:"timeline__year-thumb-inner"},m=["textContent"],p={class:"timeline__axis"},_=["textContent"],x={class:"timeline__scroll-overlay-year"},g={class:"timeline__current-year",tabindex:"0"},f=Object.assign({name:"Timeline"},{__name:"Timeline",props:{axisFrom:{type:Number,required:!0},axisTo:{type:Number,required:!0},axisStep:{type:Number,default:50}},setup(e){var l;const i="direct",t="keyboard",f=null===(l=(0,a.FN)())||void 0===l?void 0:l.proxy,y=(0,a.iH)(null),w=(0,a.iH)(null),h=(0,a.iH)(null),H=(0,a.iH)(null),b=(0,a.iH)(null),k=e,C=k.axisTo,T=(0,a.iH)(C),F=(0,a.iH)(82),$=(0,a.iH)(i),Y=(0,a.iH)(!1),S=(0,a.iH)([]),D=(0,a.iH)([]),U=(0,a.iH)(null),B=(0,a.iH)(C),L=(0,a.iH)(!0),N=(0,a.iH)(!1),O=(0,a.iH)(null),E=(0,a.iH)(!1),R=(0,a.iH)(null),q=(0,a.iH)(null),K=(0,a.iH)(null),M=(0,a.iH)(null),j=(0,a.iH)(null),z=(0,a.iH)(null),I=(0,a.iH)(null),A=(0,a.Fl)(()=>{if(!O.value)return null;return{transform:`translateY(-50%) translateY(${(1-(T.value-k.axisFrom)/(k.axisTo-k.axisFrom))*O.value}px)`}}),P=(0,a.Fl)(()=>$.value===i?.001:1),W=(0,a.Fl)(()=>{const e=[{year:k.axisFrom,big:!0},{year:k.axisTo,big:!0}];return D.value.forEach(l=>{if(!e.find(e=>e.year===l))return e.push({year:l,big:!1})}),e}),J=(0,a.Fl)(()=>{const e=[];let l=k.axisFrom;for(;l<=k.axisTo;)l%k.axisStep!==0?(e.push(l),l=Math.ceil(l/k.axisStep)*k.axisStep):(e.push(l),l+=k.axisStep,l>k.axisTo&&e.push(k.axisTo));return e}),V=(0,a.Fl)(()=>$.value===i&&!N.value);function Z(){q.value=0+Number(window.getComputedStyle(b.value).top.replace("px","")),K.value=0+Number(window.getComputedStyle(H.value).top.replace("px","")),F.value=h.value.clientHeight/2,O.value=H.value.clientHeight}function G(){R.value&&clearTimeout(R.value),R.value=setTimeout(()=>R.value=null,300),N.value=!1,$.value===i&&(T.value=function(e){let l,i=null;return D.value.forEach(a=>{const t=Math.abs(a-e);(void 0===l||t<i)&&(l=a,i=t)}),l}(+T.value),ne(T.value,!0))}function Q(){N.value=!0}function X(){$.value=t}function ee(){$.value=i}function le(e){const l=1-(e.year-k.axisFrom)/(k.axisTo-k.axisFrom);return{top:`calc((100% - ${F.value}px) * ${l} + ${F.value/2}px)`}}function ie(e){const l=1-(e-k.axisFrom)/(k.axisTo-k.axisFrom);return{top:`calc((100% - ${F.value}px) * ${l} + ${F.value/2}px)`}}function ae(){void 0!==j.value&&(M.value=j.value<window.pageYOffset),j.value=window.pageYOffset,z.value||(z.value=requestAnimationFrame(()=>(function(){const e=f.$el.getBoundingClientRect();E.value=e.top<q.value&&e.bottom>window.innerHeight-q.value}(),void function(){let e;z.value=!1,L.value=M.value;const l=w.value.$el.clientHeight+30+q.value,i=f.$el.getBoundingClientRect();if(S.value[0].classList.remove("timeline__entry--scrolled-over"),i.top>l)e=D.value.length?D.value[0]:k.axisTo;else{const i=S.value.reduce((e,i)=>i.getBoundingClientRect().top<=l?(i.classList.add("timeline__entry--scrolled-over"),i):(i.classList.remove("timeline__entry--scrolled-over"),e),null);e=parseInt(null==i?void 0:i.dataset.entry,10)}var a;e&&(a=e,U.value=a),!e||N.value||R.value||(T.value=e)}())))}function te(e){return[...String(e)]}function ne(e){let l,i,a,t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];for(let a=0;a<D.value.length;a++)if(e<=+D.value[a]&&(a>=D.value.length-1||e>+D.value[a+1])){l=D.value[a],a<D.value.length-1&&(i=+D.value[a+1]);break}if(l){if(i){const t=S.value[D.value.indexOf(l)],n=S.value[D.value.indexOf(i)],u=(e-l)/(i-l),o=t.getBoundingClientRect(),s=n.getBoundingClientRect();a=o.top+u*(s.top-o.top)+window.pageYOffset-q.value+1}else{a=S.value[S.value.length-1].getBoundingClientRect().top+window.pageYOffset-q.value}window.scrollTo({top:a,left:0,behavior:t?"smooth":"auto"})}}function ue(){I.value||(I.value=requestAnimationFrame(()=>{I.value=!1,Z(),function(){const e=S.value[S.value.length-1].clientHeight;y.value.style.paddingBottom=O.value-e+2*K.value+"px"}()}))}return(0,a.bv)(()=>{Z(),S.value.push(...f.$el.querySelectorAll("[data-entry]")),D.value.push(...S.value.map(e=>+e.dataset.entry)),document.addEventListener("scroll",ae),ae(),window.addEventListener("resize",ue),ue();let e=new(n())("ProximaNova");Promise.all([e.load()]).then(ue)}),(0,a.ic)(()=>{Z()}),(0,a.Jd)(()=>{document.removeEventListener("scroll",ae),window.removeEventListener("resize",ue)}),(0,a.YP)(T,e=>{B.value=W.value.reduce((e,l)=>

1null===e||Math.abs(l.year-T.value)<Math.abs(e-T.value)?l.year:e,null),N.value&&ne(e)}),(l,i)=>((0,a.wg)(),(0,a.iD)("div",{class:(0,a.C_)(["timeline",{"timeline--active":E.value}]),"aria-hidden":"true"},[(0,a._)("div",u,[(0,a._)("div",o,[(0,a._)("div",s,[(0,a._)("div",{class:(0,a.C_)(["timeline__slider",{"timeline__slider--has-focus":Y.value}]),ref_key:"swiper",ref:b,"aria-hidden":"true"},[(0,a._)("div",r,[(0,a.wy)((0,a._)("input",{type:"range","onUpdate:modelValue":i[0]||(i[0]=e=>T.value=e),min:e.axisFrom,max:e.axisTo,step:P.value,tabindex:"-1",orient:"vertical",inert:"",ref_key:"input",ref:h,onChange:G,onKeydown:X,onMousedown:ee,onTouchstart:ee,onInput:Q},null,40,v),[[a.nr,T.value]]),i[4]||(i[4]=(0,a.Uk)()),(0,a._)("div",c,[(0,a._)("div",{class:(0,a.C_)(["timeline__year-thumb",{"timeline__year-thumb--no-transition":!V.value}]),style:(0,a.j5)(A.value)},[(0,a._)("div",d,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(te(B.value),(e,l)=>((0,a.wg)(),(0,a.iD)("span",{textContent:(0,a.zw)(e),key:l+e},null,8,m))),128))])],6),i[3]||(i[3]=(0,a.Uk)()),(0,a._)("div",p,[(0,a._)("div",{class:"timeline__axis-line",ref_key:"axis",ref:H},null,512),i[1]||(i[1]=(0,a.Uk)()),((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(W.value,(e,l)=>((0,a.wg)(),(0,a.iD)("div",{class:(0,a.C_)(["timeline__axis-tick",{"timeline__axis-tick--active":e.year==B.value,"timeline__axis-tick--big":e.big}]),key:`axis-tick-${l}`,style:(0,a.j5)(le(e))},null,6))),128)),i[2]||(i[2]=(0,a.Uk)()),((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(J.value,(e,l)=>((0,a.wg)(),(0,a.iD)("div",{class:"timeline__axis-label",key:`axis-label-${l}`,style:(0,a.j5)(ie(e))},[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(te(e),(e,l)=>((0,a.wg)(),(0,a.iD)("span",{textContent:(0,a.zw)(e),key:l+e},null,8,_))),128))],4))),128))])])])],2)]),i[6]||(i[6]=(0,a.Uk)()),(0,a._)("div",{class:"timeline__scrolling-content",ref_key:"scrollingContent",ref:y},[(0,a._)("div",x,[(0,a._)("div",g,[(0,a.Wm)((0,a.SU)(w),{year:U.value,"push-down":!L.value,ref_key:"yearCounter",ref:w},null,8,["year","push-down"])])]),i[5]||(i[5]=(0,a.Uk)()),(0,a.WI)(l.$slots,"default")],512)])])],2))}});const y=(0,i(3744).Z)(f,[["__scopeId","data-v-46cc65c1"]])}}]);