/
PostUser.js
91 lines (80 loc) · 2.14 KB
/
PostUser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import Component from '../../common/Component';
import Link from '../../common/components/Link';
import UserCard from './UserCard';
import avatar from '../../common/helpers/avatar';
import username from '../../common/helpers/username';
import userOnline from '../../common/helpers/userOnline';
import listItems from '../../common/helpers/listItems';
/**
* The `PostUser` component shows the avatar and username of a post's author.
*
* ### Attrs
*
* - `post`
*/
export default class PostUser extends Component {
view() {
const post = this.attrs.post;
const user = post.user();
if (!user) {
return (
<div className="PostUser">
<h3>
{avatar(user, { className: 'PostUser-avatar' })} {username(user)}
</h3>
</div>
);
}
let card = '';
if (!post.isHidden() && this.attrs.cardVisible) {
card = UserCard.component({
user,
className: 'UserCard--popover',
controlsButtonClassName: 'Button Button--icon Button--flat',
});
}
return (
<div className="PostUser">
<h3>
<Link href={app.route.user(user)}>
{avatar(user, { className: 'PostUser-avatar' })}
{userOnline(user)}
{username(user)}
</Link>
</h3>
<ul className="PostUser-badges badges">{listItems(user.badges().toArray())}</ul>
{card}
</div>
);
}
oncreate(vnode) {
super.oncreate(vnode);
let timeout;
this.$()
.on('mouseover', 'h3 a, .UserCard', () => {
clearTimeout(timeout);
timeout = setTimeout(this.showCard.bind(this), 500);
})
.on('mouseout', 'h3 a, .UserCard', () => {
clearTimeout(timeout);
timeout = setTimeout(this.hideCard.bind(this), 250);
});
}
/**
* Show the user card.
*/
showCard() {
this.attrs.oncardshow();
setTimeout(() => this.$('.UserCard').addClass('in'));
}
/**
* Hide the user card.
*/
hideCard() {
this.$('.UserCard')
.removeClass('in')
.one('transitionend webkitTransitionEnd oTransitionEnd', () => {
this.attrs.oncardhide();
});
}
}