diaspora hovercard z-index issue #5054

hovercard_view.js

app.views.Hovercard = Backbone.View.extend({
  el: '#hovercard_container',

  initialize: function() {
    $(document)
      .on('mouseenter', '.hovercardable', _.bind(this._mouseenterHandler, this))
      .on('mouseleave', '.hovercardable', _.bind(this._mouseleaveHandler, this));

    this.show_me = false;

    this.avatar = this.$('.avatar');
    this.dropdown = this.$('.dropdown_list');
    this.dropdown_container = this.$('#hovercard_dropdown_container');
    this.hashtags = this.$('.hashtags');
    this.person_link = this.$('a.person');
    this.person_handle = this.$('div.handle');
    this.active = true;
  },

  deactivate: function() {
    this.active = false;
  },

  href: function() {
    return (typeof this._href !='undefined') ? this._href : this.$el.parent().attr('href');
  },

  _mouseenterHandler: function(event) {
    if(this.active == false) { return false }
    var el = $(event.target);
    if( !el.is('a') ) {
      el = el.parents('a');
    }

    if( el.attr('href').indexOf('/people') == -1 ) {
      // can't fetch data from that URL, aborting
      return false;
    }

    this.show_me = true;
    this.showHovercardOn(el);
    return false;
  },

  _mouseleaveHandler: function(event) {
    event.stopPropagation();
    var relatedTarget = (typeof event.toElement!='undefined') ? $(event.toElement) : $(event.relatedTarget); // toElement = IE support, relatedTarget = other browsers
    if(relatedTarget.attr('id')=='hovercard_container')
      return false;
    if(this.active == false) { return false }
    this.show_me = false;
    if( this.$el.is(':visible') ) {
      this.$el.fadeOut('fast');
    } else {
      this.$el.hide();
    }

    this.dropdown_container.empty();
    return false;
  },

  showHovercardOn: _.debounce(function(element) {
    var el = $(element);
    var hc = this.$el;

    if( !this.show_me ) {
      // mouse has left element
      return;
    }
    hc.hide();
    hc.appendTo(el.parents('#main_stream'));
    this._href = el.attr('href');
    this._positionHovercard(el);
    this._rel = el;
    hc.bind('mouseleave', this._mouseleaveHandler.bind(this));
    el.parents('.media').bind('mouseleave', this._mouseleaveHandler.bind(this));
    this._populateHovercard();
  }, 500),

  _populateHovercard: function() {
    var href = this.href();
    href += "/hovercard.json";
    var self = this;
    $.get(href, function(person){
      if( !person || person.length == 0 ) {
        throw new Error("received data is not a person object");
      }

      self._populateHovercardWith(person);
      self.$el.fadeIn('fast');
    });
  },

  _populateHovercardWith: function(person) {
    var self = this;

    this.avatar.attr('src', person.avatar);
    this.person_link.attr('href', person.url);
    this.person_link.text(person.name);
    this.person_handle.text(person.handle);
    this.dropdown.attr('data-person-id', person.id);

    // set hashtags
    this.hashtags.empty();
    this.hashtags.html( $(_.map(person.tags, function(tag){
      return $('<a/>',{href: "/tags/"+tag.substring(1)}).text(tag)[0] ;
    })) );

    // set aspect dropdown
    var href = this.href();
    href += "/aspect_membership_button";
    if(gon.bootstrap == true){
      href += "?bootstrap=true";
    }
    $.get(href, function(response) {
      self.dropdown_container.html(response);
    });
    var aspect_membership = new app.views.AspectMembership({el: self.dropdown_container});
  },

  _positionHovercard: function(element) {
    var p = element;
    var p_pos = p.position();
    var p_height = p.height();
    var mouse =

    this.$el.css({
      top: p_pos.top + p_height,
      left: p_pos.left
    });
  }
});