nav improvements + debug helper buttons on gallery
This commit is contained in:
parent
5760b436d2
commit
abc7717a25
@ -65,7 +65,10 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(() => {
|
||||
window.scrollTo(0, 180);
|
||||
window.scrollTo({
|
||||
top: 180,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}, [image.base]);
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -72,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;
|
||||
}
|
||||
@ -85,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);
|
||||
@ -159,9 +159,15 @@ const MasonryGallery = ({
|
||||
}}
|
||||
to={`/photogallery/${image.base}/`}
|
||||
>
|
||||
{data && <span className="text-white z-20 absolute bg-black">
|
||||
{data}
|
||||
</span>}
|
||||
{data && (
|
||||
<div className="text-white z-20 absolute flex flex-col items-start">
|
||||
{data.map((dataString) => (
|
||||
<span className="bg-black/50" key={dataString.substring(3)}>
|
||||
{dataString}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{img && (
|
||||
<div
|
||||
className={`h-full ${
|
||||
|
||||
33
src/components/ToggleButton.tsx
Normal file
33
src/components/ToggleButton.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import {useToggleState} from 'react-stately';
|
||||
import {AriaToggleButtonProps, useToggleButton} from 'react-aria';
|
||||
import {useRef} from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export function ToggleButton(props: AriaToggleButtonProps) {
|
||||
let ref = useRef(null);
|
||||
let state = useToggleState(props);
|
||||
let { buttonProps, isPressed } = useToggleButton(props, state, ref);
|
||||
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
className={classNames(buttonProps.className, "py-[3px] px-2 mx-1 rounded")}
|
||||
ref={ref}
|
||||
style={{
|
||||
background: isPressed
|
||||
? state.isSelected ? 'darkgreen' : 'gray'
|
||||
: state.isSelected
|
||||
? 'green'
|
||||
: 'lightgray',
|
||||
color: state.isSelected ? 'white' : 'black',
|
||||
userSelect: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
356
src/gatsby-types.d.ts
vendored
356
src/gatsby-types.d.ts
vendored
@ -1532,6 +1532,7 @@ type Query = {
|
||||
readonly allSiteFunction: SiteFunctionConnection;
|
||||
readonly allSitePage: SitePageConnection;
|
||||
readonly allSitePlugin: SitePluginConnection;
|
||||
readonly allStaticImage: StaticImageConnection;
|
||||
readonly directory: Maybe<Directory>;
|
||||
readonly file: Maybe<File>;
|
||||
readonly imageSharp: Maybe<ImageSharp>;
|
||||
@ -1540,6 +1541,7 @@ type Query = {
|
||||
readonly siteFunction: Maybe<SiteFunction>;
|
||||
readonly sitePage: Maybe<SitePage>;
|
||||
readonly sitePlugin: Maybe<SitePlugin>;
|
||||
readonly staticImage: Maybe<StaticImage>;
|
||||
};
|
||||
|
||||
|
||||
@ -1607,6 +1609,14 @@ type Query_allSitePluginArgs = {
|
||||
};
|
||||
|
||||
|
||||
type Query_allStaticImageArgs = {
|
||||
filter: InputMaybe<StaticImageFilterInput>;
|
||||
limit: InputMaybe<Scalars['Int']>;
|
||||
skip: InputMaybe<Scalars['Int']>;
|
||||
sort: InputMaybe<ReadonlyArray<InputMaybe<StaticImageSortInput>>>;
|
||||
};
|
||||
|
||||
|
||||
type Query_directoryArgs = {
|
||||
absolutePath: InputMaybe<StringQueryOperatorInput>;
|
||||
accessTime: InputMaybe<DateQueryOperatorInput>;
|
||||
@ -1776,6 +1786,46 @@ type Query_sitePluginArgs = {
|
||||
version: InputMaybe<StringQueryOperatorInput>;
|
||||
};
|
||||
|
||||
|
||||
type Query_staticImageArgs = {
|
||||
absolutePath: InputMaybe<StringQueryOperatorInput>;
|
||||
accessTime: InputMaybe<DateQueryOperatorInput>;
|
||||
atime: InputMaybe<DateQueryOperatorInput>;
|
||||
atimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
base: InputMaybe<StringQueryOperatorInput>;
|
||||
birthTime: InputMaybe<DateQueryOperatorInput>;
|
||||
birthtime: InputMaybe<DateQueryOperatorInput>;
|
||||
birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
blksize: InputMaybe<IntQueryOperatorInput>;
|
||||
blocks: InputMaybe<IntQueryOperatorInput>;
|
||||
changeTime: InputMaybe<DateQueryOperatorInput>;
|
||||
children: InputMaybe<NodeFilterListInput>;
|
||||
ctime: InputMaybe<DateQueryOperatorInput>;
|
||||
ctimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
dev: InputMaybe<IntQueryOperatorInput>;
|
||||
dir: InputMaybe<StringQueryOperatorInput>;
|
||||
ext: InputMaybe<StringQueryOperatorInput>;
|
||||
extension: InputMaybe<StringQueryOperatorInput>;
|
||||
id: InputMaybe<StringQueryOperatorInput>;
|
||||
ino: InputMaybe<IntQueryOperatorInput>;
|
||||
internal: InputMaybe<InternalFilterInput>;
|
||||
mode: InputMaybe<IntQueryOperatorInput>;
|
||||
modifiedTime: InputMaybe<DateQueryOperatorInput>;
|
||||
mtime: InputMaybe<DateQueryOperatorInput>;
|
||||
mtimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
name: InputMaybe<StringQueryOperatorInput>;
|
||||
nlink: InputMaybe<IntQueryOperatorInput>;
|
||||
parent: InputMaybe<NodeFilterInput>;
|
||||
prettySize: InputMaybe<StringQueryOperatorInput>;
|
||||
rdev: InputMaybe<IntQueryOperatorInput>;
|
||||
relativeDirectory: InputMaybe<StringQueryOperatorInput>;
|
||||
relativePath: InputMaybe<StringQueryOperatorInput>;
|
||||
root: InputMaybe<StringQueryOperatorInput>;
|
||||
size: InputMaybe<IntQueryOperatorInput>;
|
||||
sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
|
||||
uid: InputMaybe<IntQueryOperatorInput>;
|
||||
};
|
||||
|
||||
type Site = Node & {
|
||||
readonly buildTime: Maybe<Scalars['Date']>;
|
||||
readonly children: ReadonlyArray<Node>;
|
||||
@ -2542,6 +2592,312 @@ type SortOrderEnum =
|
||||
| 'ASC'
|
||||
| 'DESC';
|
||||
|
||||
type StaticImage = Node & {
|
||||
readonly absolutePath: Maybe<Scalars['String']>;
|
||||
readonly accessTime: Maybe<Scalars['Date']>;
|
||||
readonly atime: Maybe<Scalars['Date']>;
|
||||
readonly atimeMs: Maybe<Scalars['Float']>;
|
||||
readonly base: Maybe<Scalars['String']>;
|
||||
readonly birthTime: Maybe<Scalars['Date']>;
|
||||
readonly birthtime: Maybe<Scalars['Date']>;
|
||||
readonly birthtimeMs: Maybe<Scalars['Float']>;
|
||||
readonly blksize: Maybe<Scalars['Int']>;
|
||||
readonly blocks: Maybe<Scalars['Int']>;
|
||||
readonly changeTime: Maybe<Scalars['Date']>;
|
||||
readonly children: ReadonlyArray<Node>;
|
||||
readonly ctime: Maybe<Scalars['Date']>;
|
||||
readonly ctimeMs: Maybe<Scalars['Float']>;
|
||||
readonly dev: Maybe<Scalars['Int']>;
|
||||
readonly dir: Maybe<Scalars['String']>;
|
||||
readonly ext: Maybe<Scalars['String']>;
|
||||
readonly extension: Maybe<Scalars['String']>;
|
||||
readonly id: Scalars['ID'];
|
||||
readonly ino: Maybe<Scalars['Int']>;
|
||||
readonly internal: Internal;
|
||||
readonly mode: Maybe<Scalars['Int']>;
|
||||
readonly modifiedTime: Maybe<Scalars['Date']>;
|
||||
readonly mtime: Maybe<Scalars['Date']>;
|
||||
readonly mtimeMs: Maybe<Scalars['Float']>;
|
||||
readonly name: Maybe<Scalars['String']>;
|
||||
readonly nlink: Maybe<Scalars['Int']>;
|
||||
readonly parent: Maybe<Node>;
|
||||
readonly prettySize: Maybe<Scalars['String']>;
|
||||
readonly rdev: Maybe<Scalars['Int']>;
|
||||
readonly relativeDirectory: Maybe<Scalars['String']>;
|
||||
readonly relativePath: Maybe<Scalars['String']>;
|
||||
readonly root: Maybe<Scalars['String']>;
|
||||
readonly size: Maybe<Scalars['Int']>;
|
||||
readonly sourceInstanceName: Maybe<Scalars['String']>;
|
||||
readonly uid: Maybe<Scalars['Int']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_accessTimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_atimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_birthTimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_birthtimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_changeTimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_ctimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_modifiedTimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImage_mtimeArgs = {
|
||||
difference: InputMaybe<Scalars['String']>;
|
||||
formatString: InputMaybe<Scalars['String']>;
|
||||
fromNow: InputMaybe<Scalars['Boolean']>;
|
||||
locale: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
type StaticImageConnection = {
|
||||
readonly distinct: ReadonlyArray<Scalars['String']>;
|
||||
readonly edges: ReadonlyArray<StaticImageEdge>;
|
||||
readonly group: ReadonlyArray<StaticImageGroupConnection>;
|
||||
readonly max: Maybe<Scalars['Float']>;
|
||||
readonly min: Maybe<Scalars['Float']>;
|
||||
readonly nodes: ReadonlyArray<StaticImage>;
|
||||
readonly pageInfo: PageInfo;
|
||||
readonly sum: Maybe<Scalars['Float']>;
|
||||
readonly totalCount: Scalars['Int'];
|
||||
};
|
||||
|
||||
|
||||
type StaticImageConnection_distinctArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageConnection_groupArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
limit: InputMaybe<Scalars['Int']>;
|
||||
skip: InputMaybe<Scalars['Int']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageConnection_maxArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageConnection_minArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageConnection_sumArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
type StaticImageEdge = {
|
||||
readonly next: Maybe<StaticImage>;
|
||||
readonly node: StaticImage;
|
||||
readonly previous: Maybe<StaticImage>;
|
||||
};
|
||||
|
||||
type StaticImageFieldSelector = {
|
||||
readonly absolutePath: InputMaybe<FieldSelectorEnum>;
|
||||
readonly accessTime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly atime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly atimeMs: InputMaybe<FieldSelectorEnum>;
|
||||
readonly base: InputMaybe<FieldSelectorEnum>;
|
||||
readonly birthTime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly birthtime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly birthtimeMs: InputMaybe<FieldSelectorEnum>;
|
||||
readonly blksize: InputMaybe<FieldSelectorEnum>;
|
||||
readonly blocks: InputMaybe<FieldSelectorEnum>;
|
||||
readonly changeTime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly children: InputMaybe<NodeFieldSelector>;
|
||||
readonly ctime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly ctimeMs: InputMaybe<FieldSelectorEnum>;
|
||||
readonly dev: InputMaybe<FieldSelectorEnum>;
|
||||
readonly dir: InputMaybe<FieldSelectorEnum>;
|
||||
readonly ext: InputMaybe<FieldSelectorEnum>;
|
||||
readonly extension: InputMaybe<FieldSelectorEnum>;
|
||||
readonly id: InputMaybe<FieldSelectorEnum>;
|
||||
readonly ino: InputMaybe<FieldSelectorEnum>;
|
||||
readonly internal: InputMaybe<InternalFieldSelector>;
|
||||
readonly mode: InputMaybe<FieldSelectorEnum>;
|
||||
readonly modifiedTime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly mtime: InputMaybe<FieldSelectorEnum>;
|
||||
readonly mtimeMs: InputMaybe<FieldSelectorEnum>;
|
||||
readonly name: InputMaybe<FieldSelectorEnum>;
|
||||
readonly nlink: InputMaybe<FieldSelectorEnum>;
|
||||
readonly parent: InputMaybe<NodeFieldSelector>;
|
||||
readonly prettySize: InputMaybe<FieldSelectorEnum>;
|
||||
readonly rdev: InputMaybe<FieldSelectorEnum>;
|
||||
readonly relativeDirectory: InputMaybe<FieldSelectorEnum>;
|
||||
readonly relativePath: InputMaybe<FieldSelectorEnum>;
|
||||
readonly root: InputMaybe<FieldSelectorEnum>;
|
||||
readonly size: InputMaybe<FieldSelectorEnum>;
|
||||
readonly sourceInstanceName: InputMaybe<FieldSelectorEnum>;
|
||||
readonly uid: InputMaybe<FieldSelectorEnum>;
|
||||
};
|
||||
|
||||
type StaticImageFilterInput = {
|
||||
readonly absolutePath: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly accessTime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly atime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly atimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
readonly base: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly birthTime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly birthtime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
readonly blksize: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly blocks: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly changeTime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly children: InputMaybe<NodeFilterListInput>;
|
||||
readonly ctime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly ctimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
readonly dev: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly dir: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly ext: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly extension: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly id: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly ino: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly internal: InputMaybe<InternalFilterInput>;
|
||||
readonly mode: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly modifiedTime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly mtime: InputMaybe<DateQueryOperatorInput>;
|
||||
readonly mtimeMs: InputMaybe<FloatQueryOperatorInput>;
|
||||
readonly name: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly nlink: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly parent: InputMaybe<NodeFilterInput>;
|
||||
readonly prettySize: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly rdev: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly relativeDirectory: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly relativePath: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly root: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly size: InputMaybe<IntQueryOperatorInput>;
|
||||
readonly sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
|
||||
readonly uid: InputMaybe<IntQueryOperatorInput>;
|
||||
};
|
||||
|
||||
type StaticImageGroupConnection = {
|
||||
readonly distinct: ReadonlyArray<Scalars['String']>;
|
||||
readonly edges: ReadonlyArray<StaticImageEdge>;
|
||||
readonly field: Scalars['String'];
|
||||
readonly fieldValue: Maybe<Scalars['String']>;
|
||||
readonly group: ReadonlyArray<StaticImageGroupConnection>;
|
||||
readonly max: Maybe<Scalars['Float']>;
|
||||
readonly min: Maybe<Scalars['Float']>;
|
||||
readonly nodes: ReadonlyArray<StaticImage>;
|
||||
readonly pageInfo: PageInfo;
|
||||
readonly sum: Maybe<Scalars['Float']>;
|
||||
readonly totalCount: Scalars['Int'];
|
||||
};
|
||||
|
||||
|
||||
type StaticImageGroupConnection_distinctArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageGroupConnection_groupArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
limit: InputMaybe<Scalars['Int']>;
|
||||
skip: InputMaybe<Scalars['Int']>;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageGroupConnection_maxArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageGroupConnection_minArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
|
||||
type StaticImageGroupConnection_sumArgs = {
|
||||
field: StaticImageFieldSelector;
|
||||
};
|
||||
|
||||
type StaticImageSortInput = {
|
||||
readonly absolutePath: InputMaybe<SortOrderEnum>;
|
||||
readonly accessTime: InputMaybe<SortOrderEnum>;
|
||||
readonly atime: InputMaybe<SortOrderEnum>;
|
||||
readonly atimeMs: InputMaybe<SortOrderEnum>;
|
||||
readonly base: InputMaybe<SortOrderEnum>;
|
||||
readonly birthTime: InputMaybe<SortOrderEnum>;
|
||||
readonly birthtime: InputMaybe<SortOrderEnum>;
|
||||
readonly birthtimeMs: InputMaybe<SortOrderEnum>;
|
||||
readonly blksize: InputMaybe<SortOrderEnum>;
|
||||
readonly blocks: InputMaybe<SortOrderEnum>;
|
||||
readonly changeTime: InputMaybe<SortOrderEnum>;
|
||||
readonly children: InputMaybe<NodeSortInput>;
|
||||
readonly ctime: InputMaybe<SortOrderEnum>;
|
||||
readonly ctimeMs: InputMaybe<SortOrderEnum>;
|
||||
readonly dev: InputMaybe<SortOrderEnum>;
|
||||
readonly dir: InputMaybe<SortOrderEnum>;
|
||||
readonly ext: InputMaybe<SortOrderEnum>;
|
||||
readonly extension: InputMaybe<SortOrderEnum>;
|
||||
readonly id: InputMaybe<SortOrderEnum>;
|
||||
readonly ino: InputMaybe<SortOrderEnum>;
|
||||
readonly internal: InputMaybe<InternalSortInput>;
|
||||
readonly mode: InputMaybe<SortOrderEnum>;
|
||||
readonly modifiedTime: InputMaybe<SortOrderEnum>;
|
||||
readonly mtime: InputMaybe<SortOrderEnum>;
|
||||
readonly mtimeMs: InputMaybe<SortOrderEnum>;
|
||||
readonly name: InputMaybe<SortOrderEnum>;
|
||||
readonly nlink: InputMaybe<SortOrderEnum>;
|
||||
readonly parent: InputMaybe<NodeSortInput>;
|
||||
readonly prettySize: InputMaybe<SortOrderEnum>;
|
||||
readonly rdev: InputMaybe<SortOrderEnum>;
|
||||
readonly relativeDirectory: InputMaybe<SortOrderEnum>;
|
||||
readonly relativePath: InputMaybe<SortOrderEnum>;
|
||||
readonly root: InputMaybe<SortOrderEnum>;
|
||||
readonly size: InputMaybe<SortOrderEnum>;
|
||||
readonly sourceInstanceName: InputMaybe<SortOrderEnum>;
|
||||
readonly uid: InputMaybe<SortOrderEnum>;
|
||||
};
|
||||
|
||||
type StringQueryOperatorInput = {
|
||||
readonly eq: InputMaybe<Scalars['String']>;
|
||||
readonly glob: InputMaybe<Scalars['String']>;
|
||||
|
||||
@ -17,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"],
|
||||
@ -80,26 +81,23 @@ const GalleryPage = ({
|
||||
getGalleryPageUrl(
|
||||
{ sortKey: newSortKey, keyword: filterKeyword, showDebug },
|
||||
hash
|
||||
),
|
||||
{ replace: true }
|
||||
)
|
||||
// { replace: true }
|
||||
);
|
||||
},
|
||||
[filterKeyword, hash, showDebug]
|
||||
);
|
||||
|
||||
const removeHash = React.useCallback(
|
||||
() => {
|
||||
if (!hash.length) {
|
||||
return;
|
||||
}
|
||||
navigate(
|
||||
getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
|
||||
// { replace: false }
|
||||
);
|
||||
window.removeEventListener("scroll", removeHash);
|
||||
},
|
||||
[hash, sortKey, filterKeyword, showDebug]
|
||||
);
|
||||
const removeHash = React.useCallback(() => {
|
||||
if (!hash.length) {
|
||||
return;
|
||||
}
|
||||
navigate(
|
||||
getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
|
||||
{ replace: true }
|
||||
);
|
||||
window.removeEventListener("scroll", removeHash);
|
||||
}, [hash, sortKey, filterKeyword, showDebug]);
|
||||
|
||||
React.useEffect(() => {
|
||||
// window.addEventListener("scroll", removeHash);
|
||||
@ -123,15 +121,13 @@ const GalleryPage = ({
|
||||
console.log("scrolling into view manually", el.offsetTop);
|
||||
el.scrollIntoView({
|
||||
block: hash.startsWith("all") ? "start" : "center",
|
||||
behavior: "smooth",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.addEventListener("scroll", removeHash);
|
||||
}, 100)
|
||||
}, 100);
|
||||
});
|
||||
}, [
|
||||
hash,
|
||||
removeHash
|
||||
]);
|
||||
}, [hash, removeHash]);
|
||||
|
||||
const images: GalleryImage[] = React.useMemo(() => {
|
||||
const sort =
|
||||
@ -173,24 +169,44 @@ 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(null, 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()}]`);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return new Date(date).toLocaleString();
|
||||
}
|
||||
return null;
|
||||
if (dbgTags) {
|
||||
const keywords = image.fields?.imageMeta?.meta?.Keywords?.join(',')
|
||||
if (keywords) {
|
||||
data.push(keywords);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
[showDebug, sortKey]
|
||||
[showDebug, sortKey, dbgName, dbgSortKey, dbgTags]
|
||||
);
|
||||
|
||||
return (
|
||||
@ -283,7 +299,20 @@ const GalleryPage = ({
|
||||
onPick={onKeywordPick}
|
||||
value={filterKeyword}
|
||||
/>
|
||||
<div className="my-2 mr-2 flex flex-row items-end">
|
||||
<div className="my-2 mx-2 flex flex-row items-end">
|
||||
{showDebug && (
|
||||
<div className="mr-2">
|
||||
<ToggleButton isSelected={dbgName} onChange={setDbgName}>
|
||||
name
|
||||
</ToggleButton>
|
||||
<ToggleButton isSelected={dbgSortKey} onChange={setDbgSortKey}>
|
||||
sort key
|
||||
</ToggleButton>
|
||||
<ToggleButton isSelected={dbgTags} onChange={setDbgTags}>
|
||||
tags
|
||||
</ToggleButton>
|
||||
</div>
|
||||
)}
|
||||
<div className="border border-gray-400 rounded mr-2">
|
||||
<Switch
|
||||
isSelected={showPalette}
|
||||
@ -299,7 +328,7 @@ const GalleryPage = ({
|
||||
</div>
|
||||
<Select
|
||||
label="Sort by..."
|
||||
// @ts-ignore
|
||||
// @ts-expect-error React.key, but string is more convenient for the state
|
||||
onSelectionChange={setSortKey}
|
||||
selectedKey={sortKey}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user