anki/ts/components/ButtonGroup.svelte

112 lines
3.6 KiB
Svelte
Raw Normal View History

2021-04-15 15:59:52 +02:00
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import ButtonGroupItem from "./ButtonGroupItem.svelte";
import { setContext } from "svelte";
import { writable } from "svelte/store";
import { buttonGroupKey } from "./contextKeys";
import type { Identifier } from "./identifier";
import { insert, add } from "./identifier";
2021-05-06 01:22:55 +02:00
import type { ButtonRegistration } from "./buttons";
import { ButtonPosition } from "./buttons";
import type { SvelteComponent } from "./registration";
import { makeInterface } from "./registration";
2021-04-16 03:10:39 +02:00
export let id: string | undefined = undefined;
let className: string = "";
export { className as class };
export let size: number | undefined = undefined;
export let wrap: boolean | undefined = undefined;
$: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
let buttonWrap: string;
$: if (wrap === undefined) {
buttonWrap = "";
} else {
buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
}
$: style = buttonSize + buttonWrap;
function makeRegistration(): ButtonRegistration {
const detach = writable(false);
2021-05-06 01:22:55 +02:00
const position = writable(ButtonPosition.Standalone);
return { detach, position };
}
const { registerComponent, items, dynamicItems, getDynamicInterface } =
makeInterface(makeRegistration);
$: for (const [index, item] of $items.entries()) {
if ($items.length === 1) {
item.position.set(ButtonPosition.Standalone);
} else if (index === 0) {
item.position.set(ButtonPosition.Leftmost);
} else if (index === $items.length - 1) {
item.position.set(ButtonPosition.Rightmost);
} else {
item.position.set(ButtonPosition.Center);
}
}
setContext(buttonGroupKey, registerComponent);
export let api: Record<string, unknown> | undefined = undefined;
let buttonGroupRef: HTMLDivElement;
$: if (api && buttonGroupRef) {
const { addComponent, updateRegistration } =
getDynamicInterface(buttonGroupRef);
const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
addComponent(button, (added, parent) => insert(added, parent, position));
const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
addComponent(button, (added, parent) => add(added, parent, position));
const showButton = (id: Identifier) =>
updateRegistration(({ detach }) => detach.set(false), id);
const hideButton = (id: Identifier) =>
updateRegistration(({ detach }) => detach.set(true), id);
const toggleButton = (id: Identifier) =>
updateRegistration(
({ detach }) => detach.update((old: boolean): boolean => !old),
id
);
Object.assign(api, {
insertButton,
appendButton,
showButton,
hideButton,
toggleButton,
});
}
</script>
<div
bind:this={buttonGroupRef}
{id}
class={`btn-group ${className}`}
{style}
dir="ltr"
role="group"
>
<slot />
{#each $dynamicItems as item}
<ButtonGroupItem id={item[0].id} registration={item[1]}>
<svelte:component this={item[0].component} {...item[0].props} />
</ButtonGroupItem>
{/each}
</div>
<style lang="scss">
div {
flex-wrap: var(--buttons-wrap);
padding: calc(var(--buttons-size) / 10);
margin: 0;
}
</style>