Rename PopupElement to PanelElement; split classes into separate files (#1173)
This commit is contained in:
toasted-nutbread
GitHub
parent
5c970fc404
commit
2cd429fdfd
80
ext/bg/js/settings/modal.js
Normal file
80
ext/bg/js/settings/modal.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
/*
|
||||||
|
* 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* global
|
||||||
|
* PanelElement
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Modal extends PanelElement {
|
||||||
|
constructor(node) {
|
||||||
|
super({
|
||||||
|
node,
|
||||||
|
closingAnimationDuration: 375 // Milliseconds; includes buffer
|
||||||
|
});
|
||||||
|
this._contentNode = null;
|
||||||
|
this._canCloseOnClick = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
prepare() {
|
||||||
|
const node = this.node;
|
||||||
|
this._contentNode = node.querySelector('.modal-content');
|
||||||
|
let dimmerNode = node.querySelector('.modal-content-dimmer');
|
||||||
|
if (dimmerNode === null) { dimmerNode = node; }
|
||||||
|
dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
|
||||||
|
dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
|
||||||
|
dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false);
|
||||||
|
|
||||||
|
for (const actionNode of node.querySelectorAll('[data-modal-action]')) {
|
||||||
|
actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Private
|
||||||
|
|
||||||
|
_onModalContainerMouseDown(e) {
|
||||||
|
this._canCloseOnClick = (e.currentTarget === e.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onModalContainerMouseUp(e) {
|
||||||
|
if (!this._canCloseOnClick) { return; }
|
||||||
|
this._canCloseOnClick = (e.currentTarget === e.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onModalContainerClick(e) {
|
||||||
|
if (!this._canCloseOnClick) { return; }
|
||||||
|
this._canCloseOnClick = false;
|
||||||
|
if (e.currentTarget !== e.target) { return; }
|
||||||
|
this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onActionNodeClick(e) {
|
||||||
|
const {modalAction} = e.currentTarget.dataset;
|
||||||
|
switch (modalAction) {
|
||||||
|
case 'expand':
|
||||||
|
this._setExpanded(true);
|
||||||
|
break;
|
||||||
|
case 'collapse':
|
||||||
|
this._setExpanded(false);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_setExpanded(expanded) {
|
||||||
|
if (this._contentNode === null) { return; }
|
||||||
|
this._contentNode.classList.toggle('modal-content-full', expanded);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,227 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 PopupElement extends EventDispatcher {
|
|
||||||
constructor({node, closingAnimationDuration}) {
|
|
||||||
super();
|
|
||||||
this._node = node;
|
|
||||||
this._closingAnimationDuration = closingAnimationDuration;
|
|
||||||
this._hiddenAnimatingClass = 'hidden-animating';
|
|
||||||
this._mutationObserver = null;
|
|
||||||
this._visible = false;
|
|
||||||
this._closeTimer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
get node() {
|
|
||||||
return this._node;
|
|
||||||
}
|
|
||||||
|
|
||||||
isVisible() {
|
|
||||||
return !this._node.hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
setVisible(value, animate=true) {
|
|
||||||
value = !!value;
|
|
||||||
if (this.isVisible() === value) { return; }
|
|
||||||
|
|
||||||
if (this._closeTimer !== null) {
|
|
||||||
clearTimeout(this._closeTimer);
|
|
||||||
this._completeClose(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
const node = this._node;
|
|
||||||
const {classList} = node;
|
|
||||||
if (value) {
|
|
||||||
if (animate) { classList.add(this._hiddenAnimatingClass); }
|
|
||||||
getComputedStyle(node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
|
|
||||||
classList.remove(this._hiddenAnimatingClass);
|
|
||||||
node.hidden = false;
|
|
||||||
node.focus();
|
|
||||||
} else {
|
|
||||||
if (animate) { classList.add(this._hiddenAnimatingClass); }
|
|
||||||
node.hidden = true;
|
|
||||||
if (animate) {
|
|
||||||
this._closeTimer = setTimeout(() => this._completeClose(false), this._closingAnimationDuration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
on(eventName, callback) {
|
|
||||||
if (eventName === 'visibilityChanged') {
|
|
||||||
if (this._mutationObserver === null) {
|
|
||||||
this._visible = this.isVisible();
|
|
||||||
this._mutationObserver = new MutationObserver(this._onMutation.bind(this));
|
|
||||||
this._mutationObserver.observe(this._node, {
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ['hidden'],
|
|
||||||
attributeOldValue: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return super.on(eventName, callback);
|
|
||||||
}
|
|
||||||
|
|
||||||
off(eventName, callback) {
|
|
||||||
const result = super.off(eventName, callback);
|
|
||||||
if (eventName === 'visibilityChanged' && !this.hasListeners(eventName)) {
|
|
||||||
if (this._mutationObserver !== null) {
|
|
||||||
this._mutationObserver.disconnect();
|
|
||||||
this._mutationObserver = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_onMutation() {
|
|
||||||
const visible = this.isVisible();
|
|
||||||
if (this._visible === visible) { return; }
|
|
||||||
this._visible = visible;
|
|
||||||
this.trigger('visibilityChanged', {visible});
|
|
||||||
}
|
|
||||||
|
|
||||||
_completeClose(reopening) {
|
|
||||||
this._closeTimer = null;
|
|
||||||
this._node.classList.remove(this._hiddenAnimatingClass);
|
|
||||||
this.trigger('closeCompleted', {reopening});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Modal extends PopupElement {
|
|
||||||
constructor(node) {
|
|
||||||
super({
|
|
||||||
node,
|
|
||||||
closingAnimationDuration: 375 // Milliseconds; includes buffer
|
|
||||||
});
|
|
||||||
this._contentNode = null;
|
|
||||||
this._canCloseOnClick = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
prepare() {
|
|
||||||
const node = this.node;
|
|
||||||
this._contentNode = node.querySelector('.modal-content');
|
|
||||||
let dimmerNode = node.querySelector('.modal-content-dimmer');
|
|
||||||
if (dimmerNode === null) { dimmerNode = node; }
|
|
||||||
dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
|
|
||||||
dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
|
|
||||||
dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false);
|
|
||||||
|
|
||||||
for (const actionNode of node.querySelectorAll('[data-modal-action]')) {
|
|
||||||
actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_onModalContainerMouseDown(e) {
|
|
||||||
this._canCloseOnClick = (e.currentTarget === e.target);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onModalContainerMouseUp(e) {
|
|
||||||
if (!this._canCloseOnClick) { return; }
|
|
||||||
this._canCloseOnClick = (e.currentTarget === e.target);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onModalContainerClick(e) {
|
|
||||||
if (!this._canCloseOnClick) { return; }
|
|
||||||
this._canCloseOnClick = false;
|
|
||||||
if (e.currentTarget !== e.target) { return; }
|
|
||||||
this.setVisible(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onActionNodeClick(e) {
|
|
||||||
const {modalAction} = e.currentTarget.dataset;
|
|
||||||
switch (modalAction) {
|
|
||||||
case 'expand':
|
|
||||||
this._setExpanded(true);
|
|
||||||
break;
|
|
||||||
case 'collapse':
|
|
||||||
this._setExpanded(false);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_setExpanded(expanded) {
|
|
||||||
if (this._contentNode === null) { return; }
|
|
||||||
this._contentNode.classList.toggle('modal-content-full', expanded);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class StatusFooter extends PopupElement {
|
|
||||||
constructor(node) {
|
|
||||||
super({
|
|
||||||
node,
|
|
||||||
closingAnimationDuration: 375 // Milliseconds; includes buffer
|
|
||||||
});
|
|
||||||
this._body = node.querySelector('.status-footer');
|
|
||||||
}
|
|
||||||
|
|
||||||
prepare() {
|
|
||||||
this.on('closeCompleted', this._onCloseCompleted.bind(this), false);
|
|
||||||
this._body.querySelector('.status-footer-header-close').addEventListener('click', this._onCloseClick.bind(this), false);
|
|
||||||
}
|
|
||||||
|
|
||||||
getTaskContainer(selector) {
|
|
||||||
return this._body.querySelector(selector);
|
|
||||||
}
|
|
||||||
|
|
||||||
isTaskActive(selector) {
|
|
||||||
const target = this.getTaskContainer(selector);
|
|
||||||
return (target !== null && target.dataset.active);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTaskActive(selector, active) {
|
|
||||||
const target = this.getTaskContainer(selector);
|
|
||||||
if (target === null) { return; }
|
|
||||||
|
|
||||||
const activeElements = new Set();
|
|
||||||
for (const element of this._body.querySelectorAll('.status-footer-item')) {
|
|
||||||
if (element.dataset.active) {
|
|
||||||
activeElements.add(element);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (active) {
|
|
||||||
target.dataset.active = 'true';
|
|
||||||
if (!this.isVisible()) {
|
|
||||||
this.setVisible(true);
|
|
||||||
}
|
|
||||||
target.hidden = false;
|
|
||||||
} else {
|
|
||||||
delete target.dataset.active;
|
|
||||||
if (activeElements.size <= 1) {
|
|
||||||
this.setVisible(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_onCloseClick(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.setVisible(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onCloseCompleted() {
|
|
||||||
for (const element of this._body.querySelectorAll('.status-footer-item')) {
|
|
||||||
if (!element.dataset.active) {
|
|
||||||
element.hidden = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
84
ext/bg/js/settings/status-footer.js
Normal file
84
ext/bg/js/settings/status-footer.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
/*
|
||||||
|
* 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* global
|
||||||
|
* PanelElement
|
||||||
|
*/
|
||||||
|
|
||||||
|
class StatusFooter extends PanelElement {
|
||||||
|
constructor(node) {
|
||||||
|
super({
|
||||||
|
node,
|
||||||
|
closingAnimationDuration: 375 // Milliseconds; includes buffer
|
||||||
|
});
|
||||||
|
this._body = node.querySelector('.status-footer');
|
||||||
|
}
|
||||||
|
|
||||||
|
prepare() {
|
||||||
|
this.on('closeCompleted', this._onCloseCompleted.bind(this), false);
|
||||||
|
this._body.querySelector('.status-footer-header-close').addEventListener('click', this._onCloseClick.bind(this), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
getTaskContainer(selector) {
|
||||||
|
return this._body.querySelector(selector);
|
||||||
|
}
|
||||||
|
|
||||||
|
isTaskActive(selector) {
|
||||||
|
const target = this.getTaskContainer(selector);
|
||||||
|
return (target !== null && target.dataset.active);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTaskActive(selector, active) {
|
||||||
|
const target = this.getTaskContainer(selector);
|
||||||
|
if (target === null) { return; }
|
||||||
|
|
||||||
|
const activeElements = new Set();
|
||||||
|
for (const element of this._body.querySelectorAll('.status-footer-item')) {
|
||||||
|
if (element.dataset.active) {
|
||||||
|
activeElements.add(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (active) {
|
||||||
|
target.dataset.active = 'true';
|
||||||
|
if (!this.isVisible()) {
|
||||||
|
this.setVisible(true);
|
||||||
|
}
|
||||||
|
target.hidden = false;
|
||||||
|
} else {
|
||||||
|
delete target.dataset.active;
|
||||||
|
if (activeElements.size <= 1) {
|
||||||
|
this.setVisible(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Private
|
||||||
|
|
||||||
|
_onCloseClick(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onCloseCompleted() {
|
||||||
|
for (const element of this._body.querySelectorAll('.status-footer-item')) {
|
||||||
|
if (!element.dataset.active) {
|
||||||
|
element.hidden = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2559,6 +2559,7 @@
|
|||||||
<script src="/mixed/js/dom-data-binder.js"></script>
|
<script src="/mixed/js/dom-data-binder.js"></script>
|
||||||
<script src="/mixed/js/html-template-collection.js"></script>
|
<script src="/mixed/js/html-template-collection.js"></script>
|
||||||
<script src="/mixed/js/object-property-accessor.js"></script>
|
<script src="/mixed/js/object-property-accessor.js"></script>
|
||||||
|
<script src="/mixed/js/panel-element.js"></script>
|
||||||
<script src="/mixed/js/selector-observer.js"></script>
|
<script src="/mixed/js/selector-observer.js"></script>
|
||||||
<script src="/mixed/js/task-accumulator.js"></script>
|
<script src="/mixed/js/task-accumulator.js"></script>
|
||||||
<script src="/mixed/js/text-to-speech-audio.js"></script>
|
<script src="/mixed/js/text-to-speech-audio.js"></script>
|
||||||
@ -2574,7 +2575,6 @@
|
|||||||
<script src="/bg/js/template-renderer-proxy.js"></script>
|
<script src="/bg/js/template-renderer-proxy.js"></script>
|
||||||
|
|
||||||
<script src="/bg/js/settings/keyboard-mouse-input-field.js"></script>
|
<script src="/bg/js/settings/keyboard-mouse-input-field.js"></script>
|
||||||
<script src="/bg/js/settings/popup-elements.js"></script>
|
|
||||||
<script src="/bg/js/settings/profile-conditions-ui.js"></script>
|
<script src="/bg/js/settings/profile-conditions-ui.js"></script>
|
||||||
|
|
||||||
<script src="/bg/js/settings/anki-controller.js"></script>
|
<script src="/bg/js/settings/anki-controller.js"></script>
|
||||||
@ -2585,6 +2585,7 @@
|
|||||||
<script src="/bg/js/settings/dictionary-controller.js"></script>
|
<script src="/bg/js/settings/dictionary-controller.js"></script>
|
||||||
<script src="/bg/js/settings/dictionary-import-controller.js"></script>
|
<script src="/bg/js/settings/dictionary-import-controller.js"></script>
|
||||||
<script src="/bg/js/settings/generic-setting-controller.js"></script>
|
<script src="/bg/js/settings/generic-setting-controller.js"></script>
|
||||||
|
<script src="/bg/js/settings/modal.js"></script>
|
||||||
<script src="/bg/js/settings/modal-controller.js"></script>
|
<script src="/bg/js/settings/modal-controller.js"></script>
|
||||||
<script src="/bg/js/settings/popup-menu.js"></script>
|
<script src="/bg/js/settings/popup-menu.js"></script>
|
||||||
<script src="/bg/js/settings/popup-preview-controller.js"></script>
|
<script src="/bg/js/settings/popup-preview-controller.js"></script>
|
||||||
@ -2592,6 +2593,7 @@
|
|||||||
<script src="/bg/js/settings/scan-inputs-controller.js"></script>
|
<script src="/bg/js/settings/scan-inputs-controller.js"></script>
|
||||||
<script src="/bg/js/settings/scan-inputs-simple-controller.js"></script>
|
<script src="/bg/js/settings/scan-inputs-simple-controller.js"></script>
|
||||||
<script src="/bg/js/settings/settings-controller.js"></script>
|
<script src="/bg/js/settings/settings-controller.js"></script>
|
||||||
|
<script src="/bg/js/settings/status-footer.js"></script>
|
||||||
<script src="/bg/js/settings/storage-controller.js"></script>
|
<script src="/bg/js/settings/storage-controller.js"></script>
|
||||||
|
|
||||||
<script src="/bg/js/settings2/nested-popups-controller.js"></script>
|
<script src="/bg/js/settings2/nested-popups-controller.js"></script>
|
||||||
|
|||||||
@ -339,6 +339,7 @@
|
|||||||
<script src="/mixed/js/dom-data-binder.js"></script>
|
<script src="/mixed/js/dom-data-binder.js"></script>
|
||||||
<script src="/mixed/js/html-template-collection.js"></script>
|
<script src="/mixed/js/html-template-collection.js"></script>
|
||||||
<script src="/mixed/js/object-property-accessor.js"></script>
|
<script src="/mixed/js/object-property-accessor.js"></script>
|
||||||
|
<script src="/mixed/js/panel-element.js"></script>
|
||||||
<script src="/mixed/js/selector-observer.js"></script>
|
<script src="/mixed/js/selector-observer.js"></script>
|
||||||
<script src="/mixed/js/task-accumulator.js"></script>
|
<script src="/mixed/js/task-accumulator.js"></script>
|
||||||
|
|
||||||
@ -351,11 +352,12 @@
|
|||||||
<script src="/bg/js/settings/dictionary-controller.js"></script>
|
<script src="/bg/js/settings/dictionary-controller.js"></script>
|
||||||
<script src="/bg/js/settings/dictionary-import-controller.js"></script>
|
<script src="/bg/js/settings/dictionary-import-controller.js"></script>
|
||||||
<script src="/bg/js/settings/generic-setting-controller.js"></script>
|
<script src="/bg/js/settings/generic-setting-controller.js"></script>
|
||||||
|
<script src="/bg/js/settings/modal.js"></script>
|
||||||
<script src="/bg/js/settings/modal-controller.js"></script>
|
<script src="/bg/js/settings/modal-controller.js"></script>
|
||||||
<script src="/bg/js/settings/popup-elements.js"></script>
|
|
||||||
<script src="/bg/js/settings/popup-menu.js"></script>
|
<script src="/bg/js/settings/popup-menu.js"></script>
|
||||||
<script src="/bg/js/settings/scan-inputs-simple-controller.js"></script>
|
<script src="/bg/js/settings/scan-inputs-simple-controller.js"></script>
|
||||||
<script src="/bg/js/settings/settings-controller.js"></script>
|
<script src="/bg/js/settings/settings-controller.js"></script>
|
||||||
|
<script src="/bg/js/settings/status-footer.js"></script>
|
||||||
|
|
||||||
<script src="/bg/js/settings2/settings-display-controller.js"></script>
|
<script src="/bg/js/settings2/settings-display-controller.js"></script>
|
||||||
|
|
||||||
|
|||||||
103
ext/mixed/js/panel-element.js
Normal file
103
ext/mixed/js/panel-element.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
/*
|
||||||
|
* 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 PanelElement extends EventDispatcher {
|
||||||
|
constructor({node, closingAnimationDuration}) {
|
||||||
|
super();
|
||||||
|
this._node = node;
|
||||||
|
this._closingAnimationDuration = closingAnimationDuration;
|
||||||
|
this._hiddenAnimatingClass = 'hidden-animating';
|
||||||
|
this._mutationObserver = null;
|
||||||
|
this._visible = false;
|
||||||
|
this._closeTimer = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
get node() {
|
||||||
|
return this._node;
|
||||||
|
}
|
||||||
|
|
||||||
|
isVisible() {
|
||||||
|
return !this._node.hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisible(value, animate=true) {
|
||||||
|
value = !!value;
|
||||||
|
if (this.isVisible() === value) { return; }
|
||||||
|
|
||||||
|
if (this._closeTimer !== null) {
|
||||||
|
clearTimeout(this._closeTimer);
|
||||||
|
this._completeClose(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const node = this._node;
|
||||||
|
const {classList} = node;
|
||||||
|
if (value) {
|
||||||
|
if (animate) { classList.add(this._hiddenAnimatingClass); }
|
||||||
|
getComputedStyle(node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
|
||||||
|
classList.remove(this._hiddenAnimatingClass);
|
||||||
|
node.hidden = false;
|
||||||
|
node.focus();
|
||||||
|
} else {
|
||||||
|
if (animate) { classList.add(this._hiddenAnimatingClass); }
|
||||||
|
node.hidden = true;
|
||||||
|
if (animate) {
|
||||||
|
this._closeTimer = setTimeout(() => this._completeClose(false), this._closingAnimationDuration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
on(eventName, callback) {
|
||||||
|
if (eventName === 'visibilityChanged') {
|
||||||
|
if (this._mutationObserver === null) {
|
||||||
|
this._visible = this.isVisible();
|
||||||
|
this._mutationObserver = new MutationObserver(this._onMutation.bind(this));
|
||||||
|
this._mutationObserver.observe(this._node, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['hidden'],
|
||||||
|
attributeOldValue: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return super.on(eventName, callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
off(eventName, callback) {
|
||||||
|
const result = super.off(eventName, callback);
|
||||||
|
if (eventName === 'visibilityChanged' && !this.hasListeners(eventName)) {
|
||||||
|
if (this._mutationObserver !== null) {
|
||||||
|
this._mutationObserver.disconnect();
|
||||||
|
this._mutationObserver = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Private
|
||||||
|
|
||||||
|
_onMutation() {
|
||||||
|
const visible = this.isVisible();
|
||||||
|
if (this._visible === visible) { return; }
|
||||||
|
this._visible = visible;
|
||||||
|
this.trigger('visibilityChanged', {visible});
|
||||||
|
}
|
||||||
|
|
||||||
|
_completeClose(reopening) {
|
||||||
|
this._closeTimer = null;
|
||||||
|
this._node.classList.remove(this._hiddenAnimatingClass);
|
||||||
|
this.trigger('closeCompleted', {reopening});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user