Use sveltekit

This commit is contained in:
Luc Mcgrady 2025-08-25 23:32:33 +01:00
parent 8c0d1d1720
commit f4eb7e0ff9
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
6 changed files with 73 additions and 89 deletions

View file

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

View file

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

View file

@ -355,7 +355,7 @@ class Reviewer:
self.web.allow_drops = True
self.web.eval("_blockDefaultDragDropBehavior();")
# show answer / ease buttons
self.bottom.web.load_ts_page("reviewer-bottom")
self.bottom.web.load_sveltekit_page("reviewer-bottom")
# Showing the question
##########################################################################
@ -848,7 +848,7 @@ timerStopped = false;
else:
maxTime = 0
self.bottom.web.eval(
"anki.showQuestion(%s,%d);" % (json.dumps(middle), maxTime)
"_showQuestion(%s,%d);" % (json.dumps(middle), maxTime)
)
def _showEaseButtons(self) -> None:
@ -858,7 +858,7 @@ timerStopped = false;
middle = self._answerButtons()
conf = self.mw.col.decks.config_dict_for_deck_id(self.card.current_deck_id())
self.bottom.web.eval(
f"anki.showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
f"_showAnswer({json.dumps(middle)}, {json.dumps(conf['stopTimerOnAnswer'])});"
)
def _remaining(self) -> str:

View file

@ -0,0 +1,69 @@
<script lang="ts">
import { writable } from "svelte/store";
import ReviewerBottom from "./ReviewerBottom.svelte";
import "./index.scss"
let timerStopped = false;
let maxTime = 0;
function updateTime(): void {
const timeNode = document.getElementById("time");
if (maxTime === 0) {
timeNode.textContent = "";
return;
}
globalThis.time = Math.min(maxTime, globalThis.time);
const m = Math.floor(globalThis.time / 60);
const s = globalThis.time % 60;
const sStr = String(s).padStart(2, "0");
const timeString = `${m}:${sStr}`;
if (maxTime === time) {
timeNode.innerHTML = `<font color=red>${timeString}</font>`;
} else {
timeNode.textContent = timeString;
}
}
let intervalId: number | undefined;
let answerButtons = writable<AnswerButtonInfo[]>([])
function _showQuestion(txt: string, maxTime_: number): void {
_showAnswer([]);
globalThis.time = 0;
maxTime = maxTime_;
// updateTime();
if (intervalId !== undefined) {
clearInterval(intervalId);
}
intervalId = setInterval(function() {
if (!timerStopped) {
globalThis.time += 1;
//updateTime();
}
}, 1000);
}
function _showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
console.log(info)
answerButtons.set(info);
timerStopped = stopTimer;
}
globalThis._showQuestion = _showQuestion;
globalThis._showAnswer = _showAnswer;
function selectedAnswerButton(): string | undefined {
const node = document.activeElement as HTMLElement;
if (!node) {
return;
}
return node.dataset.ease;
}
</script>
<ReviewerBottom {answerButtons}></ReviewerBottom>

View file

@ -1,74 +0,0 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
/* eslint
@typescript-eslint/no-unused-vars: "off",
*/
import { mount } from "svelte";
import "./index.scss";
import ReviewerBottom from "./index.svelte";
import { writable } from "svelte/store";
let time: number; // set in python code
let timerStopped = false;
let maxTime = 0;
function updateTime(): void {
const timeNode = document.getElementById("time");
if (maxTime === 0) {
timeNode.textContent = "";
return;
}
time = Math.min(maxTime, time);
const m = Math.floor(time / 60);
const s = time % 60;
const sStr = String(s).padStart(2, "0");
const timeString = `${m}:${sStr}`;
if (maxTime === time) {
timeNode.innerHTML = `<font color=red>${timeString}</font>`;
} else {
timeNode.textContent = timeString;
}
}
let intervalId: number | undefined;
let answerButtons = writable<AnswerButtonInfo[]>([])
export function showQuestion(txt: string, maxTime_: number): void {
showAnswer([]);
time = 0;
maxTime = maxTime_;
updateTime();
if (intervalId !== undefined) {
clearInterval(intervalId);
}
intervalId = setInterval(function() {
if (!timerStopped) {
time += 1;
updateTime();
}
}, 1000);
}
export function showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
answerButtons.set(info);
timerStopped = stopTimer;
}
function selectedAnswerButton(): string {
const node = document.activeElement as HTMLElement;
if (!node) {
return;
}
return node.dataset.ease;
}
mount(
ReviewerBottom,
{ target: document.body, props: {answerButtons} },
);