aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js/settings/modal.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-08 22:31:58 -0400
committerGitHub <noreply@github.com>2020-10-08 22:31:58 -0400
commitbedcad6ab2d39ab8ae74b70803fe92fa09d07db3 (patch)
treef1d5e06837dbf893e52359702b3757511c5c11ab /ext/bg/js/settings/modal.js
parent41ead7a90ac6d2c2674b647dde3928dbf156bc9c (diff)
Update the Modal class to support non-jQuery modals (#900)
Diffstat (limited to 'ext/bg/js/settings/modal.js')
-rw-r--r--ext/bg/js/settings/modal.js44
1 files changed, 39 insertions, 5 deletions
diff --git a/ext/bg/js/settings/modal.js b/ext/bg/js/settings/modal.js
index 42a511ca..f9a8ec6b 100644
--- a/ext/bg/js/settings/modal.js
+++ b/ext/bg/js/settings/modal.js
@@ -20,6 +20,9 @@ class Modal extends EventDispatcher {
super();
this._node = node;
this._eventListeners = new EventListenerCollection();
+ this._mutationObserver = null;
+ this._visible = false;
+ this._visibleClassName = 'modal-container-open';
}
get node() {
@@ -27,15 +30,31 @@ class Modal extends EventDispatcher {
}
setVisible(value) {
- this._getWrappedNode().modal(value ? 'show' : 'hide');
+ if (this._useJqueryModal()) {
+ this._getWrappedNode().modal(value ? 'show' : 'hide');
+ } else {
+ this._node.classList.toggle(this._visibleClassName, value);
+ }
}
on(eventName, callback) {
if (eventName === 'visibilityChanged') {
- if (this._eventListeners.size === 0) {
- const wrappedNode = this._getWrappedNode();
- this._eventListeners.on(wrappedNode, 'hidden.bs.modal', this._onModalHide.bind(this));
- this._eventListeners.on(wrappedNode, 'shown.bs.modal', this._onModalShow.bind(this));
+ if (this._useJqueryModal()) {
+ if (this._eventListeners.size === 0) {
+ const wrappedNode = this._getWrappedNode();
+ this._eventListeners.on(wrappedNode, 'hidden.bs.modal', this._onModalHide.bind(this));
+ this._eventListeners.on(wrappedNode, 'shown.bs.modal', this._onModalShow.bind(this));
+ }
+ } else {
+ if (this._mutationObserver === null) {
+ this._visible = this._node.classList.contains(this._visibleClassName);
+ this._mutationObserver = new MutationObserver(this._onMutation.bind(this));
+ this._mutationObserver.observe(this._node, {
+ attributes: true,
+ attributeFilter: ['class'],
+ attributeOldValue: true
+ });
+ }
}
}
return super.on(eventName, callback);
@@ -44,6 +63,10 @@ class Modal extends EventDispatcher {
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;
+ }
this._eventListeners.removeAllEventListeners();
}
return result;
@@ -59,6 +82,17 @@ class Modal extends EventDispatcher {
this.trigger('visibilityChanged', {visible: true});
}
+ _onMutation() {
+ const visible = this._node.classList.contains(this._visibleClassName);
+ if (this._visible === visible) { return; }
+ this._visible = visible;
+ this.trigger('visibilityChanged', {visible: false});
+ }
+
+ _useJqueryModal() {
+ return (typeof jQuery !== 'undefined');
+ }
+
_getWrappedNode() {
return $(this._node);
}