47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
|
||
|
|
interface Window {
|
||
|
|
currPage: string;
|
||
|
|
currOpacity: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function main(page: string) {
|
||
|
|
window.currPage = page;
|
||
|
|
window.currOpacity = 1;
|
||
|
|
|
||
|
|
document.getElementById("about-link").attributes.removeNamedItem("href");
|
||
|
|
document.getElementById("games-link").attributes.removeNamedItem("href");
|
||
|
|
document.getElementById("blog-link").attributes.removeNamedItem("href");
|
||
|
|
|
||
|
|
document.getElementById("about-link").onclick = () => openPage("about");
|
||
|
|
document.getElementById("games-link").onclick = () => openPage("games");
|
||
|
|
document.getElementById("blog-link").onclick = () => openPage("blog");
|
||
|
|
}
|
||
|
|
|
||
|
|
function openPage(page: string) {
|
||
|
|
if (page == window.currPage) { return; }
|
||
|
|
|
||
|
|
slideOpacity(() => {
|
||
|
|
document.getElementById(window.currPage).className = "hiddenarea";
|
||
|
|
window.currPage = page;
|
||
|
|
document.getElementById(page).style.opacity = "0";
|
||
|
|
document.getElementById(page).className = "";
|
||
|
|
window.history.pushState(page, page, `/${page}/`);
|
||
|
|
slideOpacity(() => {
|
||
|
|
|
||
|
|
}, 1.5);
|
||
|
|
}, -1.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
function slideOpacity(callback: () => void, step: number) {
|
||
|
|
let currElem = document.getElementById(window.currPage);
|
||
|
|
let id = setInterval(() => {
|
||
|
|
window.currOpacity += 0.02 * step;
|
||
|
|
currElem.style.opacity = "" + window.currOpacity;
|
||
|
|
if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) {
|
||
|
|
clearInterval(id);
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}, 2);
|
||
|
|
}
|