diff --git a/docs/guide/config.md b/docs/guide/config.md index 2bbd344cc..994e43286 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -333,6 +333,25 @@ keyboard: { } ``` -Enable and configure keyboard navigation in fullscreen. It is a map defining key code->action. Set to `false` to disable. +Enable and configure keyboard navigation in fullscreen. It is a map defining key code->action. Set to `false` to disable. (all the available actions are listed above) -(all the available actions are listed above) +Since 5.0.2 you can configure an arbitrary callback to any key. + +```js +keyboard: { + 'h': (viewer) => { + if (viewer.panel.isVisible('help')) { + viewer.panel.hide(); + } else { + viewer.panel.show({ + id: 'help', + content: 'Help content', + }); + } + }, +}, +``` + +::: tip More keyboard controls +To enable the keyboard outside fullscreen view, call `startKeyboardControl()` after init. To make more complex interactions, listen to the `key-press` event. +::: diff --git a/examples/equirectangular.html b/examples/equirectangular.html index d2c28f697..9dd5c2beb 100644 --- a/examples/equirectangular.html +++ b/examples/equirectangular.html @@ -104,6 +104,19 @@ 'caption', 'fullscreen', ], + keyboard: { + ...PhotoSphereViewer.DEFAULTS.keyboard, + 'h': (viewer) => { + if (viewer.panel.isVisible('help')) { + viewer.panel.hide(); + } else { + viewer.panel.show({ + id: 'help', + content: 'Help content', + }); + } + }, + }, }); diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts index 099bf60b3..33ce94f8b 100644 --- a/packages/core/src/model.ts +++ b/packages/core/src/model.ts @@ -374,7 +374,7 @@ export type ViewerConfig = { loadError: string; [K: string]: string; }; - keyboard?: boolean | Record; + keyboard?: boolean | Record void)>; }; export type DeprecatedViewerConfig = @@ -408,7 +408,7 @@ export type ParsedViewerConfig = Omit< fisheye?: number; requestHeaders?: (url: string) => Record; navbar?: Array; - keyboard?: Record; + keyboard?: Record void)>; }; /** diff --git a/packages/core/src/services/EventsHandler.ts b/packages/core/src/services/EventsHandler.ts index 9c3734a89..7bc46a647 100644 --- a/packages/core/src/services/EventsHandler.ts +++ b/packages/core/src/services/EventsHandler.ts @@ -163,12 +163,16 @@ export class EventsHandler extends AbstractService { return; } - if (!this.state.keyboardEnabled) { + if (!this.state.keyboardEnabled || !this.config.keyboard) { return; } const action = this.config.keyboard[e.key]; - if (action && !this.keyHandler.pending) { + + if (typeof action === 'function') { + action(this.viewer); + } + else if (action && !this.keyHandler.pending) { if (action !== ACTIONS.ZOOM_IN && action !== ACTIONS.ZOOM_OUT) { this.viewer.stopAll(); }