-
-
Notifications
You must be signed in to change notification settings - Fork 7.5k
/
popovers.js
1369 lines (1201 loc) · 48.5 KB
/
popovers.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
import ClipboardJS from "clipboard";
import {add, formatISO, set} from "date-fns";
import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
import $ from "jquery";
import tippy, {hideAll} from "tippy.js";
import render_actions_popover_content from "../templates/actions_popover_content.hbs";
import render_no_arrow_popover from "../templates/no_arrow_popover.hbs";
import render_playground_links_popover_content from "../templates/playground_links_popover_content.hbs";
import render_remind_me_popover_content from "../templates/remind_me_popover_content.hbs";
import render_user_group_info_popover from "../templates/user_group_info_popover.hbs";
import render_user_group_info_popover_content from "../templates/user_group_info_popover_content.hbs";
import render_user_info_popover_content from "../templates/user_info_popover_content.hbs";
import render_user_info_popover_title from "../templates/user_info_popover_title.hbs";
import * as blueslip from "./blueslip";
import * as buddy_data from "./buddy_data";
import * as compose_actions from "./compose_actions";
import * as compose_state from "./compose_state";
import * as compose_ui from "./compose_ui";
import * as condense from "./condense";
import * as emoji_picker from "./emoji_picker";
import * as feature_flags from "./feature_flags";
import * as giphy from "./giphy";
import * as hash_util from "./hash_util";
import {$t} from "./i18n";
import * as message_edit from "./message_edit";
import * as message_edit_history from "./message_edit_history";
import * as message_lists from "./message_lists";
import * as message_viewport from "./message_viewport";
import * as muted_topics from "./muted_topics";
import * as muted_topics_ui from "./muted_topics_ui";
import * as muted_users from "./muted_users";
import * as muted_users_ui from "./muted_users_ui";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as people from "./people";
import * as popover_menus from "./popover_menus";
import * as realm_playground from "./realm_playground";
import * as reminder from "./reminder";
import * as resize from "./resize";
import * as rows from "./rows";
import * as settings_data from "./settings_data";
import * as stream_popover from "./stream_popover";
import * as user_groups from "./user_groups";
import * as user_status from "./user_status";
import * as user_status_ui from "./user_status_ui";
import * as util from "./util";
let current_actions_popover_elem;
let current_flatpickr_instance;
let current_message_info_popover_elem;
let current_user_info_popover_elem;
let current_playground_links_popover_elem;
let userlist_placement = "right";
let list_of_popovers = [];
export function clear_for_testing() {
current_actions_popover_elem = undefined;
current_flatpickr_instance = undefined;
current_message_info_popover_elem = undefined;
current_user_info_popover_elem = undefined;
current_playground_links_popover_elem = undefined;
list_of_popovers.length = 0;
userlist_placement = "right";
}
export function clipboard_enable(arg) {
// arg is a selector or element
// We extract this function for testing purpose.
return new ClipboardJS(arg);
}
export function elem_to_user_id(elem) {
return Number.parseInt(elem.attr("data-user-id"), 10);
}
// this utilizes the proxy pattern to intercept all calls to $.fn.popover
// and push the $.fn.data($o, "popover") results to an array.
// this is needed so that when we try to unload popovers, we can kill all dead
// ones that no longer have valid parents in the DOM.
const old_popover = $.fn.popover;
$.fn.popover = Object.assign(function (...args) {
// apply the jQuery object as `this`, and popover function arguments.
old_popover.apply(this, args);
// if there is a valid "popover" key in the jQuery data object then
// push it to the array.
if (this.data("popover")) {
list_of_popovers.push(this.data("popover"));
}
}, old_popover);
function copy_email_handler(e) {
const email_el = $(e.trigger.parentElement);
const copy_icon = email_el.find("i");
// only change the parent element's text back to email
// and not overwrite the tooltip.
const email_textnode = email_el[0].childNodes[2];
email_el.addClass("email_copied");
email_textnode.nodeValue = $t({defaultMessage: "Email copied"});
setTimeout(() => {
email_el.removeClass("email_copied");
email_textnode.nodeValue = copy_icon.attr("data-clipboard-text");
}, 1500);
e.clearSelection();
}
function init_email_clipboard() {
/*
This shows (and enables) the copy-text icon for folks
who have names that would overflow past the right
edge of our user mention popup.
*/
$(".user_popover_email").each(function () {
if (this.clientWidth < this.scrollWidth) {
const email_el = $(this);
const copy_email_icon = email_el.find("i");
/*
For deactivated users, the copy-email icon will
not even be present in the HTML, so we don't do
anything. We don't reveal emails for deactivated
users.
*/
if (copy_email_icon[0]) {
copy_email_icon.removeClass("hide_copy_icon");
const copy_email_clipboard = clipboard_enable(copy_email_icon[0]);
copy_email_clipboard.on("success", copy_email_handler);
}
}
});
}
function init_email_tooltip(user) {
/*
This displays the email tooltip for folks
who have names that would overflow past the right
edge of our user mention popup.
*/
$(".user_popover_email").each(function () {
if (this.clientWidth < this.scrollWidth) {
tippy(this, {
placement: "bottom",
content: people.get_visible_email(user),
interactive: true,
});
}
});
}
function load_medium_avatar(user, elt) {
const avatar_path = "avatar/" + user.user_id + "/medium?v=" + user.avatar_version;
const user_avatar_url = new URL(avatar_path, window.location.href);
const sender_avatar_medium = new Image();
sender_avatar_medium.src = user_avatar_url;
$(sender_avatar_medium).on("load", function () {
elt.css("background-image", "url(" + $(this).attr("src") + ")");
});
}
function calculate_info_popover_placement(size, elt) {
const ypos = elt.offset().top;
if (!(ypos + size / 2 < message_viewport.height() && ypos > size / 2)) {
if (ypos + size < message_viewport.height()) {
return "bottom";
} else if (ypos > size) {
return "top";
}
}
return undefined;
}
function render_user_info_popover(
user,
popover_element,
is_sender_popover,
has_message_context,
private_msg_class,
template_class,
popover_placement,
) {
const is_me = people.is_my_user_id(user.user_id);
let can_set_away = false;
let can_revoke_away = false;
if (is_me) {
if (user_status.is_away(user.user_id)) {
can_revoke_away = true;
} else {
can_set_away = true;
}
}
const muting_allowed = !is_me && !user.is_bot;
const is_muted = muted_users.is_user_muted(user.user_id);
const status_text = user_status.get_status_text(user.user_id);
const status_emoji_info = user_status.get_status_emoji(user.user_id);
const args = {
can_revoke_away,
can_set_away,
can_mute: muting_allowed && !is_muted,
can_unmute: muting_allowed && is_muted,
has_message_context,
is_active: people.is_active_user_for_popover(user.user_id),
is_bot: user.is_bot,
is_me,
is_sender_popover,
pm_with_uri: hash_util.pm_with_uri(user.email),
user_circle_class: buddy_data.get_user_circle_class(user.user_id),
private_message_class: private_msg_class,
sent_by_uri: hash_util.by_sender_uri(user.email),
show_email: settings_data.show_email(),
show_user_profile: !user.is_bot,
user_email: people.get_visible_email(user),
user_full_name: user.full_name,
user_id: user.user_id,
user_last_seen_time_status: buddy_data.user_last_seen_time_status(user.user_id),
user_time: people.get_user_time(user.user_id),
user_type: people.get_user_type(user.user_id),
status_content_available: Boolean(status_text || status_emoji_info),
status_text,
status_emoji_info,
user_mention_syntax: people.get_mention_syntax(user.full_name, user.user_id),
};
if (user.is_bot) {
const is_system_bot = user.is_system_bot;
const bot_owner_id = user.bot_owner_id;
if (is_system_bot) {
args.is_system_bot = is_system_bot;
} else if (bot_owner_id) {
const bot_owner = people.get_by_user_id(bot_owner_id);
args.bot_owner = bot_owner;
}
}
popover_element.popover({
content: render_user_info_popover_content(args),
// TODO: Determine whether `fixed` should be applied
// unconditionally. Right now, we only do it for the user
// sidebar version of the popover.
fixed: template_class === "user_popover",
placement: popover_placement,
template: render_no_arrow_popover({class: template_class}),
title: render_user_info_popover_title({
user_avatar: "avatar/" + user.email,
user_is_guest: user.is_guest,
}),
html: true,
trigger: "manual",
top_offset: $("#userlist-title").offset().top + 15,
fix_positions: true,
});
popover_element.popover("show");
init_email_clipboard();
init_email_tooltip(user);
load_medium_avatar(user, $(".popover-avatar"));
}
// exporting for testability
export const _test_calculate_info_popover_placement = calculate_info_popover_placement;
// element is the target element to pop off of
// user is the user whose profile to show
// message is the message containing it, which should be selected
function show_user_info_popover_for_message(element, user, message) {
const last_popover_elem = current_message_info_popover_elem;
hide_all();
if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
message_lists.current.select_id(message.id);
const elt = $(element);
if (elt.data("popover") === undefined) {
if (user === undefined) {
// This is never supposed to happen, not even for deactivated
// users, so we'll need to debug this error if it occurs.
blueslip.error("Bad sender in message" + message.sender_id);
return;
}
const is_sender_popover = message.sender_id === user.user_id;
render_user_info_popover(
user,
elt,
is_sender_popover,
true,
"respond_personal_button",
"message-info-popover",
"right",
);
current_message_info_popover_elem = elt;
}
}
export function show_user_info_popover(element, user) {
const last_popover_elem = current_user_info_popover_elem;
hide_all();
if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
return;
}
const elt = $(element);
render_user_info_popover(
user,
elt,
false,
false,
"compose_private_message",
"user-info-popover",
"right",
);
current_user_info_popover_elem = elt;
}
function get_user_info_popover_for_message_items() {
if (!current_message_info_popover_elem) {
blueslip.error("Trying to get menu items when action popover is closed.");
return undefined;
}
const popover_data = current_message_info_popover_elem.data("popover");
if (!popover_data) {
blueslip.error("Cannot find popover data for actions menu.");
return undefined;
}
return $("li:not(.divider):visible a", popover_data.$tip);
}
function get_user_info_popover_items() {
const popover_elt = $("div.user-info-popover");
if (!current_user_info_popover_elem || !popover_elt.length) {
blueslip.error("Trying to get menu items when action popover is closed.");
return undefined;
}
if (popover_elt.length >= 2) {
blueslip.error("More than one user info popovers cannot be opened at same time.");
return undefined;
}
return $("li:not(.divider):visible a", popover_elt);
}
function fetch_group_members(member_ids) {
return member_ids
.map((m) => people.get_by_user_id(m))
.filter((m) => m !== undefined)
.map((p) => ({
...p,
user_circle_class: buddy_data.get_user_circle_class(p.user_id),
is_active: people.is_active_user_for_popover(p.user_id),
user_last_seen_time_status: buddy_data.user_last_seen_time_status(p.user_id),
}));
}
function sort_group_members(members) {
return members.sort((a, b) => util.strcmp(a.full_name, b.fullname));
}
// exporting these functions for testing purposes
export const _test_fetch_group_members = fetch_group_members;
export const _test_sort_group_members = sort_group_members;
// element is the target element to pop off of
// user is the user whose profile to show
// message is the message containing it, which should be selected
function show_user_group_info_popover(element, group, message) {
const last_popover_elem = current_message_info_popover_elem;
// hardcoded pixel height of the popover
// note that the actual size varies (in group size), but this is about as big as it gets
const popover_size = 390;
hide_all();
if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
message_lists.current.select_id(message.id);
const elt = $(element);
if (elt.data("popover") === undefined) {
const args = {
group_name: group.name,
group_description: group.description,
members: sort_group_members(fetch_group_members(Array.from(group.members))),
};
elt.popover({
placement: calculate_info_popover_placement(popover_size, elt),
template: render_user_group_info_popover({class: "message-info-popover"}),
content: render_user_group_info_popover_content(args),
html: true,
trigger: "manual",
});
elt.popover("show");
current_message_info_popover_elem = elt;
}
}
export function toggle_actions_popover(element, id) {
const last_popover_elem = current_actions_popover_elem;
hide_all();
if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
$(element).closest(".message_row").toggleClass("has_popover has_actions_popover");
message_lists.current.select_id(id);
const not_spectator = !page_params.is_spectator;
const elt = $(element);
if (elt.data("popover") === undefined) {
const message = message_lists.current.get(id);
const message_container = message_lists.current.view.message_containers.get(message.id);
const should_display_hide_option =
muted_users.is_user_muted(message.sender_id) &&
!message_container.is_hidden &&
not_spectator;
const editability = message_edit.get_editability(message);
let use_edit_icon;
let editability_menu_item;
if (editability === message_edit.editability_types.FULL) {
use_edit_icon = true;
editability_menu_item = $t({defaultMessage: "Edit"});
} else if (editability === message_edit.editability_types.TOPIC_ONLY) {
use_edit_icon = false;
editability_menu_item = $t({defaultMessage: "View source / Edit topic"});
} else {
use_edit_icon = false;
editability_menu_item = $t({defaultMessage: "View source"});
}
const topic = message.topic;
const can_mute_topic =
message.stream &&
topic &&
!muted_topics.is_topic_muted(message.stream_id, topic) &&
not_spectator;
const can_unmute_topic =
message.stream && topic && muted_topics.is_topic_muted(message.stream_id, topic);
const should_display_edit_history_option =
message.edit_history &&
message.edit_history.some(
(entry) =>
entry.prev_content !== undefined ||
util.get_edit_event_prev_topic(entry) !== undefined,
) &&
page_params.realm_allow_edit_history &&
not_spectator;
// Disabling this for /me messages is a temporary workaround
// for the fact that we don't have a styling for how that
// should look. See also condense.js.
const should_display_collapse =
!message.locally_echoed &&
!message.is_me_message &&
!message.collapsed &&
not_spectator;
const should_display_uncollapse =
!message.locally_echoed && !message.is_me_message && message.collapsed;
const should_display_edit_and_view_source =
(message.content !== "<p>(deleted)</p>" ||
editability === message_edit.editability_types.FULL ||
editability === message_edit.editability_types.TOPIC_ONLY) &&
not_spectator;
const should_display_quote_and_reply =
message.content !== "<p>(deleted)</p>" && not_spectator;
const conversation_time_uri = hash_util.by_conversation_and_time_uri(message);
const should_display_delete_option =
message_edit.get_deletability(message) && not_spectator;
const args = {
message_id: message.id,
historical: message.historical,
stream_id: message.stream_id,
topic,
use_edit_icon,
editability_menu_item,
can_mute_topic,
can_unmute_topic,
should_display_collapse,
should_display_uncollapse,
should_display_add_reaction_option: message.sent_by_me,
should_display_edit_history_option,
should_display_hide_option,
conversation_time_uri,
narrowed: narrow_state.active(),
should_display_delete_option,
should_display_reminder_option: feature_flags.reminders_in_message_action_menu,
should_display_edit_and_view_source,
should_display_quote_and_reply,
};
const ypos = elt.offset().top;
elt.popover({
// Popover height with 7 items in it is ~190 px
placement: message_viewport.height() - ypos < 220 ? "top" : "bottom",
title: "",
content: render_actions_popover_content(args),
html: true,
trigger: "manual",
});
elt.popover("show");
current_actions_popover_elem = elt;
}
}
export function render_actions_remind_popover(element, id) {
hide_all();
$(element).closest(".message_row").toggleClass("has_popover has_actions_popover");
message_lists.current.select_id(id);
const elt = $(element);
if (elt.data("popover") === undefined) {
const message = message_lists.current.get(id);
const args = {
message,
};
const ypos = elt.offset().top;
elt.popover({
// Popover height with 7 items in it is ~190 px
placement: message_viewport.height() - ypos < 220 ? "top" : "bottom",
title: "",
content: render_remind_me_popover_content(args),
html: true,
trigger: "manual",
});
elt.popover("show");
current_flatpickr_instance = $(
`.remind.custom[data-message-id="${CSS.escape(message.id)}"]`,
).flatpickr({
enableTime: true,
clickOpens: false,
defaultDate: "today",
minDate: "today",
plugins: [new ConfirmDatePlugin({})],
});
current_actions_popover_elem = elt;
}
}
function get_action_menu_menu_items() {
if (!current_actions_popover_elem) {
blueslip.error("Trying to get menu items when action popover is closed.");
return undefined;
}
const popover_data = current_actions_popover_elem.data("popover");
if (!popover_data) {
blueslip.error("Cannot find popover data for actions menu.");
return undefined;
}
return $("li:not(.divider):visible a", popover_data.$tip);
}
export function focus_first_popover_item(items) {
if (!items) {
return;
}
items.eq(0).expectOne().trigger("focus");
}
export function popover_items_handle_keyboard(key, items) {
if (!items) {
return;
}
let index = items.index(items.filter(":focus"));
if (key === "enter" && index >= 0 && index < items.length) {
items[index].click();
return;
}
if (index === -1) {
index = 0;
} else if ((key === "down_arrow" || key === "vim_down") && index < items.length - 1) {
index += 1;
} else if ((key === "up_arrow" || key === "vim_up") && index > 0) {
index -= 1;
}
items.eq(index).trigger("focus");
}
function focus_first_action_popover_item() {
// For now I recommend only calling this when the user opens the menu with a hotkey.
// Our popup menus act kind of funny when you mix keyboard and mouse.
const items = get_action_menu_menu_items();
focus_first_popover_item(items);
}
export function open_message_menu(message) {
if (message.locally_echoed) {
// Don't open the popup for locally echoed messages for now.
// It creates bugs with things like keyboard handlers when
// we get the server response.
return true;
}
const message_id = message.id;
toggle_actions_popover($(".selected_message .actions_hover")[0], message_id);
if (current_actions_popover_elem) {
focus_first_action_popover_item();
}
return true;
}
export function actions_menu_handle_keyboard(key) {
const items = get_action_menu_menu_items();
popover_items_handle_keyboard(key, items);
}
export function actions_popped() {
return current_actions_popover_elem !== undefined;
}
export function hide_actions_popover() {
if (actions_popped()) {
$(".has_popover").removeClass("has_popover has_actions_popover");
current_actions_popover_elem.popover("destroy");
current_actions_popover_elem = undefined;
}
if (current_flatpickr_instance !== undefined) {
current_flatpickr_instance.destroy();
current_flatpickr_instance = undefined;
}
}
export function message_info_popped() {
return current_message_info_popover_elem !== undefined;
}
export function hide_message_info_popover() {
if (message_info_popped()) {
current_message_info_popover_elem.popover("destroy");
current_message_info_popover_elem = undefined;
}
}
export function user_info_popped() {
return current_user_info_popover_elem !== undefined;
}
export function hide_user_info_popover() {
if (user_info_popped()) {
current_user_info_popover_elem.popover("destroy");
current_user_info_popover_elem = undefined;
}
}
export function hide_userlist_sidebar() {
$(".app-main .column-right").removeClass("expanded");
}
export function hide_pm_list_sidebar() {
$(".app-main .column-left").removeClass("expanded");
}
export function show_userlist_sidebar() {
$(".app-main .column-right").addClass("expanded");
resize.resize_page_components();
}
export function show_pm_list_sidebar() {
$(".app-main .column-left").addClass("expanded");
resize.resize_page_components();
}
let current_user_sidebar_user_id;
let current_user_sidebar_popover;
export function user_sidebar_popped() {
return current_user_sidebar_popover !== undefined;
}
export function hide_user_sidebar_popover() {
if (user_sidebar_popped()) {
// this hide_* method looks different from all the others since
// the presence list may be redrawn. Due to funkiness with jquery's .data()
// this would confuse $.popover("destroy"), which looks at the .data() attached
// to a certain element. We thus save off the .data("popover") in the
// show_user_sidebar_popover and inject it here before calling destroy.
$("#user_presences").data("popover", current_user_sidebar_popover);
$("#user_presences").popover("destroy");
current_user_sidebar_user_id = undefined;
current_user_sidebar_popover = undefined;
}
}
function focus_user_info_popover_item() {
// For now I recommend only calling this when the user opens the menu with a hotkey.
// Our popup menus act kind of funny when you mix keyboard and mouse.
const items = get_user_info_popover_for_message_items();
focus_first_popover_item(items);
}
function get_user_sidebar_popover_items() {
if (!current_user_sidebar_popover) {
blueslip.error("Trying to get menu items when user sidebar popover is closed.");
return undefined;
}
return $("li:not(.divider):visible > a", current_user_sidebar_popover.$tip);
}
export function user_sidebar_popover_handle_keyboard(key) {
const items = get_user_sidebar_popover_items();
popover_items_handle_keyboard(key, items);
}
export function user_info_popover_for_message_handle_keyboard(key) {
const items = get_user_info_popover_for_message_items();
popover_items_handle_keyboard(key, items);
}
export function user_info_popover_handle_keyboard(key) {
const items = get_user_info_popover_items();
popover_items_handle_keyboard(key, items);
}
export function show_sender_info() {
const $message = $(".selected_message");
const $sender = $message.find(".sender_info_hover");
const message = message_lists.current.get(rows.id($message));
const user = people.get_by_user_id(message.sender_id);
show_user_info_popover_for_message($sender[0], user, message);
if (current_message_info_popover_elem) {
focus_user_info_popover_item();
}
}
// On mobile web, opening the keyboard can trigger a resize event
// (which in turn can trigger a scroll event). This will have the
// side effect of closing popovers, which we don't want. So we
// suppress the first hide from scrolling after a resize using this
// variable.
let suppress_scroll_hide = false;
export function set_suppress_scroll_hide() {
suppress_scroll_hide = true;
}
// Playground_info contains all the data we need to generate a popover of
// playground links for each code block. The element is the target element
// to pop off of.
export function toggle_playground_link_popover(element, playground_info) {
const last_popover_elem = current_playground_links_popover_elem;
hide_all();
if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
// We want it to be the case that a user can dismiss a popover
// by clicking on the same element that caused the popover.
return;
}
const elt = $(element);
if (elt.data("popover") === undefined) {
const ypos = elt.offset().top;
elt.popover({
// It's unlikely we'll have more than 3-4 playground links
// for one language, so it should be OK to hardcode 120 here.
placement: message_viewport.height() - ypos < 120 ? "top" : "bottom",
title: "",
content: render_playground_links_popover_content({playground_info}),
html: true,
trigger: "manual",
});
elt.popover("show");
current_playground_links_popover_elem = elt;
}
}
export function hide_playground_links_popover() {
if (current_playground_links_popover_elem !== undefined) {
current_playground_links_popover_elem.popover("destroy");
current_playground_links_popover_elem = undefined;
}
}
export function register_click_handlers() {
$("#main_div").on("click", ".actions_hover", function (e) {
const row = $(this).closest(".message_row");
e.stopPropagation();
toggle_actions_popover(this, rows.id(row));
});
$("#main_div").on(
"click",
".sender_name, .sender_name-in-status, .inline_profile_picture",
function (e) {
const row = $(this).closest(".message_row");
e.stopPropagation();
const message = message_lists.current.get(rows.id(row));
const user = people.get_by_user_id(message.sender_id);
show_user_info_popover_for_message(this, user, message);
},
);
$("#main_div").on("click", ".user-mention", function (e) {
const id_string = $(this).attr("data-user-id");
// We fallback to email to handle legacy Markdown that was rendered
// before we cut over to using data-user-id
const email = $(this).attr("data-user-email");
if (id_string === "*" || email === "*") {
return;
}
const row = $(this).closest(".message_row");
e.stopPropagation();
const message = message_lists.current.get(rows.id(row));
let user;
if (id_string) {
const user_id = Number.parseInt(id_string, 10);
user = people.get_by_user_id(user_id);
} else {
user = people.get_by_email(email);
}
show_user_info_popover_for_message(this, user, message);
});
$("#main_div").on("click", ".user-group-mention", function (e) {
const user_group_id = Number.parseInt($(this).attr("data-user-group-id"), 10);
const row = $(this).closest(".message_row");
e.stopPropagation();
const message = message_lists.current.get(rows.id(row));
const group = user_groups.get_user_group_from_id(user_group_id, true);
if (group === undefined) {
// This user group has likely been deleted.
blueslip.info("Unable to find user group in message" + message.sender_id);
} else {
show_user_group_info_popover(this, group, message);
}
});
$("#main_div, #compose .preview_content").on("click", ".code_external_link", function (e) {
const view_in_playground_button = $(this);
const codehilite_div = $(this).closest(".codehilite");
e.stopPropagation();
const playground_info = realm_playground.get_playground_info_for_languages(
codehilite_div.data("code-language"),
);
// We do the code extraction here and set the target href combining the url_prefix
// and the extracted code. Depending on whether the language has multiple playground
// links configured, a popover is show.
const extracted_code = codehilite_div.find("code").text();
if (playground_info.length === 1) {
const url_prefix = playground_info[0].url_prefix;
view_in_playground_button.attr("href", url_prefix + encodeURIComponent(extracted_code));
} else {
for (const $playground of playground_info) {
$playground.playground_url =
$playground.url_prefix + encodeURIComponent(extracted_code);
}
toggle_playground_link_popover(this, playground_info);
}
});
$("body").on("click", ".popover_playground_link", (e) => {
hide_playground_links_popover();
e.stopPropagation();
});
$("body").on("click", ".info_popover_actions .narrow_to_private_messages", (e) => {
const user_id = elem_to_user_id($(e.target).parents("ul"));
const email = people.get_by_user_id(user_id).email;
hide_all();
if (overlays.settings_open()) {
overlays.close_overlay("settings");
}
narrow.by("pm-with", email, {trigger: "user sidebar popover"});
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".info_popover_actions .narrow_to_messages_sent", (e) => {
const user_id = elem_to_user_id($(e.target).parents("ul"));
const email = people.get_by_user_id(user_id).email;
hide_all();
if (overlays.settings_open()) {
overlays.close_overlay("settings");
}
narrow.by("sender", email, {trigger: "user sidebar popover"});
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".user_popover .mention_user", (e) => {
if (!compose_state.composing()) {
compose_actions.start("stream", {trigger: "sidebar user actions"});
}
const user_id = elem_to_user_id($(e.target).parents("ul"));
const name = people.get_by_user_id(user_id).full_name;
const mention = people.get_mention_syntax(name, user_id);
compose_ui.insert_syntax_and_focus(mention);
hide_user_sidebar_popover();
hide_userlist_sidebar();
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".message-info-popover .mention_user", (e) => {
if (!compose_state.composing()) {
compose_actions.respond_to_message({trigger: "user sidebar popover"});
}
const user_id = elem_to_user_id($(e.target).parents("ul"));
const name = people.get_by_user_id(user_id).full_name;
const mention = people.get_mention_syntax(name, user_id);
compose_ui.insert_syntax_and_focus(mention);
hide_message_info_popover();
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".info_popover_actions .clear_status", (e) => {
e.preventDefault();
const me = elem_to_user_id($(e.target).parents("ul"));
user_status.server_update({
user_id: me,
status_text: "",
emoji_name: "",
emoji_code: "",
success() {
$(".info_popover_actions #status_message").html("");
},
});
});
$("body").on("click", ".view_user_profile", (e) => {
const user_id = Number.parseInt($(e.target).attr("data-user-id"), 10);
const user = people.get_by_user_id(user_id);
show_user_info_popover(e.target, user);
e.stopPropagation();
e.preventDefault();
});
/* These click handlers are implemented as just deep links to the
* relevant part of the Zulip UI, so we don't want preventDefault,
* but we do want to close the modal when you click them. */
$("body").on("click", ".set_away_status", (e) => {
hide_all();
user_status.server_set_away();
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".revoke_away_status", (e) => {
hide_all();
user_status.server_revoke_away();
e.stopPropagation();
e.preventDefault();
});
function open_user_status_modal(e) {
hide_all();
user_status_ui.open_user_status_modal();
e.stopPropagation();
e.preventDefault();
}
$("body").on("click", ".update_status_text", open_user_status_modal);
// Clicking on one's own status emoji should open the user status modal.
$("#user_presences").on(
"click",
".user_sidebar_entry_me .status_emoji",
open_user_status_modal,
);
$("body").on("click", ".info_popover_actions .sidebar-popover-mute-user", (e) => {
const user_id = elem_to_user_id($(e.target).parents("ul"));
hide_message_info_popover();
hide_user_sidebar_popover();
e.stopPropagation();
e.preventDefault();
muted_users_ui.confirm_mute_user(user_id);
});
$("body").on("click", ".info_popover_actions .sidebar-popover-unmute-user", (e) => {