113 lines
2.5 KiB
JavaScript
113 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
import Modifier from 'ember-modifier';
|
|
import { inject as service } from '@ember/service';
|
|
import { action } from '@ember/object';
|
|
|
|
const TAB = 9;
|
|
const ESC = 27;
|
|
const END = 35;
|
|
const HOME = 36;
|
|
const ARROW_UP = 38;
|
|
const ARROW_DOWN = 40;
|
|
|
|
const keys = {
|
|
vertical: {
|
|
[ARROW_DOWN]: ($items, i = -1) => {
|
|
return (i + 1) % $items.length;
|
|
},
|
|
[ARROW_UP]: ($items, i = 0) => {
|
|
if (i === 0) {
|
|
return $items.length - 1;
|
|
} else {
|
|
return i - 1;
|
|
}
|
|
},
|
|
[HOME]: ($items, i) => {
|
|
return 0;
|
|
},
|
|
[END]: ($items, i) => {
|
|
return $items.length - 1;
|
|
},
|
|
},
|
|
horizontal: {},
|
|
};
|
|
|
|
const MENU_ITEMS = '[role^="menuitem"]';
|
|
|
|
export default class AriaMenuModifier extends Modifier {
|
|
@service('-document') doc;
|
|
orientation = 'vertical';
|
|
|
|
@action
|
|
async keydown(e) {
|
|
if (e.keyCode === ESC) {
|
|
this.options.onclose(e);
|
|
this.$trigger.focus();
|
|
return;
|
|
}
|
|
const $items = [...this.element.querySelectorAll(MENU_ITEMS)];
|
|
const pos = $items.findIndex(($item) => $item === this.doc.activeElement);
|
|
if (e.keyCode === TAB) {
|
|
if (e.shiftKey) {
|
|
if (pos === 0) {
|
|
this.options.onclose(e);
|
|
this.$trigger.focus();
|
|
}
|
|
} else {
|
|
if (pos === $items.length - 1) {
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
this.options.onclose(e);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
if (typeof keys[this.orientation][e.keyCode] === 'undefined') {
|
|
return;
|
|
}
|
|
$items[keys[this.orientation][e.keyCode]($items, pos)].focus();
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
|
|
@action
|
|
async focus(e) {
|
|
if (e.pointerType === '') {
|
|
await Promise.resolve();
|
|
this.keydown({
|
|
keyCode: HOME,
|
|
stopPropagation: () => {},
|
|
preventDefault: () => {},
|
|
});
|
|
}
|
|
}
|
|
|
|
connect(params, named) {
|
|
this.$trigger = this.doc.getElementById(this.element.getAttribute('aria-labelledby'));
|
|
if (typeof named.openEvent !== 'undefined') {
|
|
this.focus(named.openEvent);
|
|
}
|
|
this.doc.addEventListener('keydown', this.keydown);
|
|
}
|
|
|
|
disconnect() {
|
|
this.doc.removeEventListener('keydown', this.keydown);
|
|
}
|
|
|
|
didReceiveArguments() {
|
|
this.params = this.args.positional;
|
|
this.options = this.args.named;
|
|
}
|
|
|
|
didInstall() {
|
|
this.connect(this.args.positional, this.args.named);
|
|
}
|
|
|
|
willRemove() {
|
|
this.disconnect();
|
|
}
|
|
}
|