47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
export class UiManager {
|
|
TRANSITION_TIME = 300;
|
|
|
|
showSection(section) {
|
|
for (const section of document.getElementsByTagName("section")) {
|
|
this.hideElements(section);
|
|
}
|
|
|
|
this.showElements(`#${section}-section`);
|
|
|
|
return new Promise(resolve => setTimeout(resolve, this.TRANSITION_TIME * 2));
|
|
}
|
|
|
|
hideElements() {
|
|
for (const input of arguments) {
|
|
const elem = input instanceof Element ? input : document.querySelector(input);
|
|
|
|
if (getComputedStyle(elem).display === "none")
|
|
continue;
|
|
|
|
elem.style.opacity = "0";
|
|
elem.dataset.oldDisplay = getComputedStyle(elem).display;
|
|
|
|
setTimeout(() => {
|
|
elem.style.display = "none";
|
|
}, this.TRANSITION_TIME);
|
|
}
|
|
}
|
|
|
|
showElements() {
|
|
setTimeout(() => {
|
|
for (const input of arguments) {
|
|
const elem = input instanceof Element ? input : document.querySelector(input);
|
|
|
|
elem.style.opacity = "0";
|
|
|
|
elem.style.display = elem.dataset.oldDisplay || "block";
|
|
elem.dataset.oldDisplay = null;
|
|
|
|
setTimeout(() => {
|
|
elem.style.opacity = "1";
|
|
}, 10);
|
|
}
|
|
}, this.TRANSITION_TIME);
|
|
}
|
|
}
|