joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

no semicolons

Browse source
This commit is contained in:
Joshua Seigler 2025-06-28 22:15:54 -04:00
parent 320b777b99
commit bf93638810
7 changed files with 528 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

78
assets/scripts/main.ts
View file

@ -1,65 +1,65 @@
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
/** @param {Event} evt */
function removeEffect({ target }) {
const effectsLayer = document.querySelector("#effects");
if (effectsLayer == null) { return };
const effectsLayer = document.querySelector("#effects")
if (effectsLayer == null) {
return
}
const effects = Array.from(effectsLayer.children).filter(
(e) => e['__effectParent'] === target,
);
(e) => e["__effectParent"] === target
)
effects.forEach((e) => {
e.getAnimations().forEach((anim) => {
if (+(anim.currentTime ?? 0) < 100) {
anim.pause();
effectsLayer.removeChild(e);
return;
anim.pause()
effectsLayer.removeChild(e)
return
}
anim.pause();
anim.updatePlaybackRate(-0.25);
anim.play();
anim.pause()
anim.updatePlaybackRate(-0.25)
anim.play()
anim.addEventListener("finish", () => {
if (effectsLayer.contains(e)) {
effectsLayer.removeChild(e);
effectsLayer.removeChild(e)
}
});
});
});
})
})
})
}
function isElement(target: EventTarget | null): target is Element {
return target !== null && typeof target["matches"] === 'function'
return target !== null && typeof target["matches"] === "function"
}
function addEffect({ target }: UIEvent) {
const effectsLayer = document.querySelector("#effects");
const effectsLayer = document.querySelector("#effects")
if (
!isElement(target) ||
!target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
) {
return;
return
}
const color = window.getComputedStyle(target).getPropertyValue('--glowColor');
const rects = Array.from(target.getClientRects());
const color = window.getComputedStyle(target).getPropertyValue("--glowColor")
const rects = Array.from(target.getClientRects())
Array.from(target.children).forEach((child) => {
rects.push(...Array.from(child.getClientRects()));
});
rects.push(...Array.from(child.getClientRects()))
})
rects.forEach((rect) => {
const { top, left, width, height } = rect;
const newEffect = document.createElement("div");
newEffect['__effectParent'] = target;
newEffect.classList.add("effect-instance");
const padding = "10rem";
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`;
newEffect.style.width = `calc(${width}px + 2 * ${padding})`;
newEffect.style.height = `calc(${height}px + 2 * ${padding})`;
newEffect.style.setProperty('--glowColor', color);
effectsLayer?.appendChild(newEffect);
});
const { top, left, width, height } = rect
const newEffect = document.createElement("div")
newEffect["__effectParent"] = target
newEffect.classList.add("effect-instance")
const padding = "10rem"
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`
newEffect.style.width = `calc(${width}px + 2 * ${padding})`
newEffect.style.height = `calc(${height}px + 2 * ${padding})`
newEffect.style.setProperty("--glowColor", color)
effectsLayer?.appendChild(newEffect)
})
}
document.addEventListener("mouseenter", addEffect, true);
document.addEventListener("focus", addEffect, true);
document.addEventListener("mouseenter", addEffect, true)
document.addEventListener("focus", addEffect, true)
document.addEventListener("mouseleave", removeEffect, true);
document.addEventListener("blur", removeEffect, true);
document.addEventListener("mouseleave", removeEffect, true)
document.addEventListener("blur", removeEffect, true)