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?
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
class SupportOutfitViewer extends HTMLElement {
|
|
#internals = this.attachInternals();
|
|
|
|
connectedCallback() {
|
|
this.addEventListener("mouseenter", this.#onMouseEnter, { capture: true });
|
|
this.addEventListener("mouseleave", this.#onMouseLeave, { capture: true });
|
|
this.addEventListener("click", this.#onClick);
|
|
this.#internals.states.add("ready");
|
|
}
|
|
|
|
// When a row is hovered, highlight its corresponding outfit viewer layer.
|
|
#onMouseEnter(e) {
|
|
if (!e.target.matches("tr")) return;
|
|
|
|
const id = e.target.querySelector("[data-field=id]").innerText;
|
|
const layers = this.querySelectorAll(
|
|
`outfit-viewer [data-asset-id="${CSS.escape(id)}"]`,
|
|
);
|
|
for (const layer of layers) {
|
|
layer.setAttribute("highlighted", "");
|
|
}
|
|
}
|
|
|
|
// When a row is unhovered, unhighlight its corresponding outfit viewer layer.
|
|
#onMouseLeave(e) {
|
|
if (!e.target.matches("tr")) return;
|
|
|
|
const id = e.target.querySelector("[data-field=id]").innerText;
|
|
const layers = this.querySelectorAll(
|
|
`outfit-viewer [data-asset-id="${CSS.escape(id)}"]`,
|
|
);
|
|
for (const layer of layers) {
|
|
layer.removeAttribute("highlighted");
|
|
}
|
|
}
|
|
|
|
// When clicking a row, redirect the click to the first link.
|
|
#onClick(e) {
|
|
const row = e.target.closest("tr");
|
|
if (row == null) return;
|
|
|
|
row.querySelector("[data-field=links] a").click();
|
|
}
|
|
}
|
|
|
|
customElements.define("support-outfit-viewer", SupportOutfitViewer);
|