treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Change custom emoji to be animated when hovering container (#15637) 

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
ThibG 2021-01-31 21:25:31 +01:00 committed by GitHub
parent 7ab53f221a
commit 3efa0c54b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 103 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap
View File

@ -3,6 +3,8 @@
exports[`<DisplayName /> renders display name + account name 1`] = ` exports[`<DisplayName /> renders display name + account name 1`] = `
<span <span
className="display-name" className="display-name"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
> >
<bdi> <bdi>
<strong <strong

39
app/javascript/mastodon/components/display_name.js
View File

@ -11,45 +11,30 @@ export default class DisplayName extends React.PureComponent {
localDomain: PropTypes.string, localDomain: PropTypes.string,
}; };
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
return;
} }
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
} }
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
setRef = (c) => {
this.node = c;
} }
render () { render () {
@ -81,7 +66,7 @@ export default class DisplayName extends React.PureComponent {
} }
return ( return (
<span className='display-name' ref={this.setRef}> <span className='display-name' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
{displayName} {suffix} {displayName} {suffix}
</span> </span>
); );

41
app/javascript/mastodon/components/status_content.js
View File

@ -75,35 +75,38 @@ export default class StatusContent extends React.PureComponent {
} }
} }
_updateStatusEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue; }
} }
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false); handleMouseLeave = ({ currentTarget }) => {
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false); if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
} }
} }
componentDidMount () { componentDidMount () {
this._updateStatusLinks(); this._updateStatusLinks();
this._updateStatusEmojis();
} }
componentDidUpdate () { componentDidUpdate () {
this._updateStatusLinks(); this._updateStatusLinks();
this._updateStatusEmojis();
} }
onMentionClick = (mention, e) => { onMentionClick = (mention, e) => {
@ -122,14 +125,6 @@ export default class StatusContent extends React.PureComponent {
} }
} }
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
handleMouseDown = (e) => { handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY]; this.startXY = [e.clientX, e.clientY];
} }
@ -219,7 +214,7 @@ export default class StatusContent extends React.PureComponent {
} }
return ( return (
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}> <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
<span dangerouslySetInnerHTML={spoilerContent} className='translate' /> <span dangerouslySetInnerHTML={spoilerContent} className='translate' />
{' '} {' '}
@ -237,7 +232,7 @@ export default class StatusContent extends React.PureComponent {
); );
} else if (this.props.onClick) { } else if (this.props.onClick) {
const output = [ const output = [
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content'> <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} /> <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
@ -253,7 +248,7 @@ export default class StatusContent extends React.PureComponent {
return output; return output;
} else { } else {
return ( return (
<div className={classNames} ref={this.setRef} tabIndex='0'> <div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} /> <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}

39
app/javascript/mastodon/features/account/components/header.js
View File

@ -96,45 +96,30 @@ class Header extends ImmutablePureComponent {
return !location.pathname.match(/\/(followers|following)\/?$/); return !location.pathname.match(/\/(followers|following)\/?$/);
} }
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
return;
} }
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
} }
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
setRef = (c) => {
this.node = c;
} }
render () { render () {
@ -276,7 +261,7 @@ class Header extends ImmutablePureComponent {
} }
return ( 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__image'>
<div className='account__header__info'> <div className='account__header__info'>
{!suspended && info} {!suspended && info}

39
app/javascript/mastodon/features/direct_timeline/components/conversation.js
View File

@ -44,41 +44,30 @@ class Conversation extends ImmutablePureComponent {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.namesNode; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
return;
} }
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
} }
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
} }
handleClick = () => { handleClick = () => {
@ -123,10 +112,6 @@ class Conversation extends ImmutablePureComponent {
this.props.onToggleHidden(this.props.lastStatus); this.props.onToggleHidden(this.props.lastStatus);
} }
setNamesRef = (c) => {
this.namesNode = c;
}
render () { render () {
const { accounts, lastStatus, unread, scrollKey, intl } = this.props; 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')} /> {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
</div> </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> }} /> <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
</div> </div>
</div> </div>

43
app/javascript/mastodon/features/directory/components/account_card.js
View File

@ -102,42 +102,31 @@ class AccountCard extends ImmutablePureComponent {
onMute: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired,
}; };
_updateEmojis() { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount() { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
return;
} }
componentDidUpdate() { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
} }
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
};
handleFollow = () => { handleFollow = () => {
this.props.onFollow(this.props.account); this.props.onFollow(this.props.account);
@ -151,10 +140,6 @@ class AccountCard extends ImmutablePureComponent {
this.props.onMute(this.props.account); this.props.onMute(this.props.account);
}; };
setRef = (c) => {
this.node = c;
};
render() { render() {
const { account, intl } = this.props; const { account, intl } = this.props;
@ -239,7 +224,7 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className='directory__card__extra' ref={this.setRef}> <div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div <div
className='account__header__content translate' className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}

53
app/javascript/mastodon/features/getting_started/components/announcements.js
View File

@ -39,35 +39,10 @@ class Content extends ImmutablePureComponent {
componentDidMount () { componentDidMount () {
this._updateLinks(); this._updateLinks();
this._updateEmojis();
} }
componentDidUpdate () { componentDidUpdate () {
this._updateLinks(); this._updateLinks();
this._updateEmojis();
}
_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);
}
} }
_updateLinks () { _updateLinks () {
@ -132,12 +107,30 @@ class Content extends ImmutablePureComponent {
} }
} }
handleEmojiMouseEnter = ({ target }) => { handleMouseEnter = ({ currentTarget }) => {
target.src = target.getAttribute('data-original'); if (autoPlayGif) {
return;
} }
handleEmojiMouseLeave = ({ target }) => { const emojis = currentTarget.querySelectorAll('.custom-emoji');
target.src = target.getAttribute('data-static');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-original');
}
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
} }
render () { render () {
@ -148,6 +141,8 @@ class Content extends ImmutablePureComponent {
className='announcements__item__content translate' className='announcements__item__content translate'
ref={this.setRef} ref={this.setRef}
dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }} dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/> />
); );
} }