From 415c36e4bb57610cf7f14ed9b8064d4dd394e782 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 6 May 2016 20:48:12 +0200
Subject: [PATCH] hovercard: fix hover-card does now working with ajax loaded
content
---
js/hovercard.js | 150 +++++++++++++++++++++++-------------------------
1 file changed, 71 insertions(+), 79 deletions(-)
diff --git a/js/hovercard.js b/js/hovercard.js
index 1fce282c08..c42b0ce2f1 100644
--- a/js/hovercard.js
+++ b/js/hovercard.js
@@ -8,92 +8,84 @@
*
*/
-
-$(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
- $('.userinfo').on("mouseover", 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 + "/frio_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: ""});
-
- // Timeoute 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: 'manual',
- template: '
',
- content: data
- }).popover('show');
- }
- });
- }
- }
- }, 500);
- }).on("mouseleave", function(e) { // action when mouse leaves the hover-card
+// 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", function(e) {
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);
- });
+ 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 + "/frio_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: ""});
+
+ // Timeoute 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: 'manual',
+ template: '',
+ content: data
+ }).popover('show');
+ }
+ });
+ }
+ }
+ }, 500);
+}).on("mouseleave", ".userinfo", 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){
var timeNow = new Date().getTime();