From 1666ea22b71d1aba25c66907daf718310e28101b Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Tue, 19 Feb 2019 02:01:50 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/branches/5.1@44751 git-svn-id: http://core.svn.wordpress.org/branches/5.1@44583 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/js/comment-reply.js | 49 ++++++++++++++++++++++++++++- wp-includes/js/comment-reply.min.js | 2 +- wp-includes/version.php | 2 +- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/wp-includes/js/comment-reply.js b/wp-includes/js/comment-reply.js index 71f997328e..fae92ee237 100644 --- a/wp-includes/js/comment-reply.js +++ b/wp-includes/js/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. * diff --git a/wp-includes/js/comment-reply.min.js b/wp-includes/js/comment-reply.min.js index 48c4c257fa..af43cd4617 100644 --- a/wp-includes/js/comment-reply.min.js +++ b/wp-includes/js/comment-reply.min.js @@ -1 +1 @@ -window.addComment=function(a){function b(a){if(!0===o&&(j=g(n.cancelReplyId),k=g(n.commentFormId),j)){j.addEventListener("touchstart",d),j.addEventListener("click",d);for(var b,f=c(a),h=0,i=f.length;h