itsericwoodward-site-v2/src/assets/scripts/scripts.js

// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
/****************************************************************************
 * It's Eric Woodward's Site
 *
 * Copyright 2014-2023 Eric Woodward
 * Source released under CC0 Public Domain License v1.0
 * https://www.itsericwoodward.com/licenses/cc0/
 * http://creativecommons.org/publicdomain/zero/1.0/
 ****************************************************************************/
(function () {
	"use strict";

	// Checking if browser "cuts the mustard" - https://gomakethings.com/ditching-jquery/
	if (!(!!document.querySelector && !!window.addEventListener)) return;

	if (window.dayjs) dayjs.extend(window.dayjs_plugin_relativeTime);

	// Indicate JS is loaded
	document.documentElement.className =
		document.documentElement.className.replace("no-js", "js");

	// Enable cached fonts ASAP
	if (window.Cookies && !!Cookies.get("fonts_loaded")) {
		document.documentElement.className += " js-hasFontsLoaded";
	}

	docReady(function () {
		setTimeout(function () {
			if (!window.Cookies || !window.FontFaceObserver) return;

			// Handle Fonts
			const fontExo2 = new FontFaceObserver("exo_2");
			fontExo2.load().then(function () {
				if (
					document.documentElement.className.indexOf(
						"js-hasFontsLoaded"
					) == -1
				) {
					document.documentElement.className += " js-hasFontsLoaded";
				}
				Cookies.set("fonts_loaded", true);
			});

			// Lazy-Load Media
			if (typeof loadMedia === "function") {
				loadMedia(".js-lazyLoader", null, true);
			}

			// Add relative dates via dayjs
			if (window.dayjs) {
				const times = document.getElementsByTagName("time");

				[].forEach.call(times, function (the_time) {
					let pub_time = the_time.getAttribute("datetime");
					if (the_time.className.indexOf("js-noRelativeTime") === -1)
						the_time.innerHTML +=
							' <span class="js-momentTime">(' +
							dayjs(pub_time).from(dayjs()) +
							")</span>";
					the_time.classList.add("isDone");
				});
			}

			// TODO: maybe put toggle behind collapsable "settings" menu that
			// lives on bottom left of screen on mobile?
			const actionBox = document.querySelector("#footer .actionBox");

			/** THEME SWITCHER */

			// load last theme
			const currentTheme = Cookies.get("currentTheme") ?? "";

			const themeSwitch = document.createElement("div");
			themeSwitch.innerHTML = [
				'<label class="themeSwitch" for="themeSwitch">',
				'<div class="themeSwitch-description">',
				"Theme",
				"</div>",
				'<select id="themeSwitch" name="themeSwitch">',
				`<option value="" ${
					currentTheme === "" ? "selected" : ""
				}>Default</option>`,
				`<option value="themeAdmiral" ${
					currentTheme === "themeAdmiral" ? "selected" : ""
				}>Admiral</option>`,
				`<option value="themeAntsy92" ${
					currentTheme === "themeAntsy92" ? "selected" : ""
				}>Antsy92</option>`,
				`<option value="themeBingo" ${
					currentTheme === "themeBingo" ? "selected" : ""
				}>Bingo</option>`,
				`<option value="themeCyber77" ${
					currentTheme === "themeCyber77" ? "selected" : ""
				}>Cyber77</option>`,
				`<option value="themeLightCyan" ${
					currentTheme === "themeLightCyan" ? "selected" : ""
				}>LightCyan</option>`,
				`<option value="themeTerminalGreen" ${
					currentTheme === "themeTerminalGreen" ? "selected" : ""
				}>Terminal Green</option>`,
				`<option value="themeVagabond" ${
					currentTheme === "themeVagabond" ? "selected" : ""
				}>Vagabond</option>`,
				"</label>",
			].join("\n");
			themeSwitch.classList.add("js-themeSwitch", "themeSwitch");
			if (currentTheme)
				document
					.getElementsByTagName("body")[0]
					.classList.add(currentTheme);

			actionBox.append(themeSwitch);

			// add toggle event
			document
				.getElementById("themeSwitch")
				.addEventListener("change", function (e) {
					const body = document.getElementsByTagName("body")[0];
					body.className = body.className
						.split(/\s/)
						.filter((val) => !val.startsWith("theme"))
						.concat(e.target.value)
						.join(" ");
					Cookies.set("currentTheme", e.target.value);
				});

			/** SCROLLING BACKGROUND */

			// default to no scrolling on devices under 600 px w
			const isMobile = window.matchMedia(
				"only screen and (max-width: 600px)"
			).matches;

			// add background scrolling
			const hasScrollToggle =
				Cookies.get("scrollToggle") === true ||
				Cookies.get("scrollToggle") === "true" ||
				(Cookies.get("scrollToggle") === undefined && !isMobile);

			const scrollToggle = document.createElement("div");
			scrollToggle.innerHTML = [
				'<label class="toggleSwitch" for="scrollingToggle">',
				'<div class="toggleSwitch-description">',
				"Background",
				"</div>",
				`<input class="toggleSwitch-checkbox" ${
					hasScrollToggle ? "checked" : ""
				} type="checkbox" id="scrollingToggle" />`,
				'<div class="toggleSwitch-status" data-ts-on="SCROLLING" data-ts-off="STATIC"></div>',
				"</label>",
			].join("\n");
			scrollToggle.classList.add("js-scrollToggle", "scrollToggle");

			actionBox.append(scrollToggle);
			actionBox.classList.add("js-actionBox");

			// add toggle event
			document
				.getElementById("scrollingToggle")
				.addEventListener("click", function (e) {
					const theList =
						document.getElementById("gridContainer").classList;

					theList.toggle("js-isAnimated");
					Cookies.set(
						"scrollToggle",
						!!theList.contains("js-isAnimated")
					);
				});

			// add class if active at startup
			if (hasScrollToggle)
				document
					.getElementById("gridContainer")
					.classList.add("js-isAnimated");

			if (document.documentElement.className.indexOf("is404") > -1) {
				document.getElementById("searchQuery").value =
					window.location.pathname
						.replace(/\\.html?$/, "")
						.replace(/\//g, " ");
			}

			document
				.getElementById("searchForm")
				.addEventListener("submit", function (e) {
					document.getElementById("searchQuery").value +=
						" site:" + window.location.hostname;
				});
		}, 1);
	});
})();
// @license-end