mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2026-04-13 09:49:39 +02:00
Victor Westerlund
55a8234800
In this PR we move all of the CSS and JavaScript assets from the public assets directory to a new directory in the project root. The main reason for this is that I would like to believe this makes them easier to find. Since all CSS and JS is bundled with each page anyways there is no need to access these directly from a public directory. The main argument against this I think would be "transparency". We already run this site with `display_php_source=true` in Vegvisir (so page source code can be inspected by appending `.php` to the end of a url. But there is of course no reason to trust that it's the actual source code. Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/72
32 lines
No EOL
1 KiB
JavaScript
32 lines
No EOL
1 KiB
JavaScript
import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
|
|
|
|
export const TARGET_SELECTOR = "[data-hover]";
|
|
|
|
export class Hoverpop {
|
|
/**
|
|
* Bind hover targets on provided Elevent-compatible element(s)
|
|
* @param {HTMLElement|HTMLElements|string} elements
|
|
*/
|
|
constructor(elements) {
|
|
// Bind hover targets on element(s)
|
|
new Elevent("mouseenter", elements, (event) => {
|
|
const element = event.target.querySelector(TARGET_SELECTOR);
|
|
|
|
// Bail out if target element contains no hover target element
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
element.classList.add("hovering");
|
|
event.target.addEventListener("mousemove", (event) => {
|
|
const x = event.layerX - (element.clientWidth / 2);
|
|
const y = event.layerY + element.clientHeight;
|
|
|
|
element.style.setProperty("transform", `translate(${x}px, ${y}px)`);
|
|
});
|
|
});
|
|
|
|
// Bind hover leave targets on element(s)
|
|
new Elevent("mouseleave", elements, () => elements.forEach(element => element.querySelector(TARGET_SELECTOR)?.classList.remove("hovering")));
|
|
}
|
|
} |