friendica/view/theme/frio/js/hovercard.js

/*
 * The javascript for friendicas hovercard. Bootstraps popover is needed.
 *
 * Much parts of the code are from Hannes Mannerheims <h@nnesmannerhe.im>
 * qvitter code (https://github.com/hannesmannerheim/qvitter)
 *
 * It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
 *
 */
$(document).ready(function(){
	// Elements with the class "userinfo" will get a hover-card.
	// Note that this elements does need a href attribute which links to
	// a valid profile url
	$("body").on("mouseover", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function(e) {
			var timeNow = new Date().getTime();
			removeAllhoverCards(e,timeNow);
			var hoverCardData = false;
			var hrefAttr = false;
			var targetElement = $(this);

			// get href-attribute
			if(targetElement.is('[href]')) {
				hrefAttr = targetElement.attr('href');
			} else {
				return true;
			}

			// no hover card if the element has the no-hover-card class
			if(targetElement.hasClass('no-hover-card')) {
				return true;
			}

			// no hovercard for anchor links
			if(hrefAttr.substring(0,1) == '#') {
				return true;
			}

			targetElement.attr('data-awaiting-hover-card',timeNow);

			// Take link href attribute as link to the profile
			var profileurl = hrefAttr;
			// the url to get the contact and template data
			var url = baseurl + "/hovercard";

			// store the title in an other data attribute beause bootstrap
			// popover destroys the title.attribute. We can restore it later
			var title = targetElement.attr("title");
			targetElement.attr({"data-orig-title": title, title: ""});

			// if the device is a mobile open the hover card by click and not by hover
			if(typeof is_mobile != "undefined") {
					targetElement[0].removeAttribute("href");
					var hctrigger = 'click';
				} else {
					var hctrigger = 'manual';
			};

			// Timeout until the hover-card does appear
			setTimeout(function(){
				if(targetElement.is(":hover") && parseInt(targetElement.attr('data-awaiting-hover-card'),10) == timeNow) {
					if($('.hovercard').length == 0) {	// no card if there already is one open
						// get an additional data atribute if the card is active
						targetElement.attr('data-hover-card-active',timeNow);
						// get the whole html content of the hover card and
						// push it to the bootstrap popover
						getHoverCardContent(profileurl, url, function(data){
							if(data) {
								targetElement.popover({
									html: true,
									placement: function () {
										// Calculate the placement of the the hovercard (if top or bottom)
										// The placement depence on the distance between window top and the element
										// which triggers the hover-card
										var get_position = $(targetElement).offset().top - $(window).scrollTop();
										if (get_position < 270 ){
											return "bottom";
										}
										return "top";
									},
									trigger: hctrigger,
									template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
									content: data,
									container: "body",
									sanitizeFn: function (content) {
										return DOMPurify.sanitize(content)
									},
								}).popover('show');
							}
						});
					}
				}
			}, 500);
	}).on("mouseleave", ".userinfo, .wall-item-responses a, .wall-item-bottom .mention a", function(e) { // action when mouse leaves the hover-card
		var timeNow = new Date().getTime();
		// copy the original title to the title atribute
		var title = $(this).attr("data-orig-title");
		$(this).attr({"data-orig-title": "", title: title});
		removeAllhoverCards(e,timeNow);
	});



	// hover cards should be removed very easily, e.g. when any of these events happen
	$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
		// remove hover card only for desktiop user, since on mobile we openen the hovercards
		// by click event insteadof hover
		if(typeof is_mobile == "undefined") {
			var timeNow = new Date().getTime();
			removeAllhoverCards(e,timeNow);
		};
	});

	// if we're hovering a hover card, give it a class, so we don't remove it
	$('body').on('mouseover','.hovercard', function(e) {
		$(this).addClass('dont-remove-card');
	});
	$('body').on('mouseleave','.hovercard', function(e) {
		$(this).removeClass('dont-remove-card');
		$(this).popover("hide");
	});

}); // End of $(document).ready

// removes all hover cards
function removeAllhoverCards(event,priorTo) {
	// 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)
	setTimeout(function(){
		$.each($('.hovercard'),function(){
			var title = $(this).attr("data-orig-title");
			// don't remove card if it was created after removeAllhoverCards() was called
			if($(this).data('card-created') < priorTo) {
				// don't remove it if we're hovering it right now!
				if(!$(this).hasClass('dont-remove-card')) {
					$('[data-hover-card-active="' + $(this).data('card-created') + '"]').removeAttr('data-hover-card-active');
					$(this).popover("hide");
				}
			}
		});
	},100);
}

// Ajax request to get json contact data
function getContactData(purl, url, actionOnSuccess) {
	var postdata = {
		mode		: 'none',
		profileurl	: purl,
		datatype	: 'json',
	};

	// Normalize and clean the profile so we can use a standardized url
	// as key for the cache
	var nurl = cleanContactUrl(purl).normalizeLink();

	// If the contact is allready in the cache use the cached result instead
	// of doing a new ajax request
	if(nurl in getContactData.cache) {
		setTimeout(function() { actionOnSuccess(getContactData.cache[nurl]); } , 1);
		return;
	}

	$.ajax({
		url: url,
		data: postdata,
		dataType: "json",
		success: function(data, textStatus, request){
			// Check if the nurl (normalized profile url) is present and store it to the cache
			// The nurl will be the identifier in the object
			if(data.nurl.length > 0) {
				// Test if the contact is allready connected with the user (if url containing
				// the expression ("redir/") We will store different cache keys
				if((data.url.search("redir/")) >= 0 ) {
					var key = data.url;
				} else {
					var key = data.nurl;
				}
				getContactData.cache[key] = data;
			}
			actionOnSuccess(data, url, request);
		},
		error: function(data) {
			actionOnSuccess(false, data, url);
		}
	});
}
getContactData.cache = {};

// Get hover-card template data and the contact-data and transform it with
// the help of jSmart. At the end we have full html content of the hovercard
function getHoverCardContent(purl, url, callback) {
	// fetch the raw content of the template
	getHoverCardTemplate(url, function(stpl) {
		var template = unescape(stpl);

		// get the contact data
		getContactData (purl, url, function(data) {
			if(typeof template != 'undefined') {
				// get the hover-card variables
				var variables = getHoverCardVariables(data);
				var tpl;

				// use friendicas template delimiters instead of
				// the original one
				jSmart.prototype.left_delimiter = '{{';
				jSmart.prototype.right_delimiter = '}}';

				// create a new jSmart instant with the raw content
				// of the template
				var tpl = new jSmart (template);
				// insert the variables content into the template content
				var HoverCardContent = tpl.fetch(variables);

				callback(HoverCardContent);
			}
		});
	});

// This is interisting. this pice of code ajax request are done asynchron.
// To make it work getHOverCardTemplate() and getHOverCardData have to return it's
// data (no succes handler for each of this). I leave it here, because it could be useful.
// https://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/
//	$.when(
//		getHoverCardTemplate(url),
//		getContactData (term, url )
//
//	).done(function(template, profile){
//		if(typeof template != 'undefined') {
//			var variables = getHoverCardVariables(profile);
//
//			jSmart.prototype.left_delimiter = '{{';
//			jSmart.prototype.right_delimiter = '}}';
//			var tpl = new jSmart (template);
//			var html = tpl.fetch(variables);
//
//			return html;
//		}
//	});
}


// Ajax request to get the raw template content
function getHoverCardTemplate (url, callback) {
	var postdata = {
		mode: 'none',
		datatype: 'tpl'
	};

	// Look if we have the template already in the cace, so we don't have
	// request it again
	if('hovercard' in getHoverCardTemplate.cache) {
		setTimeout(function() { callback(getHoverCardTemplate.cache['hovercard']); } , 1);
		return;
	}

	$.ajax({
		url: url,
		data: postdata,
		success: function(data, textStatus) {
			// write the data in the cache
			getHoverCardTemplate.cache['hovercard'] = data;
			callback(data);
		}
	}).fail(function () {callback([]); });
}
getHoverCardTemplate.cache = {};

// The Variables used for the template
function getHoverCardVariables(object) {
	var profile = {
			name:		object.name,
			nick:		object.nick,
			addr:		object.addr,
			thumb:		object.thumb,
			url:		object.url,
			nurl:		object.nurl,
			location:	object.location,
			gender:		object.gender,
			about:		object.about,
			network:	object.network,
			tags:		object.tags,
			bd:		object.bd,
			account_type:	object.account_type,
			actions:	object.actions
	};

	var variables = { profile:  profile};

	return variables;
}