milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: (scroller) scroll to card boundaries

Browse source
This commit is contained in:
Grady Hallenbeck 2023-10-07 19:25:58 -07:00
parent 1e64e96028
commit c223b7c2d7
3 changed files with 121 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/elements/emby-scrollbuttons/ScrollButtons.tsx
View file

@ -3,11 +3,7 @@ import scrollerFactory from '../../libraries/scroller';
import globalize from '../../scripts/globalize';
import IconButton from '../emby-button/IconButton';
import './emby-scrollbuttons.scss';
enum Direction {
RIGHT,
LEFT,
}
import { ScrollDirection, scrollerItemSlideIntoView } from '../../utils/scroller';
interface ScrollButtonsProps {
scrollerFactoryRef: React.MutableRefObject<scrollerFactory | null>;
@ -22,31 +18,16 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
const [localeScrollPos, setLocaleScrollPos] = useState<number>(0);
const scrollButtonsRef = useRef<HTMLDivElement>(null);
const scrollToPosition = useCallback((pos: number, immediate: boolean) => {
if (scrollerFactoryRef.current) {
scrollerFactoryRef.current.slideTo(pos, immediate, undefined );
}
}, [scrollerFactoryRef]);
const onScrollButtonClick = useCallback((direction: ScrollDirection) => {
scrollerItemSlideIntoView({
direction,
scroller: scrollerFactoryRef.current,
scrollState
});
}, [scrollState, scrollerFactoryRef]);
const onScrollButtonClick = useCallback((direction: Direction) => {
let newPos;
if (direction === Direction.LEFT) {
newPos = Math.max(0, scrollState.scrollPos - scrollState.scrollSize);
} else {
newPos = scrollState.scrollPos + scrollState.scrollSize;
}
if (globalize.getIsRTL() && direction === Direction.LEFT) {
newPos = scrollState.scrollPos + scrollState.scrollSize;
} else if (globalize.getIsRTL()) {
newPos = Math.min(0, scrollState.scrollPos - scrollState.scrollSize);
}
scrollToPosition(newPos, false);
}, [ scrollState.scrollPos, scrollState.scrollSize, scrollToPosition ]);
const triggerScrollLeft = useCallback(() => onScrollButtonClick(Direction.LEFT), [ onScrollButtonClick ]);
const triggerScrollRight = useCallback(() => onScrollButtonClick(Direction.RIGHT), [ onScrollButtonClick ]);
const triggerScrollLeft = useCallback(() => onScrollButtonClick(ScrollDirection.LEFT), [ onScrollButtonClick ]);
const triggerScrollRight = useCallback(() => onScrollButtonClick(ScrollDirection.RIGHT), [ onScrollButtonClick ]);
useEffect(() => {
const parent = scrollButtonsRef.current?.parentNode as HTMLDivElement;

29
src/elements/emby-scrollbuttons/emby-scrollbuttons.js
View file

@ -2,6 +2,7 @@ import './emby-scrollbuttons.scss';
import 'webcomponents.js/webcomponents-lite';
import '../emby-button/paper-icon-button-light';
import globalize from '../../scripts/globalize';
import { scrollerItemSlideIntoView } from '../../utils/scroller';
const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
@ -128,26 +129,16 @@ function getScrollSize(elem) {
}
function onScrollButtonClick() {
const scroller = this.parentNode.nextSibling;
const direction = this.getAttribute('data-direction');
const scrollSize = getScrollSize(scroller);
const scrollPos = getScrollPosition(scroller);
let newPos;
if (direction === 'left') {
newPos = Math.max(0, scrollPos - scrollSize);
} else {
newPos = scrollPos + scrollSize;
}
if (globalize.getIsRTL() && direction === 'left') {
newPos = scrollPos + scrollSize;
} else if (globalize.getIsRTL()) {
newPos = Math.min(0, scrollPos - scrollSize);
}
scroller.scrollToPosition(newPos, false);
const scroller = this.parentNode.nextSibling;
const scrollPosition = getScrollPosition(scroller);
scrollerItemSlideIntoView({
direction,
scroller,
scrollState: {
scrollPos: scrollPosition
}
});
}
EmbyScrollButtonsPrototype.attachedCallback = function () {