diff options
author | ThibG <thib@sitedethib.com> | 2021-01-31 21:25:31 +0100 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2021-02-03 17:16:22 +0100 |
commit | e1fa06c459a28a575d0da540432c61b702e99cdd (patch) | |
tree | d6d5e7b07e24248da5c237726dca874727c10b38 /app/javascript/flavours/glitch/features/account/components/header.js | |
parent | 4d40685850ea211ecc0d0d0735b5a4c084333858 (diff) |
[Glitch] Change custom emoji to be animated when hovering container
Port 3efa0c54b6656fba189baab0857e60c0bc4f3c7d to glitch-soc Co-authored-by: Claire <claire.github-309c@sitedethib.com> Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/account/components/header.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/account/components/header.js | 43 |
1 files changed, 14 insertions, 29 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 6a572862d..c18520c00 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -88,45 +88,30 @@ class Header extends ImmutablePureComponent { window.open(profileLink, '_blank'); } - _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(); - } - - componentDidUpdate () { - this._updateEmojis(); - } - - handleEmojiMouseEnter = ({ target }) => { - target.src = target.getAttribute('data-original'); - } + handleMouseLeave = ({ currentTarget }) => { + if (autoPlayGif) { + return; + } - handleEmojiMouseLeave = ({ target }) => { - target.src = target.getAttribute('data-static'); - } + const emojis = currentTarget.querySelectorAll('.custom-emoji'); - setRef = (c) => { - this.node = c; + for (var i = 0; i < emojis.length; i++) { + let emoji = emojis[i]; + emoji.src = emoji.getAttribute('data-static'); + } } render () { @@ -279,7 +264,7 @@ class Header extends ImmutablePureComponent { } return ( - <div className={classNames('account__header', { inactive: !!account.get('moved') })} ref={this.setRef}> + <div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div className='account__header__image'> <div className='account__header__info'> {info} |