From bd0185358cfc8e6898b187d806523e332b477266 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 28 Aug 2022 02:35:45 +0200 Subject: [PATCH] Fixed the anchor link problems, maybe --- src/contexts/AppLayoutContext.tsx | 5 ++++ src/helpers/img.ts | 42 +++++++++++++++--------------- src/hooks/useOnResize.ts | 24 +++++++---------- src/hooks/useScrollIntoView.ts | 30 +++++++++++++++++++++ src/pages/library/[slug]/scans.tsx | 2 +- 5 files changed, 67 insertions(+), 36 deletions(-) create mode 100644 src/hooks/useScrollIntoView.ts diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index 39c7607..e4f7cb8 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -14,6 +14,7 @@ import { Currencies, Languages, Langui } from "helpers/localData"; import { useCurrencies, useLanguages, useLangui } from "hooks/useLocalData"; import { getDefaultPreferredLanguages } from "helpers/locales"; import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage"; +import { useScrollIntoView } from "hooks/useScrollIntoView"; interface AppLayoutState { subPanelOpen: boolean; @@ -301,12 +302,14 @@ export const AppContextProvider = (props: Props): JSX.Element => { useEffect(() => { router.events.on("routeChangeStart", () => { + console.log("[Router Events] on routeChangeStart"); setConfigPanelOpen(false); setMainPanelOpen(false); setSubPanelOpen(false); }); router.events.on("hashChangeStart", () => { + console.log("[Router Events] on hashChangeStart"); setSubPanelOpen(false); }); }, [router.events, setConfigPanelOpen, setMainPanelOpen, setSubPanelOpen]); @@ -317,6 +320,8 @@ export const AppContextProvider = (props: Props): JSX.Element => { }%`; }, [fontSize]); + useScrollIntoView(); + return ( = { + small: { maxSize: 512, extension: "webp" }, + medium: { maxSize: 1024, extension: "webp" }, + large: { maxSize: 2048, extension: "webp" }, + og: { maxSize: 512, extension: "jpg" }, +}; + export const getAssetFilename = (path: string): string => { let result = path.split("/"); result = result[result.length - 1].split("."); @@ -23,13 +35,13 @@ export const getAssetFilename = (path: string): string => { }; export const getAssetURL = (url: string, quality: ImageQuality): string => { - let newUrl = url; - newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`); - newUrl = newUrl.replace(/.jpg$/u, ".webp"); - newUrl = newUrl.replace(/.jpeg$/u, ".webp"); - newUrl = newUrl.replace(/.png$/u, ".webp"); - if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg"); - return process.env.NEXT_PUBLIC_URL_IMG + newUrl; + const indexEndPath = url.indexOf("/uploads/") + "/uploads/".length; + const indexStartExtension = url.lastIndexOf("."); + const assetPathWithoutExtension = url.slice( + indexEndPath, + indexStartExtension + ); + return `${process.env.NEXT_PUBLIC_URL_IMG}/${quality}/${assetPathWithoutExtension}.${imageQualityProperties[quality].extension}`; }; const getImgSizesByMaxSize = ( @@ -49,17 +61,5 @@ export const getImgSizesByQuality = ( width: number, height: number, quality: ImageQuality -): { width: number; height: number } => { - switch (quality) { - case ImageQuality.Og: - return getImgSizesByMaxSize(width, height, 512); - case ImageQuality.Small: - return getImgSizesByMaxSize(width, height, 512); - case ImageQuality.Medium: - return getImgSizesByMaxSize(width, height, 1024); - case ImageQuality.Large: - return getImgSizesByMaxSize(width, height, 2048); - default: - return { width: 0, height: 0 }; - } -}; +): { width: number; height: number } => + getImgSizesByMaxSize(width, height, imageQualityProperties[quality].maxSize); diff --git a/src/hooks/useOnResize.ts b/src/hooks/useOnResize.ts index fb46ef3..f12ffa5 100644 --- a/src/hooks/useOnResize.ts +++ b/src/hooks/useOnResize.ts @@ -1,4 +1,4 @@ -import { useMemo, useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useIsClient } from "usehooks-ts"; import { isDefined } from "helpers/others"; @@ -7,23 +7,19 @@ export const useOnResize = ( onResize: (width: number, height: number) => void ): void => { const isClient = useIsClient(); - const elem = useMemo( - () => (isClient ? document.querySelector(`#${id}`) : null), - [id, isClient] - ); - - const listener = useCallback(() => { - console.log("useOnResize"); - if (elem?.clientWidth && elem.clientHeight) { - onResize(elem.clientWidth, elem.clientHeight); - } - }, [elem?.clientHeight, elem?.clientWidth, onResize]); useEffect(() => { - const ro = new ResizeObserver(listener); + console.log("[useOnResize]", id); + const elem = isClient ? document.querySelector(`#${id}`) : null; + const ro = new ResizeObserver((resizeObserverEntry) => + onResize( + resizeObserverEntry[0].contentRect.width, + resizeObserverEntry[0].contentRect.height + ) + ); if (isDefined(elem)) { ro.observe(elem); } return () => ro.disconnect(); - }, [elem, listener]); + }, [id, isClient, onResize]); }; diff --git a/src/hooks/useScrollIntoView.ts b/src/hooks/useScrollIntoView.ts new file mode 100644 index 0000000..34de9a7 --- /dev/null +++ b/src/hooks/useScrollIntoView.ts @@ -0,0 +1,30 @@ +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import { useBoolean, useCounter } from "usehooks-ts"; +import { isDefined } from "helpers/others"; + +export const useScrollIntoView = (): void => { + const router = useRouter(); + const { count, increment } = useCounter(0); + const { value: hasReachedElem, setTrue: setHasReachedElem } = useBoolean(); + useEffect(() => { + if (!hasReachedElem) { + const indexHash = router.asPath.indexOf("#"); + if (indexHash > 0) { + const hash = router.asPath.slice(indexHash + 1); + const element = document.getElementById(hash); + console.log(element); + if (isDefined(element)) { + console.log(`[useScrollIntoView] ${hash} found`); + element.scrollIntoView(); + setHasReachedElem(); + } else { + console.log(`[useScrollIntoView] ${hash} not found`); + setTimeout(() => { + increment(); + }, 100); + } + } + } + }, [increment, router.asPath, count, hasReachedElem, setHasReachedElem]); +}; diff --git a/src/pages/library/[slug]/scans.tsx b/src/pages/library/[slug]/scans.tsx index 0da5a9b..c423e3f 100644 --- a/src/pages/library/[slug]/scans.tsx +++ b/src/pages/library/[slug]/scans.tsx @@ -1,5 +1,5 @@ import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next"; -import { Fragment, useCallback, useMemo } from "react"; +import { Fragment, useCallback, useEffect, useMemo } from "react"; import { AppLayout, AppLayoutRequired } from "components/AppLayout"; import { ReturnButton } from "components/PanelComponents/ReturnButton"; import {