Wagtail client-side components
    Preparing search index...

    Class KeyboardController

    Adds the ability to trigger a button click event using a keyboard shortcut declared on the controlled element.

    <button type="button" data-controller="w-kbd" aria-keyshortcuts="alt+p">Trigger me with alt+p.</button>

    <button type="button" data-controller="w-kbd" data-w-kbd-key-value="[">Trigger me with the <kbd>[</kbd> key.</button>

    <button type="button" data-controller="w-kbd" data-w-kbd-key-value="mod+s">Trigger me with <kbd>ctrl+p</kbd> on Windows or <kbd>cmd+p</kbd> on MacOS.</button>

    <button type="button" data-controller="w-kbd" data-w-kbd-key-value="mod+s" data-w-kbd-scope-value="global">Trigger me globally.</button>

    - use aria-keyshortcuts (when the key string is compatible with Mousetrap's syntax)

    <section type="button" data-controller="w-kbd" data-w-kbd-key-value="[">
      Trigger my button with the <kbd>[</kbd> key.
      <button type="button" id="my-button" data-w-kbd-target="element">My Button</button>
    </section>

    <input type="text" data-controller="w-kbd" data-w-kbd-action-value="focus" data-w-kbd-key-value="x">
      Focus on this input with the <kbd>x</kbd> key.
    </input>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    actionValue context elementTargets keyValue scopeValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    connect disconnect dispatch handleClick handleFocus handleKey initialize keyValueChanged afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns KeyboardController

    Properties

    actionValue: KeyboardAction

    The action to perform when the keyboard shortcut is triggered, uses "click" if not defined.

    context: Context
    elementTargets: HTMLElement[]

    Allow an explicit target to be the element that the keyboard activates instead of the controlled element.

    keyValue: string

    Keyboard shortcut string.

    scopeValue: "" | "global"

    Scope of the keyboard shortcut, defaults to the normal MouseTrap (non-input) scope.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[] = ...
    values: {
        action: { default: string; type: StringConstructor };
        key: { default: string; type: StringConstructor };
        scope: { default: string; type: StringConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      If custom keyboard shortcuts are disabled by user in settings then controller will not be loaded.

      Returns boolean

    Methods

    • Returns void

    • Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Set up the handleKey binding and check for an aria-keyshortcuts attribute to use as a fallback if the key value is not set.

      Returns void

    • When a key is set or changed, bind the handler to the keyboard shortcut. This will override the shortcut, if already set. Allow key to be empty, so it can be removed from the attributes to unbind the shortcuts

      Parameters

      • key: string
      • previousKey: string

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods