Merge pull request #1647 from codidact/0valt/1579/comments

General improvements to comment threads

Author: ArtOfCode-

.rubocop.yml

@@ -23,7 +23,7 @@ Layout/LineLength:
 Layout/SpaceAroundMethodCallOperator:
   Enabled: true
 Layout/SpaceInsideArrayLiteralBrackets:
-  Enabled: false
+  Enabled: true
 
 Lint/DeprecatedOpenSSLConstant:
   Enabled: true

app/assets/javascripts/comments.js

@@ -1,54 +1,70 @@
 $(() => {
-  $('.js-more-comments').on('click', async (evt) => {
+  $(document).on('click', '.js-more-comments', async (evt) => {
     evt.preventDefault();
     const $tgt = $(evt.target);
     const $anchor = $tgt.is('a') ? $tgt : $tgt.parents('a');
     const postId = $anchor.attr('data-post-id');
 
-    const resp = await fetch(`/comments/post/${postId}`, {
-      headers: { 'Accept': 'text/html' }
-    });
-    const data = await resp.text();
+    const data = await QPixel.getThreadsListContent(postId);
+
     $tgt.parents('.post--comments').find('.post--comments-container').html(data).trigger('ajax:success');
     $tgt.parents('.post--comments').find('.js-more-comments').remove();
   });
 
+  /**
+   * @param {JQuery<HTMLElement>} $tgt
+   * @returns {HTMLElement | null}
+   */
+  const getCommentThreadWrapper = ($tgt) => {
+    return $tgt.closest('.js-comment-thread-wrapper')[0] ?? null;
+  };
+
   $(document).on('click', '.post--comments-thread.is-inline a', async (evt) => {
     if (evt.ctrlKey) { return; }
 
     evt.preventDefault();
 
     const $tgt = $(evt.target);
-    openThread($tgt.closest('.post--comments-thread-wrapper')[0], $tgt.attr("href"));
-  });
+    const $threadId = $tgt.data('thread');
+    const wrapper = getCommentThreadWrapper($tgt);
 
-  async function openThread(wrapper, targetUrl, showDeleted = false) {
-    const resp = await fetch(`${targetUrl}?inline=true&show_deleted_comments=${showDeleted ? 1 : 0}`, {
-      headers: { 'Accept': 'text/html' }
-    });
-    let data = await resp.text();
+    openThread(wrapper, $threadId);
+  });
 
-    data = data.split("<!-- THREAD STARTS BELOW -->")[1];
-    data = data.split("<!-- THREAD ENDS ABOVE -->")[0];
+  /**
+   * @param {HTMLElement} wrapper
+   * @param {string} threadId
+   * @param {GetThreadContentOptions} [options]
+   */
+  async function openThread(wrapper, threadId, options) {
+    const data = await QPixel.getThreadContent(threadId, options);
 
     wrapper.innerHTML = data;
 
-    $('a.show-deleted-comments').click(async (evt) => {
-      if (evt.ctrlKey) { return; }
-      evt.preventDefault();
-      openThread(wrapper, targetUrl, true);
-    });
-
     window.MathJax && MathJax.typeset();
     window.hljs && hljs.highlightAll();
   }
 
+  $(document).on('click', '.js-show-deleted-comments', (ev) => {
+    if (ev.ctrlKey) { return; } // do we really need it?
+
+    ev.preventDefault();
+
+    const $tgt = $(ev.target);
+    const $inline = $tgt.data('inline');
+    const $threadId = $tgt.data('thread');
+    const wrapper = getCommentThreadWrapper($tgt);
+
+    openThread(wrapper, $threadId, { inline: $inline, showDeleted: true });
+  });
+
   $(document).on('click', '.js-collapse-thread', async (ev) => {
     const $tgt = $(ev.target);
     const $widget = $tgt.parents('.widget');
     const $embed = $tgt.parents('.post--comments-thread');
 
     const threadId = $widget.data('thread');
+    const isLocked = $widget.data('locked');
     const isDeleted = $widget.data('deleted');
     const isArchived = $widget.data('archived');
     const threadTitle = $widget.find('.js-thread-title').text();
@@ -58,14 +74,21 @@ $(() => {
     const $link = $(`<a href="/comments/thread/${threadId}" class="js--comment-link" data-thread=${threadId}></a>`);
     $link.text(threadTitle);
 
+    if (isLocked) {
+      $container.append(`<i class="fas fa-lock fa-fw" title="Locked thread" aria-label="Locked thread"></i>`);
+      $container.addClass('is-locked');
+    }
+
     if (isDeleted) {
       $container.append(`<i class="fas fa-trash h-c-red-600 fa-fw" title="Deleted thread" aria-label="Deleted thread"></i>`);
       $container.addClass('is-deleted');
     }
+
     if (isArchived) {
       $container.append(`<i class="fas fa-archive fa-fw" title="Archived thread" aria-label="Archived thread"></i>`);
       $container.addClass('is-archived');
     }
+
     $container.append($link);
     $container.append(`(${replyCount} comment${replyCount !== 1 ? 's' : ''})`);
     $embed[0].outerHTML = $container[0].outerHTML;
@@ -78,35 +101,48 @@ $(() => {
     const $comment = $tgt.parents('.comment');
     const $commentBody = $comment.find('.comment--body');
     const $thread = $comment.parents('.thread');
+
     const commentId = $comment.attr('data-id');
     const postId = $thread.attr('data-post');
     const threadId = $thread.attr('data-thread');
+
+    // if this matches, this means we are already in edit mode
+    if ($(`.js-discard-edit[data-comment-id="${commentId}"]`).length) {
+      return;
+    }
+
     const originalComment = $commentBody.clone();
 
-    const resp = await fetch(`/comments/${commentId}`, {
-      credentials: 'include',
-      headers: { 'Accept': 'application/json' }
-    });
-    const data = await resp.json();
-    const content = data.content;
+    const data = await QPixel.getComment(commentId);
 
     const formTemplate = `<form action="/comments/${commentId}/edit" method="POST" class="comment-edit-form" data-remote="true">
       <label for="comment-content" class="form-element">Comment body:</label>
-      <textarea id="comment-content" rows="6" class="form-element is-small" data-thread="${threadId}" data-post="${postId}" data-character-count=".js-character-count-comment-body" name="comment[content]">${content}</textarea>
+      <textarea id="comment-content"
+                class="form-element is-small"
+                data-character-count=".js-character-count-comment-body"
+                data-post="${postId}"
+                data-thread="${threadId}"
+                name="comment[content]"
+                rows="6">${data.content}</textarea>
       <input type="submit" class="button is-muted is-filled" value="Update comment" />
-      <input type="button" name="js-discard-edit" data-comment-id="${commentId}" value="Discard Edit" class="button is-danger is-outlined js-discard-edit" />
+      <input type="button"
+             class="button is-danger is-outlined js-discard-edit"
+             data-comment-id="${commentId}"
+             name="js-discard-edit"
+             value="Discard Edit" />
       <span class="has-float-right has-font-size-caption js-character-count-comment-body"
             data-max="1000" data-min="15">
         <i class="fas fa-ellipsis-h js-character-count__icon"></i>
-        <span class="js-character-count__count">${content.length} / 1000</span>
+        <span class="js-character-count__count">${data.content.length} / 1000</span>
       </span>
     </form>`;
 
     $commentBody.html(formTemplate);
+    $commentBody.find('textarea#comment-content').trigger('focus');
 
     $commentBody.find(`#comment-content`).on('keyup', pingable_popup);
 
-    $(`.js-discard-edit[data-comment-id="${commentId}"]`).click(() => {
+    $(`.js-discard-edit[data-comment-id="${commentId}"]`).on('click', () => {
       $commentBody.html(originalComment.html());
     });
   });
@@ -115,13 +151,10 @@ $(() => {
     const $tgt = $(evt.target);
     const $comment = $tgt.parents('.comment');
 
-    if (data.status === 'success') {
+    QPixel.handleJSONResponse(data, (data) => {
       const newComment = $(data.comment);
       $comment.html(newComment[0].innerHTML);
-    }
-    else {
-      QPixel.createNotification('danger', data.message);
-    }
+    });
   });
 
   $(document).on('click', '.js-comment-delete, .js-comment-undelete', async (evt) => {
@@ -132,23 +165,18 @@ $(() => {
     const commentId = $comment.attr('data-id');
     const isDelete = !$comment.hasClass('deleted-content');
 
-    const resp = await QPixel.fetchJSON(`/comments/${commentId}/delete`, {}, { method: isDelete ? 'DELETE' : 'PATCH' });
-
-    const data = await resp.json();
+    const data = await (isDelete ? QPixel.deleteComment(commentId) : QPixel.undeleteComment(commentId));
 
-    if (data.status === 'success') {
+    QPixel.handleJSONResponse(data, () => {
       if (isDelete) {
         $comment.addClass('deleted-content');
-        $tgt.removeClass('js-comment-delete').addClass('js-comment-undelete').text('undelete');
+        $tgt.removeClass('js-comment-delete').addClass('js-comment-undelete').val('undelete');
       }
       else {
         $comment.removeClass('deleted-content');
-        $tgt.removeClass('js-comment-undelete').addClass('js-comment-delete').text('delete');
+        $tgt.removeClass('js-comment-undelete').addClass('js-comment-delete').val('delete');
       }
-    }
-    else {
-      QPixel.createNotification('danger', data.message);
-    }
+    });
   });
 
   $(document).on('click', '.js--show-followers', async (evt) => {
@@ -163,38 +191,56 @@ $(() => {
       credentials: 'include',
       headers: { 'Accept': 'text/html' }
     });
+
     const data = await resp.text();
+
     $modal.find('.js-follower-display').html(data);
   });
 
+  $(document).on('click', '[class*=js--lock-thread] form', async (evt) => {
+    evt.preventDefault();
+
+    const $tgt = $(evt.target);
+    const threadID = $tgt.data("thread");
+
+    const data = await QPixel.lockThread(threadID);
+
+    QPixel.handleJSONResponse(data, () => {
+      window.location.reload();
+    });
+  });
+
   $(document).on('click', '.js--restrict-thread, .js--unrestrict-thread', async (evt) => {
     evt.preventDefault();
 
     const $tgt = $(evt.target);
-    const threadID = $tgt.data("thread")
-    const action = $tgt.data("action")
+    const threadID = $tgt.data("thread");
+    const action = $tgt.data("action");
     const route = $tgt.hasClass("js--restrict-thread") ? 'restrict' : 'unrestrict';
 
     const resp = await QPixel.fetchJSON(`/comments/thread/${threadID}/${route}`, { type: action });
 
     const data = await resp.json();
 
-    if (data.status === 'success') {
+    QPixel.handleJSONResponse(data, () => {
       window.location.reload();
-    }
-    else {
-      QPixel.createNotification('danger', data.message);
-    }
+    });
   });
 
   $(document).on('click', '.comment-form input[type="submit"]', async (evt) => {
     // Comment posting has been clicked.
     $(evt.target).attr('data-disable-with', 'Posting...');
   });
 
+  /**
+   * @type {Record<`${number}-${number}`, Record<string, number>>}
+   */
   const pingable = {};
   $(document).on('keyup', '.js-comment-field', pingable_popup);
 
+  /**
+   * @type {QPixelPingablePopupCallback}
+   */
   async function pingable_popup(ev) {
     if (QPixel.Popup.isSpecialKey(ev.keyCode)) {
       return;
@@ -248,20 +294,36 @@ $(() => {
     }
   }
 
-  $('.js-new-thread-link').on('click', async (ev) => {
+  $(document).on('click', '.js-new-thread-link', async (ev) => {
     ev.preventDefault();
     const $tgt = $(ev.target);
     const postId = $tgt.attr('data-post');
     const $thread = $(`#new-thread-modal-${postId}`);
 
     if ($thread.is(':hidden')) {
       $thread.show();
+      $thread.find('.js-comment-field').trigger('focus');
     }
     else {
       $thread.hide();
     }
   });
 
+  $(document).on('click', '.js-reply-to-thread-link', async (ev) => {
+    ev.preventDefault();
+    const $tgt = $(ev.target);
+    const postId = $tgt.attr('data-post');
+    const $reply = $(`#reply-to-thread-form-${postId}`);
+
+    if ($reply.is(':hidden')) {
+      $reply.show();
+      $reply.find('.js-comment-field').trigger('focus');
+    }
+    else {
+      $reply.hide();
+    }
+  });
+
   $('.js-comment-permalink > .js-text').text('copy link');
   $(document).on('click', '.js-comment-permalink', (ev) => {
     ev.preventDefault();