dev21w35b

public/assets/js/modules/Logging.mjs

@@ -0,0 +1,27 @@
+export class Logging {
+	constructor() {
+		this.endpoint = "/log/";
+		this.data = new URLSearchParams();
+
+		document.addEventListener("visibilitychange",() => {
+			if(document.visibilityState === "hidden") {
+				this.send();
+			}
+		});
+
+		this.log("foo","bar");
+	}
+
+	log(key,value) {
+		this.data.append(key,value);
+	}
+
+	send() {
+		const send = navigator.sendBeacon(this.endpoint,this.data);
+		if(send !== true) {
+			this.log("mode","fallback");
+			const url = this.endpoint + this.data.toString();
+			fetch(url).catch(response => console.log(response));
+		}
+	}
+}

public/assets/js/modules/UI.mjs

@@ -0,0 +1,34 @@
+import { Logging } from "./Logging.mjs";
+
+const interactions = {
+	toggleMenu: () => {
+		const speed = 200;
+		const menu = document.getElementsByTagName("main")[0];
+	
+		menu.style.setProperty("transition",`${speed}ms`);
+		menu.classList.toggle("active");
+		setTimeout(() => menu.style.removeProperty("transition"),speed + 1);
+	}
+}
+
+export class Interaction extends Logging {
+	constructor() {
+		super();
+		this.attribute = "data-action";
+
+		const elements = document.querySelectorAll(`[${this.attribute}]`);
+		for(const element of elements) {
+			element.addEventListener("click",event => this.clickHandler(event));
+		}
+	}
+
+	clickHandler(event) {
+		const target = event.target.closest(`[${this.attribute}]`);
+		const action = target?.getAttribute(this.attribute) ?? null;
+
+		if(!target || !action || !Object.keys(interactions).includes(action)) {
+			return false;
+		}
+		interactions[action]();
+	}
+}

public/assets/js/script.js

@@ -1,12 +1,7 @@
-function toggleMenu() {
-	const speed = 200;
-	const menu = document.getElementsByTagName("main")[0];
+import { Interaction } from "./modules/UI.mjs";
 
-	menu.style.setProperty("transition",`${speed}ms`);
-	menu.classList.toggle("active");
-	setTimeout(() => menu.style.removeProperty("transition"),speed + 1);
-}
+//for(const element of document.getElementsByClassName("hamburger")) {
+//	element.addEventListener("click",() => toggleMenu());
+//}
 
-for(const element of document.getElementsByClassName("hamburger")) {
-	element.addEventListener("click",() => toggleMenu());
-}
+const interaction = new Interaction();

public/index.html

@@ -14,7 +14,7 @@
     <main>
         <div class="screen landingpage">
             <header>
-                <div class="hamburger center">
+                <div data-action="toggleMenu" class="hamburger center">
                     <div></div>
                 </div>
                 <div class="spacer"></div>
@@ -26,7 +26,7 @@
         </div>
         <div class="screen menu dark">
             <header>
-                <div class="hamburger center">
+                <div data-action="toggleMenu" class="hamburger center">
                     <svg xmlns="http://www.w3.org/2000/svg" width="28.548" height="22.828"><path d="M2.28 11.414h25.269M1.414 11.414l10-10M1.414 11.414l10 10"/></svg>
                 </div>
                 <div class="spacer"></div>