73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
// Adds a highlight to the currently hovered / focused / clicked element
|
|
export async function installElementHighlighter(
|
|
page: import("@playwright/test").Page
|
|
) {
|
|
await page.addInitScript(() => {
|
|
type PWWindow = Window & { __pw_highlighter_installed__?: boolean };
|
|
const w = window as unknown as PWWindow;
|
|
if (w.__pw_highlighter_installed__) return;
|
|
w.__pw_highlighter_installed__ = true;
|
|
|
|
const style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.__pw-highlight__ {
|
|
outline: 3px solid #ff1744 !important; /* kräftiges Rot */
|
|
outline-offset: 2px !important;
|
|
box-shadow: 0 0 0 2px rgba(255, 23, 68, 0.25) !important; /* leichte Aura */
|
|
transition: box-shadow 80ms ease-out;
|
|
}
|
|
.__pw-highlight-click__ {
|
|
outline: 4px solid #e0002b !important; /* noch stärkeres Rot beim Klick */
|
|
outline-offset: 2px !important;
|
|
box-shadow: 0 0 0 3px rgba(224, 0, 43, 0.35) !important;
|
|
}
|
|
/* Ganze Tabellenzeile hervorheben */
|
|
.__pw-highlight-row__ * {
|
|
outline: 2px dashed rgba(255, 23, 68, 0.8) !important;
|
|
outline-offset: 1px !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
let lastEl: Element | null = null;
|
|
let lastRow: Element | null = null;
|
|
function mark(el: EventTarget | null) {
|
|
if (!(el instanceof Element)) return;
|
|
if (lastEl === el) return;
|
|
if (lastEl) lastEl.classList.remove("__pw-highlight__");
|
|
lastEl = el;
|
|
lastEl.classList.add("__pw-highlight__");
|
|
|
|
// Tabellenzeile (tr oder role="row") komplett markieren
|
|
const row = (el.closest &&
|
|
(el.closest("tr") || el.closest('[role="row"]'))) as Element | null;
|
|
if (lastRow && lastRow !== row)
|
|
lastRow.classList.remove("__pw-highlight-row__");
|
|
if (row) {
|
|
row.classList.add("__pw-highlight-row__");
|
|
lastRow = row;
|
|
}
|
|
}
|
|
|
|
let clickTimeout: number | undefined;
|
|
|
|
window.addEventListener("mouseover", (e) => mark(e.target), true);
|
|
window.addEventListener("focus", (e) => mark(e.target), true);
|
|
window.addEventListener(
|
|
"click",
|
|
(e) => {
|
|
mark(e.target);
|
|
if (lastEl instanceof Element) {
|
|
lastEl.classList.add("__pw-highlight-click__");
|
|
if (clickTimeout) window.clearTimeout(clickTimeout);
|
|
const el = lastEl;
|
|
clickTimeout = window.setTimeout(() => {
|
|
el.classList.remove("__pw-highlight-click__");
|
|
}, 600);
|
|
}
|
|
},
|
|
true
|
|
);
|
|
});
|
|
}
|