From 9c81f2c6afc0b456595118779e342b193e4467cd Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Thu, 6 Nov 2014 12:13:46 +1100
Subject: [PATCH] remove duplicate code

fix issue where clicking on
the same user in 2 locations on the page would not work correctly

centralize logic
---
 .../discourse/components/poster-avatar.js.es6 | 11 +++-------
 .../discourse/components/poster-name.js.es6   | 18 ++--------------
 .../discourse/controllers/user-card.js.es6    | 19 ++++++++---------
 .../discourse/routes/application.js.es6       |  5 -----
 .../discourse/routes/topic_route.js           | 12 -----------
 .../discourse/templates/embedded_post.hbs     |  4 ++--
 .../javascripts/discourse/templates/post.hbs  |  4 ++--
 .../discourse/views/user-card.js.es6          | 21 ++++++++++---------
 8 files changed, 29 insertions(+), 65 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/poster-avatar.js.es6 b/app/assets/javascripts/discourse/components/poster-avatar.js.es6
index 4d534e31990..03875b6a798 100644
--- a/app/assets/javascripts/discourse/components/poster-avatar.js.es6
+++ b/app/assets/javascripts/discourse/components/poster-avatar.js.es6
@@ -1,14 +1,9 @@
 export default Ember.Component.extend({
   tagName: 'a',
-  attributeBindings: ['href'],
+  attributeBindings: ['href','data-user-card'],
   classNames: ['trigger-user-card'],
-  href: Em.computed.alias('post.usernameUrl'),
-
-  click: function(e) {
-    this.appEvents.trigger('poster:expand', $(e.target));
-    this.sendAction('action', this.get('post'));
-    return false;
-  },
+  href: Em.computed.oneWay('post.usernameUrl'),
+  "data-user-card": Em.computed.oneWay('post.username'),
 
   render: function(buffer) {
     var avatar = Handlebars.helpers.avatar(this.get('post'), {hash: {imageSize: 'large'}});
diff --git a/app/assets/javascripts/discourse/components/poster-name.js.es6 b/app/assets/javascripts/discourse/components/poster-name.js.es6
index be3ef940d8c..ae1617f182b 100644
--- a/app/assets/javascripts/discourse/components/poster-name.js.es6
+++ b/app/assets/javascripts/discourse/components/poster-name.js.es6
@@ -26,7 +26,7 @@ var PosterNameComponent = Em.Component.extend({
         linkClass += ' ' + primaryGroupName;
       }
       // Main link
-      buffer.push("<span class='" + linkClass + "'><a href='" + url + "' data-auto-route='true'>" + username + "</a>");
+      buffer.push("<span class='" + linkClass + "'><a href='" + url + "' data-auto-route='true' data-user-card='" + username + "'>" + username + "</a>");
 
       // Add a glyph if we have one
       var glyph = this.posterGlyph(post);
@@ -38,7 +38,7 @@ var PosterNameComponent = Em.Component.extend({
       // Are we showing full names?
       if (name && this.get('displayNameOnPosts') && (this.sanitizeName(name) !== this.sanitizeName(username))) {
         name = Handlebars.Utils.escapeExpression(name);
-        buffer.push("<span class='full-name'><a href='" + url + "' data-auto-route='true'>" + name + "</a></span>");
+        buffer.push("<span class='full-name'><a href='" + url + "' data-auto-route='true' data-user-card='" + username  + "'>" + name + "</a></span>");
       }
 
       // User titles
@@ -59,20 +59,6 @@ var PosterNameComponent = Em.Component.extend({
     }
   },
 
-  click: function(e) {
-    var $target = $(e.target),
-        href = $target.attr('href'),
-        url = this.get('post.usernameUrl');
-
-    if (!Em.isEmpty(href) && href !== url) {
-      return true;
-    } else  {
-      this.appEvents.trigger('poster:expand', $target);
-      this.sendAction('expandAction', this.get('post'));
-    }
-    return false;
-  },
-
   /**
     Overwrite this to give a user a custom font awesome glyph.
 
diff --git a/app/assets/javascripts/discourse/controllers/user-card.js.es6 b/app/assets/javascripts/discourse/controllers/user-card.js.es6
index 8294b4e241b..8fbfec442d2 100644
--- a/app/assets/javascripts/discourse/controllers/user-card.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-card.js.es6
@@ -8,6 +8,7 @@ export default ObjectController.extend({
   participant: null,
   avatar: null,
   userLoading: null,
+  cardTarget: null,
 
   postStream: Em.computed.alias('controllers.topic.postStream'),
   enoughPostsForFiltering: Em.computed.gte('participant.post_count', 2),
@@ -34,7 +35,7 @@ export default ObjectController.extend({
     return img && img.indexOf('fa-') !== 0;
   }.property('user.card_badge.image'),
 
-  show: function(username, uploadedAvatarId) {
+  show: function(username, target) {
     // XSS protection (should be encapsulated)
     username = username.replace(/[^A-Za-z0-9_]/g, "");
     var url = "/users/" + username;
@@ -48,16 +49,12 @@ export default ObjectController.extend({
     var currentUsername = this.get('username'),
         wasVisible = this.get('visible');
 
-    if (uploadedAvatarId) {
-      this.set('avatar', {username: username, uploaded_avatar_id: uploadedAvatarId});
-    } else {
-      this.set('avatar', null);
-    }
+    this.set('avatar', null);
     this.set('username', username);
 
-    // If we click the avatar again, close it.
-    if (username === currentUsername && wasVisible) {
-      this.setProperties({ visible: false, username: null, avatar: null });
+    // If we click the avatar again, close it (unless its diff element on the screen).
+    if (target === this.get('cardTarget') && wasVisible) {
+      this.setProperties({ visible: false, username: null, avatar: null, cardTarget: null });
       return;
     }
 
@@ -76,8 +73,9 @@ export default ObjectController.extend({
 
     var self = this;
     self.set('user', null);
-
     self.set('userLoading', username);
+    self.set('cardTarget', target);
+
     Discourse.User.findByUsername(username).then(function (user) {
       self.setProperties({ user: user, avatar: user, visible: true});
     }).finally(function(){
@@ -87,6 +85,7 @@ export default ObjectController.extend({
 
   close: function() {
     this.set('visible', false);
+    this.set('cardTarget', null);
   },
 
   actions: {
diff --git a/app/assets/javascripts/discourse/routes/application.js.es6 b/app/assets/javascripts/discourse/routes/application.js.es6
index daacd5b8524..794448f8d17 100644
--- a/app/assets/javascripts/discourse/routes/application.js.es6
+++ b/app/assets/javascripts/discourse/routes/application.js.es6
@@ -19,11 +19,6 @@ var ApplicationRoute = Discourse.Route.extend({
       });
     },
 
-    expandUser: function(user) {
-      this.controllerFor('user-card').show(user.get('username'), user.get('uploaded_avatar_id'));
-      return true;
-    },
-
     error: function(err, transition) {
       if (err.status === 404) {
         // 404
diff --git a/app/assets/javascripts/discourse/routes/topic_route.js b/app/assets/javascripts/discourse/routes/topic_route.js
index 38a4ffcd53a..6f631e6d510 100644
--- a/app/assets/javascripts/discourse/routes/topic_route.js
+++ b/app/assets/javascripts/discourse/routes/topic_route.js
@@ -38,18 +38,6 @@ Discourse.TopicRoute = Discourse.Route.extend({
       this.controllerFor("topic-admin-menu").send("show");
     },
 
-    // Modals that can pop up within a topic
-    expandPostUser: function(post) {
-      this.controllerFor('user-card').show(post.get('username'), post.get('uploaded_avatar_id'));
-    },
-
-    expandPostUsername: function(username) {
-      username = username.replace(/^@/, '');
-      if (!Em.isEmpty(username)) {
-        this.controllerFor('user-card').show(username);
-      }
-    },
-
     showFlags: function(post) {
       Discourse.Route.showModal(this, 'flag', post);
       this.controllerFor('flag').setProperties({ selected: null });
diff --git a/app/assets/javascripts/discourse/templates/embedded_post.hbs b/app/assets/javascripts/discourse/templates/embedded_post.hbs
index acc40ed72bc..6deb81d0c7c 100644
--- a/app/assets/javascripts/discourse/templates/embedded_post.hbs
+++ b/app/assets/javascripts/discourse/templates/embedded_post.hbs
@@ -2,13 +2,13 @@
   <div class='topic-avatar'>
     <div class='contents'>
       <div>
-        {{poster-avatar action="expandPostUser" post=this classNames="main-avatar"}}
+        {{poster-avatar post=this classNames="main-avatar"}}
       </div>
     </div>
   </div>
   <div class='topic-body'>
     <div class="topic-meta-data">
-      {{poster-name post=this expandAction="expandPostUser"}}
+      {{poster-name post=this}}
       {{#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>
diff --git a/app/assets/javascripts/discourse/templates/post.hbs b/app/assets/javascripts/discourse/templates/post.hbs
index 90f06f2917c..9fc639251fd 100644
--- a/app/assets/javascripts/discourse/templates/post.hbs
+++ b/app/assets/javascripts/discourse/templates/post.hbs
@@ -20,7 +20,7 @@
     <div class='topic-avatar'>
       <div class="contents">
         {{#unless userDeleted}}
-          {{poster-avatar action="expandPostUser" post=this classNames="main-avatar"}}
+          {{poster-avatar post=this classNames="main-avatar"}}
         {{else}}
           <i class="fa fa-trash-o deleted-user-avatar"></i>
         {{/unless}}
@@ -30,7 +30,7 @@
 
     <div class='topic-body'>
       <div class='topic-meta-data'>
-        {{poster-name post=this expandAction="expandPostUser"}}
+        {{poster-name post=this}}
         <div class='post-info'>
           <a class='post-date' {{bind-attr href="shareUrl" data-share-url="shareUrl" data-post-number="post_number"}}>{{age-with-tooltip created_at}}</a>
         </div>
diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6
index 474905496b2..05d58fc1ff3 100644
--- a/app/assets/javascripts/discourse/views/user-card.js.es6
+++ b/app/assets/javascripts/discourse/views/user-card.js.es6
@@ -30,10 +30,8 @@ export default Discourse.View.extend(CleansUp, {
     $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) {
       if (self.get('controller.visible')) {
         var $target = $(e.target);
-        if ($target.closest('.trigger-user-card').length > 0) { return; }
-        if (self.$().has(e.target).length !== 0) { return; }
-
-        if ($target.data("userCard")|| $target.closest('a.mention')) {
+        if ($target.closest('[data-user-card]').data('userCard') ||
+            $target.closest('a.mention').length > 0) {
           return;
         }
 
@@ -43,19 +41,22 @@ export default Discourse.View.extend(CleansUp, {
       return true;
     });
 
+    var expand = function(username, $target){
+      self._posterExpand($target);
+      self.get('controller').show(username, $target[0]);
+      return false;
+    };
+
     $('#main-outlet').on(clickDataExpand, '[data-user-card]', function(e) {
       var $target = $(e.currentTarget);
-      self._posterExpand($target);
-      self.get('controller').show($target.data('user-card'));
-      return false;
+      var username = $target.data('user-card');
+      return expand(username, $target);
     });
 
     $('#main-outlet').on(clickMention, 'a.mention', function(e) {
       var $target = $(e.target);
-      self._posterExpand($target);
       var username = $target.text().replace(/^@/, '');
-      self.get('controller').show(username);
-      return false;
+      return expand(username, $target);
     });
   }.on('didInsertElement'),