diff --git a/packages/tecrock-table/src/components/report-item/report-item.tsx b/packages/tecrock-table/src/components/report-item/report-item.tsx index 806b1e11..c54b58db 100644 --- a/packages/tecrock-table/src/components/report-item/report-item.tsx +++ b/packages/tecrock-table/src/components/report-item/report-item.tsx @@ -15,39 +15,40 @@ import classMap from "../table.scss"; // A method to execute any JavaScript code in the report-item iframe. This is necessary to set up table scaling for // narrow views and to enable snapshot clicking. This approach is quite limited, but it suffices for our needs in // this specific case. -const reportItemScript = - ""; +function runInReportItem() { + // Setup table scaling + const table = document.body.getElementsByTagName("table")[0]; + if (!table) { + return; + } + const tableParent = table.parentElement; + if (!tableParent) { + return; + } + if (table.offsetWidth > tableParent.offsetWidth) { + // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down. + const originalWidth = table.offsetWidth; + const originalHeight = table.offsetHeight; + const scale = tableParent.offsetWidth / (originalWidth + 1); + table.style.transform = `scale(${scale})`; + table.style.width = tableParent.style.width = `${scale * originalWidth}px`; + table.style.height = tableParent.style.height = (scale * originalHeight) + "px"; + tableParent.style.overflow = "hidden"; + } + // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report + // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to + // reimplement it here. + const snapshots = document.body.getElementsByTagName("img"); + for (let i = 0; i < snapshots.length; i++) { + const snapshot = snapshots[i]; + snapshot.addEventListener("click", () => { + window.open(snapshot.src, "_blank"); + }); + } +} +// runInReportItem.name is necessary (rather than just using runInReportItem()) because the webpack optimizer might +// change function name or even inline the function, which would break the code. +const reportItemScript = "`; export const reportItemHandler: IGetReportItemAnswerHandler = request => { const {platformUserId, version, itemsType} = request;