diff --git a/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip b/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip new file mode 100644 index 0000000..a327ae8 Binary files /dev/null and b/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip differ diff --git a/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip b/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip new file mode 100644 index 0000000..3dbd004 Binary files /dev/null and b/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip differ diff --git a/data/gallery/DSC00003.jpg b/data/gallery/DSC00003.jpg index 2067cd8..0cf0e16 100644 --- a/data/gallery/DSC00003.jpg +++ b/data/gallery/DSC00003.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e68efc4efb3693ed3f3b33d440612ea0c83e686b6e853acad940d089832c19d4 +oid sha256:a657fbaa24371e31b8935b3db9a28ab9c61bdedbca68bf1e5dfe29427c9af61f size 2274940 diff --git a/data/gallery/DSC00015.jpg b/data/gallery/DSC00015.jpg index a4784fe..8b7e98a 100644 --- a/data/gallery/DSC00015.jpg +++ b/data/gallery/DSC00015.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0da9ec892321321a2299b77cdad8154da438b4aeb61e2b232ee9cf5516977195 -size 3568958 +oid sha256:15cf0e93fa758f6fe8294c2782701f4bd3c9be9aa18237e335cc43d4c0d08abd +size 3568976 diff --git a/data/gallery/DSC00159-2.jpg b/data/gallery/DSC00159-2.jpg index 0bc77c8..87de0a9 100644 --- a/data/gallery/DSC00159-2.jpg +++ b/data/gallery/DSC00159-2.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e965f8d5eb3d3947d5ebbcccff64973cc61a613cb68b88957627702e83fbbec4 -size 1647472 +oid sha256:85cfbaec76cd55440e01aea0257c3ce367b39623d8337a56d56d41db19ae7619 +size 1647490 diff --git a/data/gallery/DSC05702.jpg b/data/gallery/DSC05702.jpg index 8d1ba05..00fc5d1 100644 --- a/data/gallery/DSC05702.jpg +++ b/data/gallery/DSC05702.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5e1f4a36fada98c77afdbeff0452e679ddfc5c371d8d404e7af2b948e2bf8aeb -size 4046850 +oid sha256:01b3fde78e991de3a6bb8756418254ba2a25082885d614cf55e76d405d5321b7 +size 4046872 diff --git a/data/gallery/DSC06124.jpg b/data/gallery/DSC06124.jpg index f9f1295..d633938 100644 --- a/data/gallery/DSC06124.jpg +++ b/data/gallery/DSC06124.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:48525efa7467b507a3e4a6f9d7a618a3bd12ae4645c9cb9ada6b9cd1d749ef66 -size 3882477 +oid sha256:6c3a9f66a86388781dd6f853c58f30e1fbdff4f988ab61c148cd95f1730472d5 +size 3882495 diff --git a/data/gallery/DSC06719.jpg b/data/gallery/DSC06719.jpg index e328855..0cb680c 100644 --- a/data/gallery/DSC06719.jpg +++ b/data/gallery/DSC06719.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fe0e1d627c62e974ce83549dd576b4bf35a08361709f020480724a69e2b9931f -size 4551505 +oid sha256:622299f35a18b8dae3306ed7be8dd103b36c7e16a9c54f69b541ee106437ff32 +size 4551533 diff --git a/data/gallery/DSC06803.jpg b/data/gallery/DSC06803.jpg index 34561b1..1add2ee 100644 --- a/data/gallery/DSC06803.jpg +++ b/data/gallery/DSC06803.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e8c722de9d907e690f570ebba949fffafb58e5b9cff9b5f99b4c432eb97d72fa -size 3362829 +oid sha256:42bc598174338f0812b55f06a9b0bd9b4c0c9f843f86cae947cc63f7513b581c +size 3362857 diff --git a/data/gallery/DSC08086.jpg b/data/gallery/DSC08086.jpg index e949fb8..9618160 100644 --- a/data/gallery/DSC08086.jpg +++ b/data/gallery/DSC08086.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1a751986e51f5eac227ee00ae8962c70fefcc324e307d9cf496ef8292d2e1ea5 -size 2011209 +oid sha256:235a865d67f61b620939a8737bafbbf3bd99ade969786f802aae6e813843d428 +size 2011227 diff --git a/data/gallery/DSC08103.jpg b/data/gallery/DSC08103.jpg index 4d34969..2a7d023 100644 --- a/data/gallery/DSC08103.jpg +++ b/data/gallery/DSC08103.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:46bca7a81f671b62e05a76149e4ef33ff647855408acf50222ffb9b431aa6a9f -size 4824394 +oid sha256:99c780ce1d1ff0ea370c75a175968623010153d334a6a9e6c7523e62db40a2ad +size 4824412 diff --git a/data/gallery/DSC08222.jpg b/data/gallery/DSC08222.jpg index 007844a..918376c 100644 --- a/data/gallery/DSC08222.jpg +++ b/data/gallery/DSC08222.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b70c96565ca1d4f15425efd767136845441dbf79628938b17a4bb41a8e905556 -size 3752506 +oid sha256:5804da4c50af234c49bb6115fd2ef576af77e7512f759cb48706d1398fabde1b +size 3752524 diff --git a/data/gallery/DSC08263.jpg b/data/gallery/DSC08263.jpg index 89e11d5..7fc938a 100644 --- a/data/gallery/DSC08263.jpg +++ b/data/gallery/DSC08263.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2500a823af382c96b5eb35312869c2c13664f1127f736e7922dacf52f6a4aded -size 2789643 +oid sha256:7107c16dbfd723feb476b02ce84387eb9acb1e962b696f04dd465d8301e1eda7 +size 2789661 diff --git a/data/gallery/DSC09447.jpg b/data/gallery/DSC09447.jpg index 8df8ffb..d01665c 100644 --- a/data/gallery/DSC09447.jpg +++ b/data/gallery/DSC09447.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d57c00d03a589a3d831f31699ebd6f4682eb62cd5a9b03dd7a744199d8bc26ce -size 2802651 +oid sha256:5396a71c1b326ac1d7d402059ff69b0aecf0e2e1334c2873afa0ec2dd1863f72 +size 2802669 diff --git a/data/gallery/DSC09454.jpg b/data/gallery/DSC09454.jpg index 0fc1bbd..a3b569c 100644 --- a/data/gallery/DSC09454.jpg +++ b/data/gallery/DSC09454.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c3b9c5d41cfbe9cee0bdf3c9280755d9520cb6b1fbef0dc44e3a66b621f72be8 -size 2235785 +oid sha256:3a95084c0ec8f3276690d43241646acd0fc3677207bd5033698ab455b51fd23a +size 2235803 diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index a7c4c73..5478107 100644 --- a/gatsby-browser.tsx +++ b/gatsby-browser.tsx @@ -14,6 +14,41 @@ 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/' ) { + // if (prevRouterProps?.location.pathname === '/photogallery/') { + // console.log('scroll to image from gallery') + // // setTimeout(() => { + + // // window.scrollTo(0, 0); + // // }, 100) + // setTimeout(() => { + // window.scrollTo(0, 180); + // }, 10) + // } else { + // console.log('scroll to image from elsewhere') + // requestAnimationFrame(() => { + // window.scrollTo(0, 180); + // }) + // } + console.log('gallery image, skipping') + 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/package.json b/package.json index 55dd6d6..d830a0a 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "gatsby-source-filesystem": "^5.0.0", "gatsby-transformer-sharp": "^5.0.0", "kebab-case": "^1.0.1", + "lodash.debounce": "^4.0.8", "node-iptc": "^1.0.5", "node-vibrant": "3.1.6", "postcss": "^8.4.19", @@ -60,6 +61,7 @@ }, "devDependencies": { "@types/chroma-js": "^2.1.4", + "@types/lodash.debounce": "^4.0.7", "@types/node": "^18.8.3", "@types/ramda": "^0.28.15", "@types/react": "^18.0.21", diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js index 6af6433..ab4ee5e 100644 --- a/src/components/GalleryImage/GalleryImage.js +++ b/src/components/GalleryImage/GalleryImage.js @@ -65,7 +65,10 @@ const GalleryImage = ({ data, location: { state } }) => { useEffect(() => { requestAnimationFrame(() => { - window.scrollTo(0, 180); + window.scrollTo({ + top: 180, + behavior: 'smooth' + }); }); }, [image.base]); diff --git a/src/components/MasonryGallery.tsx b/src/components/MasonryGallery.tsx index b9e9122..fbbffcc 100644 --- a/src/components/MasonryGallery.tsx +++ b/src/components/MasonryGallery.tsx @@ -23,7 +23,7 @@ interface MasonryGalleryProps { [breakpoint: string]: number; }; debugHue?: boolean; - dataFn?: (image: GalleryImage) => (string | null); + dataFn?: (image: GalleryImage) => string[] | null; linkState?: object; showPalette?: boolean; singleRow?: boolean; @@ -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)`; @@ -78,7 +72,7 @@ const MasonryGallery = ({ // does adding current image to our row get us closer to our target aspect ratio? if (currentDiff > diffIfImageIsAddedToCurrentRow) { currentRow.aspect += currentAspect; - currentRow.images += 1 + currentRow.images += 1; // _rows.push(currentRow); continue; } @@ -91,8 +85,8 @@ const MasonryGallery = ({ _rows.push({ aspect: currentAspect, images: 1, - startIndex: currentRow.startIndex + currentRow.images - }) + startIndex: currentRow.startIndex + currentRow.images, + }); } return R.indexBy(R.prop("startIndex"), _rows); @@ -125,7 +119,7 @@ const MasonryGallery = ({ } const rowAspectRatioSum = currentRow.aspect; const ar = getAspectRatio(image); - let width; + let width: string; let height = `calc(${galleryWidth} / ${rowAspectRatioSum} ${ showPalette ? "+ 10px" : "- 10px" })`; @@ -144,7 +138,7 @@ const MasonryGallery = ({ const data = dataFn ? dataFn(image) : null; return ( - {data && - {data} - } + {data && ( +
+ {data.map((dataString, i) => ( + + {dataString} + + ))} +
+ )} {img && (
+ {props.children} + + ); +} \ No newline at end of file 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 05280c5..8bd0a4f 100644 --- a/src/pages/photogallery.tsx +++ b/src/pages/photogallery.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as R from "ramda"; import { graphql, Link, navigate, PageProps } from "gatsby"; import { Helmet } from "react-helmet"; +import debounce from "lodash.debounce"; // import { Picker, Item } from "@adobe/react-spectrum"; import MasonryGallery from "../components/MasonryGallery"; @@ -16,6 +17,7 @@ import Nav from "../components/Nav"; import { Item, Select } from "../components/Select"; import { Switch } from "../components/Switch"; import ColorPalette from "@spectrum-icons/workflow/ColorPalette"; +import { ToggleButton } from "../components/ToggleButton"; const SORT_KEYS = { hue: ["fields", "imageMeta", "vibrantHue"], @@ -79,8 +81,8 @@ const GalleryPage = ({ getGalleryPageUrl( { sortKey: newSortKey, keyword: filterKeyword, showDebug }, hash - ), - { replace: true } + ) + // { replace: true } ); }, [filterKeyword, hash, showDebug] @@ -90,21 +92,18 @@ const GalleryPage = ({ if (!hash.length) { return; } - // const url = new URL( - // typeof window !== "undefined" - // ? window.location.href.toString() - // : "https://chuckdries.com/photogallery/" - // ); - - // url.hash = ""; - // window.history.replaceState(null, "", url.href.toString()); - navigate(getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug}, ""), { replace: true }) - window.removeEventListener("wheel", removeHash); + navigate( + getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""), + { replace: true } + ); + window.removeEventListener("scroll", removeHash); }, [hash, sortKey, filterKeyword, showDebug]); React.useEffect(() => { - window.addEventListener("wheel", removeHash); - return () => window.removeEventListener("wheel", removeHash); + // window.addEventListener("scroll", removeHash); + return () => { + window.removeEventListener("scroll", removeHash); + }; }, [removeHash]); React.useEffect(() => { @@ -119,12 +118,16 @@ const GalleryPage = ({ console.log("⚠️failed to find hash"); return; } - console.log("scrolling into view manually"); + console.log("scrolling into view manually", el.offsetTop); el.scrollIntoView({ block: hash.startsWith("all") ? "start" : "center", + behavior: "smooth", }); + setTimeout(() => { + window.addEventListener("scroll", removeHash); + }, 100); }); - }, [hash]); + }, [hash, removeHash]); const images: GalleryImage[] = React.useMemo(() => { const sort = @@ -166,24 +169,43 @@ const GalleryPage = ({ ); }, [data]); + const [dbgTags, setDbgTags] = React.useState(false); + const [dbgSortKey, setDbgSortKey] = React.useState(false); + const [dbgName, setDbgName] = React.useState(false); const dataFn = React.useCallback( - (image: GalleryImage): string | null => { + (image: GalleryImage): string[] | null => { if (!showDebug) { return null; } - if (sortKey === "rating") { - return `[${R.pathOr(null, SORT_KEYS.rating, image)}] ${image.base}`; + let data: string[] = []; + if (dbgName) { + data.push(image.base); } - if (sortKey === "datePublished") { - const date = R.pathOr(null, SORT_KEYS.datePublished, image); - if (!date) { - return null; + if (dbgSortKey) { + switch (sortKey) { + case "hue": + case "rating": { + data.push(R.pathOr("x", SORT_KEYS[sortKey], image)); + break; + } + case "date": + case "datePublished": { + const date = R.pathOr(null, SORT_KEYS[sortKey], image); + if (date) { + data.push(new Date(date).toLocaleString()); + } else { + data.push("x"); + } + break; + } } - return new Date(date).toLocaleString(); } - return null; + if (dbgTags) { + data.push(image.fields?.imageMeta?.meta?.Keywords?.join(",") ?? "x"); + } + return data; }, - [showDebug, sortKey] + [showDebug, sortKey, dbgName, dbgSortKey, dbgTags] ); return ( @@ -276,7 +298,20 @@ const GalleryPage = ({ onPick={onKeywordPick} value={filterKeyword} /> -
+
+ {showDebug && ( +
+ + name + + + sort key + + + tags + +
+ )}