GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-25 01:06:35 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Pass in buttons and menus directly as stores

Browse source
This commit is contained in:
Henrik Giesel 2021-04-01 18:36:03 +02:00
parent 8b906100c0
commit 96feba7a3e
5 changed files with 21 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ts/editor-toolbar/EditorToolbar.svelte
View file

@ -6,11 +6,14 @@
import ButtonGroup from "./ButtonGroup.svelte";
import type { Buttons } from "./types";
export let buttons: Buttons = [];
export let menus: SvelteComponent[];
export let buttons: Readable<Buttons>;
export let menus: Readable<SvelteComponent[]>;
export let disabled: Readable<boolean>;
$: _buttons = $buttons;
$: _menus = $menus;
export let nightMode: boolean;
export let disabled: Readable<boolean> = false;
export let size: number = 30;
setContext(nightModeKey, nightMode);
@ -42,12 +45,12 @@
<div style={`--toolbar-size: ${size}px`}>
<div>
{#each menus as menu}
{#each _menus as menu}
<svelte:component this={menu.component} {...menu} />
{/each}
</div>
<nav>
<ButtonGroup {buttons} />
<ButtonGroup buttons={_buttons} />
</nav>
</div>

6
ts/editor-toolbar/LabelButton.svelte
View file

@ -20,8 +20,8 @@
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
const disabledStore = getContext(disabledKey);
$: disabled = disables && $disabledStore;
const disabled = getContext(disabledKey);
$: _disabled = disables && $disabled;
</script>
<style lang="scss">
@ -54,7 +54,7 @@
<button
tabindex="-1"
bind:this={buttonRef}
{disabled}
disabled={_disabled}
{id}
class={extendClassName(className)}
{...props}

6
ts/editor-toolbar/SelectButton.svelte
View file

@ -27,8 +27,8 @@
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
const disabledStore = getContext(disabledKey);
$: disabled = disables && $disabledStore;
const disabled = getContext(disabledKey);
$: _disabled = disables && $disabled;
</script>
<style lang="scss">
@ -57,7 +57,7 @@
<select
tabindex="-1"
bind:this={buttonRef}
{disabled}
disabled={_disabled}
{id}
class={extendClassName(className)}
{...props}

6
ts/editor-toolbar/SquareButton.svelte
View file

@ -13,8 +13,8 @@
let buttonRef: HTMLButtonElement;
const disabledStore = getContext(disabledKey);
$: disabled = $disabledStore;
const disabled = getContext(disabledKey);
$: _disabled = $disabled;
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
@ -89,7 +89,7 @@
{title}
class:active
tabindex="-1"
{disabled}
disabled={_disabled}
on:click={onClick}
on:mousedown|preventDefault>
<span class="p-1"><slot /></span>

15
ts/editor-toolbar/index.ts
View file

@ -20,8 +20,8 @@ const defaultMenus = [...templateMenus];
class EditorToolbar extends HTMLElement {
component?: SvelteComponent;
buttons = defaultButtons;
menus = defaultMenus;
buttons = writable(defaultButtons);
menus = writable(defaultMenus);
disabled? = writable(false);
connectedCallback(): void {
@ -38,19 +38,12 @@ class EditorToolbar extends HTMLElement {
});
}
update(): void {
this.component?.$set({
button: this.buttons,
menus: this.menus,
});
}
enableButtons(): void {
this.disabled?.set(false);
this.disabled!.set(false);
}
disableButtons(): void {
this.disabled?.set(true);
this.disabled!.set(true);
}
}