MDL-69086 theme_boost: Improve pendingJs checks for bootstrap
authorAndrew Nicols <andrew@nicols.co.uk>
Thu, 18 Jun 2020 11:19:41 +0000 (19:19 +0800)
committerEloy Lafuente (stronk7) <stronk7@moodle.org>
Tue, 7 Jul 2020 18:01:02 +0000 (20:01 +0200)
Where an element, like an `alert`, is closed it is removed from the DOM
before the event fires (this is a correct behaviour).

This means that the final event confirming that the action happened
(i.e. close => closed) fires, but does not bubble up the DOM to the
document.body.

This change moves the end event listener to only be added after a start
event has been fired, and to attach directly to the HTMLElement where it
will be fired. This means that the Event handler will still be called,
even though it has been removed from the DOM, because it does not need
to bubble up to the body.

theme/boost/amd/build/pending.min.js
theme/boost/amd/build/pending.min.js.map
theme/boost/amd/src/pending.js

index 3630be6..8aff844 100644 (file)
Binary files a/theme/boost/amd/build/pending.min.js and b/theme/boost/amd/build/pending.min.js differ
index 09b04e7..1d1b9b9 100644 (file)
Binary files a/theme/boost/amd/build/pending.min.js.map and b/theme/boost/amd/build/pending.min.js.map differ
index 4b3a548..ad036d4 100644 (file)
@@ -121,13 +121,13 @@ export default () => {
         pairs.forEach(pair => {
             const eventStart = `${pair.start}.bs.${key}`;
             const eventEnd = `${pair.end}.bs.${key}`;
-            jQuery(document.body).on(eventStart, () => {
+            jQuery(document.body).on(eventStart, e => {
                 M.util.js_pending(eventEnd);
+                jQuery(e.target).one(eventEnd, () => {
+                    M.util.js_complete(eventEnd);
+                });
             });
 
-            jQuery(document.body).on(eventEnd, () => {
-                M.util.js_complete(eventEnd);
-            });
         });
     });
 };