From f15f8213b2b595dae607c31187fd08d9d5cee281 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Fri, 10 Mar 2023 18:04:54 -0800 Subject: [PATCH] integrate gatsby shouldUpdateScroll api --- gatsby-browser.tsx | 23 ++ src/components/GalleryImage/GalleryImage.js | 6 - src/components/MasonryGallery.tsx | 6 - src/gatsby-types.d.ts | 356 -------------------- src/pages/photogallery.tsx | 18 +- src/styles/global.css | 2 + 6 files changed, 34 insertions(+), 377 deletions(-) diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index a7c4c73..9fa6c42 100644 --- a/gatsby-browser.tsx +++ b/gatsby-browser.tsx @@ -14,6 +14,29 @@ export const onRouteUpdate = function () { window.plausible("pageview"); } }; + +// docs say you can return a scroll position from this fn, but that's a bold-faced lie +export const shouldUpdateScroll = ({ + prevRouterProps, + routerProps: { location }, + pathname, +}) => { + if (pathname.startsWith('/photogallery/') && pathname !== '/photogallery/' ) { + console.log('scroll to image') + requestAnimationFrame(() => { + window.scrollTo(0, 180); + }) + return false; + } + if (prevRouterProps?.location.pathname === pathname) { + return false; + } + if (pathname === "/photogallery/" && location.hash.length) { + return false; + } + return true; +} + // import * as React from 'react'; // import { MDXProvider } from '@mdx-js/react'; diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js index 6af6433..d6fe34d 100644 --- a/src/components/GalleryImage/GalleryImage.js +++ b/src/components/GalleryImage/GalleryImage.js @@ -63,12 +63,6 @@ const GalleryImage = ({ data, location: { state } }) => { setIsClient(true); }, []); - useEffect(() => { - requestAnimationFrame(() => { - window.scrollTo(0, 180); - }); - }, [image.base]); - const nextIndex = sortedImageList && currentIndex < sortedImageList.length ? currentIndex + 1 diff --git a/src/components/MasonryGallery.tsx b/src/components/MasonryGallery.tsx index b9e9122..20dfb3e 100644 --- a/src/components/MasonryGallery.tsx +++ b/src/components/MasonryGallery.tsx @@ -47,14 +47,8 @@ const MasonryGallery = ({ [aspectTargetsByBreakpoint] ); - // const { observe, currentBreakpoint } = useDimensions({ - // breakpoints, - // }); - const { breakpoint } = useBreakpoint(breakpoints, "xs"); - console.log("🚀 ~ file: MasonryGallery.tsx:55 ~ breakpoint:", breakpoint) - // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs"; const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`; diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts index e2d2cc4..6339c77 100644 --- a/src/gatsby-types.d.ts +++ b/src/gatsby-types.d.ts @@ -1532,7 +1532,6 @@ type Query = { readonly allSiteFunction: SiteFunctionConnection; readonly allSitePage: SitePageConnection; readonly allSitePlugin: SitePluginConnection; - readonly allStaticImage: StaticImageConnection; readonly directory: Maybe; readonly file: Maybe; readonly imageSharp: Maybe; @@ -1541,7 +1540,6 @@ type Query = { readonly siteFunction: Maybe; readonly sitePage: Maybe; readonly sitePlugin: Maybe; - readonly staticImage: Maybe; }; @@ -1609,14 +1607,6 @@ type Query_allSitePluginArgs = { }; -type Query_allStaticImageArgs = { - filter: InputMaybe; - limit: InputMaybe; - skip: InputMaybe; - sort: InputMaybe>>; -}; - - type Query_directoryArgs = { absolutePath: InputMaybe; accessTime: InputMaybe; @@ -1786,46 +1776,6 @@ type Query_sitePluginArgs = { version: InputMaybe; }; - -type Query_staticImageArgs = { - absolutePath: InputMaybe; - accessTime: InputMaybe; - atime: InputMaybe; - atimeMs: InputMaybe; - base: InputMaybe; - birthTime: InputMaybe; - birthtime: InputMaybe; - birthtimeMs: InputMaybe; - blksize: InputMaybe; - blocks: InputMaybe; - changeTime: InputMaybe; - children: InputMaybe; - ctime: InputMaybe; - ctimeMs: InputMaybe; - dev: InputMaybe; - dir: InputMaybe; - ext: InputMaybe; - extension: InputMaybe; - id: InputMaybe; - ino: InputMaybe; - internal: InputMaybe; - mode: InputMaybe; - modifiedTime: InputMaybe; - mtime: InputMaybe; - mtimeMs: InputMaybe; - name: InputMaybe; - nlink: InputMaybe; - parent: InputMaybe; - prettySize: InputMaybe; - rdev: InputMaybe; - relativeDirectory: InputMaybe; - relativePath: InputMaybe; - root: InputMaybe; - size: InputMaybe; - sourceInstanceName: InputMaybe; - uid: InputMaybe; -}; - type Site = Node & { readonly buildTime: Maybe; readonly children: ReadonlyArray; @@ -2592,312 +2542,6 @@ type SortOrderEnum = | 'ASC' | 'DESC'; -type StaticImage = Node & { - readonly absolutePath: Maybe; - readonly accessTime: Maybe; - readonly atime: Maybe; - readonly atimeMs: Maybe; - readonly base: Maybe; - readonly birthTime: Maybe; - readonly birthtime: Maybe; - readonly birthtimeMs: Maybe; - readonly blksize: Maybe; - readonly blocks: Maybe; - readonly changeTime: Maybe; - readonly children: ReadonlyArray; - readonly ctime: Maybe; - readonly ctimeMs: Maybe; - readonly dev: Maybe; - readonly dir: Maybe; - readonly ext: Maybe; - readonly extension: Maybe; - readonly id: Scalars['ID']; - readonly ino: Maybe; - readonly internal: Internal; - readonly mode: Maybe; - readonly modifiedTime: Maybe; - readonly mtime: Maybe; - readonly mtimeMs: Maybe; - readonly name: Maybe; - readonly nlink: Maybe; - readonly parent: Maybe; - readonly prettySize: Maybe; - readonly rdev: Maybe; - readonly relativeDirectory: Maybe; - readonly relativePath: Maybe; - readonly root: Maybe; - readonly size: Maybe; - readonly sourceInstanceName: Maybe; - readonly uid: Maybe; -}; - - -type StaticImage_accessTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_atimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_birthTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_birthtimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_changeTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_ctimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_modifiedTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_mtimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - -type StaticImageConnection = { - readonly distinct: ReadonlyArray; - readonly edges: ReadonlyArray; - readonly group: ReadonlyArray; - readonly max: Maybe; - readonly min: Maybe; - readonly nodes: ReadonlyArray; - readonly pageInfo: PageInfo; - readonly sum: Maybe; - readonly totalCount: Scalars['Int']; -}; - - -type StaticImageConnection_distinctArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_groupArgs = { - field: StaticImageFieldSelector; - limit: InputMaybe; - skip: InputMaybe; -}; - - -type StaticImageConnection_maxArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_minArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_sumArgs = { - field: StaticImageFieldSelector; -}; - -type StaticImageEdge = { - readonly next: Maybe; - readonly node: StaticImage; - readonly previous: Maybe; -}; - -type StaticImageFieldSelector = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - -type StaticImageFilterInput = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - -type StaticImageGroupConnection = { - readonly distinct: ReadonlyArray; - readonly edges: ReadonlyArray; - readonly field: Scalars['String']; - readonly fieldValue: Maybe; - readonly group: ReadonlyArray; - readonly max: Maybe; - readonly min: Maybe; - readonly nodes: ReadonlyArray; - readonly pageInfo: PageInfo; - readonly sum: Maybe; - readonly totalCount: Scalars['Int']; -}; - - -type StaticImageGroupConnection_distinctArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_groupArgs = { - field: StaticImageFieldSelector; - limit: InputMaybe; - skip: InputMaybe; -}; - - -type StaticImageGroupConnection_maxArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_minArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_sumArgs = { - field: StaticImageFieldSelector; -}; - -type StaticImageSortInput = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - type StringQueryOperatorInput = { readonly eq: InputMaybe; readonly glob: InputMaybe; diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx index c96f169..eebd6e5 100644 --- a/src/pages/photogallery.tsx +++ b/src/pages/photogallery.tsx @@ -96,17 +96,17 @@ const GalleryPage = ({ getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""), { replace: true, state: { suppressAutoscroll: true } } ); - // window.removeEventListener("scroll", removeHash); + window.removeEventListener("scroll", removeHash); }, [hash, sortKey, filterKeyword, showDebug] ); - // React.useEffect(() => { - // window.addEventListener("scroll", removeHash); - // return () => { - // window.removeEventListener("scroll", removeHash); - // }; - // }, [removeHash]); + React.useEffect(() => { + // window.addEventListener("scroll", removeHash); + return () => { + window.removeEventListener("scroll", removeHash); + }; + }, [removeHash]); React.useEffect(() => { // hacky but it works for now @@ -125,8 +125,8 @@ const GalleryPage = ({ block: hash.startsWith("all") ? "start" : "center", }); setTimeout(() => { - removeHash(); - }, 500) + window.addEventListener("scroll", removeHash); + }, 900) }); }, [ hash, diff --git a/src/styles/global.css b/src/styles/global.css index b5b94ba..28c194c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -8,6 +8,8 @@ * { box-sizing: border-box; +} +:root { scroll-behavior: smooth; } /* .hero * {