From 4ac40145d846d7daa9839a3d8fa183f206f993b6 Mon Sep 17 00:00:00 2001 From: Erick Guan Date: Fri, 20 Mar 2015 02:53:58 +0800 Subject: [PATCH] user card animation when there is an active user card --- .../controllers/group/members.js.es6 | 10 ++-- .../discourse/controllers/user-card.js.es6 | 35 +++++++------- .../discourse/views/user-card.js.es6 | 46 +++++++++---------- 3 files changed, 44 insertions(+), 47 deletions(-) diff --git a/app/assets/javascripts/discourse/controllers/group/members.js.es6 b/app/assets/javascripts/discourse/controllers/group/members.js.es6 index bff5ee7a281..881a614ca3a 100644 --- a/app/assets/javascripts/discourse/controllers/group/members.js.es6 +++ b/app/assets/javascripts/discourse/controllers/group/members.js.es6 @@ -5,15 +5,13 @@ export default Ember.ObjectController.extend({ loadMore() { if (this.get("loading")) { return; } // we've reached the end - if (this.get("members.length") >= this.get("user_count")) { return; } + if (this.get("model.members.length") >= this.get("user_count")) { return; } this.set("loading", true); - const self = this; - - Discourse.Group.loadMembers(this.get("name"), this.get("members.length"), this.get("limit")).then(function (result) { - self.get("members").addObjects(result.members.map(member => Discourse.User.create(member))); - self.setProperties({ + Discourse.Group.loadMembers(this.get("name"), this.get("model.members.length"), this.get("limit")).then(result => { + this.get("model.members").addObjects(result.members.map(member => Discourse.User.create(member))); + this.setProperties({ loading: false, user_count: result.meta.total, limit: result.meta.limit, diff --git a/app/assets/javascripts/discourse/controllers/user-card.js.es6 b/app/assets/javascripts/discourse/controllers/user-card.js.es6 index 5de16a0715d..5be328920d6 100644 --- a/app/assets/javascripts/discourse/controllers/user-card.js.es6 +++ b/app/assets/javascripts/discourse/controllers/user-card.js.es6 @@ -49,10 +49,13 @@ export default Ember.Controller.extend({ this.setProperties({ avatar: null, post: post, username: username }); - // 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, cardTarget: null }); - return; + if (wasVisible) { + if (target === this.get('cardTarget')) { + this.close(); + return; // Same target, close it without loading the new user card + } else { + this.close(); + } } if (username === currentUsername && this.get('userLoading') === username) { @@ -60,32 +63,28 @@ export default Ember.Controller.extend({ return; } - this.set('topicPostCount', null); - - this.setProperties({ user: null, userLoading: username, cardTarget: target }); + this.setProperties({ user: null, userLoading: username, cardTarget: target, topicPostCount: null }); const args = { stats: false }; args.include_post_count_for = this.get('controllers.topic.model.id'); - const self = this; - return Discourse.User.findByUsername(username, args).then(function(user) { - + return Discourse.User.findByUsername(username, args).then((user) => { if (user.topic_post_count) { - self.set('topicPostCount', user.topic_post_count[args.include_post_count_for]); + this.set('topicPostCount', user.topic_post_count[args.include_post_count_for]); } user = Discourse.User.create(user); - self.setProperties({ user, avatar: user, visible: true}); - self.appEvents.trigger('usercard:shown'); - }).catch(function(error) { - self.close(); + this.setProperties({ user, avatar: user, visible: true }); + this.appEvents.trigger('usercard:shown'); + }).catch((error) => { + this.close(); throw error; - }).finally(function() { - self.set('userLoading', null); + }).finally(() => { + this.set('userLoading', null); }); }, close() { - this.setProperties({ visible: false, cardTarget: null }); + this.setProperties({ visible: false, username: null, cardTarget: null }); }, actions: { diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6 index 13dbd898cd2..714f936fac5 100644 --- a/app/assets/javascripts/discourse/views/user-card.js.es6 +++ b/app/assets/javascripts/discourse/views/user-card.js.es6 @@ -27,13 +27,11 @@ export default Discourse.View.extend(CleansUp, { }.observes('controller.user.card_background'), _setup: function() { - const self = this; - - afterTransition(self.$(), this._hide.bind(this)); + afterTransition(this.$(), this._hide.bind(this)); $('html').off(clickOutsideEventName) - .on(clickOutsideEventName, function(e) { - if (self.get('controller.visible')) { + .on(clickOutsideEventName, (e) => { + if (this.get('controller.visible')) { const $target = $(e.target); if ($target.closest('[data-user-card]').data('userCard') || $target.closest('a.mention').length > 0 || @@ -41,25 +39,28 @@ export default Discourse.View.extend(CleansUp, { return; } - self.get('controller').close(); + this.get('controller').close(); } return true; }); - var expand = function(username, $target) { - const postId = $target.parents('article').data('post-id'); - self.get('controller') - .show(username, postId, $target[0]) - .then(function() { - self._willShow($target); - }).catch(function() { - self._hide(); - }); + const expand = (username, $target) => { + const postId = $target.parents('article').data('post-id'), + user = this.get('controller').show(username, postId, $target[0]); + if (user !== undefined) { + user.then(() => { + this._willShow($target); + }).catch(() => { + this._hide(); + }); + } else { + this._hide(); + } return false; }; - $('#main-outlet').on(clickDataExpand, '[data-user-card]', function(e) { + $('#main-outlet').on(clickDataExpand, '[data-user-card]', (e) => { if (e.ctrlKey || e.metaKey) { return; } const $target = $(e.currentTarget), @@ -67,7 +68,7 @@ export default Discourse.View.extend(CleansUp, { return expand(username, $target); }); - $('#main-outlet').on(clickMention, 'a.mention', function(e) { + $('#main-outlet').on(clickMention, 'a.mention', (e) => { if (e.ctrlKey || e.metaKey) { return; } const $target = $(e.target), @@ -89,9 +90,8 @@ export default Discourse.View.extend(CleansUp, { _willShow(target) { if (!target) { return; } - const self = this, - width = this.$().width(); - Em.run.schedule('afterRender', function() { + const width = this.$().width(); + Em.run.schedule('afterRender', () => { if (target) { let position = target.offset(); if (position) { @@ -100,11 +100,11 @@ export default Discourse.View.extend(CleansUp, { const overage = ($(window).width() - 50) - (position.left + width); if (overage < 0) { position.left += overage; - position.top += target.height() + 8; + position.top += target.height() + 48; } position.top -= $('#main-outlet').offset().top; - self.$().css(position); + this.$().css(position); } } }); @@ -112,7 +112,7 @@ export default Discourse.View.extend(CleansUp, { _hide() { if (!this.get('controller.visible')) { - this.$().css({ left: -9999, top: -9999 }); + this.$().css({left: -9999, top: -9999}); } },