forked from zulip/zulip
-
Notifications
You must be signed in to change notification settings - Fork 1
/
popovers.js
1196 lines (1036 loc) · 43.4 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
const util = require("./util");
const confirmDatePlugin = require("flatpickr/dist/plugins/confirmDate/confirmDate.js");
const render_actions_popover_content = require('../templates/actions_popover_content.hbs');
const render_mobile_message_buttons_popover = require('../templates/mobile_message_buttons_popover.hbs');
const render_mobile_message_buttons_popover_content = require('../templates/mobile_message_buttons_popover_content.hbs');
const render_no_arrow_popover = require('../templates/no_arrow_popover.hbs');
const render_remind_me_popover_content = require('../templates/remind_me_popover_content.hbs');
const render_user_group_info_popover = require('../templates/user_group_info_popover.hbs');
const render_user_group_info_popover_content = require('../templates/user_group_info_popover_content.hbs');
const render_user_info_popover_content = require('../templates/user_info_popover_content.hbs');
const render_user_info_popover_title = require('../templates/user_info_popover_title.hbs');
const render_user_profile_modal = require("../templates/user_profile_modal.hbs");
let current_actions_popover_elem;
let current_flatpickr_instance;
let current_message_info_popover_elem;
let current_mobile_message_buttons_popover_elem;
let userlist_placement = "right";
let list_of_popovers = [];
function elem_to_user_id(elem) {
return 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.
(function (popover) {
$.fn.popover = function (...args) {
// apply the jQuery object as `this`, and popover function arguments.
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"));
}
};
// add back all shallow properties of $.fn.popover to the new proxied version.
for (const x in popover) {
if (popover.hasOwnProperty(x)) {
$.fn.popover[x] = popover[x];
}
}
}($.fn.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 = i18n.t('Email copied');
setTimeout(function () {
email_el.removeClass('email_copied');
email_textnode.nodeValue = copy_icon.attr('data-clipboard-text');
}, 1500);
e.clearSelection();
}
function init_email_clipboard() {
$('.user_popover_email').each(function () {
if (this.clientWidth < this.scrollWidth) {
const email_el = $(this);
const copy_email_icon = email_el.find('i');
copy_email_icon.removeClass('hide_copy_icon');
const copy_email_clipboard = new ClipboardJS(copy_email_icon[0]);
copy_email_clipboard.on('success', copy_email_handler);
}
});
}
function load_medium_avatar(user, elt) {
const user_avatar_url = "avatar/" + user.user_id + "/medium";
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';
}
}
}
function show_add_reaction_option(message) {
if (!message.sent_by_me) {
return false;
}
if (message.stream && stream_data.get_restrict_emoji_reaction(message.stream)) {
return false;
}
return true;
}
function get_custom_profile_field_data(user, field, field_types, dateFormat) {
const field_value = people.get_custom_profile_data(user.user_id, field.id);
const field_type = field.type;
const profile_field = {};
if (!field_value) {
return profile_field;
}
if (!field_value.value) {
return profile_field;
}
profile_field.name = field.name;
profile_field.is_user_field = false;
profile_field.is_link = field_type === field_types.URL.id;
profile_field.is_external_account = field_type === field_types.EXTERNAL_ACCOUNT.id;
profile_field.type = field_type;
switch (field_type) {
case field_types.DATE.id:
profile_field.value = moment(field_value.value).format(dateFormat);
break;
case field_types.USER.id:
profile_field.id = field.id;
profile_field.is_user_field = true;
profile_field.value = field_value.value;
break;
case field_types.CHOICE.id: {
const field_choice_dict = JSON.parse(field.field_data);
profile_field.value = field_choice_dict[field_value.value].text;
break;
}
case field_types.SHORT_TEXT.id:
case field_types.LONG_TEXT.id:
profile_field.value = field_value.value;
profile_field.rendered_value = field_value.rendered_value;
break;
case field_types.EXTERNAL_ACCOUNT.id:
profile_field.value = field_value.value;
profile_field.field_data = JSON.parse(field.field_data);
profile_field.link = settings_profile_fields.get_external_account_link(profile_field);
break;
default:
profile_field.value = field_value.value;
}
return profile_field;
}
function get_visible_email(user) {
if (user.delivery_email) {
return user.delivery_email;
}
return user.email;
}
function render_user_info_popover(user, popover_element, is_sender_popover, 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 args = {
can_revoke_away: can_revoke_away,
can_set_away: can_set_away,
is_active: people.is_active_user_for_popover(user.user_id),
is_bot: user.is_bot,
is_me: is_me,
is_sender_popover: 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_org.show_email(),
show_user_profile: !(user.is_bot || page_params.custom_profile_fields.length === 0),
user_email: 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_text: user_status.get_status_text(user.user_id),
};
if (user.is_bot) {
const is_cross_realm_bot = user.is_cross_realm_bot;
const bot_owner_id = user.bot_owner_id;
if (is_cross_realm_bot) {
args.is_cross_realm_bot = is_cross_realm_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: 100,
fix_positions: true,
});
popover_element.popover("show");
init_email_clipboard();
load_medium_avatar(user, $(".popover-avatar"));
}
// exporting for testability
exports._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(element, user, message) {
const last_popover_elem = current_message_info_popover_elem;
exports.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;
}
current_msg_list.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, "respond_personal_button",
"message-info-popover", "right");
current_message_info_popover_elem = elt;
}
}
function show_mobile_message_buttons_popover(element) {
const last_popover_elem = current_mobile_message_buttons_popover_elem;
exports.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 $element = $(element);
$element.popover({
placement: "left",
template: render_mobile_message_buttons_popover(),
content: render_mobile_message_buttons_popover_content({
is_in_private_narrow: narrow_state.narrowed_to_pms(),
}),
html: true,
trigger: "manual",
});
$element.popover("show");
current_mobile_message_buttons_popover_elem = $element;
}
exports.hide_mobile_message_buttons_popover = function () {
if (current_mobile_message_buttons_popover_elem) {
current_mobile_message_buttons_popover_elem.popover("destroy");
current_mobile_message_buttons_popover_elem = undefined;
}
};
exports.hide_user_profile = function () {
$("#user-profile-modal").modal("hide");
};
exports.show_user_profile = function (user) {
exports.hide_all();
const dateFormat = moment.localeData().longDateFormat('LL');
const field_types = page_params.custom_profile_field_types;
const profile_data = page_params.custom_profile_fields
.map(function (f) {return get_custom_profile_field_data(user, f, field_types, dateFormat);})
.filter(function (f) {return f.name !== undefined;});
const args = {
full_name: user.full_name,
email: get_visible_email(user),
profile_data: profile_data,
user_avatar: "avatar/" + user.email + "/medium",
is_me: people.is_current_user(user.email),
date_joined: moment(user.date_joined).format(dateFormat),
last_seen: buddy_data.user_last_seen_time_status(user.user_id),
show_email: settings_org.show_email(),
user_time: people.get_user_time(user.user_id),
user_type: people.get_user_type(user.user_id),
user_is_guest: user.is_guest,
};
$("#user-profile-modal-holder").html(render_user_profile_modal(args));
$("#user-profile-modal").modal("show");
settings_account.initialize_custom_user_type_fields("#user-profile-modal #content", user.user_id, false, false);
};
function get_user_info_popover_items() {
if (!current_message_info_popover_elem) {
blueslip.error('Trying to get menu items when action popover is closed.');
return;
}
const popover_data = current_message_info_popover_elem.data('popover');
if (!popover_data) {
blueslip.error('Cannot find popover data for actions menu.');
return;
}
return $('li:not(.divider):visible a', popover_data.$tip);
}
function fetch_group_members(member_ids) {
return member_ids
.map(function (m) {
return people.get_by_user_id(m);
})
.filter(function (m) {
return m !== undefined;
})
.map(function (p) {
return Object.assign({}, 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(function (a, b) {
return a.full_name.localeCompare(b.full_name);
});
}
// exporting these functions for testing purposes
exports._test_fetch_group_members = fetch_group_members;
exports._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;
exports.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;
}
current_msg_list.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;
}
}
exports.toggle_actions_popover = function (element, id) {
const last_popover_elem = current_actions_popover_elem;
exports.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');
current_msg_list.select_id(id);
const elt = $(element);
if (elt.data('popover') === undefined) {
const message = current_msg_list.get(id);
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 = i18n.t("Edit");
} else if (editability === message_edit.editability_types.TOPIC_ONLY) {
use_edit_icon = false;
editability_menu_item = i18n.t("View source / Edit topic");
} else {
use_edit_icon = false;
editability_menu_item = i18n.t("View source");
}
const topic = util.get_message_topic(message);
const can_mute_topic =
message.stream &&
topic &&
!muting.is_topic_muted(message.stream_id, topic);
const can_unmute_topic =
message.stream &&
topic &&
muting.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;
// 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;
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;
const should_display_quote_and_reply = message.content !== '<p>(deleted)</p>';
const conversation_time_uri = hash_util.by_conversation_and_time_uri(message)
.replace(/\(/g, '%28')
.replace(/\)/g, '%29');
const should_display_delete_option = message_edit.get_deletability(message);
const args = {
message_id: message.id,
historical: message.historical,
stream_id: message.stream_id,
topic: topic,
use_edit_icon: use_edit_icon,
editability_menu_item: editability_menu_item,
can_mute_topic: can_mute_topic,
can_unmute_topic: can_unmute_topic,
should_display_collapse: should_display_collapse,
should_display_uncollapse: should_display_uncollapse,
should_display_add_reaction_option: show_add_reaction_option(message),
should_display_edit_history_option: should_display_edit_history_option,
conversation_time_uri: conversation_time_uri,
narrowed: narrow_state.active(),
should_display_delete_option: should_display_delete_option,
should_display_reminder_option: feature_flags.reminders_in_message_action_menu,
should_display_edit_and_view_source: should_display_edit_and_view_source,
should_display_quote_and_reply: 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;
}
};
exports.render_actions_remind_popover = function (element, id) {
exports.hide_all();
$(element).closest('.message_row').toggleClass('has_popover has_actions_popover');
current_msg_list.select_id(id);
const elt = $(element);
if (elt.data('popover') === undefined) {
const message = current_msg_list.get(id);
const args = {
message: 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="' + message.id + '"]').flatpickr({
enableTime: true,
clickOpens: false,
defaultDate: moment().format(),
minDate: 'today',
plugins: [new confirmDatePlugin({})], // eslint-disable-line new-cap, no-undef
});
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;
}
const popover_data = current_actions_popover_elem.data('popover');
if (!popover_data) {
blueslip.error('Cannot find popover data for actions menu.');
return;
}
return $('li:not(.divider):visible a', popover_data.$tip);
}
function focus_first_popover_item(items) {
if (!items) {
return;
}
items.eq(0).expectOne().focus();
}
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) {
return items[index].click();
}
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).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);
}
exports.open_message_menu = function (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;
exports.toggle_actions_popover($(".selected_message .actions_hover")[0], message_id);
if (current_actions_popover_elem) {
focus_first_action_popover_item();
}
return true;
};
exports.actions_menu_handle_keyboard = function (key) {
const items = get_action_menu_menu_items();
popover_items_handle_keyboard(key, items);
};
exports.actions_popped = function () {
return current_actions_popover_elem !== undefined;
};
exports.hide_actions_popover = function () {
if (exports.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;
}
};
exports.message_info_popped = function () {
return current_message_info_popover_elem !== undefined;
};
exports.hide_message_info_popover = function () {
if (exports.message_info_popped()) {
current_message_info_popover_elem.popover("destroy");
current_message_info_popover_elem = undefined;
}
};
exports.hide_userlist_sidebar = function () {
$(".app-main .column-right").removeClass("expanded");
};
exports.hide_pm_list_sidebar = function () {
$(".app-main .column-left").removeClass("expanded");
};
exports.show_userlist_sidebar = function () {
$(".app-main .column-right").addClass("expanded");
resize.resize_page_components();
};
exports.show_pm_list_sidebar = function () {
$(".app-main .column-left").addClass("expanded");
resize.resize_page_components();
};
let current_user_sidebar_user_id;
let current_user_sidebar_popover;
function user_sidebar_popped() {
return current_user_sidebar_popover !== undefined;
}
exports.hide_user_sidebar_popover = function () {
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_items();
focus_first_popover_item(items);
}
exports.user_info_popover_handle_keyboard = function (key) {
const items = get_user_info_popover_items();
popover_items_handle_keyboard(key, items);
};
exports.show_sender_info = function () {
const $message = $(".selected_message");
const $sender = $message.find('.sender_info_hover');
const message = current_msg_list.get(rows.id($message));
const user = people.get_by_user_id(message.sender_id);
show_user_info_popover($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;
exports.set_suppress_scroll_hide = function () {
suppress_scroll_hide = true;
};
exports.register_click_handlers = function () {
$("#main_div").on("click", ".actions_hover", function (e) {
const row = $(this).closest(".message_row");
e.stopPropagation();
exports.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 = current_msg_list.get(rows.id(row));
const user = people.get_by_user_id(message.sender_id);
show_user_info_popover(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 = current_msg_list.get(rows.id(row));
let user;
if (id_string) {
const user_id = parseInt(id_string, 10);
user = people.get_by_user_id(user_id);
} else {
user = people.get_by_email(email);
}
show_user_info_popover(this, user, message);
});
$("#main_div").on("click", ".user-group-mention", function (e) {
const user_group_id = parseInt($(this).attr('data-user-group-id'), 10);
const row = $(this).closest(".message_row");
e.stopPropagation();
const message = current_msg_list.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);
}
});
$('body').on('click', '.info_popover_actions .narrow_to_private_messages', function (e) {
const user_id = elem_to_user_id($(e.target).parents('ul'));
const email = people.get_by_user_id(user_id).email;
exports.hide_message_info_popover();
narrow.by('pm-with', email, {trigger: 'user sidebar popover'});
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.info_popover_actions .narrow_to_messages_sent', function (e) {
const user_id = elem_to_user_id($(e.target).parents('ul'));
const email = people.get_by_user_id(user_id).email;
exports.hide_message_info_popover();
narrow.by('sender', email, {trigger: 'user sidebar popover'});
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.user_popover .mention_user', function (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);
exports.hide_user_sidebar_popover();
exports.hide_userlist_sidebar();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.message-info-popover .mention_user', function (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);
exports.hide_message_info_popover();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.info_popover_actions .view_user_profile', function (e) {
const user_id = elem_to_user_id($(e.target).parents('ul'));
const user = people.get_by_user_id(user_id);
exports.show_user_profile(user);
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.info_popover_actions .clear_status', function (e) {
e.preventDefault();
const me = elem_to_user_id($(e.target).parents('ul'));
user_status.server_update({
user_id: me,
status_text: '',
success: function () {
$('.info_popover_actions #status_message').html('');
},
});
});
$('body').on('click', '.bot-owner-name', function (e) {
const user_id = $(e.target).attr('data-bot-owner-id');
const user = people.get_by_user_id(user_id);
exports.show_user_profile(user);
});
$('body').on('click', '#user-profile-modal #name #edit-button', function () {
exports.hide_user_profile();
});
$('body').on('click', '.compose_mobile_button', function (e) {
show_mobile_message_buttons_popover(this);
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.set_away_status', function (e) {
exports.hide_all();
user_status.server_set_away();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.revoke_away_status', function (e) {
exports.hide_all();
user_status.server_revoke_away();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.update_status_text', function (e) {
exports.hide_all();
user_status_ui.open_overlay();
e.stopPropagation();
e.preventDefault();
});
$('#user_presences').on('click', '.user-list-arrow', function (e) {
e.stopPropagation();
// use email of currently selected user, rather than some elem comparison,
// as the presence list may be redrawn with new elements.
const target = $(this).closest('li');
const user_id = elem_to_user_id(target.find('a'));
if (current_user_sidebar_user_id === user_id) {
// If the popover is already shown, clicking again should toggle it.
// We don't want to hide the sidebars on smaller browser windows.
exports.hide_all_except_sidebars();
return;
}
exports.hide_all();
if (userlist_placement === "right") {
exports.show_userlist_sidebar();
} else {
// Maintain the same behavior when displaying with the streamlist.
stream_popover.show_streamlist_sidebar();
}
const user = people.get_by_user_id(user_id);
const popover_placement = userlist_placement === "left" ? "right" : "left";
render_user_info_popover(user, target, false, "compose_private_message",
"user_popover", popover_placement);
current_user_sidebar_user_id = user.user_id;
current_user_sidebar_popover = target.data('popover');
});
$('body').on("mouseenter", ".user_popover_email", function () {
const tooltip_holder = $(this).find('div');
if (this.offsetWidth < this.scrollWidth) {
tooltip_holder.addClass('display-tooltip');
} else {
tooltip_holder.removeClass('display-tooltip');
}
});
$('body').on('click', '.respond_button', function (e) {
// Arguably, we should fetch the message ID to respond to from
// e.target, but that should always be the current selected
// message in the current message list (and
// compose_actions.respond_to_message doesn't take a message
// argument).
compose_actions.quote_and_reply({trigger: 'popover respond'});
exports.hide_actions_popover();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.reminder_button', function (e) {
const message_id = $(e.currentTarget).data('message-id');
exports.render_actions_remind_popover($(".selected_message .actions_hover")[0], message_id);
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.remind.custom', function (e) {
$(e.currentTarget)[0]._flatpickr.toggle();
e.stopPropagation();
e.preventDefault();
});
function reminder_click_handler(datestr, e) {
const message_id = $(".remind.custom").data('message-id');
reminder.do_set_reminder_for_message(message_id, datestr);
exports.hide_all();
e.stopPropagation();
e.preventDefault();
}
$('body').on('click', '.remind.in_20m', function (e) {
const datestr = moment().add(20, 'm').format();
reminder_click_handler(datestr, e);
});
$('body').on('click', '.remind.in_1h', function (e) {
const datestr = moment().add(1, 'h').format();
reminder_click_handler(datestr, e);
});
$('body').on('click', '.remind.in_3h', function (e) {
const datestr = moment().add(3, 'h').format();
reminder_click_handler(datestr, e);
});
$('body').on('click', '.remind.tomo', function (e) {
const datestr = moment().add(1, 'd').hour(9).minute(0).seconds(0).format();
reminder_click_handler(datestr, e);
});
$('body').on('click', '.remind.nxtw', function (e) {
const datestr = moment().add(1, 'w').day('monday').hour(9).minute(0).seconds(0).format();
reminder_click_handler(datestr, e);
});
$('body').on('click', '.flatpickr-calendar', function (e) {
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.flatpickr-confirm', function (e) {
const datestr = $(".remind.custom")[0].value;
reminder_click_handler(datestr, e);
});
$('body').on('click', '.respond_personal_button, .compose_private_message', function (e) {
const user_id = elem_to_user_id($(e.target).parents('ul'));
const email = people.get_by_user_id(user_id).email;
compose_actions.start('private', {
trigger: 'popover send private',
private_message_recipient: email});
exports.hide_all();
e.stopPropagation();
e.preventDefault();
});
$('body').on('click', '.popover_toggle_collapse', function (e) {
const message_id = $(e.currentTarget).data('message-id');
const row = current_msg_list.get_row(message_id);
const message = current_msg_list.get(rows.id(row));
exports.hide_actions_popover();