Changeset 44751

Timestamp:

02/19/2019 02:00:21 AM (8 years ago)

Author:

pento

Message:

Comments: Fix backward compatibility regressions in comment reply JavaScript.

Adds a MutationObserver to comment-reply.js to allow for lazy-loaded comments to continue working without the need to re-initialize the comment form.

Merges [44748] to the 5.1 branch.

Fixes #46260.

Location:

branches/5.1

Files:

• . (modified) (1 prop)
• src/js/_enqueues/lib/comment-reply.js (modified) (4 diffs)

branches/5.1/src/js/_enqueues/lib/comment-reply.js

@@ -23 +23 @@
         };
 
+        // Cross browser MutationObserver.
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+
         // Check browser cuts the mustard.
         var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window;
@@ -41 +44 @@
         var respondElement;
 
+        // The mutation observer.
+        var observer;
+
         // Initialise the events.
         init();
+
+        // Set up a MutationObserver to check for comments loaded late.
+        observeChanges();
 
         /**
@@ -58 +67 @@
          */
         function init( context ) {
-                if ( true !== cutsTheMustard ) {
+                if ( ! cutsTheMustard ) {
                         return;
                 }
@@ -162 +171 @@
                 if ( false === follow ) {
                         event.preventDefault();
+                }
+        }
+
+        /**
+         * Creates a mutation observer to check for newly inserted comments.
+         *
+         * @since 5.1.0
+         */
+        function observeChanges() {
+                if ( ! MutationObserver ) {
+                        return;
+                }
+
+                var observerOptions = {
+                        childList: true,
+                        subTree: true
+                };
+
+                observer = new MutationObserver( handleChanges );
+                observer.observe( document.body, observerOptions );
+        }
+
+        /**
+         * Handles DOM changes, calling init() if any new nodes are added.
+         *
+         * @since 5.1.0
+         *
+         * @param {Array} mutationRecords Array of MutationRecord objects.
+         */
+        function handleChanges( mutationRecords ) {
+                var i = mutationRecords.length;
+
+                while ( i-- ) {
+                        // Call init() once if any record in this set adds nodes.
+                        if ( mutationRecords[ i ].addedNodes.length ) {
+                                init();
+                                return;
+                        }
                 }
         }