34 lines
952 B
JavaScript
34 lines
952 B
JavaScript
import { prefersReducedMotion } from "../shared/media.js";
|
|
|
|
export function initPrimaryButtonShine() {
|
|
const els = document.querySelectorAll(".btn--primary, .fab--primary");
|
|
if (!els.length || prefersReducedMotion()) return;
|
|
|
|
function setPos(el, clientX, clientY) {
|
|
const r = el.getBoundingClientRect();
|
|
if (r.width <= 0 || r.height <= 0) return;
|
|
const x = ((clientX - r.left) / r.width) * 100;
|
|
const y = ((clientY - r.top) / r.height) * 100;
|
|
el.style.setProperty("--btn-shine-x", `${x}%`);
|
|
el.style.setProperty("--btn-shine-y", `${y}%`);
|
|
}
|
|
|
|
els.forEach((el) => {
|
|
el.addEventListener(
|
|
"pointermove",
|
|
(e) => {
|
|
setPos(el, e.clientX, e.clientY);
|
|
},
|
|
{ passive: true },
|
|
);
|
|
el.addEventListener(
|
|
"pointerleave",
|
|
() => {
|
|
el.style.removeProperty("--btn-shine-x");
|
|
el.style.removeProperty("--btn-shine-y");
|
|
},
|
|
{ passive: true },
|
|
);
|
|
});
|
|
}
|