copy_message: Add onSuccess listener to copy clipboard.

Previously, we showed a `Copied!` alert on copying a message
irrespective of the fact that the message was copied or not.
Hence add an event listener that shows the `Copied!` tooltip only
if the action was successful.

Fixes #19019.
This commit is contained in:
Gaurav Pandey
2021-06-28 15:01:18 +05:30
committed by Tim Abbott
parent 94a2be06f3
commit b1474ddaa6
2 changed files with 15 additions and 18 deletions

View File

@@ -19,7 +19,6 @@ import {media_breakpoints_num} from "./css_variables";
import * as emoji_picker from "./emoji_picker";
import * as hash_util from "./hash_util";
import * as hotspots from "./hotspots";
import {$t} from "./i18n";
import * as message_edit from "./message_edit";
import * as message_flags from "./message_flags";
import * as message_lists from "./message_lists";
@@ -283,18 +282,6 @@ export function initialize() {
e.stopPropagation();
popovers.hide_all();
});
$("body").on("click", ".copy_message", function (e) {
const row = $(this).closest(".message_row");
message_edit.end_message_row_edit(row);
row.find(".alert-msg").text($t({defaultMessage: "Copied!"}));
row.find(".alert-msg").css("display", "block");
row.find(".alert-msg").delay(1000).fadeOut(300);
if ($(".tooltip").is(":visible")) {
$(".tooltip").hide();
}
e.preventDefault();
e.stopPropagation();
});
$("body").on("click", "a", function () {
if (document.activeElement === this) {
ui_util.blur_active_element();

View File

@@ -320,11 +320,21 @@ function timer_text(seconds_left) {
return $t({defaultMessage: "{seconds} sec to edit"}, {seconds: seconds.toString()});
}
function create_copy_to_clipboard_handler(source, message_id) {
new ClipboardJS(source, {
function create_copy_to_clipboard_handler(row, source, message_id) {
const clipboard = new ClipboardJS(source, {
target: () =>
document.querySelector(`#edit_form_${CSS.escape(message_id)} .message_edit_content`),
});
clipboard.on("success", () => {
end_message_row_edit(row);
row.find(".alert-msg").text($t({defaultMessage: "Copied!"}));
row.find(".alert-msg").css("display", "block");
row.find(".alert-msg").delay(1000).fadeOut(300);
if ($(".tooltip").is(":visible")) {
$(".tooltip").hide();
}
});
}
function edit_message(row, raw_content) {
@@ -416,7 +426,7 @@ function edit_message(row, raw_content) {
case editability_types.NO:
message_edit_content.attr("readonly", "readonly");
message_edit_topic.attr("readonly", "readonly");
create_copy_to_clipboard_handler(copy_message[0], message.id);
create_copy_to_clipboard_handler(row, copy_message[0], message.id);
break;
case editability_types.NO_LONGER:
// You can currently only reach this state in non-streams. If that
@@ -425,13 +435,13 @@ function edit_message(row, raw_content) {
// row.find('input.message_edit_topic') as well.
message_edit_content.attr("readonly", "readonly");
message_edit_countdown_timer.text($t({defaultMessage: "View source"}));
create_copy_to_clipboard_handler(copy_message[0], message.id);
create_copy_to_clipboard_handler(row, copy_message[0], message.id);
break;
case editability_types.TOPIC_ONLY:
message_edit_content.attr("readonly", "readonly");
// Hint why you can edit the topic but not the message content
message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"}));
create_copy_to_clipboard_handler(copy_message[0], message.id);
create_copy_to_clipboard_handler(row, copy_message[0], message.id);
break;
case editability_types.FULL: {
copy_message.remove();