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.

Props Pento.
Fixes #46260.


Built from https://develop.svn.wordpress.org/trunk@44748


git-svn-id: http://core.svn.wordpress.org/trunk@44580 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Peter Wilson 2019-02-18 04:27:50 +00:00
parent 82859e2641
commit 1b2f7d862c
3 changed files with 50 additions and 3 deletions

View File

@ -22,6 +22,9 @@ window.addComment = ( function( window ) {
postIdFieldId : 'comment_post_ID' postIdFieldId : 'comment_post_ID'
}; };
// Cross browser MutationObserver.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
// Check browser cuts the mustard. // Check browser cuts the mustard.
var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window; var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window;
@ -40,9 +43,15 @@ window.addComment = ( function( window ) {
// The respond element. // The respond element.
var respondElement; var respondElement;
// The mutation observer.
var observer;
// Initialise the events. // Initialise the events.
init(); init();
// Set up a MutationObserver to check for comments loaded late.
observeChanges();
/** /**
* Add events to links classed .comment-reply-link. * 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. * @param {HTMLElement} context The parent DOM element to search for links.
*/ */
function init( context ) { function init( context ) {
if ( true !== cutsTheMustard ) { if ( ! cutsTheMustard ) {
return; 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. * Backward compatible getter of data-* attribute.
* *

View File

@ -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<i;h++)b=f[h],b.addEventListener("touchstart",e),b.addEventListener("click",e)}}function c(a){var b,c=n.commentReplyClass;return a&&a.childNodes||(a=m),b=m.getElementsByClassName?a.getElementsByClassName(c):a.querySelectorAll("."+c)}function d(a){var b=this,c=n.temporaryFormId,d=g(c);d&&l&&(g(n.parentIdFieldId).value="0",d.parentNode.replaceChild(l,d),b.style.display="none",a.preventDefault())}function e(b){var c,d=this,e=f(d,"belowelement"),g=f(d,"commentid"),h=f(d,"respondelement"),i=f(d,"postid");c=a.addComment.moveForm(e,g,h,i),!1===c&&b.preventDefault()}function f(a,b){return p?a.dataset[b]:a.getAttribute("data-"+b)}function g(a){return m.getElementById(a)}function h(b,c,d,e){var f=g(b);l=g(d);var h,o,p,q=g(n.parentIdFieldId),r=g(n.postIdFieldId);if(f&&l&&q){i(l),e&&r&&(r.value=e),q.value=c,j.style.display="",f.parentNode.insertBefore(l,f.nextSibling),j.onclick=function(){return!1};try{for(var s=0;s<k.elements.length;s++)if(h=k.elements[s],o=!1,"getComputedStyle"in a?p=a.getComputedStyle(h):m.documentElement.currentStyle&&(p=h.currentStyle),(h.offsetWidth<=0&&h.offsetHeight<=0||"hidden"===p.visibility)&&(o=!0),"hidden"!==h.type&&!h.disabled&&!o){h.focus();break}}catch(t){}return!1}}function i(a){var b=n.temporaryFormId,c=g(b);c||(c=m.createElement("div"),c.id=b,c.style.display="none",a.parentNode.insertBefore(c,a))}var j,k,l,m=a.document,n={commentReplyClass:"comment-reply-link",cancelReplyId:"cancel-comment-reply-link",commentFormId:"commentform",temporaryFormId:"wp-temp-form-div",parentIdFieldId:"comment_parent",postIdFieldId:"comment_post_ID"},o="querySelector"in m&&"addEventListener"in a,p=!!m.body.dataset;return b(),{init:b,moveForm:h}}(window); window.addComment=function(a){function b(a){if(s&&(l=i(q.cancelReplyId),m=i(q.commentFormId),l)){l.addEventListener("touchstart",d),l.addEventListener("click",d);for(var b,f=c(a),g=0,h=f.length;g<h;g++)b=f[g],b.addEventListener("touchstart",e),b.addEventListener("click",e)}}function c(a){var b,c=q.commentReplyClass;return a&&a.childNodes||(a=p),b=p.getElementsByClassName?a.getElementsByClassName(c):a.querySelectorAll("."+c)}function d(a){var b=this,c=q.temporaryFormId,d=i(c);d&&n&&(i(q.parentIdFieldId).value="0",d.parentNode.replaceChild(n,d),b.style.display="none",a.preventDefault())}function e(b){var c,d=this,e=h(d,"belowelement"),f=h(d,"commentid"),g=h(d,"respondelement"),i=h(d,"postid");c=a.addComment.moveForm(e,f,g,i),!1===c&&b.preventDefault()}function f(){if(r){var a={childList:!0,subTree:!0};o=new r(g),o.observe(p.body,a)}}function g(a){for(var c=a.length;c--;)if(a[c].addedNodes.length)return void b()}function h(a,b){return t?a.dataset[b]:a.getAttribute("data-"+b)}function i(a){return p.getElementById(a)}function j(b,c,d,e){var f=i(b);n=i(d);var g,h,j,o=i(q.parentIdFieldId),r=i(q.postIdFieldId);if(f&&n&&o){k(n),e&&r&&(r.value=e),o.value=c,l.style.display="",f.parentNode.insertBefore(n,f.nextSibling),l.onclick=function(){return!1};try{for(var s=0;s<m.elements.length;s++)if(g=m.elements[s],h=!1,"getComputedStyle"in a?j=a.getComputedStyle(g):p.documentElement.currentStyle&&(j=g.currentStyle),(g.offsetWidth<=0&&g.offsetHeight<=0||"hidden"===j.visibility)&&(h=!0),"hidden"!==g.type&&!g.disabled&&!h){g.focus();break}}catch(t){}return!1}}function k(a){var b=q.temporaryFormId,c=i(b);c||(c=p.createElement("div"),c.id=b,c.style.display="none",a.parentNode.insertBefore(c,a))}var l,m,n,o,p=a.document,q={commentReplyClass:"comment-reply-link",cancelReplyId:"cancel-comment-reply-link",commentFormId:"commentform",temporaryFormId:"wp-temp-form-div",parentIdFieldId:"comment_parent",postIdFieldId:"comment_post_ID"},r=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,s="querySelector"in p&&"addEventListener"in a,t=!!p.body.dataset;return b(),f(),{init:b,moveForm:j}}(window);

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.2-alpha-44747'; $wp_version = '5.2-alpha-44748';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.