anki/ts/components/WithDropdown.svelte
Henrik Giesel a981e56008
Improved add-on extension API (#1626)
* Add componentHook functionality

* Register package NoteEditor

* Rename OldEditorAdapter to NoteEditor

* Expose instances in component-hook as well

* Rename NoteTypeButtons to NotetypeButtons

* Move PreviewButton initialization to BrowserEditor.svelte

* Remove focusInRichText

- Same thing can be done by inspecting activeInput

* Satisfy formatter

* Fix remaining rebase issues

* Add .bazel to .prettierignore

* Rename currentField and activeInput to focused{Field,Input}

* Move identifier to lib and registration to sveltelib

* Fix Dynamic component insertion

* Simplify editingInputIsRichText

* Give extra warning in svelte/svelte.ts

- This was caused by doing a rename of a files, that only differed in
  case: NoteTypeButtons.svelte to NotetypeButtons.svelte
- It was quite tough to figure out, and this console.log might make it
  easier if it ever happens again

* Change signature of contextProperty

* Add ts/typings for add-on definition files

* Add Anki types in typings/common/index.d.ts

* Export without .svelte suffix

It conflicts with how Svelte types its packages

* Fix left over .svelte import from editor.py

* Rename NoteTypeButtons to unrelated to ensure case-only rename

* Rename back to NotetypeButtons.svelte

* Remove unused component-hook.ts, Fix typing in lifecycle-hooks

* Merge runtime-require and register-package into one file

+ Give some preliminary types to require

* Rename uiDidLoad to loaded

* Fix eslint / svelte-check

* Rename context imports to noteEditorContext

* Fix import name mismatch

- I wonder why these issues are not caught by svelte-check?

* Rename two missed usages of uiDidLoad

* Fix ButtonDropdown from having wrong border-radius

* Uniformly rename libraries to packages

- I don't have a strong opinion on whether to name them libraries or
  packages, I just think we should have a uniform name.
- JS/TS only uses the terms "module" and "namespace", however `package`
  is a reserved keyword for future use, whereas `library` is not.

* Refactor registration.ts into dynamic-slotting

- This is part of an effort to refactor the dynamic slotting (extending
  buttons) functionality out of components like ButtonGroup.

* Remove dynamically-slottable logic from ButtonToolbar

* Use DynamicallySlottable in editor-toolbar

* Fix no border radius on indentation button dropdown

* Fix AddonButtons

* Remove Item/ButtonGroupItem in deck-options, where it's not necessary

* Remove unnecessary uses of Item and ButtonGroupItem

* Fix remaining tests

* Fix relative imports

* Revert change return value of remapBinToSrcDir to ./bazel/out...

* Remove typings directory

* Adjust comments for dynamic-slottings
2022-02-03 14:52:11 +10:00

113 lines
2.9 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import Dropdown from "bootstrap/js/dist/dropdown";
import { setContext, onDestroy } from "svelte";
import { dropdownKey } from "./context-keys";
export let autoOpen = false;
export let autoClose: boolean | "inside" | "outside" = true;
export let toggleOpen = true;
export let drop: "down" | "up" = "down";
export let align: "start" | "end" | "auto" = "auto";
let placement: string;
$: {
let blockPlacement: string;
switch (drop) {
case "down":
blockPlacement = "bottom";
break;
case "up":
blockPlacement = "top";
break;
}
let inlinePlacement: string;
switch (align) {
case "start":
case "end":
inlinePlacement = `-${align}`;
break;
default:
inlinePlacement = "";
break;
}
placement = `${blockPlacement}${inlinePlacement}`;
}
$: dropClass = `drop${drop}`;
export let skidding = 0;
export let distance = 2;
setContext(dropdownKey, {
dropdown: true,
"data-bs-toggle": "dropdown",
});
let dropdown: Dropdown;
let api: Dropdown & { isVisible: () => boolean };
function isVisible() {
return (dropdown as any)._menu
? (dropdown as any)._menu.classList.contains("show")
: false;
}
const noop = () => {};
function createDropdown(toggle: HTMLElement): Dropdown {
/* avoid focusing element toggle on menu activation */
toggle.focus = noop;
if (!toggleOpen) {
/* do not open on clicking toggle */
toggle.addEventListener = noop;
}
dropdown = new Dropdown(toggle, {
autoClose,
offset: [skidding, distance],
popperConfig: { placement },
} as any);
if (autoOpen) {
dropdown.show();
}
api = {
show: dropdown.show.bind(dropdown),
// TODO this is quite confusing, but having a noop function fixes Bootstrap
// in the deck-options when not including Bootstrap via <script />
toggle: () => {},
/* toggle: dropdown.toggle.bind(dropdown), */
hide: dropdown.hide.bind(dropdown),
update: dropdown.update.bind(dropdown),
dispose: dropdown.dispose.bind(dropdown),
isVisible,
} as any;
return api;
}
onDestroy(() => dropdown?.dispose());
</script>
<div class="with-dropdown {dropClass}">
<slot {createDropdown} dropdownObject={api} />
</div>
<style lang="scss">
div {
display: contents;
}
</style>