Close #822 support custom keyboard actions

mistic100 · Jan 5, 2023 · 11bccff · 11bccff
1 parent e06b426
commit 11bccff
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git 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
@@ -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',
+                            });
+                        }
+                    },
+                },
             });
         </script>
     </body>

diff --git 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<string, ACTIONS>;
+    keyboard?: boolean | Record<string, ACTIONS | ((viewer: Viewer) => void)>;
 };
 
 export type DeprecatedViewerConfig = 
@@ -408,7 +408,7 @@ export type ParsedViewerConfig = Omit<
     fisheye?: number;
     requestHeaders?: (url: string) => Record<string, string>;
     navbar?: Array<string | NavbarCustomButton>;
-    keyboard?: Record<string, ACTIONS>;
+    keyboard?: Record<string, ACTIONS | ((viewer: Viewer) => void)>;
 };
 
 /**

diff --git 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();
             }