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

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