From 574b1417dc9ae596f697fd7901de6e94d7e0ee90 Mon Sep 17 00:00:00 2001 From: Victor Date: Wed, 31 Jan 2024 16:19:58 -0800 Subject: [PATCH] free floating "go to top" button on inifinite scroll pages --- packages/fakeyou.com/src/AppNew.scss | 13 +++++++++++ .../src/components/common/Button/Button.tsx | 3 ++- .../components/common/Button/ButtonProps.tsx | 1 + packages/fakeyou.com/src/hooks/index.tsx | 2 ++ .../src/hooks/useLazyLists/useLazyLists.tsx | 17 +++++++++++++- .../v2/view/pages/explore/tabs/MediaTab.tsx | 22 +++++++++++++++---- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 18 +++++++++++++-- 7 files changed, 68 insertions(+), 8 deletions(-) diff --git a/packages/fakeyou.com/src/AppNew.scss b/packages/fakeyou.com/src/AppNew.scss index c7683717df..784d6847a0 100644 --- a/packages/fakeyou.com/src/AppNew.scss +++ b/packages/fakeyou.com/src/AppNew.scss @@ -329,6 +329,19 @@ $headings-font-family: "Fira Sans", sans-serif; height: 100%; pointer-events: none; } + + .to-top-button-off-screen { + position: fixed; + width: fit-content; + white-space: nowrap; + top: 5rem; + margin: 0 auto; + left: 0; + right: 0; + z-index: 3; + + box-shadow: 0px 5px 20px rgba($black, 0.3); + } } @media screen and (max-height: 740px) { diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx index 060a9cf10b..c276f9214f 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.tsx +++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx @@ -7,6 +7,7 @@ import Tippy from "@tippyjs/react"; import "tippy.js/dist/tippy.css"; export default function Button({ + buttonRef, label, icon, small, @@ -81,7 +82,7 @@ export default function Button({ {ButtonContent} ) : ( - ); diff --git a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx index a4680b7be9..9a0936fca5 100644 --- a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx +++ b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx @@ -2,6 +2,7 @@ import { ButtonHTMLAttributes } from "react"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; export default interface ButtonProps extends ButtonHTMLAttributes { + buttonRef?: any; label?: string | null; icon?: IconDefinition; small?: boolean; diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx index bdccde3deb..a4f893e1e4 100644 --- a/packages/fakeyou.com/src/hooks/index.tsx +++ b/packages/fakeyou.com/src/hooks/index.tsx @@ -12,6 +12,7 @@ import useLazyLists from './useLazyLists'; import useListContent from './useListContent'; import useLocalize from './useLocalize'; import useMedia from './useMedia'; +import useOnScreen from "./useOnScreen"; import useRatings from './useRatings'; import useSdUpload from './useSdUpload'; import useSession from './useSession'; @@ -33,6 +34,7 @@ export { useListContent, useLocalize, useMedia, + useOnScreen, useRatings, useSdUpload, useSession, diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index 66ef5480ec..6fdc35c516 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx @@ -45,6 +45,9 @@ export default function useLazyLists({ status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; + const [goingtToTop,goingtToTopSet] = useState(false); + const [y,ySet] = useState(0); + const getMore = () => { if (next) statusSet(1); }; @@ -67,6 +70,8 @@ export default function useLazyLists({ nextSet(""); previousSet(""); statusSet(FetchStatus.ready); + window.scrollTo(0,0); + goingtToTopSet(true); } useEffect(() => { @@ -76,7 +81,15 @@ export default function useLazyLists({ ...(sort ? { sort_ascending: true } : {}), }; - if (status === FetchStatus.ready) { + const adjustY = () => ySet(window.pageYOffset); + + if (goingtToTop) { + window.addEventListener('scroll', adjustY, { passive: true }); + if (y === 0) setTimeout(() => goingtToTopSet(false),500); + } + else window.removeEventListener('scroll',adjustY); + + if (status === FetchStatus.ready && !goingtToTop) { let search = new URLSearchParams(queries).toString(); statusSet(FetchStatus.in_progress); !disableUrlQueries && history.replace({ pathname, search }); @@ -114,6 +127,7 @@ export default function useLazyLists({ addQueries, debug, fetcher, + goingtToTop, history, listKeys, listSet, @@ -124,6 +138,7 @@ export default function useLazyLists({ status, totalKeys, disableUrlQueries, + y ]); return { diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx index 2f5adc56db..de5912e1eb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -11,7 +11,7 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex import SkeletonCard from "components/common/Card/SkeletonCard"; import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; -import { useBookmarks, useLazyLists, useRatings } from "hooks"; +import { useBookmarks, useLazyLists, useOnScreen, useRatings } from "hooks"; import InfiniteScroll from "react-infinite-scroll-component"; import prepFilter from "resources/prepFilter"; @@ -20,6 +20,9 @@ export default function MediaTab() { const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); const ratings = useRatings(); + const toTopBtnRef = useRef(null); + const onScreen = useOnScreen(toTopBtnRef,"0px"); + const gridContainerRef = useRef(null); const [mediaType, mediaTypeSet] = useState( urlQueries.get("filter_media_type") || "all" @@ -59,8 +62,6 @@ export default function MediaTab() { // { value: "mostliked", label: "Most Liked" }, ]; - console.log("💎",media.urlCursor); - return ( <>
@@ -84,8 +85,20 @@ export default function MediaTab() { }} />
- { media.urlCursor ?