github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/keyboard-shortcuts-modal.js (about)

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