From ba29794e89f42d7dc439c923f71eb64e5a80f441 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 13 Jan 2022 13:07:23 -0600 Subject: [PATCH] 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). --- app/components/application_component.rb | 2 +- .../comment_component.html.erb | 8 +++++++- .../comment_component/comment_component.js | 20 ++++++++++--------- .../forum_post_component.html.erb | 8 +++++++- .../forum_post_component.js | 20 ++++++++++--------- app/helpers/icon_helper.rb | 4 ++++ app/javascript/src/javascripts/utility.js | 9 +++++++++ 7 files changed, 50 insertions(+), 21 deletions(-) diff --git a/app/components/application_component.rb b/app/components/application_component.rb index 0851cc41e..ae9839805 100644 --- 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) diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb index f15e5dde1..a37a7a1ad 100644 --- 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 %> diff --git a/app/components/comment_component/comment_component.js b/app/components/comment_component/comment_component.js index 75dc05e09..22a626354 100644 --- 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(); } } diff --git a/app/components/forum_post_component/forum_post_component.html.erb b/app/components/forum_post_component/forum_post_component.html.erb index 18d7ec8f9..8005ca173 100644 --- 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 %> diff --git a/app/components/forum_post_component/forum_post_component.js b/app/components/forum_post_component/forum_post_component.js index 72bac0bb7..37b19931e 100644 --- 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(); } } diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb index 9366de428..1e52c0fda 100644 --- 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 diff --git a/app/javascript/src/javascripts/utility.js b/app/javascript/src/javascripts/utility.js index fc0826a0e..4cbe892ac 100644 --- 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();