1 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
3 * The javascript for friendicas hovercard. Bootstraps popover is needed.
5 * Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
6 * qvitter code (https://github.com/hannesmannerheim/qvitter)
8 * It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
11 $(document).ready(function () {
12 let $body = $('body');
13 // Prevents normal click action on click hovercard elements
14 $body.on('click', '.userinfo.click-card', function (e) {
17 // This event listener needs to be declared before the one that removes
18 // all cards so that we can stop the immediate propagation of the event
19 // Since the manual popover appears instantly and the hovercard removal is
20 // on a 100ms delay, leaving event propagation immediately hides any click hovercard
21 $body.on('mousedown', '.userinfo.click-card', function (e) {
22 e.stopImmediatePropagation();
23 let timeNow = new Date().getTime();
25 let contactUrl = false;
26 let targetElement = $(this);
29 if (targetElement.is('[href]')) {
30 contactUrl = targetElement.attr('href');
35 // no hovercard for anchor links
36 if (contactUrl.substring(0, 1) === '#') {
40 openHovercard(targetElement, contactUrl, timeNow);
43 // hover cards should be removed very easily, e.g. when any of these events happens
44 $body.on('mouseleave touchstart scroll mousedown submit keydown', function (e) {
45 // remove hover card only for desktiop user, since on mobile we open the hovercards
46 // by click event insteadof hover
47 removeAllHovercards(e, new Date().getTime());
50 $body.on('mouseover', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) {
51 let timeNow = new Date().getTime();
52 removeAllHovercards(e, timeNow);
53 let contactUrl = false;
54 let targetElement = $(this);
57 if (targetElement.is('[href]')) {
58 contactUrl = targetElement.attr('href');
63 // no hover card if the element has the no-hover-card class
64 if (targetElement.hasClass('no-hover-card')) {
68 // no hovercard for anchor links
69 if (contactUrl.substring(0, 1) === '#') {
73 targetElement.attr('data-awaiting-hover-card', timeNow);
75 // Delay until the hover-card does appear
76 setTimeout(function () {
78 targetElement.is(':hover')
79 && parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow
80 && $('.hovercard').length === 0
82 openHovercard(targetElement, contactUrl, timeNow);
85 }).on('mouseleave', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { // action when mouse leaves the hover-card
86 removeAllHovercards(e, new Date().getTime());
89 // if we're hovering a hover card, give it a class, so we don't remove it
90 $body.on('mouseover', '.hovercard', function (e) {
91 $(this).addClass('dont-remove-card');
94 $body.on('mouseleave', '.hovercard', function (e) {
95 $(this).removeClass('dont-remove-card');
96 $(this).popover('hide');
98 }); // End of $(document).ready
100 // removes all hover cards
101 function removeAllHovercards(event, priorTo) {
102 // don't remove hovercards until after 100ms, so user have time to move the cursor to it (which gives it the dont-remove-card class)
103 setTimeout(function () {
104 $.each($('.hovercard'), function () {
105 let title = $(this).attr('data-orig-title');
106 // don't remove card if it was created after removeAllhoverCards() was called
107 if ($(this).data('card-created') < priorTo) {
108 // don't remove it if we're hovering it right now!
109 if (!$(this).hasClass('dont-remove-card')) {
110 let $handle = $('[data-hover-card-active="' + $(this).data('card-created') + '"]');
111 $handle.removeAttr('data-hover-card-active');
113 // Restoring the popover handle title
114 let title = $handle.attr('data-orig-title');
115 $handle.attr({'data-orig-title': '', title: title});
117 $(this).popover('hide');
124 function openHovercard(targetElement, contactUrl, timeNow) {
125 // store the title in a data attribute because Bootstrap
126 // popover destroys the title attribute.
127 let title = targetElement.attr('title');
128 targetElement.attr({'data-orig-title': title, title: ''});
130 // get an additional data atribute if the card is active
131 targetElement.attr('data-hover-card-active', timeNow);
132 // get the whole html content of the hover card and
133 // push it to the bootstrap popover
134 getHoverCardContent(contactUrl, function (data) {
136 targetElement.popover({
138 placement: function () {
139 // Calculate the placement of the the hovercard (if top or bottom)
140 // The placement depence on the distance between window top and the element
141 // which triggers the hover-card
142 let get_position = $(targetElement).offset().top - $(window).scrollTop();
143 if (get_position < 270) {
149 template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
152 sanitizeFn: function (content) {
153 return DOMPurify.sanitize(content)
160 getHoverCardContent.cache = {};
162 function getHoverCardContent(contact_url, callback) {
167 // Normalize and clean the profile so we can use a standardized url
168 // as key for the cache
169 let nurl = cleanContactUrl(contact_url).normalizeLink();
171 // If the contact is already in the cache use the cached result instead
172 // of doing a new ajax request
173 if (nurl in getHoverCardContent.cache) {
174 callback(getHoverCardContent.cache[nurl]);
179 url: baseurl + '/contact/hovercard',
181 success: function (data, textStatus, request) {
182 getHoverCardContent.cache[nurl] = data;