hovercard: fix hover-card does now working with ajax loaded content
This commit is contained in:
rabuzarus
parent
0ab7a210f9
commit
415c36e4bb
1 changed files with 71 additions and 79 deletions
150
js/hovercard.js
150
js/hovercard.js
|
|
@ -8,92 +8,84 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// Elements with the class "userinfo" will get a hover-card.
|
||||||
$(document).ready(function(){
|
// Note that this elements does need a href attribute which links to
|
||||||
|
// a valid profile url
|
||||||
// Elements with the class "userinfo" will get a hover-card.
|
$("body").on("mouseover", ".userinfo", function(e) {
|
||||||
// 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: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
|
|
||||||
content: data
|
|
||||||
}).popover('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
}).on("mouseleave", function(e) { // action when mouse leaves the hover-card
|
|
||||||
var timeNow = new Date().getTime();
|
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);
|
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: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
|
||||||
|
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
|
// 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){
|
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
|
||||||
var timeNow = new Date().getTime();
|
var timeNow = new Date().getTime();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue