yomichan/ext/bg/js/settings/popup-menu.js

174 lines
5.6 KiB
JavaScript
Raw Normal View History

2020-10-18 16:49:51 +00:00
/*
* Copyright (C) 2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
class PopupMenu {
constructor(sourceElement, container) {
this._sourceElement = sourceElement;
this._container = container;
this._menu = container.querySelector('.popup-menu');
2020-10-18 16:49:51 +00:00
this._isClosed = false;
this._eventListeners = new EventListenerCollection();
}
prepare() {
const items = this._menu.querySelectorAll('.popup-menu-item');
this._setPosition(items);
this._menu.focus();
2020-10-18 16:49:51 +00:00
this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
this._eventListeners.addEventListener(this._container, 'click', this._onMenuContainerClick.bind(this), false);
const onMenuItemClick = this._onMenuItemClick.bind(this);
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
}
}));
2020-10-18 16:49:51 +00:00
}
close() {
2020-10-18 17:00:49 +00:00
this._close(null, 'close');
2020-10-18 16:49:51 +00:00
}
// Private
_onMenuContainerClick(e) {
if (e.currentTarget !== e.target) { return; }
2020-10-18 17:00:49 +00:00
this._close(null, 'outside');
2020-10-18 16:49:51 +00:00
}
_onMenuItemClick(e) {
const item = e.currentTarget;
if (item.disabled) { return; }
this._close(item, 'item');
}
_onWindowResize() {
this._close(null, 'resize');
}
_setPosition(items) {
2020-10-18 16:49:51 +00:00
// Get flags
let horizontal = 1;
let vertical = 1;
let horizontalCover = 1;
let verticalCover = 1;
const positionInfo = this._sourceElement.dataset.menuPosition;
if (typeof positionInfo === 'string') {
const positionInfoSet = new Set(positionInfo.split(','));
if (positionInfoSet.has('left')) {
horizontal = -1;
} else if (positionInfoSet.has('right')) {
horizontal = 1;
} else if (positionInfoSet.has('h-center')) {
horizontal = 0;
}
if (positionInfoSet.has('above')) {
vertical = -1;
} else if (positionInfoSet.has('below')) {
vertical = 1;
} else if (positionInfoSet.has('v-center')) {
vertical = 0;
}
if (positionInfoSet.has('cover')) {
horizontalCover = 1;
verticalCover = 1;
} else if (positionInfoSet.has('no-cover')) {
horizontalCover = -1;
verticalCover = -1;
}
if (positionInfoSet.has('h-cover')) {
horizontalCover = 1;
} else if (positionInfoSet.has('no-h-cover')) {
horizontalCover = -1;
}
if (positionInfoSet.has('v-cover')) {
verticalCover = 1;
} else if (positionInfoSet.has('no-v-cover')) {
verticalCover = -1;
}
}
// Position
const menu = this._menu;
2020-10-18 16:49:51 +00:00
const fullRect = this._container.getBoundingClientRect();
const sourceRect = this._sourceElement.getBoundingClientRect();
const menuRect = menu.getBoundingClientRect();
let top = menuRect.top;
let bottom = menuRect.bottom;
if (verticalCover === 1 && items.length > 0) {
const rect1 = items[0].getBoundingClientRect();
const rect2 = items[items.length - 1].getBoundingClientRect();
top = rect1.top;
bottom = rect2.bottom;
}
let x = (
sourceRect.left +
sourceRect.width * ((-horizontal * horizontalCover + 1) * 0.5) +
menuRect.width * ((-horizontal + 1) * -0.5)
);
let y = (
sourceRect.top +
(menuRect.top - top) +
sourceRect.height * ((-vertical * verticalCover + 1) * 0.5) +
(bottom - top) * ((-vertical + 1) * -0.5)
);
x = Math.max(0.0, Math.min(fullRect.width - menuRect.width, x));
y = Math.max(0.0, Math.min(fullRect.height - menuRect.height, y));
menu.style.left = `${x}px`;
menu.style.top = `${y}px`;
}
_close(item, cause) {
if (this._isClosed) { return; }
const action = (item !== null ? item.dataset.menuAction : null);
const result = this._sourceElement.dispatchEvent(new CustomEvent('menuClosed', {
2020-10-18 16:49:51 +00:00
bubbles: false,
cancelable: true,
2020-10-18 16:49:51 +00:00
detail: {
container: this._container,
menu: this._menu,
2020-10-18 16:49:51 +00:00
item,
action,
cause
}
}));
if (!result) { return; }
2020-10-18 16:49:51 +00:00
this._eventListeners.removeAllEventListeners();
if (this._container.parentNode !== null) {
this._container.parentNode.removeChild(this._container);
}
}
}