diff --git a/src/js/_enqueues/lib/comment-reply.js b/src/js/_enqueues/lib/comment-reply.js index 71f997328e..fae92ee237 100644 --- a/src/js/_enqueues/lib/comment-reply.js +++ b/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. *