me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Change custom emoji to be animated when hovering container

Browse source 
Port 3efa0c54b6 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
ThibG 2021-01-31 21:25:31 +01:00 committed by Claire
parent 4d40685850
commit e1fa06c459
6 changed files with 112 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/javascript/flavours/glitch/components/display_name.js
View file

@ -15,45 +15,30 @@ export default class DisplayName extends React.PureComponent {
handleClick: PropTypes.func,
};
_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();
}
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');
}
setRef = (c) => {
this.node = c;
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
render() {
@ -101,7 +86,7 @@ export default class DisplayName extends React.PureComponent {
}
return (
<span className={computedClass} ref={this.setRef}>
<span className={computedClass} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
{displayName}
{inline ? ' ' : null}
{suffix}

59
app/javascript/flavours/glitch/components/status_content.js
View file

@ -154,35 +154,38 @@ export default class StatusContent extends React.PureComponent {
}
}
_updateStatusEmojis () {
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.src = emoji.getAttribute('data-original');
}
}
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
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');
}
}
componentDidMount () {
this._updateStatusLinks();
this._updateStatusEmojis();
}
componentDidUpdate () {
this._updateStatusLinks();
this._updateStatusEmojis();
if (this.props.onUpdate) this.props.onUpdate();
}
@ -206,14 +209,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) => {
this.startXY = [e.clientX, e.clientY];
}
@ -253,10 +248,6 @@ export default class StatusContent extends React.PureComponent {
}
}
setRef = (c) => {
this.node = c;
}
setContentsRef = (c) => {
this.contentsNode = c;
}
@ -323,7 +314,7 @@ export default class StatusContent extends React.PureComponent {
}
return (
<div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} ref={this.setRef}>
<div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
>
@ -343,6 +334,8 @@ export default class StatusContent extends React.PureComponent {
tabIndex={!hidden ? 0 : null}
dangerouslySetInnerHTML={content}
className='status__content__text translate'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media}
</div>
@ -356,7 +349,6 @@ export default class StatusContent extends React.PureComponent {
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
tabIndex='0'
ref={this.setRef}
>
<div
ref={this.setContentsRef}
@ -364,6 +356,8 @@ export default class StatusContent extends React.PureComponent {
dangerouslySetInnerHTML={content}
className='status__content__text translate'
tabIndex='0'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media}
</div>
@ -373,9 +367,16 @@ export default class StatusContent extends React.PureComponent {
<div
className='status__content'
tabIndex='0'
ref={this.setRef}
>
<div ref={this.setContentsRef} key={`contents-${tagLinks}`} className='status__content__text translate' dangerouslySetInnerHTML={content} tabIndex='0' />
<div
ref={this.setContentsRef}
key={`contents-${tagLinks}`}
className='status__content__text translate'
dangerouslySetInnerHTML={content}
tabIndex='0'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media}
</div>
);

43
app/javascript/flavours/glitch/features/account/components/header.js
View file

@ -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();
}
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');
}
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}

43
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
View file

@ -67,41 +67,30 @@ class Conversation extends ImmutablePureComponent {
}
}
_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 = () => {
@ -152,10 +141,6 @@ class Conversation extends ImmutablePureComponent {
this.setState({ isExpanded: value });
}
setNamesRef = (c) => {
this.namesNode = c;
}
render () {
const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
const { isExpanded } = this.state;
@ -206,7 +191,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>

47
app/javascript/flavours/glitch/features/directory/components/account_card.js
View file

@ -102,43 +102,32 @@ class AccountCard extends ImmutablePureComponent {
onMute: PropTypes.func.isRequired,
};
_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();
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');
}
}
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);
};
@ -151,10 +140,6 @@ class AccountCard extends ImmutablePureComponent {
this.props.onMute(this.props.account);
};
setRef = (c) => {
this.node = c;
};
render() {
const { account, intl } = this.props;
@ -239,7 +224,7 @@ class AccountCard extends ImmutablePureComponent {
</div>
</div>
<div className='directory__card__extra' ref={this.setRef}>
<div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div
className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}

53
app/javascript/flavours/glitch/features/getting_started/components/announcements.js
View file

@ -39,35 +39,10 @@ class Content extends ImmutablePureComponent {
componentDidMount () {
this._updateLinks();
this._updateEmojis();
}
componentDidUpdate () {
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 () {
@ -132,12 +107,30 @@ class Content extends ImmutablePureComponent {
}
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
handleMouseEnter = ({ 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-original');
}
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
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 () {
@ -148,6 +141,8 @@ class Content extends ImmutablePureComponent {
className='announcements__item__content translate'
ref={this.setRef}
dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
);
}