reviewer-inner poc

This commit is contained in:
Luc Mcgrady 2025-09-28 01:47:30 +01:00
parent 5998aa913d
commit 654701da4d
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
5 changed files with 54 additions and 22 deletions

View file

@ -335,6 +335,7 @@ def is_sveltekit_page(path: str) -> bool:
"import-page",
"image-occlusion",
"reviewer",
"reviewer-inner",
]

View file

@ -0,0 +1,30 @@
<script lang="ts">
import "../../reviewer/reviewer.scss";
addEventListener("message", (e) => {
switch (e.data.type) {
case "html":
document.body.innerHTML = e.data.value;
break;
case "nightMode":
// This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
// I will probably use #night-mode in the url.
const root = document.querySelector("html")!;
const nightMode = e.data.value;
if (e.data.value) {
root.classList.add("night-mode");
} else {
root.classList.remove("night-mode");
}
document.body.className = nightMode ? "nightMode card" : "card";
root.className = nightMode ? "night-mode" : "";
root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
break;
default:
console.warn(`Unknown message type: ${e.data.type}`);
break;
}
});
window.parent.postMessage({ type: "ready" });
</script>

View file

@ -7,7 +7,12 @@
</script>
<div id="qa" class={$cardClass}>
<iframe bind:this={iframe} title="card" frameborder="0"></iframe>
<iframe
src="/reviewer-inner"
bind:this={iframe}
title="card"
frameborder="0"
></iframe>
</div>
<style lang="scss">

View file

@ -77,11 +77,6 @@ export function setupBottomBar() {
}
*/
// TODO This should probably be a "ready" command now that it is part of the actual reviewer,
// Currently this depends on this component mounting after the reviewer which it should but seems hacky.
// Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
bridgeCommand("bottomReady");
return {
answerButtons,
remaining,

View file

@ -1,26 +1,12 @@
import { bridgeCommand } from "@tslib/bridgecommand";
import { writable } from "svelte/store";
import { isNightMode } from "../../html-filter/helpers";
import { preloadAnswerImages } from "../../reviewer/images";
export function setupReviewer(iframe: HTMLIFrameElement) {
const cardClass = writable("");
function updateHtml(htmlString) {
if (iframe?.contentDocument) {
const nightMode = isNightMode();
iframe.contentDocument.body.innerHTML = htmlString;
iframe.contentDocument.head.innerHTML = document.head.innerHTML;
iframe.contentDocument.body.className = nightMode
? "nightMode card"
: "card";
const root = iframe.contentDocument.querySelector("html")!;
root.className = nightMode
? "night-mode"
: "";
root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
// @ts-ignore
iframe.contentDocument.pycmd = bridgeCommand;
}
iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
}
function showQuestion(q, a, cc) {
@ -30,6 +16,21 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
preloadAnswerImages(a);
}
addEventListener("message", (e) => {
switch (e.data.type) {
case "ready":
// TODO This should probably be a "ready" command now that it is part of the actual reviewer,
// Currently this depends on the reviewer component mounting after the bottom-reviewer which it should but seems hacky.
// Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
bridgeCommand("bottomReady");
iframe.contentWindow?.postMessage({ type: "nightMode", value: true });
break;
default:
console.warn(`Unknown message type: ${e.data.type}`);
break;
}
});
globalThis._showAnswer = updateHtml;
globalThis._showQuestion = showQuestion;