anki/ts/sveltelib/portal.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

32 lines
707 B
TypeScript

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/**
* @param element: The element to be moved.
* @param target DOM Element where element is going to be appended
*/
function portal(
element: HTMLElement,
targetElement: Element = document.body,
): { update(target: Element): void; destroy(): void } {
let target: Element = targetElement;
async function update(newTarget: Element) {
target = newTarget;
target.append(element);
}
function destroy() {
element.remove();
}
update(target);
return {
update,
destroy,
};
}
export default portal;