mirror of
https://github.com/friendica/friendica
synced 2025-04-24 21:10:10 +00:00
Some code cleanup - move js and css to head.tpl -> this stuff should be done in theme.php but does need changings in core (this would allow theme developers more structured working)
This commit is contained in:
rabuzarus
parent
da63ae343a
commit
88be5e3028
6 changed files with 315 additions and 193 deletions
180
js/hovercard.js
180
js/hovercard.js
|
|
@ -7,90 +7,103 @@
|
|||
* 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", function(e) {
|
||||
var timeNow = new Date().getTime();
|
||||
removeAllhoverCards(e,timeNow);
|
||||
var hoverCardData = false;
|
||||
var hrefAttr = false;
|
||||
var targetElement = $(this);
|
||||
|
||||
// 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) {
|
||||
// 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
|
||||
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", 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;
|
||||
}
|
||||
// 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");
|
||||
});
|
||||
|
||||
// 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
|
||||
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
|
||||
var timeNow = new Date().getTime();
|
||||
removeAllhoverCards(e,timeNow);
|
||||
});
|
||||
}); // End of $(document).ready
|
||||
|
||||
// removes all hover cards
|
||||
function removeAllhoverCards(event,priorTo) {
|
||||
|
|
@ -110,15 +123,6 @@ function removeAllhoverCards(event,priorTo) {
|
|||
},100);
|
||||
}
|
||||
|
||||
// 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");
|
||||
});
|
||||
|
||||
// Ajax request to get json contact data
|
||||
function getContactData(purl, url, actionOnSuccess) {
|
||||
var postdata = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue