2 * The javascript for friendicas hovercard. Bootstraps popover is needed.
4 * Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
5 * qvitter code (https://github.com/hannesmannerheim/qvitter)
7 * It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
10 $(document).ready(function () {
11 // Elements with the class "userinfo" will get a hover-card.
12 // Note that this elements does need a href attribute which links to
13 // a valid profile url
14 $("body").on("mouseover", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function (e) {
15 let timeNow = new Date().getTime();
16 removeAllHovercards(e, timeNow);
17 let contact_url = false;
18 let targetElement = $(this);
21 if (targetElement.is('[href]')) {
22 contact_url = targetElement.attr('href');
27 // no hover card if the element has the no-hover-card class
28 if (targetElement.hasClass('no-hover-card')) {
32 // no hovercard for anchor links
33 if (contact_url.substring(0, 1) === '#') {
37 targetElement.attr('data-awaiting-hover-card', timeNow);
39 // store the title in an other data attribute beause bootstrap
40 // popover destroys the title.attribute. We can restore it later
41 let title = targetElement.attr("title");
42 targetElement.attr({"data-orig-title": title, title: ""});
44 // if the device is a mobile open the hover card by click and not by hover
45 if (typeof is_mobile != "undefined") {
46 targetElement[0].removeAttribute("href");
47 var hctrigger = 'click';
49 var hctrigger = 'manual';
52 // Timeout until the hover-card does appear
53 setTimeout(function () {
55 targetElement.is(":hover")
56 && parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow
57 && $('.hovercard').length === 0
58 ) { // no card if there already is one open
59 // get an additional data atribute if the card is active
60 targetElement.attr('data-hover-card-active', timeNow);
61 // get the whole html content of the hover card and
62 // push it to the bootstrap popover
63 getHoverCardContent(contact_url, function (data) {
65 targetElement.popover({
67 placement: function () {
68 // Calculate the placement of the the hovercard (if top or bottom)
69 // The placement depence on the distance between window top and the element
70 // which triggers the hover-card
71 var get_position = $(targetElement).offset().top - $(window).scrollTop();
72 if (get_position < 270) {
78 template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
81 sanitizeFn: function (content) {
82 return DOMPurify.sanitize(content)
89 }).on("mouseleave", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function (e) { // action when mouse leaves the hover-card
90 var timeNow = new Date().getTime();
91 // copy the original title to the title atribute
92 var title = $(this).attr("data-orig-title");
93 $(this).attr({"data-orig-title": "", title: title});
94 removeAllHovercards(e, timeNow);
97 // hover cards should be removed very easily, e.g. when any of these events happen
98 $('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function (e) {
99 // remove hover card only for desktiop user, since on mobile we openen the hovercards
100 // by click event insteadof hover
101 if (typeof is_mobile == "undefined") {
102 var timeNow = new Date().getTime();
103 removeAllHovercards(e, timeNow);
107 // if we're hovering a hover card, give it a class, so we don't remove it
108 $('body').on('mouseover', '.hovercard', function (e) {
109 $(this).addClass('dont-remove-card');
112 $('body').on('mouseleave', '.hovercard', function (e) {
113 $(this).removeClass('dont-remove-card');
114 $(this).popover("hide");
116 }); // End of $(document).ready
118 // removes all hover cards
119 function removeAllHovercards(event, priorTo) {
120 // 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)
121 setTimeout(function () {
122 $.each($('.hovercard'), function () {
123 var title = $(this).attr("data-orig-title");
124 // don't remove card if it was created after removeAllhoverCards() was called
125 if ($(this).data('card-created') < priorTo) {
126 // don't remove it if we're hovering it right now!
127 if (!$(this).hasClass('dont-remove-card')) {
128 $('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
129 $(this).popover("hide");
136 getHoverCardContent.cache = {};
138 function getHoverCardContent(contact_url, callback) {
143 // Normalize and clean the profile so we can use a standardized url
144 // as key for the cache
145 let nurl = cleanContactUrl(contact_url).normalizeLink();
147 // If the contact is already in the cache use the cached result instead
148 // of doing a new ajax request
149 if (nurl in getHoverCardContent.cache) {
150 callback(getHoverCardContent.cache[nurl]);
155 url: baseurl + "/contact/hovercard",
157 success: function (data, textStatus, request) {
158 getHoverCardContent.cache[nurl] = data;