github.com/hernad/nomad@v1.6.112/ui/app/components/keyboard-shortcuts-modal.js (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  import { set } from '@ember/object';
     7  import Component from '@glimmer/component';
     8  import { inject as service } from '@ember/service';
     9  import { computed } from '@ember/object';
    10  import { action } from '@ember/object';
    11  import Tether from 'tether';
    12  
    13  export default class KeyboardShortcutsModalComponent extends Component {
    14    @service keyboard;
    15    @service config;
    16  
    17    blurHandler() {
    18      set(this, 'keyboard.displayHints', false);
    19    }
    20  
    21    constructor() {
    22      super(...arguments);
    23      set(this, '_blurHandler', this.blurHandler.bind(this));
    24      window.addEventListener('blur', this._blurHandler);
    25    }
    26  
    27    willDestroy() {
    28      super.willDestroy(...arguments);
    29      window.removeEventListener('blur', this._blurHandler);
    30    }
    31  
    32    escapeCommand = {
    33      label: 'Hide Keyboard Shortcuts',
    34      pattern: ['Escape'],
    35      action: () => {
    36        this.keyboard.shortcutsVisible = false;
    37      },
    38    };
    39  
    40    /**
    41     * commands: filter keyCommands to those that have an action and a label,
    42     * to distinguish between those that are just visual hints of existing commands
    43     */
    44    @computed('keyboard.keyCommands.[]')
    45    get commands() {
    46      return this.keyboard.keyCommands.reduce((memo, c) => {
    47        if (c.label && c.action && !memo.find((m) => m.label === c.label)) {
    48          memo.push(c);
    49        }
    50        return memo;
    51      }, []);
    52    }
    53  
    54    /**
    55     * hints: filter keyCommands to those that have an element property,
    56     * and then compute a position on screen to place the hint.
    57     */
    58    @computed('keyboard.{keyCommands.length,displayHints}')
    59    get hints() {
    60      if (this.keyboard.displayHints) {
    61        return this.keyboard.keyCommands.filter((c) => c.element);
    62      } else {
    63        return [];
    64      }
    65    }
    66  
    67    @action
    68    tetherToElement(element, hint, self) {
    69      if (!this.config.isTest) {
    70        let binder = new Tether({
    71          element: self,
    72          target: element,
    73          attachment: 'top left',
    74          targetAttachment: 'top left',
    75          targetModifier: 'visible',
    76        });
    77        hint.binder = binder;
    78      }
    79    }
    80  
    81    @action
    82    untetherFromElement(hint) {
    83      if (!this.config.isTest) {
    84        hint.binder.destroy();
    85      }
    86    }
    87  
    88    @action toggleListener() {
    89      this.keyboard.enabled = !this.keyboard.enabled;
    90    }
    91  }