GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-25 09:16:38 -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 ButtonGroup from "./ButtonGroup.svelte";
import type { Buttons } from "./types"; import type { Buttons } from "./types";
export let buttons: Buttons = []; export let buttons: Readable<Buttons>;
export let menus: SvelteComponent[]; export let menus: Readable<SvelteComponent[]>;
export let disabled: Readable<boolean>;
$: _buttons = $buttons;
$: _menus = $menus;
export let nightMode: boolean; export let nightMode: boolean;
export let disabled: Readable<boolean> = false;
export let size: number = 30; export let size: number = 30;
setContext(nightModeKey, nightMode); setContext(nightModeKey, nightMode);
@ -42,12 +45,12 @@
<div style={`--toolbar-size: ${size}px`}> <div style={`--toolbar-size: ${size}px`}>
<div> <div>
{#each menus as menu} {#each _menus as menu}
<svelte:component this={menu.component} {...menu} /> <svelte:component this={menu.component} {...menu} />
{/each} {/each}
</div> </div>
<nav> <nav>
<ButtonGroup {buttons} /> <ButtonGroup buttons={_buttons} />
</nav> </nav>
</div> </div>

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

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

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

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

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

@ -13,8 +13,8 @@
let buttonRef: HTMLButtonElement; let buttonRef: HTMLButtonElement;
const disabledStore = getContext(disabledKey); const disabled = getContext(disabledKey);
$: disabled = $disabledStore; $: _disabled = $disabled;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef })); onMount(() => dispatch("mount", { button: buttonRef }));
@ -89,7 +89,7 @@
{title} {title}
class:active class:active
tabindex="-1" tabindex="-1"
{disabled} disabled={_disabled}
on:click={onClick} on:click={onClick}
on:mousedown|preventDefault> on:mousedown|preventDefault>
<span class="p-1"><slot /></span> <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 { class EditorToolbar extends HTMLElement {
component?: SvelteComponent; component?: SvelteComponent;
buttons = defaultButtons; buttons = writable(defaultButtons);
menus = defaultMenus; menus = writable(defaultMenus);
disabled? = writable(false); disabled? = writable(false);
connectedCallback(): void { connectedCallback(): void {
@ -38,19 +38,12 @@ class EditorToolbar extends HTMLElement {
}); });
} }
update(): void {
this.component?.$set({
button: this.buttons,
menus: this.menus,
});
}
enableButtons(): void { enableButtons(): void {
this.disabled?.set(false); this.disabled!.set(false);
} }
disableButtons(): void { disableButtons(): void {
this.disabled?.set(true); this.disabled!.set(true);
} }
} }