GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

experimental support for extending add-ons screen with Svelte

Browse source
This commit is contained in:
Damien Elmes 2021-04-25 19:24:19 +10:00
parent b485b8cbb9
commit b7747b6a38
4 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
qt/tools/genhooks_gui.py
View file

@ -294,7 +294,12 @@ hooks = [
args=[
"deck_options: aqt.deckoptions.DeckOptionsDialog",
],
doc="Can be used to inject extra options into the config screen",
doc="""Can be used to inject extra options into the config screen.
See the example add-ons at:
https://github.com/ankitects/anki-addons/tree/main/demos/deckoptions_svelte
https://github.com/ankitects/anki-addons/tree/main/demos/deckoptions_raw_html
""",
),
# Filtered deck options
###################

3
ts/deckoptions/Addons.svelte
View file

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let state: DeckOptionsState;
let components = state.addonComponents;
const auxData = state.currentAuxData;
</script>
{#if $components.length}
@ -15,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<h2>Add-ons</h2>
{#each $components as addon}
<svelte:component this={addon.component} {state} {...addon} />
<svelte:component this={addon.component} bind:data={$auxData} {...addon} />
{/each}
</div>
{/if}

5
ts/deckoptions/DeckOptionsPage.svelte
View file

@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { registerShortcut } from "lib/shortcuts";
import type { Writable } from "svelte/store";
import HtmlAddon from "./HtmlAddon.svelte";
import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
export let state: DeckOptionsState;
let addons = state.addonComponents;
@ -18,6 +19,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return state.currentAuxData;
}
export function addSvelteAddon(component: DynamicSvelteComponent): void {
$addons = [...$addons, component];
}
export function addHtmlAddon(html: string, mounted: () => void): void {
$addons = [
...$addons,

11
ts/deckoptions/index.ts
View file

@ -5,6 +5,10 @@ import { getDeckOptionsInfo, DeckOptionsState } from "./lib";
import { setupI18n, ModuleName } from "lib/i18n";
import { checkNightMode } from "lib/nightmode";
import DeckOptionsPage from "./DeckOptionsPage.svelte";
import SpinBox from "./SpinBox.svelte";
import SpinBoxFloat from "./SpinBoxFloat.svelte";
import EnumSelector from "./EnumSelector.svelte";
import CheckBox from "./CheckBox.svelte";
export async function deckOptions(
target: HTMLDivElement,
@ -21,3 +25,10 @@ export async function deckOptions(
props: { state },
});
}
export const deckConfigComponents = {
SpinBox,
SpinBoxFloat,
EnumSelector,
CheckBox,
};