From 2f952f6d0412285beb7f39a831b22bef6c3e9aeb Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 1 Sep 2019 20:04:35 +0200 Subject: [PATCH] [Glitch] Fix custom emoji animation on hover in WebUI directory bios Port 34eac5a1ecab250760bec1f703ddf828670210fa to glitch-soc Signed-off-by: Thibaut Girka --- .../directory/components/account_card.js | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js index 5ba263825e..d1c4069333 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.js +++ b/app/javascript/flavours/glitch/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 { -
+