Reorganize http resources and build logic

bundle/js/preloader.js

@@ -0,0 +1,8 @@
+window.addEventListener("load", async function() {
+  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";
+});

bundle/js/random-background.js

@@ -0,0 +1,83 @@
+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];
+}
+
+window.addEventListener("DOMContentLoaded", function() {
+  let selected = selectBackground()
+
+  document.getElementById(
+    "background-image"
+  ).style.backgroundImage = "url(" + selected.url + ")";
+});

bundle/js/toggle-article-text-button.js

@@ -0,0 +1,23 @@
+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("load", async function() {
+  document.getElementById("toggle-description").addEventListener("click", togglePrimaryText);
+});