You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.4 KiB
57 lines
1.4 KiB
3 years ago
|
class TimeDate {
|
||
|
|
constructor() {
|
||
|
|
this._timeDateButton = document.querySelector("#time-date");
|
||
|
|
this._timeLabel = document.querySelector("#time-date #time-label");
|
||
|
|
this._dateLabel = document.querySelector("#time-date #date-label");
|
||
|
|
this._passForm = document.querySelector("#pass-form");
|
||
|
|
this._init();
|
||
|
|
}
|
||
|
|
|
||
|
|
_updateTimeDate() {
|
||
|
|
let date = theme_utils.get_current_localized_date();
|
||
|
|
let time = theme_utils.get_current_localized_time();
|
||
|
|
|
||
|
|
this._dateLabel.innerText = date;
|
||
|
|
this._timeLabel.innerText = time;
|
||
|
|
}
|
||
|
|
|
||
|
|
_setTimer() {
|
||
|
|
this._updateTimeDate();
|
||
|
|
setInterval(() => {
|
||
|
|
this._updateTimeDate();
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
_setButtons() {
|
||
|
|
this._timeDateButton.addEventListener("click", (ev) => {
|
||
|
|
this.toggleTimeDate();
|
||
|
|
});
|
||
|
|
this._passForm.addEventListener("keydown", (ev) => {
|
||
|
|
if (ev.keyCode == 27) {
|
||
|
|
this.toggleTimeDate();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async toggleTimeDate() {
|
||
|
|
this._timeDateButton.blur();
|
||
|
|
this._passForm.blur();
|
||
|
|
if (this._timeDateButton.classList.contains("hide")) {
|
||
|
|
this._passForm.classList.add("hide");
|
||
|
|
await wait(300);
|
||
|
|
this._timeDateButton.classList.remove("hide");
|
||
|
|
await wait(100);
|
||
|
|
this._timeDateButton.focus();
|
||
|
|
} else {
|
||
|
|
this._timeDateButton.classList.add("hide");
|
||
|
|
await wait(300);
|
||
|
|
this._passForm.classList.remove("hide");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_init() {
|
||
|
|
this._setTimer();
|
||
|
|
this._setButtons();
|
||
|
|
}
|
||
|
|
}
|