From 1015ccd609d7f45f2d27fbb22b14879ed5d2ff76 Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Fri, 3 Sep 2021 17:05:31 +0200
Subject: [PATCH] dev21w35b

---
 public/assets/js/modules/Logging.mjs | 27 ++++++++++++++++++++++
 public/assets/js/modules/UI.mjs      | 34 ++++++++++++++++++++++++++++
 public/assets/js/script.js           | 15 ++++--------
 public/index.html                    |  4 ++--
 4 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 public/assets/js/modules/Logging.mjs
 create mode 100644 public/assets/js/modules/UI.mjs

diff --git a/public/assets/js/modules/Logging.mjs b/public/assets/js/modules/Logging.mjs
new file mode 100644
index 0000000..662b405
--- /dev/null
+++ b/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));
+		}
+	}
+}
\ No newline at end of file
diff --git a/public/assets/js/modules/UI.mjs b/public/assets/js/modules/UI.mjs
new file mode 100644
index 0000000..06b8f2d
--- /dev/null
+++ b/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]();
+	}
+}
\ No newline at end of file
diff --git a/public/assets/js/script.js b/public/assets/js/script.js
index 724b772..22f7ca7 100644
--- a/public/assets/js/script.js
+++ b/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());
-}
\ No newline at end of file
+const interaction = new Interaction();
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 03ca4df..83662ca 100644
--- a/public/index.html
+++ b/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>