wip: 2024-09-25T16:19:00+0200 (1727273940)

.gitignore

@@ -1,8 +1,9 @@
-assets/media/content
+assets/js/modules/npm
 
 # Bootstrapping #
 #################
 vendor
+node_modules
 .env.ini
 
 # OS generated files #

api/install.sh

@@ -0,0 +1,2 @@
+# Install dependencies
+composer install --optimize-autoloader

assets/css/shells/document.css

@@ -269,15 +269,6 @@ vv-shell {
 	max-width: 1000px;
 }
 
-vv-shell > * {
-	transition: 100ms opacity;
-	opacity: 1;
-}
-
-vv-shell.loading > * {
-	opacity: 0;
-}
-
 /* ## Search results */
 
 search-results {

assets/js/pages/about/battlestation.js

@@ -1,4 +1,4 @@
-import { Elevent } from "/assets/js/._Elevent.mjs";
+import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
 
 new Elevent("click", document.querySelectorAll(".group"), (event) => {
 	// Collapse self if already active and current target

assets/js/pages/contact.js

@@ -10,8 +10,6 @@ class ContactForm {
 		[...document.querySelectorAll("form :is(input, textarea)")].forEach(element => {
 			element.addEventListener("keyup", () => this.saveMessage());
 		});
-
-		
 	}
 
 	// Get saved message as JSON from SessionStorage
@@ -36,6 +34,7 @@ class ContactForm {
 			return ContactForm.removeSavedMessage();
 		}
 		
+		// Set value of each input field in DOM by name attribute
 		for (const [name, value] of Object.entries(message)) {
 			this.form.querySelector(`[name="${name}"]`).value = value;
 		}

assets/js/pages/index.js

@@ -1,4 +1,4 @@
-import { Elevent } from "/assets/js/._Elevent.mjs";
+import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
 
 // Click to copy email button
 {

assets/js/shells/document.js

@@ -1,10 +1,12 @@
-import { Elevent } from "/assets/js/._Elevent.mjs";
+import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
+
+const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
 
 // Handle search box open/close buttons
 {
 	// Open search box
 	new Elevent("click", document.querySelector(".searchbox-open"), () => {
-		document.querySelector("header").classList.add("searchboxActive");
+		document.querySelector("header").classList.add(CLASSNAME_SEARCHBOX_ACTIVE);
 		// Select searchbox inner input element
 		document.querySelector("searchbox input").focus();
 	});
@@ -17,7 +19,7 @@ import { Elevent } from "/assets/js/._Elevent.mjs";
 		const transformDuration = parseInt(window.getComputedStyle(searchButtonElement).getPropertyValue("--transform-duration"));
 		searchButtonElement.style.setProperty("pointer-events", "none");
 
-		document.querySelector("header").classList.remove("searchboxActive");
+		document.querySelector("header").classList.remove(CLASSNAME_SEARCHBOX_ACTIVE);
 
 		// Wait for the transform animation to finish
 		setTimeout(() => searchButtonElement.style.removeProperty("pointer-events"), transformDuration);
@@ -26,22 +28,10 @@ import { Elevent } from "/assets/js/._Elevent.mjs";
 
 // Root shell navigation event handlers
 {
-	const classNameLoading = "loading";
+	// On all top shell navigations
-
-	// Top navigation started
 	new Elevent(vv.Navigation.EVENTS.STARTED, vv.Navigation.rootShellElement, () => {
-		vv.Navigation.rootShellElement.classList.add(classNameLoading);
+		// Close searchbox on top shell navigations
-
+		document.querySelector("header").classList.remove(CLASSNAME_SEARCHBOX_ACTIVE);
-		// Close searchbox on vv-shell page navigation
-		document.querySelector("header").classList.remove("searchboxActive");
-
-		// Wait 200ms for the page fade-in animation to finish
-		setTimeout(() => vv.Navigation.rootShellElement.classList.remove("loading"), 200);
-	});
-
-	// Top navigation finished
-	new Elevent(vv.Navigation.EVENTS.FINISHED, vv.Navigation.rootShellElement, () => {
-		vv.Navigation.rootShellElement.classList.remove(classNameLoading);
 	});
 }
 

install.sh

@@ -0,0 +1,10 @@
+# Install dependencies
+composer install --optimize-autoloader
+npm install
+
+# (Re)create public NPM modules folder
+rm -r assets/js/modules/npm
+mkdir assets/js/modules/npm
+
+# Create link to Elevent MJS from public JS modules folder
+ln -sr node_modules/elevent/src/Elevent.mjs assets/js/modules/npm/Elevent.mjs

package-lock.json

@@ -0,0 +1,17 @@
+{
+  "name": "vlw.se",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "elevent": "^1.0.2"
+      }
+    },
+    "node_modules/elevent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/elevent/-/elevent-1.0.2.tgz",
+      "integrity": "sha512-ks5LBUBTg4Bpfmj99OcFAzuDGzBRDEZhTyxmq/Y3RbsdBQ4JCaIUYB0M15OBvBWgIn1BnCo4WCSmw0/YbCJliw=="
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "elevent": "^1.0.2"
+  }
+}