diff --git a/manifest.json b/manifest.json index 9063476..d6d0b78 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "vault-explorer", "name": "Vault Explorer", - "version": "1.1.0", + "version": "1.2.0", "minAppVersion": "1.4.13", "description": "Explore your vault in visual format", "author": "DecafDev", diff --git a/package.json b/package.json index 54607f0..09f2cb2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-vault-explorer", - "version": "1.1.0", + "version": "1.2.0", "description": "Explore your vault in visual format", "main": "main.js", "scripts": { diff --git a/src/focus-utils.ts b/src/focus-utils.ts new file mode 100644 index 0000000..ce8648d --- /dev/null +++ b/src/focus-utils.ts @@ -0,0 +1,24 @@ +export const moveFocus = (direction: "previous" | "next") => { + const focusedEl = document.activeElement; + if (focusedEl instanceof HTMLElement) { + const rootEl = focusedEl.closest('.vault-explorer, .vault-explorer-property-filter-app'); + if (!rootEl) return; + + const inputEls = rootEl.querySelectorAll('a, button, input, select, textarea, [role="button"], [role="link"]') + const focusableEls = Array.from(inputEls).filter(isElementTabble); + const currentIndex = focusableEls.indexOf(focusedEl); + + const newIndex = direction === "previous" ? currentIndex - 1 : currentIndex + 1; + if (newIndex >= 0 && newIndex < focusableEls.length) { + (focusableEls[newIndex] as HTMLElement).focus(); + } else if (newIndex > focusableEls.length - 1) { + (focusableEls[0] as HTMLElement).focus(); + } else if (newIndex < 0) { + (focusableEls[focusableEls.length - 1] as HTMLElement).focus(); + } + } + + function isElementTabble(element: Element) { + return element.getAttribute('disabled') == null && element.getAttribute('tabindex') !== '-1'; + } +} diff --git a/src/main.ts b/src/main.ts index 23ee8a2..b8f84f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,6 +14,7 @@ import Logger from 'js-logger'; import { formatMessageForLogger, stringToLogLevel } from './logger'; import { LOG_LEVEL_WARN } from './logger/constants'; import { VaultExplorerPluginSettings_1_0_1 } from './types/types-1.0.1'; +import { moveFocus } from './focus-utils'; export default class VaultExplorerPlugin extends Plugin { settings: VaultExplorerPluginSettings = DEFAULT_SETTINGS; @@ -108,6 +109,15 @@ export default class VaultExplorerPlugin extends Plugin { if (file.extension !== "md") return; EventManager.getInstance().emit("metadata-change", file); })); + + this.registerDomEvent(document, "keydown", (event) => { + if (event.key === "ArrowLeft") { + moveFocus("previous"); + } else if (event.key === "ArrowRight") { + moveFocus("next"); + } + }); + } onunload() { diff --git a/src/svelte/app/components/grid-card.svelte b/src/svelte/app/components/grid-card.svelte index bcd3c22..52151fb 100644 --- a/src/svelte/app/components/grid-card.svelte +++ b/src/svelte/app/components/grid-card.svelte @@ -108,13 +108,16 @@