tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change custom emoji to be animated when hovering container (#15637)

Browse Source 
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
ThibG
2021-01-31 21:25:31 +01:00
committed by GitHub
parent 7ab53f221a
commit 3efa0c54b6
7 changed files with 103 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/mastodon/features/directory/components/account_card.js
View File

@ -102,43 +102,32 @@ class AccountCard extends ImmutablePureComponent {
onMute: PropTypes.func.isRequired,
};
_updateEmojis() {
const node = this.node;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) {
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
emoji.src = emoji.getAttribute('data-original');
}
}
componentDidMount() {
this._updateEmojis();
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
componentDidUpdate() {
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
};
handleFollow = () => {
this.props.onFollow(this.props.account);
};
@ -151,10 +140,6 @@ class AccountCard extends ImmutablePureComponent {
this.props.onMute(this.props.account);
};
setRef = (c) => {
this.node = c;
};
render() {
const { account, intl } = this.props;
@ -239,7 +224,7 @@ class AccountCard extends ImmutablePureComponent {
</div>
</div>
<div className='directory__card__extra' ref={this.setRef}>
<div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div
className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}