splide/src/js/components/Keyboard/Keyboard.ts

import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
import { EVENT_UPDATED } from '../../constants/events';
import { BaseComponent, ComponentConstructor } from '../../types';
import { prevent } from '../../../../../utils';


/**
 * The interface for the Keyboard component.
 *
 * @since 3.0.0
 */
export interface KeyboardComponent extends BaseComponent {
  disable( disabled: boolean ): void;
}

/**
 * The keyboard event name.
 *
 * @since 3.6.0
 */
const KEYBOARD_EVENT = 'keydown';

/**
 * The component for controlling the slider by keyboards.
 *
 * @since 3.0.0
 *
 * @param Splide     - A Splide instance.
 * @param Components - A collection of components.
 * @param options    - Options.
 * @param event      - An EventInterface instance.
 *
 * @return A Keyboard component object.
 */
export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Components, options, event ) => {
  const { destroy } = event;
  const { resolve } = Components.Direction;

  /**
   * Called when the component is mounted.
   */
  function mount(): void {
    const { keyboard } = options;

    destroy();
    keyboard && event.bind( keyboard === 'global' ? window : Splide.root, KEYBOARD_EVENT, onKeydown );
    event.on( EVENT_UPDATED, mount );
  }

  /**
   * Disables the keyboard input.
   *
   * @param value - Toggles disabling/enabling the keyboard input.
   */
  function disable( value: boolean ): void {
    value ? destroy() : mount();
  }

  /**
   * Called when any key is pressed on the target.
   *
   * @param e - A KeyboardEvent object.
   */
  function onKeydown( e: KeyboardEvent ): void {
    if ( e.key === resolve( ARROW_LEFT ) ) {
      Splide.go( '<' );
      prevent( e, true );
    } else if ( e.key === resolve( ARROW_RIGHT ) ) {
      Splide.go( '>' );
      prevent( e, true );
    }
  }

  return {
    mount,
    destroy,
    disable,
  };
};