72 lines
1.6 KiB
Svelte
72 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import browser from "webextension-polyfill";
|
|
import { setContext } from "svelte";
|
|
import VirtualList from "@sveltejs/svelte-virtual-list/VirtualList.svelte";
|
|
import Flashcard from "./Flashcard.svelte";
|
|
/*
|
|
const onCardChange = (card: Flashcard, change: "added" | "removed") => {
|
|
switch(change){
|
|
case "added":
|
|
cards.unshift(card);
|
|
cards = cards
|
|
return
|
|
case "removed":
|
|
cards = cards.filter((c) => c.id == card.id);
|
|
default:
|
|
}
|
|
console.log(card,change);
|
|
}
|
|
*/
|
|
|
|
let cards: IDBValidKey[] = [];
|
|
const flashcardDBPromise = browser.runtime
|
|
.getBackgroundPage()
|
|
.then((bp) => bp.flashcardDB);
|
|
setContext("flashcardDB", flashcardDBPromise);
|
|
(async () => {
|
|
const flashcardDB = await flashcardDBPromise;
|
|
cards = await flashcardDB.getAllKeys();
|
|
//flashcardDB.addChangeCallback(onCardChange);
|
|
//window.addEventListener("beforeunload", () => flashcardDB.removeChangeCallback(onCardChange));
|
|
})();
|
|
</script>
|
|
|
|
<main>
|
|
<div class="list-container">
|
|
<VirtualList items={cards} let:item>
|
|
<Flashcard cardID={item} />
|
|
</VirtualList>
|
|
</div>
|
|
</main>
|
|
|
|
<style lang="scss">
|
|
@use "../color_scheme.scss";
|
|
|
|
:global(html, body) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin: 0;
|
|
background-color: var(--background-color-4);
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 600px;
|
|
max-width: 100vw;
|
|
min-height: 94vh;
|
|
|
|
background-color: var(--background-color-1);
|
|
padding: 1em;
|
|
|
|
color: var(--text-color-1);
|
|
}
|
|
|
|
.list-container {
|
|
background-color: var(--background-color-2);
|
|
height: 100%;
|
|
}
|
|
</style>
|