summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-10 10:12:53 -0400
committerGitHub <noreply@github.com>2020-10-10 10:12:53 -0400
commit591253d783f12850587c0d2202ee7c0a5bc62531 (patch)
treeed9acf837a168688183633f9ecd8ddd10d7464b1 /ext
parent1ae8fb4bfa356cd14ab2a038bd86d7b49fada359 (diff)
Add support for allowing modals to be display:none when not open (#902)
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/js/settings/modal.js27
1 files changed, 25 insertions, 2 deletions
diff --git a/ext/bg/js/settings/modal.js b/ext/bg/js/settings/modal.js
index 55f73406..0cba167d 100644
--- a/ext/bg/js/settings/modal.js
+++ b/ext/bg/js/settings/modal.js
@@ -23,6 +23,10 @@ class Modal extends EventDispatcher {
this._mutationObserver = null;
this._visible = false;
this._visibleClassName = 'modal-container-open';
+ this._openingClassName = 'modal-container-opening';
+ this._closingClassName = 'modal-container-closing';
+ this._closingAnimationDuration = 375; // Milliseconds; includes buffer
+ this._closeTimer = null;
}
get node() {
@@ -44,8 +48,27 @@ class Modal extends EventDispatcher {
} else {
const {classList} = this._node;
if (classList.contains(this._visibleClassName) === value) { return; }
- classList.toggle(this._visibleClassName, value);
- if (value) { this._node.focus(); }
+
+ if (this._closeTimer !== null) {
+ clearTimeout(this._closeTimer);
+ this._closeTimer = null;
+ }
+
+ if (value) {
+ classList.add(this._openingClassName);
+ getComputedStyle(this._node).getPropertyValue('display'); // Force update of CSS display property, allowing animation
+ classList.add(this._visibleClassName);
+ classList.remove(this._closingClassName);
+ classList.remove(this._openingClassName);
+ this._node.focus();
+ } else {
+ classList.add(this._closingClassName);
+ classList.remove(this._visibleClassName);
+ this._closeTimer = setTimeout(() => {
+ this._closeTimer = null;
+ classList.remove(this._closingClassName);
+ }, this._closingAnimationDuration);
+ }
}
}