1 line
2.5 KiB
JavaScript
1 line
2.5 KiB
JavaScript
|
define("components/achievements",[],function(){return class e{constructor(e){this.element=e,this.state={alreadyVisible:!1,runningTasks:0,loading:!0,store:this.element.querySelectorAll(".achievement--store"),unseen:[],lastStoreIndexes:[]},this.element.querySelector(".achievements__button").addEventListener("click",()=>{0==this.state.runningTasks&&this.toggleAnimation()}),this.element.querySelectorAll(".achievements__cube").forEach(e=>{e.addEventListener("click",()=>{0==this.state.runningTasks&&this.toggleAnimation()})})}init(){if(!this.state.alreadyVisible){this.state.alreadyVisible=!0;let e=this.element.querySelectorAll(".achievement");e.forEach(e=>{this.loadNextUnseen(e)}),this.toggleAnimation(),this.element.querySelector(".achievements__button").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>2&&this.state.lastStoreIndexes.shift(),this.state.unseen=this.state.unseen.filter(e=>e!==t);let n=this.state.store[t];e.querySelector(".achievement__number").dataset.number=n.dataset.number,e.querySelector(".achievement__number-placeholder").innerHTML=n.dataset.number,e.querySelector(".achievement__number-postfix").innerHTML=n.dataset.postfix,e.querySelector(".achievement__category").innerHTML=n.dataset.category,e.querySelector(".achievement__teaser").innerHTML=n.innerHTML,e.querySelector(".achievement__link").href=n.dataset.url}toggleAnimation(){let e=this.element,t=e.querySelectorAll(".achievement");this.state.loading?(t.forEach(e=>{this.state.runningTasks++,this.countUp(e.querySelector(".achievement__number"),()=>{this.state.runningTasks--})}),e.classList.remove("loading"),this.state.loading=!1):(e.classList.add("loading"),this.state.loading=!0,this.state.runningTasks++,setTimeout(()=>{this.state.runningTasks--,t.forEach(e=>{this.loadNextUnseen(e)}),this.toggleAnimation()},800))}countUp(e,t,n=700,s=13){let i=parseInt(e.dataset.number,10),a=document.documentElement.getAttribute("lang"),r=0;s=Math.min(s,i);let o=Math.abs(Math.floor(n/s)),l=Math.floor(i/s),h=e.querySelector(".achievement__number-placeholder");h.style.width="auto",h.innerHTML=i.toLocaleString(a),h.style.width=h.offsetWidth+"px";let c=setInterval(()=>{l>1&&r+l>=i&&(l=Math.floor(l/4)),l=l<1?1:l,r+=l,r=r>i?i:r,h.innerHTML=r.toLocaleString(a),r==i&&(clearInterval(c),t())},o)}}});
|