feat: show info about key in chord manager and layout, resolves #51, resolves #52

This commit is contained in:
2023-12-02 20:42:33 +01:00
parent 20705de069
commit 2ad0ef3b6d
3 changed files with 16 additions and 13 deletions

View File

@@ -1,12 +1,12 @@
import type { Action } from "svelte/action"
import type {Action} from "svelte/action"
import tippy from "tippy.js"
import type { SvelteComponent } from "svelte"
import type {SvelteComponent} from "svelte"
import Tooltip from "$lib/components/Tooltip.svelte"
import hotkeys from "hotkeys-js"
export const action: Action<HTMLElement, { title?: string; shortcut?: string }> = (
node: HTMLElement,
{ title, shortcut },
export const action: Action<Element, {title?: string; shortcut?: string}> = (
node: Element,
{title, shortcut},
) => {
let component: SvelteComponent | undefined
const tooltip = tippy(node, {
@@ -15,8 +15,8 @@ export const action: Action<HTMLElement, { title?: string; shortcut?: string }>
animation: "fade",
onShow(instance) {
component ??= new Tooltip({
target: instance.popper.querySelector(".tippy-content") as HTMLElement,
props: { title, shortcut },
target: instance.popper.querySelector(".tippy-content") as Element,
props: {title, shortcut},
})
},
onHidden() {
@@ -25,8 +25,8 @@ export const action: Action<HTMLElement, { title?: string; shortcut?: string }>
},
})
if (shortcut) {
hotkeys(shortcut, function(keyboardEvent) {
if (shortcut && node instanceof HTMLElement) {
hotkeys(shortcut, function (keyboardEvent) {
keyboardEvent.preventDefault()
node.click()
})