aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js/settings/popup-menu.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-18 12:58:07 -0400
committerGitHub <noreply@github.com>2020-10-18 12:58:07 -0400
commit82e203dd765d42c8e387e9b67b6349ffa2e34b0c (patch)
tree6b5c52ae7b2ca7508955937198a02263ab929cf2 /ext/bg/js/settings/popup-menu.js
parentfaf130f420b8ab8a7195b0d65fd8b50b9efe75f0 (diff)
Popup menu updates (#934)
* Store a reference to the menu * Allow close cancellation * Add open event
Diffstat (limited to 'ext/bg/js/settings/popup-menu.js')
-rw-r--r--ext/bg/js/settings/popup-menu.js26
1 files changed, 20 insertions, 6 deletions
diff --git a/ext/bg/js/settings/popup-menu.js b/ext/bg/js/settings/popup-menu.js
index 02ab67d2..def59055 100644
--- a/ext/bg/js/settings/popup-menu.js
+++ b/ext/bg/js/settings/popup-menu.js
@@ -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) {