Emi Matchu
b2a23b3e7b
I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
33 lines
951 B
JavaScript
33 lines
951 B
JavaScript
class MagicMagnifier extends HTMLElement {
|
|
connectedCallback() {
|
|
setTimeout(() => this.#attachLens(), 0);
|
|
this.addEventListener("mousemove", this.#onMouseMove);
|
|
}
|
|
|
|
#attachLens() {
|
|
const lens = document.createElement("magic-magnifier-lens");
|
|
lens.inert = true;
|
|
lens.useContent(this.children);
|
|
this.appendChild(lens);
|
|
}
|
|
|
|
#onMouseMove(e) {
|
|
const lens = this.querySelector("magic-magnifier-lens");
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.pageX - rect.left;
|
|
const y = e.pageY - rect.top;
|
|
lens.style.setProperty("--magic-magnifier-x", x + "px");
|
|
lens.style.setProperty("--magic-magnifier-y", y + "px");
|
|
}
|
|
}
|
|
|
|
class MagicMagnifierLens extends HTMLElement {
|
|
useContent(contentNodes) {
|
|
for (const contentNode of contentNodes) {
|
|
this.appendChild(contentNode.cloneNode(true));
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("magic-magnifier", MagicMagnifier);
|
|
customElements.define("magic-magnifier-lens", MagicMagnifierLens);
|