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) {