transmission/web/src/shortcuts-dialog.js

/* @license This file Copyright (C) 2020-2022 Mnemosyne LLC.
   It may be used under GPLv2 (SPDX: GPL-2.0), GPLv3 (SPDX: GPL-3.0),
   or any future license endorsed by Mnemosyne LLC.
   License text can be found in the licenses/ folder. */

import { createDialogContainer } from './utils.js';

export class ShortcutsDialog extends EventTarget {
  constructor(action_manager) {
    super();

    this.elements = ShortcutsDialog._create(action_manager);
    this.elements.dismiss.addEventListener('click', () => this._onDismiss());
    document.body.append(this.elements.root);
    this.elements.dismiss.focus();
  }

  close() {
    this.elements.root.remove();
    this.dispatchEvent(new Event('close'));
    delete this.elements;
  }

  _onDismiss() {
    this.close();
  }

  static _create(action_manager) {
    const elements = createDialogContainer('shortcuts-dialog');
    elements.root.setAttribute('aria-label', 'Keyboard Shortcuts');

    const table = document.createElement('table');
    const thead = document.createElement('thead');
    table.append(thead);

    let tr = document.createElement('tr');
    thead.append(tr);

    let th = document.createElement('th');
    th.textContent = 'Key';
    tr.append(th);

    th = document.createElement('th');
    th.textContent = 'Action';
    tr.append(th);

    const tbody = document.createElement('tbody');
    table.append(tbody);

    const o = {};
    for (const [shortcut, name] of action_manager.allShortcuts().entries()) {
      const tokens = shortcut.split('+');
      const sortKey = [tokens.pop(), ...tokens].join('+');
      o[sortKey] = { name, shortcut };
    }

    for (const [, values] of Object.entries(o).sort()) {
      const { name, shortcut } = values;
      tr = document.createElement('tr');
      tbody.append(tr);

      let td = document.createElement('td');
      td.textContent = shortcut.replaceAll('+', ' + ');
      tr.append(td);

      td = document.createElement('td');
      td.textContent = action_manager.text(name);
      tr.append(td);
    }

    elements.heading.textContent = 'Transmission';
    elements.dismiss.textContent = 'Close';

    elements.heading.textContent = 'Keyboard shortcuts';
    elements.message.append(table);
    elements.confirm.remove();
    delete elements.confirm;
    return elements;
  }
}