interface Window { currPage: string; currOpacity: number; blogpostDataStr: string; blogpostData: {title: string, source: string, time: 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"); addBlogposts(); let search = window.location.search; if (search != "") { setBlogTextOnSearch(search); } window.onpopstate = () => { let page = window.location.pathname.split("/").filter(f => f != "")[0]; let search = window.location.search.slice(0, -1); if (page == "blogtext") { setBlogTextOnSearch(search); } openPage(page || "about", page, false); } } function openPage(page: string, new_url: string = null, renew_history=true) { 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 = ""; let target = new_url || page; let targetPg = "/" + target; if (target == "about") { target = ""; targetPg = ""; }; if (renew_history) { window.history.pushState(target, target, `${targetPg}/`); } document.title = "Teascade | " + page; document.getElementsByClassName("stuffarea")[0].scrollTop = 0; 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); } function addBlogposts() { window.blogpostData = JSON.parse(window.blogpostDataStr); let div = document.getElementById("blog"); let blogpostData = window.blogpostData.sort((a, b) => {return b.time - a.time}); blogpostData.forEach((val) => { let title = document.createElement("h2"); title.innerHTML = val.title; let timestamp = document.createElement("p"); timestamp.className += "timestamp"; timestamp.innerHTML = new Date(val.time).toUTCString(); title.appendChild(timestamp); div.appendChild(title); title.onclick = () => { openPage("blogtext", "blogtext?id=" + val.source.slice(0, -5)); setBlogText(val.source, new Date(val.time).toUTCString()); }; }) } function setBlogTextOnSearch(search: string) { search = search.slice(1, -1); let parts = search.split("="); if (parts[0] == "id") { let timestamp: string; for (let i in window.blogpostData) { console.log(window.blogpostData[i].source); console.log(search + ".html"); if (window.blogpostData[i].source == parts[1] + ".html") { timestamp = new Date(window.blogpostData[i].time).toUTCString(); } } setBlogText(parts[1] + ".html", timestamp); } } function setBlogText(source: string, time: string) { let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = () => { if (xmlhttp.readyState == XMLHttpRequest.DONE) { if (xmlhttp.status == 200) { document.getElementById("blogtext").innerHTML = xmlhttp.responseText; let timestamp = document.createElement("p"); timestamp.className += "timestamp"; timestamp.innerHTML = time; document.getElementById("blogtext").appendChild(timestamp); } } } xmlhttp.open("GET", "/blogposts/" + source, true); xmlhttp.send(); }