From e5f8aa0a6810983bed79cd9a2df5894217676aeb Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Wed, 25 Sep 2024 16:35:58 +0200 Subject: [PATCH] wip: 2024-09-25T16:19:00+0200 (1727273940) --- .gitignore | 3 ++- api/install.sh | 2 ++ assets/css/shells/document.css | 9 --------- assets/js/pages/about/battlestation.js | 2 +- assets/js/pages/contact.js | 3 +-- assets/js/pages/index.js | 2 +- assets/js/shells/document.js | 26 ++++++++------------------ install.sh | 10 ++++++++++ package-lock.json | 17 +++++++++++++++++ package.json | 5 +++++ 10 files changed, 47 insertions(+), 32 deletions(-) create mode 100644 api/install.sh create mode 100644 install.sh create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 70d179d..71b7a9a 100755 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,9 @@ -assets/media/content +assets/js/modules/npm # Bootstrapping # ################# vendor +node_modules .env.ini # OS generated files # diff --git a/api/install.sh b/api/install.sh new file mode 100644 index 0000000..0c7900a --- /dev/null +++ b/api/install.sh @@ -0,0 +1,2 @@ +# Install dependencies +composer install --optimize-autoloader \ No newline at end of file diff --git a/assets/css/shells/document.css b/assets/css/shells/document.css index 4a0cf35..f1e927b 100644 --- a/assets/css/shells/document.css +++ b/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 { diff --git a/assets/js/pages/about/battlestation.js b/assets/js/pages/about/battlestation.js index d537f8d..d587920 100644 --- a/assets/js/pages/about/battlestation.js +++ b/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 diff --git a/assets/js/pages/contact.js b/assets/js/pages/contact.js index b98e377..e42bdab 100755 --- a/assets/js/pages/contact.js +++ b/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; } diff --git a/assets/js/pages/index.js b/assets/js/pages/index.js index 277e667..1fb023f 100755 --- a/assets/js/pages/index.js +++ b/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 { diff --git a/assets/js/shells/document.js b/assets/js/shells/document.js index a573ad4..95bc693 100644 --- a/assets/js/shells/document.js +++ b/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"; - - // Top navigation started + // On all top shell navigations new Elevent(vv.Navigation.EVENTS.STARTED, vv.Navigation.rootShellElement, () => { - vv.Navigation.rootShellElement.classList.add(classNameLoading); - - // 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); + // Close searchbox on top shell navigations + document.querySelector("header").classList.remove(CLASSNAME_SEARCHBOX_ACTIVE); }); } diff --git a/install.sh b/install.sh new file mode 100644 index 0000000..3e887ba --- /dev/null +++ b/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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..087a74c --- /dev/null +++ b/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==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..50060b0 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "elevent": "^1.0.2" + } +}