Skip to content
Permalink
Browse files

Comments: Fix backward compatibility regressions in comment reply Jav…

…aScript.

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.


git-svn-id: https://develop.svn.wordpress.org/branches/5.1@44751 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
pento committed Feb 19, 2019
1 parent 6738477 commit bd559de86e35266ad94fbdb7e69866d695b3d0d6
Showing with 48 additions and 1 deletion.
  1. +48 −1 src/js/_enqueues/lib/comment-reply.js
@@ -22,6 +22,9 @@ window.addComment = ( function( window ) {
postIdFieldId : 'comment_post_ID'
};

// Cross browser MutationObserver.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// Check browser cuts the mustard.
var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window;

@@ -40,9 +43,15 @@ window.addComment = ( function( window ) {
// The respond element.
var respondElement;

// The mutation observer.
var observer;

// Initialise the events.
init();

// Set up a MutationObserver to check for comments loaded late.
observeChanges();

/**
* Add events to links classed .comment-reply-link.
*
@@ -57,7 +66,7 @@ window.addComment = ( function( window ) {
* @param {HTMLElement} context The parent DOM element to search for links.
*/
function init( context ) {
if ( true !== cutsTheMustard ) {
if ( ! cutsTheMustard ) {
return;
}

@@ -164,6 +173,44 @@ window.addComment = ( function( window ) {
}
}

/**
* 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;
}
}
}

/**
* Backward compatible getter of data-* attribute.
*

0 comments on commit bd559de

Please sign in to comment.
You can’t perform that action at this time.