diff options
author | ThibG <thib@sitedethib.com> | 2021-01-31 21:25:31 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-01-31 21:25:31 +0100 |
commit | 3efa0c54b6656fba189baab0857e60c0bc4f3c7d (patch) | |
tree | 4842ed3f889d2a94e3f7bbd834748dce18380bf1 /app/javascript/mastodon/features/direct_timeline/components/conversation.js | |
parent | 7ab53f221a3d66a0bbc94b36d847b7bcf62fbd16 (diff) |
Change custom emoji to be animated when hovering container (#15637)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/mastodon/features/direct_timeline/components/conversation.js')
-rw-r--r-- | app/javascript/mastodon/features/direct_timeline/components/conversation.js | 43 |
1 files changed, 14 insertions, 29 deletions
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index 6ecc27fac..43e1d77b9 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -44,41 +44,30 @@ class Conversation extends ImmutablePureComponent { intl: PropTypes.object.isRequired, }; - _updateEmojis () { - const node = this.namesNode; - - 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; + } - componentDidUpdate () { - this._updateEmojis(); - } + const emojis = currentTarget.querySelectorAll('.custom-emoji'); - handleEmojiMouseEnter = ({ target }) => { - target.src = target.getAttribute('data-original'); - } - - handleEmojiMouseLeave = ({ target }) => { - target.src = target.getAttribute('data-static'); + for (var i = 0; i < emojis.length; i++) { + let emoji = emojis[i]; + emoji.src = emoji.getAttribute('data-static'); + } } handleClick = () => { @@ -123,10 +112,6 @@ class Conversation extends ImmutablePureComponent { this.props.onToggleHidden(this.props.lastStatus); } - setNamesRef = (c) => { - this.namesNode = c; - } - render () { const { accounts, lastStatus, unread, scrollKey, intl } = this.props; @@ -171,7 +156,7 @@ class Conversation extends ImmutablePureComponent { {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} /> </div> - <div className='conversation__content__names' ref={this.setNamesRef}> + <div className='conversation__content__names' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} /> </div> </div> |