element.min.js

customElements.define("event-count",class extends HTMLElement{connectedCallback(){this.render()}render(){let event,labels;const urlParams=new URLSearchParams(window.location.search);let hour,minute,second;"url"==this.getAttribute("event")?(urlParams.get("event")&&(event=urlParams.get("event")),urlParams.get("labels")&&(labels=urlParams.get("labels")),urlParams.get("title")&&setTimeout((()=>{this.innerHTML=urlParams.get("title")}),1)):event=this.getAttribute("event")||2147483647e3,"newyear"==event?event=new Date((new Date).getFullYear()+1,0,1):"danny"==event?event="1969/1/21":"48"==event&&(event="2029/1/20",this.setAttribute("count","year,day,hour,minute,second"),setTimeout((()=>{this.innerHTML='<flagmeister-text word="48" iso="us,us" style="display:inline-block;text-align:center"></flagmeister-text>'}),1)),labels||(this.getAttribute("hms")?([hour,minute,second]=this.getAttribute("hms").split(":"),event=new Date(new Date/1+36e5*hour+6e4*minute+1e3*second),labels="hour,minute,second"):labels=this.getAttribute("count")||"year,day,hour,minute,second"),"*"==labels&&(labels="year,day,hour,minute,second"),labels=labels.split(",");let createElement=({create:create="div",id:id,append:append=[],...p})=>(Object.assign(create=document.createElement(create),{id:id,part:id,...p}).append(...append),this[id]=create),attr_CSSprop=(prefix,name,value)=>name+":"+(this.getAttribute(prefix+"-"+name)||"var(--event-count-"+prefix+"-"+name+","+value+")")+";";(this.shadowRoot||this.attachShadow({mode:"open"})).append(createElement({create:"style",id:"style",innerHTML:":host{display:inline-block}#event{"+attr_CSSprop("event","color","#0")+attr_CSSprop("event","padding","0 1rem")+attr_CSSprop("event","font","2rem arial")+attr_CSSprop("event","text-align","center")+attr_CSSprop("event","background","#fc0")+"}#count{display:grid;grid:1fr/repeat("+labels.length+",1fr);"+attr_CSSprop("count","color","#fc0")+attr_CSSprop("count","font","2rem arial")+attr_CSSprop("count","text-align","center")+attr_CSSprop("count","background","#080")+"}[part*=text]{"+attr_CSSprop("text","padding","0 1rem")+attr_CSSprop("text","font","1rem arial")+attr_CSSprop("text","text-transform","uppercase")+"}"}),createElement({id:"event",append:[createElement({create:"slot",innerHTML:"Y2K38"})]}),createElement({id:"count",append:labels.map((label=>createElement({id:label+"count",append:[createElement({id:label}),createElement({id:label+"text",innerHTML:new Intl.RelativeTimeFormat(this.getAttribute("format")||"en").formatToParts(2,label)[2].value})]})))}));let intervalCounter=setInterval((()=>{let startDate=new Date,currentDate=new Date(event);currentDate<startDate&&([startDate,currentDate]=[currentDate,startDate]);let seconds=Math.floor((currentDate-startDate)/1e3),time={year:((days,year,years=0)=>{for(;days>=365;)days-=year%4!=0||year%100==0&&year%400!=0?365:366,years++,year++;return years})(Math.floor(seconds/86400),startDate.getFullYear()),day:Math.floor(seconds/86400%365.25),hour:Math.floor(seconds/3600%24),minute:Math.floor(seconds/60%60),second:seconds%60};labels.map((label=>(this.setAttribute(label,time[label]),this[label].innerHTML=time[label]))).every((value=>!value))&&(clearInterval(intervalCounter),this.dispatchEvent(new Event(this.id)))}),1e3)}});