diff --git a/public/javascripts/widgets/hovercard.js b/public/javascripts/widgets/hovercard.js index ed9e64bd0..2ea406e4d 100644 --- a/public/javascripts/widgets/hovercard.js +++ b/public/javascripts/widgets/hovercard.js @@ -2,20 +2,26 @@ var HoverCard = function() { var self = this; + self.jXHRs = []; + this.start = function() { - this.hoverCard = { + self.personCache = new this.Cache(); + self.dropdownCache = new this.Cache(); + + self.hoverCard = { tip: $("#hovercard"), + dropdownContainer: $("#hovercard_dropdown_container"), offset: { - left: 00, - top: 20 + left: -80, + top: -15 }, personLink: $("#hovercard").find("a.person"), avatar: $("#hovercard").find(".avatar"), dropdown: $("#hovercard").find(".dropdown_list") }; - $(document.body).delegate("a.author", "hover", this.handleHoverEvent); - this.hoverCard.tip.hover(this.hoverCardHover, this.clearTimeout); + $(document.body).delegate("a.author", "hover", self.handleHoverEvent); + self.hoverCard.tip.hover(self.hoverCardHover, self.clearTimeout); }; this.handleHoverEvent = function(evt) { @@ -33,58 +39,49 @@ if(!self.hoverCardTimeout) { self.clearTimeout(false); } - self.timeout = setTimeout(self.showHoverCard, 100); + self.timeout = setTimeout(self.showHoverCard, 600); }; this.showHoverCard = function() { - self.hoverCard.tip.fadeOut('fast'); + self.hoverCard.tip.hide(); self.hoverCard.tip.prependTo(self.target.parent()); - $.getJSON(self.target.attr("href"), function(person) { - var position = self.target.position(); - self.hoverCard.tip.css({ - left: position.left + self.hoverCard.offset.left, - top: position.top + self.hoverCard.offset.top - }); - - self.hoverCard.avatar.attr("src", person.avatar); - self.hoverCard.personLink.attr("href", person.url); - self.hoverCard.personLink.text(person.name); - self.hoverCard.dropdown.attr("data-person-id", person.id); - - self.hoverCard.tip.fadeIn('fast'); - }); - - $.get(self.target.attr('href')+'/aspect_membership_button',function(data){ - self.hoverCard.tip.find('#hovercard_dropdown_container').html(data); + self.personCache.get(self.target.attr("href") + ".json", function(person) { + self.populateHovercard(person); }); }; - this.populateDropdown = function(aspect_ids){ - var dropdown = this.hoverCard.tip.find('.dropdown_list'), - listElements = dropdown.children('li'), - inAspects = false; - - // check-off aspects - $.each(listElements, function(idx,el){ - var element = $(el); - if( aspect_ids.indexOf(element.attr('data-aspect_id')) !== -1 ){ - element.addClass('selected'); - inAspects = true; - } + this.populateHovercard = function(person) { + var position = self.target.position(); + self.hoverCard.tip.css({ + left: position.left + self.hoverCard.offset.left, + top: position.top + self.hoverCard.offset.top }); - // make button green + self.hoverCard.avatar.attr("src", person.avatar); + self.hoverCard.personLink.attr("href", person.url); + self.hoverCard.personLink.text(person.name); + self.hoverCard.dropdown.attr("data-person-id", person.id); + + self.dropdownCache.get(self.target.attr("href") + "/aspect_membership_button", function(dropdown) { + self.hoverCard.dropdownContainer.html(dropdown); + self.hoverCard.tip.fadeIn('fast'); + }); }; this.clearTimeout = function(delayed) { + self.personCache.clearjXHRs(); + self.dropdownCache.clearjXHRs(); + function callback() { self.timeout = clearTimeout(self.timeout); - self.hoverCard.tip.hide(); + self.hoverCard.tip.fadeOut("fast", function(){ + self.hoverCard.dropdownContainer.html(""); + }); }; if((typeof delayed === "boolean" && delayed) || (typeof delayed === "object" && delayed.type === "mouseleave")) { - self.hoverCardTimeout = setTimeout(callback, 400); + self.hoverCardTimeout = setTimeout(callback, 200); } else { callback(); @@ -94,6 +91,32 @@ this.hoverCardHover = function() { self.hoverCardTimeout = clearTimeout(self.hoverCardTimeout); }; + + this.Cache = function() { + var self = this; + this.cache = {}; + this.jXHRs = []; + + this.get = function(key, callback) { + if(typeof self.cache[key] === "undefined") { + self.jXHRs.push($.get(key, function(response) { + self.cache[key] = response; + callback(response); + self.jXHRs.shift(); + })); + } + else { + callback(self.cache[key]); + } + }; + + this.clearjXHRs = function() { + $.each(self.jXHRs, function(index, jXHR) { + jXHR.abort(); + }); + self.jXHRs = []; + }; + }; }; Diaspora.widgets.add("hoverCard", HoverCard); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index bbf8b4a52..b91959b65 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3074,6 +3074,8 @@ ul.left_nav @include border-radius(2px) @include dropdown-shadow + @include box-shadow(0,0,12px,#444) + .avatar :position relative :height 70px @@ -3088,7 +3090,7 @@ ul.left_nav :padding 5px :bottom 25px - :border 1px solid #ddd + :border 1px solid #999 :width 240px