Refactor hovercards, fixes #8315

closes #8316

Changelog.md

@@ -10,6 +10,7 @@
 ## Bug fixes
 * Ensure the log folder exists [#8287](https://github.com/diaspora/diaspora/pull/8287)
 * Limit name length in header [#8313] (https://github.com/diaspora/diaspora/pull/8313)
+* Fix fallback avatar in hovercards [#8316](https://github.com/diaspora/diaspora/pull/8316)
 
 ## Features
 * Add tags to tumblr posts [#8244](https://github.com/diaspora/diaspora/pull/8244)

app/assets/javascripts/app/views/hovercard_view.js

@@ -19,10 +19,15 @@ app.views.Hovercard = app.views.Base.extend({
 
     this.showMe = false;
     this.parent = null;  // current 'hovercardable' element that caused HC to appear
-
     this.active = true;
   },
 
+  presenter: function() {
+    return _.extend({}, this.defaultPresenter(), {
+      person: this.person
+    });
+  },
+
   postRenderTemplate: function() {
     this.$el.appendTo($("body"));
 
@@ -106,10 +111,9 @@ app.views.Hovercard = app.views.Base.extend({
       if (app.currentUser.authenticated()) {
         self.aspectMembershipDropdown = new app.views.AspectMembership({person: new app.models.Person(person)});
       }
-
+      self.person = person;
       self.render();
 
-      self._populateHovercardWith(person);
       if( !self.showMe ) {
         // mouse has left element
         return;
@@ -118,23 +122,6 @@ app.views.Hovercard = app.views.Base.extend({
     });
   },
 
-  _populateHovercardWith: function(person) {
-    this.avatarLink.attr("href", this.href());
-    this.personLink.attr("href", this.href());
-    this.personLink.text(person.name);
-    this.personID.text(person.diaspora_id);
-
-    if (person.profile) {
-      this.avatar.attr("src", person.profile.avatar);
-
-      // set hashtags
-      this.hashtags.empty();
-      this.hashtags.html($(_.map(person.profile.tags, function(tag) {
-        return $("<a></a>", {href: Routes.tag(tag)}).text("#" + tag)[0];
-      })));
-    }
-  },
-
   _positionHovercard: function() {
     var p_pos = this.parent.offset();
     var p_height = this.parent.height();

app/assets/templates/hovercard_tpl.jst.hbs

@@ -1,15 +1,19 @@
+{{#with person}}
 <div id="hovercard">
-  <a class='person_avatar'>
+  <a class="person_avatar" href="{{urlTo 'person' guid}}">
-    <img class="avatar">
+    <img class="avatar" src="{{profile.avatar}}" />
   </a>
   <h4>
-    <a class="person"></a>
+    <a class="person" href="{{urlTo 'person' guid}}">{{name}}</a>
   </h4>
-  <div class="handle"></div>
+  <div class="handle">{{diaspora_id}}</div>
   <div id="hovercard_dropdown_container"></div>
   <div class="card-footer">
     <div class="footer-container">
-      <div class="hashtags"></div>
+      <div class="hashtags">
+        {{fmtTags profile.tags}}
+      </div>
     </div>
   </div>
 </div>
+{{/with}}

spec/javascripts/app/views/hovercard_view_spec.js

@@ -16,7 +16,11 @@ describe("app.views.Hovercard", function() {
         this.view._populateHovercard();
         jasmine.Ajax.requests.mostRecent().respondWith({
           status: 200,
-          responseText: JSON.stringify({id: 1337})
+          responseText: JSON.stringify({
+            id: 1337,
+            guid: "ba64fce01b04013aa8db34c93d7886ce",
+            name: "Edward Snowden"
+          })
         });
         expect(this.view.aspectMembershipDropdown).toEqual(undefined);
       });
@@ -56,7 +60,11 @@ describe("app.views.Hovercard", function() {
         this.view._populateHovercard();
         jasmine.Ajax.requests.mostRecent().respondWith({
           status: 200,
-          responseText: JSON.stringify({id: 1337})
+          responseText: JSON.stringify({
+            id: 1337,
+            guid: "ba64fce01b04013aa8db34c93d7886ce",
+            name: "Edward Snowden"
+          })
         });
         expect(this.view.aspectMembershipDropdown).not.toEqual(undefined);
       });
@@ -65,7 +73,14 @@ describe("app.views.Hovercard", function() {
         this.view._populateHovercard();
         jasmine.Ajax.requests.mostRecent().respondWith({
           status: 200,
-          responseText: JSON.stringify({id: 1337, profile: {tags: ["first", "second"]}})
+          responseText: JSON.stringify({
+            id: 1337,
+            guid: "ba64fce01b04013aa8db34c93d7886ce",
+            name: "Edward Snowden",
+            profile: {
+              tags: ["first", "second"]
+            }
+          })
         });
 
         var first = this.view.hashtags.find("a:contains('#first')");