117 lines
3.4 KiB
JavaScript
117 lines
3.4 KiB
JavaScript
const BACKGROUND_IMAGES = [
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
|
|
description: "Allis Engine #4, Metropolitan Waterworks Museum",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg",
|
|
description: "Charles River Basin and Skyline",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg",
|
|
description: "Mile-High City Skyline",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg",
|
|
description: "Geese and Goslings on the banks of the Charles River",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg",
|
|
description: "Bay Point Hotel, Lake Winnipesaukee",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg",
|
|
description: "Hydroelectric Dam on the St. Lawrence River",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg",
|
|
description: "The Middle Falls in Letchworth State Park",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg",
|
|
description: "Robert W. Woodruff Library at Emory University",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg",
|
|
description: "Nubble Lighthouse",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg",
|
|
description: "Old vs New MBTA Green Line",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg",
|
|
description: "Icy Stormy Shoreline at Brenton Point",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg",
|
|
description: "Northern end of the Route 112 Scenic Byway",
|
|
source: ""
|
|
},
|
|
{
|
|
url: "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg",
|
|
description: "Enterprise Engineering Systems at the Star Trek Set Museum",
|
|
source: ""
|
|
}
|
|
];
|
|
|
|
|
|
function selectBackground() {
|
|
let max = BACKGROUND_IMAGES.length - 1
|
|
let min = 0;
|
|
index = Math.round(Math.random() * (max - min) + min);
|
|
console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index].url);
|
|
return BACKGROUND_IMAGES[index];
|
|
}
|
|
|
|
|
|
function togglePrimaryText() {
|
|
let items = document.getElementsByClassName("article");
|
|
|
|
for (index = 0; index < items.length; index++) {
|
|
if (items[index].classList.contains("primary-text")) {
|
|
items[index].classList.remove("primary-text");
|
|
} else {
|
|
items[index].classList.add("primary-text");
|
|
}
|
|
}
|
|
|
|
let button = document.getElementById("toggle-description");
|
|
|
|
if (button.classList.contains("active")) {
|
|
button.classList.remove("active");
|
|
} else {
|
|
button.classList.add("active");
|
|
}
|
|
};
|
|
|
|
window.addEventListener("DOMContentLoaded", function () {
|
|
let selected = selectBackground()
|
|
|
|
document.getElementById(
|
|
"background-image"
|
|
).style.backgroundImage = "url(" + selected.url + ")";
|
|
});
|
|
|
|
|
|
window.addEventListener("load", async function () {
|
|
document.getElementById("toggle-description").addEventListener("click", togglePrimaryText);
|
|
document.getElementById("preloader").classList.add("fadeout");
|
|
// I don't actually know how promises or async works
|
|
// ¯\_(ツ)_/¯
|
|
// https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
|
|
await new Promise(r => setTimeout(r, 250))
|
|
document.getElementById("preloader").style.display = "none";
|
|
});
|