alex/yomichan
1
Fork 0
Code Releases Activity

Add support for allowing modals to be display:none when not open (#902)

Browse Source
This commit is contained in:
toasted-nutbread 2020-10-10 10:12:53 -04:00 committed by GitHub
parent 1ae8fb4bfa
commit 591253d783
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ext/bg/js/settings/modal.js
View File

@ -23,6 +23,10 @@ class Modal extends EventDispatcher {
this._mutationObserver = null; this._mutationObserver = null;
this._visible = false; this._visible = false;
this._visibleClassName = 'modal-container-open'; 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() { get node() {
@ -44,8 +48,27 @@ class Modal extends EventDispatcher {
} else { } else {
const {classList} = this._node; const {classList} = this._node;
if (classList.contains(this._visibleClassName) === value) { return; } 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);
}
} }
} }