//Title: Hovercard plugin by PC
//Documentation: http://designwithpc.com/Plugins/Hovercard
//Author: PC
//Website: http://designwithpc.com
//Twitter: @chaudharyp
//
//Version 1.0
//Aug 31st 2011 -First Release.
//
//Version 1.1
//Sep 29th 2011
//Bug fixed: When using hovercard in hovercard, the inner hovercard shows up as well when parent hovercard opens.
//
//Version 1.2
//Sep 30th 2011
//Enhancement: The hovercard now adjust (either open on left or right) in accordance to the view port.
//Added option:
//openOnLeft: force hovercard to open on left. (eg: if the hovered name appear in the end of sentence)
//
//Version 2.0
//Nov 8th 2011
//Bug Fixes: zindex issue.
//Enhancements: Supercool built in social profile cards like Twitter and Facebook!
//Added options:
//showTwitterCard: displays a built in twitter card format for a twitter screenname. Maximum 150 twitter lookup per hour.
//twitterScreenName: twitter screen name for the hovercard. If no username/screenname is provided, hovercard attempts to look up for hovered text.
//showFacebookCard: displays a built in facebook card format for a facebook username/pages/events etc. Works best with Facebook pages.
//facebookUserName: facebook username/pages/events/groups for the hovercard. If no username is provided, hovercard attempts to look up for hovered text.
(function ($) {
$.fn.hovercard = function (options) {
//Set defauls for the control
var defaults = {
width: 300,
openOnLeft: false,
cardImgSrc: "",
detailsHTML: "",
twitterScreenName: '',
showTwitterCard: false,
facebookUserName: '',
showFacebookCard: false,
showCustomCard: false,
customDataUrl: '',
background: "#ffffff",
onHoverIn: function () { },
onHoverOut: function () { }
};
//Update unset options with defaults if needed
var options = $.extend(defaults, options);
//Executing functionality on all selected elements
return this.each(function () {
var obj = $(this);
//wrap a parent span to the selected element
obj.wrap('');
//add a relatively positioned class to the selected element
obj.addClass("hc-name");
//if card image src provided then generate the image elementk
var hcImg = '';
if (options.cardImgSrc.length > 0) {
hcImg = '';
}
//generate details span with html provided by the user
var hcDetails = '
' + hcImg + options.detailsHTML + '
';
//append this detail after the selected element
obj.after(hcDetails);
obj.siblings(".hc-details").eq(0).css({ 'width': options.width, 'background': options.background });
//Get the view port size
var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 7) {
viewportWidth -= 3;
}
//toggle hover card details on hover
obj.closest(".hc-preview").hover(function () {
//Up the z indiex for the .hc-name to overlay on .hc-details
obj.css("zIndex", "100");
var $this = $(this);
var offsetForHovercard = 0;
offsetForHovercard = $this.offset().left + options.width + 10;
var curHCDetails = $this.find(".hc-details").eq(0);
if (offsetForHovercard > viewportWidth || options.openOnLeft) {
curHCDetails.removeClass("hc-details-open-right")
.addClass("hc-details-open-left")
.stop(true, true).fadeIn();
} else {
curHCDetails.removeClass("hc-details-open-left")
.addClass("hc-details-open-right")
.stop(true, true).fadeIn();
}
//Default functionality on hoverin, and also allows callback
if (typeof options.onHoverIn == 'function') {
//check for custom profile. If already loaded don't load again
if (options.showCustomCard && curHCDetails.find('.s-card').length <= 0) {
//Read data-hovercard url from the hovered element, otherwise look in the options. For custom card, complete url is required than just username.
var dataUrl = options.customDataUrl;
if (typeof obj.attr('data-hovercard') == 'undefined') {
//do nothing. detecting typeof obj.attr('data-hovercard') != 'undefined' didn't work as expected.
} else if (obj.attr('data-hovercard').length > 0) {
dataUrl = obj.attr('data-hovercard');
}
LoadSocialProfile("custom", dataUrl, curHCDetails);
}
//check for twitter profile. If already loaded don't load again
if (options.showTwitterCard && curHCDetails.find('.s-card').length <= 0) {
//Look for twitter screen name in data-hovercard first, then in options, otherwise try with the hovered text
var tUsername = options.twitterScreenName.length > 0 ? options.twitterScreenName : obj.text();
if (typeof obj.attr('data-hovercard') == 'undefined') {
//do nothing. detecting typeof obj.attr('data-hovercard') != 'undefined' didn't work as expected.
} else if (obj.attr('data-hovercard').length > 0) {
tUsername = obj.attr('data-hovercard');
}
LoadSocialProfile("twitter", tUsername, curHCDetails);
}
//check for facebook profile. If already loaded don't load again
if (options.showFacebookCard && curHCDetails.find('.s-card').length <= 0) {
//Look for twitter screen name in data-hovercard first, then in options, otherwise try with the hovered text
var fbUsername = options.facebookUserName.length > 0 ? options.facebookUserName : obj.text();
if (typeof obj.attr('data-hovercard') == 'undefined') {
//do nothing. detecting typeof obj.attr('data-hovercard') != 'undefined' didn't work as expected.
} else if (obj.attr('data-hovercard').length > 0) {
fbUsername = obj.attr('data-hovercard');
}
LoadSocialProfile("facebook", fbUsername, curHCDetails);
}
//Callback function
options.onHoverIn.call(this);
}
}, function () {
obj.css("zIndex", "0");
$(this).find(".hc-details").eq(0).stop(true, true).fadeOut(300, function () {
if (typeof options.onHoverOut == 'function') {
options.onHoverOut.call(this);
}
});
});
//Private base function to load any social profile
function LoadSocialProfile(type, username, curHCDetails) {
var cardHTML, urlToRequest, customCallback, loadingHTML, errorHTML;
switch (type) {
case "twitter":
{
urlToRequest = 'http://api.twitter.com/1/users/lookup.json?screen_name=' + username;
cardHTML = function (profileData) {
profileData = profileData[0];
return '