Popup menu updates (#934)

* Store a reference to the menu

* Allow close cancellation

* Add open event
This commit is contained in:
toasted-nutbread 2020-10-18 12:58:07 -04:00 committed by GitHub
parent faf130f420
commit 82e203dd76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -19,15 +19,15 @@ class PopupMenu {
constructor(sourceElement, container) {
this._sourceElement = sourceElement;
this._container = container;
this._menu = container.querySelector('.popup-menu');
this._isClosed = false;
this._eventListeners = new EventListenerCollection();
}
prepare() {
const menu = this._container.querySelector('.popup-menu');
const items = menu.querySelectorAll('.popup-menu-item');
this._setPosition(menu, items);
menu.focus();
const items = this._menu.querySelectorAll('.popup-menu-item');
this._setPosition(items);
this._menu.focus();
this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
this._eventListeners.addEventListener(this._container, 'click', this._onMenuContainerClick.bind(this), false);
@ -36,6 +36,15 @@ class PopupMenu {
for (const item of items) {
this._eventListeners.addEventListener(item, 'click', onMenuItemClick, false);
}
this._sourceElement.dispatchEvent(new CustomEvent('menuOpened', {
bubbles: false,
cancelable: false,
detail: {
container: this._container,
menu: this._menu
}
}));
}
close() {
@ -59,7 +68,7 @@ class PopupMenu {
this._close(null, 'resize');
}
_setPosition(menu, items) {
_setPosition(items) {
// Get flags
let horizontal = 1;
let vertical = 1;
@ -107,6 +116,7 @@ class PopupMenu {
}
// Position
const menu = this._menu;
const fullRect = this._container.getBoundingClientRect();
const sourceRect = this._sourceElement.getBoundingClientRect();
const menuRect = menu.getBoundingClientRect();
@ -142,14 +152,18 @@ class PopupMenu {
if (this._isClosed) { return; }
const action = (item !== null ? item.dataset.menuAction : null);
this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
const result = this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
bubbles: false,
cancelable: true,
detail: {
container: this._container,
menu: this._menu,
item,
action,
cause
}
}));
if (!result) { return; }
this._eventListeners.removeAllEventListeners();
if (this._container.parentNode !== null) {