@teipublisher/pb-components/src/pb-navigation.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import { pbMixin } from './pb-mixin.js';
import { pbHotkeys } from './pb-hotkeys.js';

/**
 * Navigate backward/forward in a document. This component does not implement any functionality itself.
 * It just sends a `pb-navigate` event when clicked. You may also assign a shortcut key by setting property
 * `keyboard`.
 *
 * @slot - default unnamed slot
 * @fires pb-navigate - Fire event indicating that listening components should navigate in the given direction
 * @fires pb-update - When received, updates the state of navigation buttons (disables when no forward/backward navigation possible)
 */
export class PbNavigation extends pbHotkeys(pbMixin(LitElement)) {
  static get properties() {
    return {
      ...super.properties,
      /**
       * The direction to navigate in, either `forward` or `backward`
       */
      direction: {
        type: String,
      },
      /**
       * Register a shortcut key, e.g. 'left' or 'shift+left'
       */
      keyboard: {
        type: String,
      },
      /**
       * Rendition of the navigation element if it's disabled
       * Possible values:
       * - hidden (default if not set; control is removed from the document layout)
       * - invisible (controll is hidden, but keeped in the document layout)
       * - visible (control is visible)
       */
      rendition: {
        type: String,
      },
    };
  }

  constructor() {
    super();
    this.direction = 'forward';
    this.disabled = true;
  }

  connectedCallback() {
    super.connectedCallback();

    if (this.keyboard) {
      this.hotkeys = {
        next: this.keyboard,
      };
    }

    this.subscribeTo('pb-update', this._update.bind(this));

    this.registerHotkey('next', () => {
      // Do not handle this hotkey if we have something focused. Otherwise we would basically
      // disable the arrowkeys in input fields
      if (window.document.activeElement && window.document.activeElement !== window.document.body) {
        return;
      }
      this.emitTo('pb-navigate', { direction: this.direction });
    });

    this.signalReady();
  }

  _update(ev) {
    if (this.direction === 'forward') {
      if (ev.detail.data.next) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    } else if (ev.detail.data.previous) {
      this.disabled = false;
    } else {
      this.disabled = true;
    }
  }

  _handleClick() {
    this.emitTo('pb-navigate', { direction: this.direction });
  }

  render() {
    return html` <a id="button" @click="${this._handleClick}"><slot></slot></a> `;
  }

  static get styles() {
    return css`
      :host {
        display: inline;
      }
      :host([disabled]):host(:not([rendition])),
      :host([disabled]):host([rendition='hidden']) {
        display: none;
      }
      :host([disabled]):host([rendition='invisible']) {
        visibility: hidden;
      }
      :host([disabled]):host([rendition='visible']) {
        visibility: visible;
        cursor: not-allowed;
      }
    `;
  }
}

customElements.define('pb-navigation', PbNavigation);