node-new-comments-link.js 5.5 KB

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