PERF: Check for modal visibility in a more efficient way

This code runs on every keyup event in the application, so it needs to be efficient. Previously we were iterating over the whole document using the JQuery :visible selector. Per the JQuery docs at https://api.jquery.com/visible-selector/

> Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

We already had a `hidden` class on the modal element which we can check, so we can check that instead.
This commit is contained in:
David Taylor 2020-07-01 17:49:23 +01:00
parent fc4d74870c
commit 76d5e54aab
No known key found for this signature in database
GPG Key ID: 46904C18B1D3F434

View File

@ -36,7 +36,7 @@ export default Component.extend({
setUp() {
$("html").on("keyup.discourse-modal", e => {
//only respond to events when the modal is visible
if ($("#discourse-modal:visible").length > 0) {
if (!this.element.classList.contains("hidden")) {
if (e.which === 27 && this.dismissable) {
next(() => $(".modal-header button.modal-close").click());
}