2018-03-14 07:16:21 +00:00
|
|
|
// I suck at JS okay, don't judge. I know this is horrendous. Heavy copy/paste junk.
|
|
|
|
// Code is commented more than it needs to be because I'm still learning and the comments are basically post-it notes to help me remember.
|
|
|
|
// Ajax is entirely pointless for this site, but I did it to learn.
|
|
|
|
|
|
|
|
// Find all our buttons
|
|
|
|
const button1 = document.getElementById('button1');
|
|
|
|
const button2 = document.getElementById('button2');
|
|
|
|
const button3 = document.getElementById('button3');
|
|
|
|
|
|
|
|
// Make the base URL a variable because it's easier if I ever move the site
|
2018-03-14 09:08:50 +00:00
|
|
|
const baseUrl = "https://quad.moe/test/";
|
2018-03-14 07:16:21 +00:00
|
|
|
|
|
|
|
// Create variables that will get populated by loadContent() later
|
|
|
|
var payload1;
|
|
|
|
var payload2;
|
|
|
|
var payload3;
|
|
|
|
|
|
|
|
// Very bad function to get rid of the "active" class wherever it is atm
|
|
|
|
function resetButtons() {
|
|
|
|
button1.className = "nav-button";
|
|
|
|
button2.className = "nav-button";
|
|
|
|
button3.className = "nav-button";
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fetch all the page contents
|
|
|
|
async function loadContent(baseUrl) {
|
2018-03-14 09:08:50 +00:00
|
|
|
const http1 = fetch("pages/about.html");
|
|
|
|
const http2 = fetch("pages/about.html");
|
|
|
|
const http3 = fetch("pages/about.html");
|
2018-03-14 07:16:21 +00:00
|
|
|
|
|
|
|
const requests = [http1, http2, http3];
|
|
|
|
|
|
|
|
const responses = await Promise.all(requests);
|
|
|
|
|
2018-03-14 09:08:50 +00:00
|
|
|
return responses;
|
2018-03-14 07:16:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function setContent(navbutt, payload) {
|
|
|
|
document.getElementById("page").innerHTML = payload;
|
|
|
|
resetButtons();
|
|
|
|
navbutt.className += " active";
|
|
|
|
}
|
|
|
|
|
|
|
|
function initialContent() {
|
|
|
|
|
|
|
|
// Get the HTML we need
|
|
|
|
|
2018-03-14 09:08:50 +00:00
|
|
|
// This returns Response { type: "basic", url: "https://example.com", redirected: false... etc.
|
|
|
|
loadContent().then((res) => {console.log(res);});
|
|
|
|
|
|
|
|
// This returns a Promise object with <state>: "pending"
|
|
|
|
loadContent().then((res) => {console.log(res[0].text());});
|
|
|
|
|
|
|
|
contents = loadContent();
|
|
|
|
// Can't figure out how to make sure that each web request in loadContent()
|
|
|
|
// has returned proper HTML before it actually proceeds executing the rest of this funciton
|
|
|
|
|
|
|
|
// Then store the text only for later use
|
|
|
|
payload1 = contents[0].text();
|
|
|
|
payload2 = contents[1].text();
|
|
|
|
payload3 = contents[2].text();
|
|
|
|
|
|
|
|
console.log(payload1);
|
2018-03-14 07:16:21 +00:00
|
|
|
|
|
|
|
// Slap on all the event listeners
|
|
|
|
button1.addEventListener('click', function() {
|
|
|
|
setContent(button1, payload1);
|
|
|
|
}, false);
|
|
|
|
button2.addEventListener('click', function() {
|
|
|
|
setContent(button2, payload2);
|
|
|
|
}, false);
|
|
|
|
button3.addEventListener('click', function() {
|
|
|
|
setContent(button3, payload3);
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
// And finally enable the first tab
|
|
|
|
setContent(button1, payload1);
|
2018-03-14 09:08:50 +00:00
|
|
|
}
|