89136cbf6a
Manual interventions: • decorators on the same line for service and controller injections and most computed property macros • preserving import order when possible, both per-line and intra-line • moving new imports to the bottom • removal of classic decorator for trivial cases • conversion of init to constructor when appropriate
62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import Component from '@ember/component';
|
|
import { action } from '@ember/object';
|
|
import { run } from '@ember/runloop';
|
|
import { classNames } from '@ember-decorators/component';
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
const TAB = 9;
|
|
const ARROW_DOWN = 40;
|
|
const FOCUSABLE = [
|
|
'a:not([disabled])',
|
|
'button:not([disabled])',
|
|
'input:not([disabled]):not([type="hidden"])',
|
|
'textarea:not([disabled])',
|
|
'[tabindex]:not([disabled]):not([tabindex="-1"])',
|
|
].join(', ');
|
|
|
|
@classic
|
|
@classNames('popover')
|
|
export default class PopoverMenu extends Component {
|
|
triggerClass = '';
|
|
isOpen = false;
|
|
isDisabled = false;
|
|
label = '';
|
|
|
|
dropdown = null;
|
|
|
|
capture(dropdown) {
|
|
// It's not a good idea to grab a dropdown reference like this, but it's necessary
|
|
// in order to invoke dropdown.actions.close in traverseList as well as
|
|
// dropdown.actions.reposition when the label or selection length changes.
|
|
this.set('dropdown', dropdown);
|
|
}
|
|
|
|
didReceiveAttrs() {
|
|
const dropdown = this.dropdown;
|
|
if (this.isOpen && dropdown) {
|
|
run.scheduleOnce('afterRender', this, this.repositionDropdown);
|
|
}
|
|
}
|
|
|
|
repositionDropdown() {
|
|
this.dropdown.actions.reposition();
|
|
}
|
|
|
|
@action
|
|
openOnArrowDown(dropdown, e) {
|
|
if (!this.isOpen && e.keyCode === ARROW_DOWN) {
|
|
dropdown.actions.open(e);
|
|
e.preventDefault();
|
|
} else if (this.isOpen && (e.keyCode === TAB || e.keyCode === ARROW_DOWN)) {
|
|
const optionsId = this.element.querySelector('.popover-trigger').getAttribute('aria-owns');
|
|
const popoverContentEl = document.querySelector(`#${optionsId}`);
|
|
const firstFocusableElement = popoverContentEl.querySelector(FOCUSABLE);
|
|
|
|
if (firstFocusableElement) {
|
|
firstFocusableElement.focus();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
}
|