github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/components/popover-menu.js (about)

     1  import Component from '@ember/component';
     2  import { action } from '@ember/object';
     3  import { run } from '@ember/runloop';
     4  import { classNames } from '@ember-decorators/component';
     5  import classic from 'ember-classic-decorator';
     6  
     7  const TAB = 9;
     8  const ARROW_DOWN = 40;
     9  const FOCUSABLE = [
    10    'a:not([disabled])',
    11    'button:not([disabled])',
    12    'input:not([disabled]):not([type="hidden"])',
    13    'textarea:not([disabled])',
    14    '[tabindex]:not([disabled]):not([tabindex="-1"])',
    15  ].join(', ');
    16  
    17  @classic
    18  @classNames('popover')
    19  export default class PopoverMenu extends Component {
    20    triggerClass = '';
    21    isOpen = false;
    22    isDisabled = false;
    23    label = '';
    24  
    25    dropdown = null;
    26  
    27    capture(dropdown) {
    28      // It's not a good idea to grab a dropdown reference like this, but it's necessary
    29      // in order to invoke dropdown.actions.close in traverseList as well as
    30      // dropdown.actions.reposition when the label or selection length changes.
    31      this.set('dropdown', dropdown);
    32    }
    33  
    34    didReceiveAttrs() {
    35      const dropdown = this.dropdown;
    36      if (this.isOpen && dropdown) {
    37        run.scheduleOnce('afterRender', this, this.repositionDropdown);
    38      }
    39    }
    40  
    41    repositionDropdown() {
    42      this.dropdown.actions.reposition();
    43    }
    44  
    45    @action
    46    openOnArrowDown(dropdown, e) {
    47      if (!this.isOpen && e.keyCode === ARROW_DOWN) {
    48        dropdown.actions.open(e);
    49        e.preventDefault();
    50      } else if (this.isOpen && (e.keyCode === TAB || e.keyCode === ARROW_DOWN)) {
    51        const optionsId = this.element.querySelector('.popover-trigger').getAttribute('aria-owns');
    52        const popoverContentEl = document.querySelector(`#${optionsId}`);
    53        const firstFocusableElement = popoverContentEl.querySelector(FOCUSABLE);
    54  
    55        if (firstFocusableElement) {
    56          firstFocusableElement.focus();
    57          e.preventDefault();
    58        }
    59      }
    60    }
    61  }