anki/ts/components/WithDropdown.svelte
Henrik Giesel 24af5bada3 More uniform file naming
kebap-case for .ts, .scss, .html, and directories
2021-07-01 12:24:16 +02:00

39 lines
899 B
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import Dropdown from "bootstrap/js/dist/dropdown";
import { setContext, onDestroy } from "svelte";
import { dropdownKey } from "./context-keys";
setContext(dropdownKey, {
dropdown: true,
"data-bs-toggle": "dropdown",
});
let dropdown: Dropdown;
const noop = () => {};
function createDropdown(toggle: HTMLElement): Dropdown {
/* avoid focusing element toggle on menu activation */
toggle.focus = noop;
dropdown = new Dropdown(toggle, {} as any);
return dropdown;
}
onDestroy(() => dropdown?.dispose());
</script>
<div class="dropdown">
<slot {createDropdown} />
</div>
<style lang="scss">
div {
display: contents;
}
</style>