From 34eac5a1ecab250760bec1f703ddf828670210fa Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 1 Sep 2019 20:04:35 +0200 Subject: [PATCH] Fix custom emoji animation on hover in WebUI directory bios (#11716) --- .../directory/components/account_card.js | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js index cb23a02bad5..50ad744501d 100644 --- a/app/javascript/mastodon/features/directory/components/account_card.js +++ b/app/javascript/mastodon/features/directory/components/account_card.js @@ -82,6 +82,43 @@ class AccountCard extends ImmutablePureComponent { onMute: PropTypes.func.isRequired, }; + _updateEmojis () { + const node = this.node; + + if (!node || autoPlayGif) { + return; + } + + const emojis = node.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); + } + } + + componentDidMount () { + this._updateEmojis(); + } + + 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); } @@ -94,6 +131,10 @@ class AccountCard extends ImmutablePureComponent { this.props.onMute(this.props.account); } + setRef = (c) => { + this.node = c; + } + render () { const { account, intl } = this.props; @@ -133,7 +174,7 @@ class AccountCard extends ImmutablePureComponent { -
+