alex/yomichan
1
Fork 0
Code Releases Activity

Popup menu updates (#934)

Browse Source 
* 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
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ext/bg/js/settings/popup-menu.js
View File

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