jahresbericht2018/assets/js/components/reports.js

"use strict";define("components/reports",[],function(){return class{constructor(e){this.element=e,this.state={runningTransitions:0,animationState:1,store:this.element.querySelectorAll(".reports--store"),unseen:[],lastStoreIndexes:[],loading:!0,backgroundImage:"none"};let t=this.element.querySelector(".reports__background");this.element.querySelectorAll(".reports__link").forEach(e=>{e.addEventListener("mouseenter",()=>{this.state.backgroundImage=e.dataset.cover?"url("+e.dataset.cover+")":"none",t.style.backgroundImage=this.state.backgroundImage,t.classList.remove("hidden")}),e.addEventListener("mouseleave",()=>{this.state.backgroundImage="none",t.classList.add("hidden"),setTimeout(()=>{t.style.backgroundimage=this.state.backgroundImage},300)})});let s=this.element.querySelector(".reports__cube--1"),i=this.element.querySelector(".reports__cube--2"),n=this.element.querySelector(".reports__cube--3"),l=s.offsetWidth/2,o=s.offsetHeight/4;this.shuffleLoop=[[{el:s,styles:{left:1*l,top:2*o},pixelSpeed:80},{el:i,styles:{left:0*l,top:1*o},pixelSpeed:80},{el:n,styles:{left:2*l,top:1*o},pixelSpeed:80}],[{el:s,styles:{left:1*l,top:0*o},pixelSpeed:80}],[{el:s,styles:{left:1*l,top:4*o},pixelSpeed:80}],[{el:i,styles:{left:0*l,top:3*o},pixelSpeed:80}],[{el:s,styles:{left:1*l,top:2*o},pixelSpeed:80},{el:n,styles:{left:1*l,top:0*o},pixelSpeed:80}],[{el:s,styles:{left:0*l,top:1*o},pixelSpeed:80}],[{el:s,styles:{left:1*l,top:2*o},pixelSpeed:80},{el:n,styles:{left:2*l,top:1*o},pixelSpeed:80}]],this.element.querySelector(".reports__button--reload").addEventListener("click",()=>{0==this.state.runningTransitions&&this.loadNewReports()}),this.element.querySelectorAll(".reports__link").forEach(e=>{this.loadNextUnseen(e)}),this.loadNewReports(),this.element.querySelectorAll(".reports__button").forEach(e=>{e.classList.remove("invis")})}loadNextUnseen(e){0==this.state.unseen.length&&(this.state.store.forEach((e,t)=>{this.state.unseen.push(t)}),this.state.lastStoreIndexes.forEach(e=>{this.state.unseen=this.state.unseen.filter(t=>t!==e)}));let t=this.state.unseen[Math.floor(Math.random()*this.state.unseen.length)];this.state.lastStoreIndexes.push(t),this.state.lastStoreIndexes.length>3&&this.state.lastStoreIndexes.shift(),this.state.unseen=this.state.unseen.filter(e=>e!==t);let s=this.state.store[t];e.href=s.dataset.url,e.querySelector(".reports__link-title").innerHTML=s.innerHTML,e.dataset.cover=s.dataset.cover}delayedDropClass(e,t,s){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:void 0,n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:void 0;void 0===n&&(n=0),n<e.length?(e[n].classList.remove(s),setTimeout(()=>{this.delayedDropClass(e,t,s,i,n+1)},t+30*Math.random())):i&&i()}loadNewReports(){let e=this.element.querySelectorAll(".reports__link");this.state.loading?this.delayedDropClass(e,50,"loading",()=>{this.state.loading=!1}):(this.toggleAnimationState(this.shuffleLoop),e.forEach(e=>{e.classList.add("loading")}),this.state.loading=!0,this.state.runningTasks++,setTimeout(()=>{this.state.runningTasks--,e.forEach(e=>{this.loadNextUnseen(e)}),this.loadNewReports()},300))}toggleAnimationState(e){this.performAnimationState(e[this.state.animationState],()=>{}),this.state.animationState=this.state.animationState+1<e.length?this.state.animationState+1:0}performAnimationState(e,t){let s;Object.entries(e).forEach(e=>{s=e[1],this.performTransition(s,t)})}performAnimation(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;e[s]?this.performAnimationState(e[s],()=>{this.performAnimation(e,t,s+1)}):t&&t()}performTransition(e,t){e.onStart&&e.onStart();let s=[];if(Object.entries(e.styles).forEach(t=>{let i=(e.el.style[t[0]]||window.getComputedStyle(e.el,null)[t[0]]).match(/(-?\d*\.?\d*)(.*)/);i[1]=parseInt(i[1]),s[t[0]]=i}),e.pixelSpeed){let t=void 0===s.left[1]?0:s.left[1],i=void 0===s.top[1]?0:s.top[1],n=(void 0===e.styles.left?0:e.styles.left)-t,l=(void 0===e.styles.top?0:e.styles.top)-i,o=Math.sqrt(n*n+l*l);o>0&&(e.duration=o/e.pixelSpeed*1e3)}e.el.style.transitionDuration=e.duration/1e3+"s",Object.entries(e.styles).forEach(i=>{let n=e.styles[i[0]];e.el.style[i[0]]=n+s[i[0]][2],this.state.runningTransitions++,setTimeout(()=>{this.state.runningTransitions--,0==this.state.runningTransitions&&t&&t(),e.onEnd&&e.onEnd()},e.duration)})}}});