comments, forum posts: add 'Copy Link' action to '...' menu.

Add a 'Copy Link' action to forum posts and comments. This copies the full link to the clipboard. The 'Copy ID' action copies just the DText shortlink (comment #XXX or forum #XXX).
2022-01-13 13:07:23 -06:00
parent 5adeedcf01
commit ba29794e89
7 changed files with 50 additions and 21 deletions
--- a/app/components/application_component.rb
+++ b/app/components/application_component.rb
@@ -2,7 +2,7 @@

 class ApplicationComponent < ViewComponent::Base
  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :external_link_to, :tag_class, to: :helpers
-  delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, to: :helpers
+  delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, :hashtag_icon, to: :helpers

  def policy(subject)
    Pundit.policy!(current_user, subject)
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -132,9 +132,15 @@
          <% end %>
        <% end %>

+        <% menu.item do %>
+          <%= link_to comment_path(comment.id), class: "comment-copy-id" do %>
+            <%= hashtag_icon %> Copy ID
+          <% end %>
+        <% end %>
+
        <% menu.item do %>
          <%= link_to comment_path(comment.id), class: "comment-copy-link" do %>
-            <%= link_icon %> Copy ID
+            <%= link_icon %> Copy Link
          <% end %>
        <% end %>

--- a/app/components/comment_component/comment_component.js
+++ b/app/components/comment_component/comment_component.js
@@ -6,6 +6,7 @@ class CommentComponent {
      $(document).on("click.danbooru.comment", ".edit_comment_link", CommentComponent.showEditForm);
      $(document).on("click.danbooru.comment", ".expand-comment-response", CommentComponent.showNewCommentForm);
      $(document).on("click.danbooru.comment", ".unhide-comment-link", CommentComponent.unhideComment);
+      $(document).on("click.danbooru.comment", ".comment-copy-id", CommentComponent.copyID);
      $(document).on("click.danbooru.comment", ".comment-copy-link", CommentComponent.copyLink);
    }
  }
@@ -30,17 +31,18 @@ class CommentComponent {
    e.preventDefault();
  }

-  static async copyLink(e) {
-    let $comment = $(this).closest(".comment");
-    let link = `comment #${$comment.data("id")}`;
+  static async copyID(e) {
+    let id = $(this).closest(".comment").data("id");
+    let link = `comment #${id}`;
+    Utility.copyToClipboard(link);
    e.preventDefault();
+  }

-    try {
-      await navigator.clipboard.writeText(link);
-      Utility.notice(`Copied ${link} to clipboard.`);
-    } catch (error) {
-      Utility.error("Couldn't copy link to clipboard");
-    }
+  static async copyLink(e) {
+    let id = $(this).closest(".comment").data("id");
+    let link = `${window.location.origin}/comments/${id}`;
+    Utility.copyToClipboard(link);
+    e.preventDefault();
  }
 }

--- a/app/components/forum_post_component/forum_post_component.html.erb
+++ b/app/components/forum_post_component/forum_post_component.html.erb
@@ -65,9 +65,15 @@
          <% end %>
        <% end %>

+        <% menu.item do %>
+          <%= link_to forum_post_path(forum_post.id), class: "forum-post-copy-id" do %>
+            <%= hashtag_icon %> Copy ID
+          <% end %>
+        <% end %>
+
        <% menu.item do %>
          <%= link_to forum_post_path(forum_post.id), class: "forum-post-copy-link" do %>
-            <%= link_icon %> Copy ID
+            <%= link_icon %> Copy Link
          <% end %>
        <% end %>
      <% end %>
--- a/app/components/forum_post_component/forum_post_component.js
+++ b/app/components/forum_post_component/forum_post_component.js
@@ -6,6 +6,7 @@ class ForumPostComponent {
      $(document).on("click.danbooru.forum_post", ".edit_forum_post_link", ForumPostComponent.showEditPostForm);
      $(document).on("click.danbooru.forum_post", ".edit_forum_topic_link", ForumPostComponent.showEditTopicForm);
      $(document).on("click.danbooru.forum_post", "#new-response-link", ForumPostComponent.showNewForumPostForm);
+      $(document).on("click.danbooru.forum_post", ".forum-post-copy-id", ForumPostComponent.copyID);
      $(document).on("click.danbooru.forum_post", ".forum-post-copy-link", ForumPostComponent.copyLink);
    }
  }
@@ -26,17 +27,18 @@ class ForumPostComponent {
    e.preventDefault();
  }

-  static async copyLink(e) {
-    let $forumPost = $(this).closest(".forum-post");
-    let link = `forum #${$forumPost.data("id")}`;
+  static async copyID(e) {
+    let id = $(this).closest(".forum-post").data("id");
+    let link = `forum #${id}`;
+    Utility.copyToClipboard(link);
    e.preventDefault();
+  }

-    try {
-      await navigator.clipboard.writeText(link);
-      Utility.notice(`Copied ${link} to clipboard.`);
-    } catch (error) {
-      Utility.error("Couldn't copy link to clipboard");
-    }
+  static async copyLink(e) {
+    let id = $(this).closest(".forum-post").data("id");
+    let link = `${window.location.origin}/forum_posts/${id}`;
+    Utility.copyToClipboard(link);
+    e.preventDefault();
  }
 }

--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -169,6 +169,10 @@ module IconHelper
    svg_icon_tag("sound-icon", "M412.6 182c-10.28-8.334-25.41-6.867-33.75 3.402c-8.406 10.24-6.906 25.35 3.375 33.74C393.5 228.4 400 241.8 400 255.1c0 14.17-6.5 27.59-17.81 36.83c-10.28 8.396-11.78 23.5-3.375 33.74c4.719 5.806 11.62 8.802 18.56 8.802c5.344 0 10.75-1.779 15.19-5.399C435.1 311.5 448 284.6 448 255.1S435.1 200.4 412.6 182zM473.1 108.2c-10.22-8.334-25.34-6.898-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C476.6 172.1 496 213.3 496 255.1s-19.44 82.1-53.31 110.7c-10.25 8.396-11.75 23.5-3.344 33.74c4.75 5.775 11.62 8.771 18.56 8.771c5.375 0 10.75-1.779 15.22-5.431C518.2 366.9 544 313 544 255.1S518.2 145 473.1 108.2zM534.4 33.4c-10.22-8.334-25.34-6.867-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C559.9 116.3 592 183.9 592 255.1s-32.09 139.7-88.06 185.5c-10.25 8.396-11.75 23.5-3.344 33.74C505.3 481 512.2 484 519.2 484c5.375 0 10.75-1.779 15.22-5.431C601.5 423.6 640 342.5 640 255.1S601.5 88.34 534.4 33.4zM301.2 34.98c-11.5-5.181-25.01-3.076-34.43 5.29L131.8 160.1H48c-26.51 0-48 21.48-48 47.96v95.92c0 26.48 21.49 47.96 48 47.96h83.84l134.9 119.8C272.7 477 280.3 479.8 288 479.8c4.438 0 8.959-.9314 13.16-2.835C312.7 471.8 320 460.4 320 447.9V64.12C320 51.55 312.7 40.13 301.2 34.98z", viewbox: "0 0 640 512", **options)
  end

+  def hashtag_icon(**options)
+    svg_icon_tag("hashtag-icon", "M416 127.1h-58.23l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L292.9 127.1H197.8l9.789-58.74c2.906-17.44-8.875-33.92-26.3-36.83c-17.53-2.875-33.92 8.891-36.83 26.3L132.9 127.1H64c-17.67 0-32 14.33-32 32C32 177.7 46.33 191.1 64 191.1h58.23l-21.33 128H32c-17.67 0-32 14.33-32 32c0 17.67 14.33 31.1 32 31.1h58.23l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C108.5 479.9 110.3 480 112 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27h95.12l-9.789 58.74c-2.906 17.44 8.875 33.92 26.3 36.83C268.5 479.9 270.3 480 272 480c15.36 0 28.92-11.09 31.53-26.73l11.54-69.27H384c17.67 0 32-14.33 32-31.1c0-17.67-14.33-32-32-32h-58.23l21.33-128H416c17.67 0 32-14.32 32-31.1C448 142.3 433.7 127.1 416 127.1zM260.9 319.1H165.8L187.1 191.1h95.12L260.9 319.1z", viewbox: "0 0 448 512", **options)
+  end
+
  def globe_icon(**options)
    icon_tag("fas fa-globe", **options)
  end
--- a/app/javascript/src/javascripts/utility.js
+++ b/app/javascript/src/javascripts/utility.js
@@ -118,6 +118,15 @@ Utility.splitWords = function(string) {
  return words(string, /\S+/g);
 }

+Utility.copyToClipboard = async function(text, message = "Copied!") {
+  try {
+    await navigator.clipboard.writeText(text);
+    Utility.notice(message);
+  } catch (error) {
+    Utility.error("Couldn't copy to clipboard");
+  }
+}
+
 $.fn.selectEnd = function() {
  return this.each(function() {
    this.focus();