diff --git a/src/ts/waterfall/details-overlay/overlay-manager.ts b/src/ts/waterfall/details-overlay/overlay-manager.ts index 57904990..191beae3 100644 --- a/src/ts/waterfall/details-overlay/overlay-manager.ts +++ b/src/ts/waterfall/details-overlay/overlay-manager.ts @@ -138,7 +138,6 @@ class OverlayManager implements OverlayManagerClass { /** shared variable to keep track of heigth */ let currY = 0; let updateHeight = (overlay, y, currHeight) => { - // console.log(currY, currHeight); currY += currHeight; overlay.actualY = y; overlay.height = currHeight; @@ -159,7 +158,7 @@ class OverlayManager implements OverlayManagerClass { overlayHolder.appendChild(infoOverlay); updateHeight(overlay, y, infoOverlay.getBoundingClientRect().height); }; - rowItems.forEach((rowItem, index) => { + let updateRow = (rowItem, index) => { const overlay = find(this.openOverlays, (o) => o.index === index); const overlayEl = rowItem.nextElementSibling.firstElementChild as SVGGElement; this.realignRow(rowItem, currY); @@ -176,15 +175,24 @@ class OverlayManager implements OverlayManagerClass { return; // not open } if (overlayEl) { - updateHeight(overlay, overlay.defaultY + currY, overlay.height); - const fo = overlayEl.querySelector("foreignObject"); const bg = overlayEl.querySelector(".info-overlay-bg"); - fo.setAttribute("y", overlay.actualY.toString()); + const fo = overlayEl.querySelector("foreignObject"); + const btnRect = overlayEl.querySelector(".info-overlay-close-btn rect"); + const btnText = overlayEl.querySelector(".info-overlay-close-btn text"); + // bg.setAttribute("transform", `translate(0, ${currY})`); + // btnText.setAttribute("transform", `translate(0, ${currY})`); + // btnRect.setAttribute("transform", `translate(0, ${currY})`); + updateHeight(overlay, overlay.defaultY + currY, overlay.height); + // needs updateHeight bg.setAttribute("y", overlay.actualY.toString()); + fo.setAttribute("y", overlay.actualY.toString()); + btnText.setAttribute("y", overlay.actualY.toString()); + btnRect.setAttribute("y", overlay.actualY.toString()); return; } addNewOverlay(rowItem.nextElementSibling as SVGGElement, overlay); - }); + }; + rowItems.forEach(updateRow); } }; export { diff --git a/src/ts/waterfall/row/svg-row.ts b/src/ts/waterfall/row/svg-row.ts index bff39df2..4b50c5d2 100644 --- a/src/ts/waterfall/row/svg-row.ts +++ b/src/ts/waterfall/row/svg-row.ts @@ -31,7 +31,8 @@ export function createRow(context: Context, index: number, const rowHeight = rectData.height; const leftColumnWith = context.options.leftColumnWith; let rowItem = svg.newA(entry.responseDetails.rowClass); - rowItem.setAttribute("href", "javascript:void(0)"); + rowItem.setAttribute("tabindex", "0"); + rowItem.setAttribute("xlink:href", "javascript:void(0)"); let leftFixedHolder = svg.newSvg("left-fixed-holder", { "width": `${leftColumnWith}%`, "x": "0", @@ -95,8 +96,9 @@ export function createRow(context: Context, index: number, onDetailsOverlayShow(evt); }); rowItem.addEventListener("keydown", (evt: KeyboardEvent) => { - // on enter - if (evt.which === 32) { + // space on enter + if (evt.which === 32 || evt.which === 13) { + evt.preventDefault(); return onDetailsOverlayShow(evt); }