anki/ts/sveltelib/closing-keyup.ts
Henrik Giesel 88217c5e7d
Replace (some) Bootstrap dropdowns with Floating UI (#1695)
* Implement a first version of WithFloating and Portal

* Add outside slot for Portal

* Execute computePosition from WithFloating

* Set up a first example of new WithFloating with the Latex menu

* Use autoUpdate in WithFloating

* Create sveltelib/position

* Add event-store

* Use event-store in close-on-click

* Implement subscribeToUpdates

* Introduce sass/elevation

* Split close-on-click to closing-click and subscribe-trigger

* Have closing-* stores return a symbol

- This way they act more of an EventEmitter than a store

* Allow passing show store

* Remove styling on float on updatePosition removal

* Implement a nice border for dropdowns

* Apply different border and box-shadow to Popover in dark/light theme

* Fix Ctrl+Shift+T not working

* Satisfy formatters and tests

* Add copyright header

* move copyright header to top (dae)
2022-03-02 14:21:19 +10:00

49 lines
1.3 KiB
TypeScript

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { Readable } from "svelte/store";
import { derived } from "svelte/store";
interface ClosingKeyupArgs {
/**
* Clicking on the reference element should not close.
* The reference should handle this itself.
*/
reference: Node;
floating: Node;
}
/**
* Returns a derived store, which translates `MouseEvent`s into a boolean
* indicating whether they constitue a click that should close `floating`.
*
* @param: Should be an event store wrapping document.click.
*/
function isClosingKeyup(
store: Readable<KeyboardEvent>,
_args: ClosingKeyupArgs,
): Readable<symbol> {
// TODO there needs to be special treatment, whether the keyup happens
// inside the floating element or outside, but I'll defer until we actually
// use this for a popover with an input field
function shouldClose(event: KeyboardEvent) {
if (event.key === "Tab") {
// Allow Tab navigation.
return false;
}
return true;
}
return derived(
store,
(event: KeyboardEvent, set: (value: symbol) => void): void => {
if (shouldClose(event)) {
set(Symbol());
}
},
);
}
export default isClosingKeyup;