Changeset 44751

Timestamp:

02/19/2019 02:00:21 AM (6 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;
+            }
         }
     }