Kolibry

Configure Shortcuts

Environment: client
This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Getting started

Create ./setup/shortcuts.ts with the following content:

import type { NavOperations, ShortcutOptions } from '@kolibry/types'
import { defineShortcutsSetup } from '@kolibry/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base, // keep the existing shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})

With the setup, you can provide the custom setting for shortcuts mentioned in Navigation. The above configuration binds next animation or slide to enter and previous animation or slide to backspace.

The configuration function receives an object with some navigation methods, and returns an array containing some shortcut configuration. Refer to the type definitions for more details.

Advanced key binding

The key type only allows for strings, but you can still bind multiple keys by using following convention:

import type { NavOperations, ShortcutOptions } from '@kolibry/types'
import { defineShortcutsSetup } from '@kolibry/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base,
    {
      key: 'ShiftLeft+ArrowRight',
      fn: () => nav.next(),
      autoRepeat: true,
    }
  ]
})

Advanced navigation features

The nav navigation operations allows you to access some functionalities than basic next slide or previous slide. See the following for use-cases:

import { defineShortcutsSetup, NavOperations } from '@kolibry/types'

export default defineShortcutsSetup((nav: NavOperations) => {
  return [
    {
      key: 'e',
      
      // Set the `e` keyboard shortcut to be used as a bookmark
      // or quick-access of sorts, to navigate specifically to
      // slide number 42
      fn: () => nav.go(42),
      autoRepeat: true,
    }
  ]
})

Refer to useMagicKeys | VueUse for more details about key pressed event.