diff options
author | ThibG <thib@sitedethib.com> | 2019-07-21 18:10:40 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2019-07-21 18:10:40 +0200 |
commit | 7de8c51873b51d8450f7a6597a43d454964d0407 (patch) | |
tree | 38d3cbb721e574595cf251fe30441cbd1c107919 /app/javascript/mastodon/features/account/components/header.js | |
parent | 043d52f785d8f3d0fa31cde8f5e4c1991888e887 (diff) |
Play animated custom emoji on hover (#11348)
* Play animated custom emoji on hover in status * Play animated custom emoji on hover in display names * Play animated custom emoji on hover in bios/bio fields * Add support for animation on hover on public pages emojis too * Fix tests * Code style cleanup
Diffstat (limited to 'app/javascript/mastodon/features/account/components/header.js')
-rw-r--r-- | app/javascript/mastodon/features/account/components/header.js | 43 |
1 files changed, 42 insertions, 1 deletions
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index e5b60e33e..cab67c607 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -79,6 +79,47 @@ class Header extends ImmutablePureComponent { return !location.pathname.match(/\/(followers|following)\/?$/); } + _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'); + } + + setRef = (c) => { + this.node = c; + } + render () { const { account, intl, domain, identity_proofs } = this.props; @@ -200,7 +241,7 @@ class Header extends ImmutablePureComponent { const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); return ( - <div className={classNames('account__header', { inactive: !!account.get('moved') })}> + <div className={classNames('account__header', { inactive: !!account.get('moved') })} ref={this.setRef}> <div className='account__header__image'> <div className='account__header__info'> {info} |