mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
wip: 2024-09-25T16:19:00+0200 (1727273940)
This commit is contained in:
parent
8967049eeb
commit
e5f8aa0a68
10 changed files with 47 additions and 32 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,8 +1,9 @@
|
|||
assets/media/content
|
||||
assets/js/modules/npm
|
||||
|
||||
# Bootstrapping #
|
||||
#################
|
||||
vendor
|
||||
node_modules
|
||||
.env.ini
|
||||
|
||||
# OS generated files #
|
||||
|
|
|
|||
2
api/install.sh
Normal file
2
api/install.sh
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
# Install dependencies
|
||||
composer install --optimize-autoloader
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
10
install.sh
Normal file
10
install.sh
Normal file
|
|
@ -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
|
||||
17
package-lock.json
generated
Normal file
17
package-lock.json
generated
Normal file
|
|
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
5
package.json
Normal file
5
package.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"elevent": "^1.0.2"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue