From bed5fdafb8c485bf03500ec5a918c339f7a63304 Mon Sep 17 00:00:00 2001 From: evazion Date: Fri, 22 Jan 2021 03:35:30 -0600 Subject: [PATCH] comments: add dtext shortlink option to comment menu. Add a Shortlink menu option to the comment menu. Clicking this will copy a DText comment shortlink (e.g. `comment #12345`) to the clipboard. You can middle-click or right-click the menu option to get the full URL. The menu option is called Shortlink instead of `comment #1234` because show the full comment ID in the menu makes the menu look too unbalanced. Note that the `navigator.clipboard` API can only be used in a https:// environment. It won't work in non-HTTPS development environments. ngrok can help with this. --- app/components/comment_component.rb | 2 +- .../comment_component.html.erb | 51 ++++++++++--------- .../comment_component/comment_component.js | 17 ++++++- app/helpers/icon_helper.rb | 4 ++ 4 files changed, 49 insertions(+), 25 deletions(-) diff --git a/app/components/comment_component.rb b/app/components/comment_component.rb index eb2438d57..b06805c56 100644 --- a/app/components/comment_component.rb +++ b/app/components/comment_component.rb @@ -2,7 +2,7 @@ class CommentComponent < ApplicationComponent attr_reader :comment, :context, :dtext_data, :current_user - delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, to: :helpers + delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, to: :helpers def initialize(comment:, current_user:, context: nil, dtext_data: nil) @comment = comment diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb index cacfa1c32..3b70a21cc 100644 --- a/app/components/comment_component/comment_component.html.erb +++ b/app/components/comment_component/comment_component.html.erb @@ -83,36 +83,41 @@ <% end %> - <% if policy(comment).update? || policy(comment).reportable? %> - <%= render PopupMenuComponent.new do |menu| %> - <% if policy(comment).update? %> - <%= menu.item do %> - <%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %> - <%= edit_icon %> Edit - <% end %> - <% end %> - - <%= menu.item do %> - <% if comment.is_deleted? %> - <%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %> - <%= undelete_icon %> Undelete - <% end %> - <% else %> - <%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %> - <%= delete_icon %> Delete - <% end %> - <% end %> + <%= render PopupMenuComponent.new do |menu| %> + <% if policy(comment).update? %> + <%= menu.item do %> + <%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %> + <%= edit_icon %> Edit <% end %> <% end %> - <% if policy(comment).reportable? %> - <%= menu.item do %> - <%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %> - <%= flag_icon %> Report + <%= menu.item do %> + <% if comment.is_deleted? %> + <%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %> + <%= undelete_icon %> Undelete + <% end %> + <% else %> + <%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %> + <%= delete_icon %> Delete <% end %> <% end %> <% end %> <% end %> + + <% if policy(comment).reportable? %> + <%= menu.item do %> + <%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %> + <%= flag_icon %> Report + <% end %> + <% end %> + <% end %> + + <%= menu.item do %> + <%= link_to comment_path(comment.id), class: "comment-copy-link" do %> + <%= link_icon %> Shortlink + <% end %> + <% end %> + <% end %> diff --git a/app/components/comment_component/comment_component.js b/app/components/comment_component/comment_component.js index 875cab5da..75dc05e09 100644 --- a/app/components/comment_component/comment_component.js +++ b/app/components/comment_component/comment_component.js @@ -1,9 +1,12 @@ +import Utility from "../../javascript/src/javascripts/utility.js"; + class CommentComponent { static initialize() { if ($("#c-posts #a-show, #c-comments").length) { $(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-link", CommentComponent.copyLink); } } @@ -26,8 +29,20 @@ class CommentComponent { $comment.find(".body").show(); e.preventDefault(); } -} + static async copyLink(e) { + let $comment = $(this).closest(".comment"); + let link = `comment #${$comment.data("id")}`; + e.preventDefault(); + + try { + await navigator.clipboard.writeText(link); + Utility.notice(`Copied ${link} to clipboard.`); + } catch (error) { + Utility.error("Couldn't copy link to clipboard"); + } + } +} $(document).ready(CommentComponent.initialize); diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb index 787587f15..3e1a847f3 100644 --- a/app/helpers/icon_helper.rb +++ b/app/helpers/icon_helper.rb @@ -135,4 +135,8 @@ module IconHelper def flag_icon(**options) icon_tag("fas fa-flag", **options) end + + def link_icon(**options) + icon_tag("fas fa-link", **options) + end end