mirror/YuruToot
1
0
Fork 0
mirror of https://github.com/funamitech/mastodon synced 2024-11-27 14:29:03 +09:00
Code

[Glitch] Fix browser glitch caused by two overlapping scroll animations in web UI

Browse Source 
Port ef4d6ab988 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-09-19 12:52:46 +02:00 committed by Claire
parent 80cb285819
commit 9bd5838646
2 changed files with 17 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
View File

@ -4,8 +4,6 @@ import { Children, cloneElement, useCallback } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { supportsPassiveEvents } from 'detect-passive-events';
import { scrollRight } from '../../../scroll'; import { scrollRight } from '../../../scroll';
import BundleContainer from '../containers/bundle_container'; import BundleContainer from '../containers/bundle_container';
import { import {
@ -72,10 +70,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
}; };
componentDidMount() { componentDidMount() {
if (!this.props.singleColumn) {
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
}
if (this.mediaQuery) { if (this.mediaQuery) {
if (this.mediaQuery.addEventListener) { if (this.mediaQuery.addEventListener) {
this.mediaQuery.addEventListener('change', this.handleLayoutChange); this.mediaQuery.addEventListener('change', this.handleLayoutChange);
@ -88,23 +82,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
} }
UNSAFE_componentWillUpdate(nextProps) {
if (this.props.singleColumn !== nextProps.singleColumn && nextProps.singleColumn) {
this.node.removeEventListener('wheel', this.handleWheel);
}
}
componentDidUpdate(prevProps) {
if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) {
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
}
}
componentWillUnmount () { componentWillUnmount () {
if (!this.props.singleColumn) {
this.node.removeEventListener('wheel', this.handleWheel);
}
if (this.mediaQuery) { if (this.mediaQuery) {
if (this.mediaQuery.removeEventListener) { if (this.mediaQuery.removeEventListener) {
this.mediaQuery.removeEventListener('change', this.handleLayoutChange); this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
@ -117,7 +95,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
handleChildrenContentChange() { handleChildrenContentChange() {
if (!this.props.singleColumn) { if (!this.props.singleColumn) {
const modifier = this.isRtlLayout ? -1 : 1; const modifier = this.isRtlLayout ? -1 : 1;
this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier); scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
} }
} }
@ -125,14 +103,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
this.setState({ renderComposePanel: !e.matches }); this.setState({ renderComposePanel: !e.matches });
}; };
handleWheel = () => {
if (typeof this._interruptScrollAnimation !== 'function') {
return;
}
this._interruptScrollAnimation();
};
setRef = (node) => { setRef = (node) => {
this.node = node; this.node = node;
}; };

25
app/javascript/flavours/glitch/scroll.ts
View File

@ -38,13 +38,20 @@ const scroll = (
const isScrollBehaviorSupported = const isScrollBehaviorSupported =
'scrollBehavior' in document.documentElement.style; 'scrollBehavior' in document.documentElement.style;
export const scrollRight = (node: Element, position: number) => { export const scrollRight = (node: Element, position: number) =>
if (isScrollBehaviorSupported) requestIdleCallback(() => {
node.scrollTo({ left: position, behavior: 'smooth' }); if (isScrollBehaviorSupported) {
else scroll(node, 'scrollLeft', position); node.scrollTo({ left: position, behavior: 'smooth' });
}; } else {
scroll(node, 'scrollLeft', position);
}
});
export const scrollTop = (node: Element) => { export const scrollTop = (node: Element) =>
if (isScrollBehaviorSupported) node.scrollTo({ top: 0, behavior: 'smooth' }); requestIdleCallback(() => {
else scroll(node, 'scrollTop', 0); if (isScrollBehaviorSupported) {
}; node.scrollTo({ top: 0, behavior: 'smooth' });
} else {
scroll(node, 'scrollTop', 0);
}
});