diff --git a/src/wp-includes/comment-template.php b/src/wp-includes/comment-template.php index 0f8f7a39c8..3b7a46c8cb 100644 --- a/src/wp-includes/comment-template.php +++ b/src/wp-includes/comment-template.php @@ -1667,15 +1667,25 @@ function get_comment_reply_link( $args = array(), $comment = null, $post = null $args['login_text'] ); } else { - $onclick = sprintf( - 'return addComment.moveForm( "%1$s-%2$s", "%2$s", "%3$s", "%4$s" )', - $args['add_below'], $comment->comment_ID, $args['respond_id'], $post->ID + $data_attributes = array( + 'commentid' => $comment->comment_ID, + 'postid' => $post->ID, + 'belowelement' => $args['add_below'] . '-' . $comment->comment_ID, + 'respondelement' => $args['respond_id'], ); + $data_attribute_string = ''; + + foreach ( $data_attributes as $name => $value ) { + $data_attribute_string .= " data-${name}=\"" . esc_attr( $value ) . "\""; + } + + $data_attribute_string = trim( $data_attribute_string ); + $link = sprintf( - "%s", - esc_url( add_query_arg( 'replytocom', $comment->comment_ID, get_permalink( $post->ID ) ) ) . '#' . $args['respond_id'], - $onclick, + "%s", + esc_url( add_query_arg( 'replytocom', $comment->comment_ID ) ) . "#" . $args['respond_id'], + $data_attribute_string, esc_attr( sprintf( $args['reply_to_text'], $comment->comment_author ) ), $args['reply_text'] ); diff --git a/src/wp-includes/js/comment-reply.js b/src/wp-includes/js/comment-reply.js index 3ddf7744ce..90cd0fa64d 100644 --- a/src/wp-includes/js/comment-reply.js +++ b/src/wp-includes/js/comment-reply.js @@ -5,123 +5,291 @@ * * @type {Object} */ -var addComment = { +var addComment; +addComment = ( function( window ) { + // Avoid scope lookups on commonly used variables. + var document = window.document; + + // Settings. + var config = { + commentReplyClass : 'comment-reply-link', + cancelReplyId : 'cancel-comment-reply-link', + commentFieldId : 'comment', + temporaryFormId : 'wp-temp-form-div', + parentIdFieldId : 'comment_parent', + postIdFieldId : 'comment_post_ID' + }; + + // Check browser cuts the mustard. + var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window; + + /* + * Check browser supports dataset. + * !! sets the variable to true if the property exists. + */ + var supportsDataset = !! document.body.dataset; + + // For holding the cancel element. + var cancelElement; + + // For holding the comment field element. + var commentFieldElement; + + // The respond element. + var respondElement; + + // Initialise the events. + init(); + /** - * @summary Retrieves the elements corresponding to the given IDs. + * Add events to links classed .comment-reply-link. + * + * Searches the context for reply links and adds the JavaScript events + * required to move the comment form. To allow for lazy loading of + * comments this method is exposed as window.commentReply.init(). * - * @since 2.7.0 + * @ticket 31590 * - * @param {string} commId The comment ID. - * @param {string} parentId The parent ID. - * @param {string} respondId The respond ID. - * @param {string} postId The post ID. - * @returns {boolean} Always returns false. + * @param {HTMLElement} context The parent DOM element to search for links. */ - moveForm: function( commId, parentId, respondId, postId ) { - var div, element, style, cssHidden, - t = this, - comm = t.I( commId ), - respond = t.I( respondId ), - cancel = t.I( 'cancel-comment-reply-link' ), - parent = t.I( 'comment_parent' ), - post = t.I( 'comment_post_ID' ), - commentForm = respond.getElementsByTagName( 'form' )[0]; - - if ( ! comm || ! respond || ! cancel || ! parent || ! commentForm ) { + function init( context ) { + if ( true !== cutsTheMustard ) { + return; + } + + // Get required elements. + cancelElement = getElementById( config.cancelReplyId ); + commentFieldElement = getElementById( config.commentFieldId ); + + // No cancel element, no replies. + if ( ! cancelElement ) { return; } - t.respondId = respondId; - postId = postId || false; + cancelElement.addEventListener( 'touchstart', cancelEvent ); + cancelElement.addEventListener( 'click', cancelEvent ); + + var links = replyLinks( context ); + var element; + + for ( var i=0, l=links.length; i < l; i++ ) { + element = links[i]; + + element.addEventListener( 'touchstart', clickEvent ); + element.addEventListener( 'click', clickEvent ); + } + } + + + /** + * Return all links classed .comment-reply-link + * + * @ticket 31590 + * + * @param {HTMLElement} context The parent DOM element to search for links. + * + * @return {HTMLCollection|NodeList|Array} + */ + function replyLinks( context ) { + var selectorClass = config.commentReplyClass; + var allReplyLinks; + + // childNodes is a handy check to ensure the context is a HTMLElement. + if ( ! context || ! context.childNodes ) { + context = document; + } - if ( ! t.I( 'wp-temp-form-div' ) ) { - div = document.createElement( 'div' ); - div.id = 'wp-temp-form-div'; - div.style.display = 'none'; - respond.parentNode.insertBefore( div, respond ); + if ( document.getElementsByClassName ) { + // Fastest. + allReplyLinks = context.getElementsByClassName( selectorClass ); + } + else { + // Fast. + allReplyLinks = context.querySelectorAll( '.' + selectorClass ); } - comm.parentNode.insertBefore( respond, comm.nextSibling ); - if ( post && postId ) { - post.value = postId; + return allReplyLinks; + } + + + /** + * Cancel event handler. + * + * @ticket 31590 + * + * @param {Event} event The calling event. + */ + function cancelEvent( event ) { + var cancelLink = this; + var temporaryFormId = config.temporaryFormId; + var temporaryElement = getElementById( temporaryFormId ); + + if ( ! temporaryElement || ! respondElement ) { + // Conditions for cancel link fail. + return; } - parent.value = parentId; - cancel.style.display = ''; - /** - * @summary Puts back the comment, hides the cancel button and removes the onclick event. - * - * @returns {boolean} Always returns false. + getElementById( config.parentIdFieldId ).value = '0'; + + // Move the respond form back in place of the temporary element. + temporaryElement.parentNode.replaceChild( respondElement ,temporaryElement ); + cancelLink.style.display = 'none'; + event.preventDefault(); + } + + + /** + * Click event handler. + * + * @ticket 31590 + * + * @param {Event} event The calling event. + */ + function clickEvent( event ) { + var replyLink = this, + commId = getDataAttribute( replyLink, 'belowelement'), + parentId = getDataAttribute( replyLink, 'commentid' ), + respondId = getDataAttribute( replyLink, 'respondelement'), + postId = getDataAttribute( replyLink, 'postid'), + follow; + + /* + * Third party comments systems can hook into this function via the global scope, + * therefore the click event needs to reference the global scope. */ - cancel.onclick = function() { - var t = addComment, - temp = t.I( 'wp-temp-form-div' ), - respond = t.I( t.respondId ); - - if ( ! temp || ! respond ) { - return; - } - - t.I( 'comment_parent' ).value = '0'; - temp.parentNode.insertBefore( respond, temp ); - temp.parentNode.removeChild( temp ); - this.style.display = 'none'; - this.onclick = null; - return false; - }; + follow = window.addComment.moveForm(commId, parentId, respondId, postId); + if ( false === follow ) { + event.preventDefault(); + } + } + + /** + * Backward compatible getter of data-* attribute. + * + * Uses element.dataset if it exists, otherwise uses getAttribute. + * + * @ticket 31590 + * + * @param {HTMLElement} Element DOM element with the attribute. + * @param {String} Attribute the attribute to get. + * + * @return {String} + */ + function getDataAttribute( element, attribute ) { + if ( supportsDataset ) { + return element.dataset[attribute]; + } + else { + return element.getAttribute( 'data-' + attribute ); + } + } + + /** + * Get element by ID. + * + * Local alias for document.getElementById. + * + * @ticket 31590 + * + * @param {HTMLElement} The requested element. + */ + function getElementById( elementId ) { + return document.getElementById( elementId ); + } + + + /** + * moveForm + * + * Moves the reply form from it's current position to the reply location. + * + * @ticket 31590 + * + * @param {String} addBelowId HTML ID of element the form follows. + * @param {String} commentId Database ID of comment being replied to. + * @param {String} respondId HTML ID of 'respond' element. + * @param {String} postId Database ID of the post. + */ + + function moveForm( addBelowId, commentId, respondId, postId ) { + // Get elements based on their IDs. + var addBelowElement = getElementById( addBelowId ); + respondElement = getElementById( respondId ); + + // Get the hidden fields. + var parentIdField = getElementById( config.parentIdFieldId ); + var postIdField = getElementById( config.postIdFieldId ); + + if ( ! addBelowElement || ! respondElement || ! parentIdField ) { + // Missing key elements, fail. + return; + } + + addPlaceHolder( respondElement ); + + // Set the value of the post. + if ( postId && postIdField ) { + postIdField.value = postId; + } + + parentIdField.value = commentId; + + cancelElement.style.display = ''; + addBelowElement.parentNode.insertBefore( respondElement, addBelowElement.nextSibling ); /* - * Sets initial focus to the first form focusable element. - * Uses try/catch just to avoid errors in IE 7- which return visibility - * 'inherit' when the visibility value is inherited from an ancestor. + * This is for backward compatibility with third party commenting systems + * hooking into the event using older techniques. */ + cancelElement.onclick = function(){ + return false; + }; + + // Focus on the comment field. try { - for ( var i = 0; i < commentForm.elements.length; i++ ) { - element = commentForm.elements[i]; - cssHidden = false; - - // Modern browsers. - if ( 'getComputedStyle' in window ) { - style = window.getComputedStyle( element ); - // IE 8. - } else if ( document.documentElement.currentStyle ) { - style = element.currentStyle; - } - - /* - * For display none, do the same thing jQuery does. For visibility, - * check the element computed style since browsers are already doing - * the job for us. In fact, the visibility computed style is the actual - * computed value and already takes into account the element ancestors. - */ - if ( ( element.offsetWidth <= 0 && element.offsetHeight <= 0 ) || style.visibility === 'hidden' ) { - cssHidden = true; - } - - // Skip form elements that are hidden or disabled. - if ( 'hidden' === element.type || element.disabled || cssHidden ) { - continue; - } - - element.focus(); - // Stop after the first focusable element. - break; - } - - } catch( er ) {} + commentFieldElement.focus(); + } + catch(e) { + + } + /* + * false is returned for backward compatibility with third party commenting systems + * hooking into this function. + */ return false; - }, + } + /** - * @summary Returns the object corresponding to the given ID. + * Add placeholder element. + * + * Places a place holder element above the #respond element for + * the form to be returned to if needs be. * - * @since 2.7.0 + * @param {HTMLelement} respondElement the #respond element holding comment form. * - * @param {string} id The ID. - * @returns {Element} The element belonging to the ID. + * @ticket 31590 */ - I: function( id ) { - return document.getElementById( id ); + function addPlaceHolder( respondElement ) { + var temporaryFormId = config.temporaryFormId; + var temporaryElement = getElementById( temporaryFormId ); + + if ( temporaryElement ) { + // The element already exists, no need to recreate. + return; + } + + temporaryElement = document.createElement( 'div' ); + temporaryElement.id = temporaryFormId; + temporaryElement.style.display = 'none'; + respondElement.parentNode.insertBefore( temporaryElement, respondElement ); } -}; + + + return { + init: init, + moveForm: moveForm + }; + +})( window );