node-new-comments-link.es6.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /**
  2. * @file
  3. * Attaches behaviors for the Comment module's "X new comments" link.
  4. *
  5. * May only be loaded for authenticated users, with the History module
  6. * installed.
  7. */
  8. (function($, Drupal, drupalSettings) {
  9. /**
  10. * Hides a "new comment" element.
  11. *
  12. * @param {jQuery} $placeholder
  13. * The placeholder element of the new comment link.
  14. *
  15. * @return {jQuery}
  16. * The placeholder element passed in as a parameter.
  17. */
  18. function hide($placeholder) {
  19. return (
  20. $placeholder
  21. // Find the parent <li>.
  22. .closest('.comment-new-comments')
  23. // Find the preceding <li>, if any, and give it the 'last' class.
  24. .prev()
  25. .addClass('last')
  26. // Go back to the parent <li> and hide it.
  27. .end()
  28. .hide()
  29. );
  30. }
  31. /**
  32. * Removes a "new comment" element.
  33. *
  34. * @param {jQuery} $placeholder
  35. * The placeholder element of the new comment link.
  36. */
  37. function remove($placeholder) {
  38. hide($placeholder).remove();
  39. }
  40. /**
  41. * Shows a "new comment" element.
  42. *
  43. * @param {jQuery} $placeholder
  44. * The placeholder element of the new comment link.
  45. *
  46. * @return {jQuery}
  47. * The placeholder element passed in as a parameter.
  48. */
  49. function show($placeholder) {
  50. return (
  51. $placeholder
  52. // Find the parent <li>.
  53. .closest('.comment-new-comments')
  54. // Find the preceding <li>, if any, and remove its 'last' class, if any.
  55. .prev()
  56. .removeClass('last')
  57. // Go back to the parent <li> and show it.
  58. .end()
  59. .show()
  60. );
  61. }
  62. /**
  63. * Processes new comment links and adds appropriate text in relevant cases.
  64. *
  65. * @param {jQuery} $placeholders
  66. * The placeholder elements of the current page.
  67. */
  68. function processNodeNewCommentLinks($placeholders) {
  69. // Figure out which placeholders need the "x new comments" links.
  70. const $placeholdersToUpdate = {};
  71. let fieldName = 'comment';
  72. let $placeholder;
  73. $placeholders.each((index, placeholder) => {
  74. $placeholder = $(placeholder);
  75. const timestamp = parseInt(
  76. $placeholder.attr('data-history-node-last-comment-timestamp'),
  77. 10,
  78. );
  79. fieldName = $placeholder.attr('data-history-node-field-name');
  80. const nodeID = $placeholder
  81. .closest('[data-history-node-id]')
  82. .attr('data-history-node-id');
  83. const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
  84. // Queue this placeholder's "X new comments" link to be downloaded from
  85. // the server.
  86. if (timestamp > lastViewTimestamp) {
  87. $placeholdersToUpdate[nodeID] = $placeholder;
  88. }
  89. // No "X new comments" link necessary; remove it from the DOM.
  90. else {
  91. remove($placeholder);
  92. }
  93. });
  94. // Perform an AJAX request to retrieve node view timestamps.
  95. const nodeIDs = Object.keys($placeholdersToUpdate);
  96. if (nodeIDs.length === 0) {
  97. return;
  98. }
  99. /**
  100. * Renders the "X new comments" links.
  101. *
  102. * Either use the data embedded in the page or perform an AJAX request to
  103. * retrieve the same data.
  104. *
  105. * @param {object} results
  106. * Data about new comment links indexed by nodeID.
  107. */
  108. function render(results) {
  109. Object.keys(results || {}).forEach(nodeID => {
  110. if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
  111. $placeholdersToUpdate[nodeID]
  112. .attr('href', results[nodeID].first_new_comment_link)
  113. .text(
  114. Drupal.formatPlural(
  115. results[nodeID].new_comment_count,
  116. '1 new comment',
  117. '@count new comments',
  118. ),
  119. )
  120. .removeClass('hidden');
  121. show($placeholdersToUpdate[nodeID]);
  122. }
  123. });
  124. }
  125. if (drupalSettings.comment && drupalSettings.comment.newCommentsLinks) {
  126. render(drupalSettings.comment.newCommentsLinks.node[fieldName]);
  127. } else {
  128. $.ajax({
  129. url: Drupal.url('comments/render_new_comments_node_links'),
  130. type: 'POST',
  131. data: { 'node_ids[]': nodeIDs, field_name: fieldName },
  132. dataType: 'json',
  133. success: render,
  134. });
  135. }
  136. }
  137. /**
  138. * Render "X new comments" links wherever necessary.
  139. *
  140. * @type {Drupal~behavior}
  141. *
  142. * @prop {Drupal~behaviorAttach} attach
  143. * Attaches new comment links behavior.
  144. */
  145. Drupal.behaviors.nodeNewCommentsLink = {
  146. attach(context) {
  147. // Collect all "X new comments" node link placeholders (and their
  148. // corresponding node IDs) newer than 30 days ago that have not already
  149. // been read after their last comment timestamp.
  150. const nodeIDs = [];
  151. const $placeholders = $(context)
  152. .find('[data-history-node-last-comment-timestamp]')
  153. .once('history')
  154. .filter(function() {
  155. const $placeholder = $(this);
  156. const lastCommentTimestamp = parseInt(
  157. $placeholder.attr('data-history-node-last-comment-timestamp'),
  158. 10,
  159. );
  160. const nodeID = $placeholder
  161. .closest('[data-history-node-id]')
  162. .attr('data-history-node-id');
  163. if (Drupal.history.needsServerCheck(nodeID, lastCommentTimestamp)) {
  164. nodeIDs.push(nodeID);
  165. // Hide this placeholder link until it is certain we'll need it.
  166. hide($placeholder);
  167. return true;
  168. }
  169. // Remove this placeholder link from the DOM because we won't need
  170. // it.
  171. remove($placeholder);
  172. return false;
  173. });
  174. if ($placeholders.length === 0) {
  175. return;
  176. }
  177. // Perform an AJAX request to retrieve node read timestamps.
  178. Drupal.history.fetchTimestamps(nodeIDs, () => {
  179. processNodeNewCommentLinks($placeholders);
  180. });
  181. },
  182. };
  183. })(jQuery, Drupal, drupalSettings);