jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

comments: add dtext shortlink option to comment menu.

Browse Source 
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.
This commit is contained in:
evazion
2021-01-22 03:35:30 -06:00
parent 2beac62fc3
commit bed5fdafb8
4 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/comment_component.rb
View File

@@ -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

51
app/components/comment_component/comment_component.html.erb
View File

@@ -83,36 +83,41 @@
</li>
<% 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 %>
</menu>

17
app/components/comment_component/comment_component.js
View File

@@ -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);

4
app/helpers/icon_helper.rb
View File

@@ -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