FIX: Clicking an avatar in an expanded post should show the user

expansion popup.

app/assets/javascripts/discourse/components/poster-avatar.js.es6

@@ -0,0 +1,17 @@
+export default Ember.Component.extend({
+  tagName: 'a',
+  attributeBindings: ['href'],
+  classNames: ['trigger-expansion'],
+  href: Em.computed.alias('post.usernameUrl'),
+
+  click: function(e) {
+    this.appEvents.trigger('poster:expand', $(e.target));
+    this.sendAction('action', this.get('post'));
+    return false;
+  },
+
+  render: function(buffer) {
+    var avatar = Handlebars.helpers.avatar(this.get('post'), {hash: {imageSize: 'large'}});
+    buffer.push(avatar);
+  }
+});

app/assets/javascripts/discourse/components/poster-name.js.es6

@@ -1,5 +1,5 @@
 var PosterNameComponent = Em.Component.extend({
-  classNames: ['names'],
+  classNames: ['names', 'trigger-expansion'],
   displayNameOnPosts: Discourse.computed.setting('display_name_on_posts'),
 
   // sanitize name for comparison
@@ -67,6 +67,7 @@ var PosterNameComponent = Em.Component.extend({
     if (!Em.isEmpty(href) && href !== '#') {
       return true;
     } else  {
+      this.appEvents.trigger('poster:expand', $target);
       this.sendAction('expandAction', this.get('post'));
     }
     return false;

app/assets/javascripts/discourse/controllers/poster-expansion.js.es6

@@ -1,11 +1,3 @@
-/**
-  A controller for expanding information about a poster.
-
-  @class PosterExpansion
-  @extends Discourse.ObjectController
-  @namespace Discourse
-  @module Discourse
-**/
 export default Discourse.ObjectController.extend({
   needs: ['topic'],
   visible: false,

app/assets/javascripts/discourse/initializers/inject-app-events.js.es6

@@ -5,6 +5,7 @@ export default {
     application.register('app-events:main', AppEvents, { singleton: true });
 
     application.inject('controller', 'appEvents', 'app-events:main');
+    application.inject('component', 'appEvents', 'app-events:main');
     application.inject('route', 'appEvents', 'app-events:main');
     application.inject('view', 'appEvents', 'app-events:main');
     application.inject('model', 'appEvents', 'app-events:main');

app/assets/javascripts/discourse/templates/embedded_post.js.handlebars

@@ -2,13 +2,13 @@
   <div class='topic-avatar'>
     <div class='contents'>
       <div>
-        <a href='/users/{{unbound username}}'>{{avatar this imageSize="large"}}</a>
+        {{poster-avatar action="showPosterExpansion" post=this classNames="main-avatar"}}
       </div>
     </div>
   </div>
   <div class='topic-body'>
     <div class="topic-meta-data">
-      <h5 {{bind-attr class="staff new_user"}}><a href='{{unbound usernameUrl}}'>{{{unbound username}}}</a></h5>
+      {{poster-name post=this expandAction="showPosterExpansion"}}
       {{#if view.parentView.previousPost}}<a href='{{unbound url}}' class="post-info arrow" title="{{i18n topic.jump_reply_up}}"><i class='fa fa-arrow-up'></i></a>{{/if}}
       <div class='post-info post-date'>{{age-with-tooltip created_at}}</div>
     </div>

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -19,9 +19,8 @@
     {{/if}}
     <div class='topic-avatar'>
       {{#unless userDeleted}}
-        <div {{bind-attr class=":contents byTopicCreator:topic-creator :trigger-expansion"}}>
-          <a class="main-avatar" href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{avatar this imageSize="large"}}</a>
-
+        <div {{bind-attr class=":contents byTopicCreator:topic-creator"}}>
+          {{poster-avatar action="showPosterExpansion" post=this classNames="main-avatar"}}
         </div>
       {{else}}
         <div class="contents">

app/assets/javascripts/discourse/views/embedded-post.js.es6

@@ -1,11 +1,3 @@
-/**
-  This view handles rendering of post within another (such as a collapsed reply)
-
-  @class EmbeddedPostView
-  @extends Discourse.View
-  @namespace Discourse
-  @module Discourse
-**/
 export default Discourse.GroupedView.extend({
   templateName: 'embedded_post',
   classNames: ['reply'],
@@ -18,5 +10,4 @@ export default Discourse.GroupedView.extend({
   _stopTracking: function() {
     Discourse.ScreenTrack.current().stopTracking(this.get('elementId'));
   }.on('willDestroyElement')
-
 });

app/assets/javascripts/discourse/views/poster-expansion.js.es6

@@ -1,40 +1,25 @@
-/**
-  Shows expanded details for a poster
-
-  @class PosterExpansionView
-  @namespace Discourse
-  @module Discourse
-**/
-
 var clickOutsideEventName = "mousedown.outside-poster-expansion";
 
 export default Discourse.View.extend({
   elementId: 'poster-expansion',
   classNameBindings: ['controller.visible::hidden', 'controller.showBadges'],
 
-  // Position the expansion when the post changes
-  _visibleChanged: function() {
-    var post = this.get('controller.model'),
-        div = this.$();
-
-    Em.run.schedule('afterRender', function() {
-      if (post) {
-        var $post = $('#' + post.get('postElementId')),
-            $avatar = $('.topic-avatar img.avatar', $post),
-            position = $avatar.offset();
-
-        if (position) {
-          position.left += $avatar.width() + 5;
-          div.css(position);
-        }
-      }
-    });
-  }.observes('controller.model'),
-
-  didInsertElement: function() {
+  _setup: function() {
     var self = this;
-    $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) {
+    this.appEvents.on('poster:expand', function(target) {
+      if (!target) { return; }
+      Em.run.schedule('afterRender', function() {
+        if (target) {
+          var position = target.offset();
+          if (position) {
+            position.left += target.width() + 5;
+            self.$().css(position);
+          }
+        }
+      });
+    });
 
+    $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) {
       if (self.get('controller.visible')) {
         var $target = $(e.target);
         if ($target.closest('.trigger-expansion').length > 0) { return; }
@@ -45,10 +30,11 @@ export default Discourse.View.extend({
 
       return true;
     });
-  },
+  }.on('didInsertElement'),
 
-  willDestroyElement: function() {
+  _removeEvents: function() {
     $('html').off(clickOutsideEventName);
-  }
+    this.appEvents.off('poster:expand');
+  }.on('willDestroyElement')
 
 });