From 9683fe887d0143ad01a4f39553277e7f17005f02 Mon Sep 17 00:00:00 2001 From: pjanik Date: Fri, 26 Jan 2024 22:12:05 +0900 Subject: [PATCH 1/4] feat: scale down the table in the Question Details view, allow teachers to enlarge snapshots [PT-186921649] [PT-186921720] --- .../components/report-item/report-item.tsx | 51 +++++++++++++++++-- .../tecrock-table/src/components/table.scss | 1 + .../tecrock-table/src/components/table.tsx | 4 +- 3 files changed, 49 insertions(+), 7 deletions(-) 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 1354d635..73d895cc 100644 --- a/packages/tecrock-table/src/components/report-item/report-item.tsx +++ b/packages/tecrock-table/src/components/report-item/report-item.tsx @@ -12,6 +12,45 @@ import inlineCss from "../table.inline.scss"; // used to replace class names in the `inlineCss` file. 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 = + ""; + export const reportItemHandler: IGetReportItemAnswerHandler = request => { const {platformUserId, version, itemsType} = request; @@ -22,11 +61,13 @@ export const reportItemHandler: IGetReportItemAnswerHandler, - inlineCss, - classMap - ); + const htmlWithInlineStyles = + reportItemScript + // stringified script tag + renderToStringWithCss( + , + inlineCss, + classMap + ); items.push({type: "html", html: htmlWithInlineStyles}); sendReportItemAnswer({version, platformUserId, items, itemsType}); } else { diff --git a/packages/tecrock-table/src/components/table.scss b/packages/tecrock-table/src/components/table.scss index ae1b634f..99ad6939 100644 --- a/packages/tecrock-table/src/components/table.scss +++ b/packages/tecrock-table/src/components/table.scss @@ -11,6 +11,7 @@ table { border-collapse: collapse; table-layout: auto; + transform-origin: top left; td, th { border: 0.5px solid #979797; diff --git a/packages/tecrock-table/src/components/table.tsx b/packages/tecrock-table/src/components/table.tsx index 8add2cde..ae30dec2 100644 --- a/packages/tecrock-table/src/components/table.tsx +++ b/packages/tecrock-table/src/components/table.tsx @@ -51,14 +51,14 @@ export const Table: React.FC = ({ interactiveState, handleExpandSnapshot planetViewSnapshot &&
Planet view snapshot - { handleExpandSnapshot && } +
} { crossSectionSnapshot &&
Cross-section snapshot - { handleExpandSnapshot && } +
} From ca62df01b5f7857efcbfe08944ee1cc932f81ea3 Mon Sep 17 00:00:00 2001 From: pjanik Date: Mon, 29 Jan 2024 22:32:06 +0900 Subject: [PATCH 2/4] fix: fix spacing in rock diagrams [PT-185992671] --- .../tecrock-simulation/src/components/keys/rock-types.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/tecrock-simulation/src/components/keys/rock-types.scss b/packages/tecrock-simulation/src/components/keys/rock-types.scss index 34963b50..be993009 100644 --- a/packages/tecrock-simulation/src/components/keys/rock-types.scss +++ b/packages/tecrock-simulation/src/components/keys/rock-types.scss @@ -127,6 +127,9 @@ .selectedRockDiagram { padding: 5px 0; text-align: center; + svg + svg { + margin-top: 4px; + } } .selectedRockNotes { width: 248px; From 73c54e4e8a970ac78481e4519dc02f89e4ec82eb Mon Sep 17 00:00:00 2001 From: pjanik Date: Mon, 29 Jan 2024 23:41:44 +0900 Subject: [PATCH 3/4] fix: fix report-item layout script timing issues [PT-186921649] --- .../components/report-item/report-item.tsx | 68 ++++++++++--------- 1 file changed, 35 insertions(+), 33 deletions(-) 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 73d895cc..806b1e11 100644 --- a/packages/tecrock-table/src/components/report-item/report-item.tsx +++ b/packages/tecrock-table/src/components/report-item/report-item.tsx @@ -17,37 +17,35 @@ import classMap from "../table.scss"; // this specific case. const reportItemScript = ""; @@ -62,12 +60,16 @@ export const reportItemHandler: IGetReportItemAnswerHandler, inlineCss, classMap - ); + ) + + // Add a stringified script tag to the end of the HTML string. It's important to do it after the closing body tag, + // because otherwise the script will be executed before the table is rendered. That way we can avoid using + // DOM mutation observers to detect when the table is rendered or relying on other callbacks or timing tricks. + reportItemScript; + items.push({type: "html", html: htmlWithInlineStyles}); sendReportItemAnswer({version, platformUserId, items, itemsType}); } else { From 61f4cce8f0536f864c09c80310b04f5f325f3c89 Mon Sep 17 00:00:00 2001 From: pjanik Date: Tue, 30 Jan 2024 00:18:52 +0900 Subject: [PATCH 4/4] fix: fix report-item script issue caused by webpack optimizer [PT-186921649] --- .../components/report-item/report-item.tsx | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) 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;