aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-28 20:45:50 -0400
committerGitHub <noreply@github.com>2020-10-28 20:45:50 -0400
commit890de095db4019e33bda4936dc32f85a8d99f20d (patch)
treea0edb28bc38ad7e870ccc6244366b0cdff9c0be4 /ext/bg/js
parent25cedc8c524ddb5805a0686d1607c502426cdc14 (diff)
Fix modals not closing properly when the outside is clicked (#967)
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/settings/modal-controller.js18
-rw-r--r--ext/bg/js/settings/modal-jquery.js4
-rw-r--r--ext/bg/js/settings/popup-elements.js26
3 files changed, 32 insertions, 16 deletions
diff --git a/ext/bg/js/settings/modal-controller.js b/ext/bg/js/settings/modal-controller.js
index d604b050..8e551564 100644
--- a/ext/bg/js/settings/modal-controller.js
+++ b/ext/bg/js/settings/modal-controller.js
@@ -26,20 +26,13 @@ class ModalController {
}
prepare() {
- for (const node of document.querySelectorAll('.modal')) {
+ for (const node of document.querySelectorAll('.modal,.modal-container')) {
const {id} = node;
const modal = new Modal(node);
+ modal.prepare();
this._modalMap.set(id, modal);
this._modals.push(modal);
}
-
- for (const node of document.querySelectorAll('.modal-container')) {
- const {id} = node;
- const modal = new Modal(node);
- this._modalMap.set(id, modal);
- this._modals.push(modal);
- node.addEventListener('click', this._onModalContainerClick.bind(this, modal), false);
- }
}
getModal(name) {
@@ -56,11 +49,4 @@ class ModalController {
}
return null;
}
-
- // Private
-
- _onModalContainerClick(modal, e) {
- if (e.currentTarget !== e.target) { return; }
- modal.setVisible(false);
- }
}
diff --git a/ext/bg/js/settings/modal-jquery.js b/ext/bg/js/settings/modal-jquery.js
index 7c8e0de9..a35da1af 100644
--- a/ext/bg/js/settings/modal-jquery.js
+++ b/ext/bg/js/settings/modal-jquery.js
@@ -26,6 +26,10 @@ class Modal extends EventDispatcher {
return this._node;
}
+ prepare() {
+ // NOP
+ }
+
isVisible() {
return !!(this._getWrappedNode().data('bs.modal') || {}).isShown;
}
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index 28f9883e..4b4a0e17 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -112,6 +112,32 @@ class Modal extends PopupElement {
closingClassName: 'modal-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer
});
+ this._canCloseOnClick = false;
+ }
+
+ prepare() {
+ const node = this._node;
+ node.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
+ node.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
+ node.addEventListener('click', this._onModalContainerClick.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);
}
}