GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-06 12:47:11 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

sandbox iframe and use ts-page

Browse source
This commit is contained in:
Luc Mcgrady 2025-10-01 13:44:34 +01:00
parent 654701da4d
commit 986a56993a
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
6 changed files with 49 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
build/configure/src/web.rs
View file

@ -228,6 +228,17 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
":sveltekit"
],
)?;
build_page(
"reviewer-inner",
true,
inputs![
//
":ts:lib",
":ts:components",
":sass",
":sveltekit"
],
)?;
Ok(())
}

1
qt/aqt/mediasrv.py
View file

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

30
ts/routes/reviewer-inner/+page.svelte
View file

@ -1,30 +0,0 @@
<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>

26
ts/routes/reviewer-inner/index.ts Normal file
View file

@ -0,0 +1,26 @@
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;
}
});

3
ts/routes/reviewer/Reviewer.svelte
View file

@ -8,10 +8,11 @@
<div id="qa" class={$cardClass}>
<iframe
src="/reviewer-inner"
src="/_anki/pages/reviewer-inner.html"
bind:this={iframe}
title="card"
frameborder="0"
sandbox="allow-scripts"
></iframe>
</div>

13
ts/routes/reviewer/reviewer.ts
View file

@ -6,7 +6,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
const cardClass = writable("");
function updateHtml(htmlString) {
iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
iframe.contentWindow?.postMessage({ type: "html", value: htmlString }, "*");
}
function showQuestion(q, a, cc) {
@ -16,7 +16,14 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
preloadAnswerImages(a);
}
addEventListener("message", (e) => {
function onReady() {
bridgeCommand("bottomReady");
iframe.contentWindow?.postMessage({ type: "nightMode", value: true }, "*");
}
iframe?.addEventListener("load", onReady)
/* 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,
@ -29,7 +36,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
console.warn(`Unknown message type: ${e.data.type}`);
break;
}
});
}); */
globalThis._showAnswer = updateHtml;
globalThis._showQuestion = showQuestion;