66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
class LocalDate extends HTMLElement {
|
|
connectedCallback() {
|
|
let utcDate = new Date(this.innerText);
|
|
this.innerText = utcDate.toLocaleString();
|
|
}
|
|
}
|
|
customElements.define("local-date", LocalDate);
|
|
|
|
class TimerCountdown extends HTMLElement {
|
|
startTime;
|
|
endTime;
|
|
refreshInterval = null;
|
|
|
|
refreshCountdown() {
|
|
let diff = Math.floor((this.endTime - this.startTime) / 1000);
|
|
if (diff <= 0) {
|
|
this.innerText = "Finished";
|
|
return;
|
|
}
|
|
|
|
let days = Math.floor(diff / (24 * 60 * 60));
|
|
diff -= days * 24 * 60 * 60;
|
|
let hours = Math.floor(diff / (60 * 60));
|
|
diff -= hours * 60 * 60;
|
|
let minutes = Math.floor(diff / 60);
|
|
diff -= minutes * 60;
|
|
let seconds = diff;
|
|
|
|
let newText = "";
|
|
if (days > 0) {
|
|
newText += `${days} days, `;
|
|
}
|
|
newText += `${hours.toFixed(0).padStart(2, "0")}:`
|
|
+ `${minutes.toFixed(0).padStart(2, "0")}:`
|
|
+ `${seconds.toFixed(0).padStart(2, "0")}`;
|
|
|
|
this.innerText = newText;
|
|
}
|
|
|
|
refreshCountdownNow() {
|
|
this.startTime = (new Date()).getTime();
|
|
this.refreshCountdown();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.endTime = (new Date(this.getAttribute("end"))).getTime();
|
|
if (this.hasAttribute("start")) {
|
|
this.startTime = (new Date(this.getAttribute("start"))).getTime();
|
|
this.refreshCountdown();
|
|
}
|
|
else {
|
|
this.startTime = (new Date()).getTime();
|
|
this.refreshCountdown();
|
|
this.refreshInterval = setInterval(this.refreshCountdownNow.bind(this), 1000);
|
|
}
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.refreshInterval !== null) {
|
|
clearInterval(this.refreshInterval);
|
|
}
|
|
}
|
|
}
|
|
customElements.define("timer-countdown", TimerCountdown);
|
|
|