scroll to top for shows

WJTB-Radio · Feb 18, 2024 · b4e16f7 · b4e16f7
1 parent 88c27f1
commit b4e16f7
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/public/js/smoothscroll.min.js b/public/js/smoothscroll.min.js
diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx
@@ -19,6 +19,7 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body>
+				<script src="/js/smoothscroll.min.js"></script>
 				<RememberTheme />
 				<div className={styles.players}>
 					<Players />

diff --git a/src/app/(pages)/shows/shows.module.scss b/src/app/(pages)/shows/shows.module.scss
@@ -11,7 +11,6 @@
 .calendar {
 	width: 90%;
 	position: relative;
-	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
 }
@@ -106,6 +105,11 @@
 	display: none;
 }
 
+.scroll_to_top {
+	@extend .styled_button;
+	display: none;
+}
+
 @media (hover: none), (max-width: 1000px) {
 	.day_buttons {
 		display: flex;
@@ -165,6 +169,17 @@
 	.shows, .days {
 		width: 100%;
 	}
+	.scroll_to_top {
+		display: block;
+		font-size: 1.25rem;
+		font-family: unset;
+		position: sticky;
+		background-color: var(--bg2-color);
+		top: 0.5rem;
+		left: 0.5rem;
+		z-index: 3;
+		margin: 0;
+	}
 }
 
 .hover_card p {
@@ -216,4 +231,4 @@
 	height: 0;
 	z-index: -1;
 	border-bottom: 0.25rem dotted var(--text-light-color);
-}
+}
diff --git a/src/app/(pages)/shows/static.tsx b/src/app/(pages)/shows/static.tsx
@@ -1,6 +1,7 @@
 import { formatTime, formatTimes, getWeekdayString } from "@/app/utils/time";
 import styles from "./shows.module.scss";
-import { MutableRefObject } from "react";
+import { MutableRefObject, useEffect, useRef } from "react";
+import { isClient } from "@/app/utils/is_client";
 
 export type Show = {name: string, desc: string, hosts: string, poster: string, start_time: number, end_time: number, day: number, is_running: number};
 export type Day = {day: number, dayName: string, shows: Show[]};
@@ -51,7 +52,18 @@ export function renderShows(days: Day[], dayStarts: MutableRefObject<HTMLDivElem
 		if(dayStart.current == null) {
 			return;
 		}
-		dayStart.current.scrollIntoView();
+		(window as any).smoothScroll({toElement: dayStart.current, duration: 300, easing: (window as any).smoothScroll.easing.easeOutBack});
+	}
+
+	let top: null | MutableRefObject<HTMLDivElement | null> = null;
+	if(isClient()){
+		top = useRef(null);
+	}
+	function scrollToTop() {
+		if(top == null || top.current == null) {
+			return;
+		}
+		(window as any).smoothScroll({toElement: top.current, duration: 300, easing: (window as any).smoothScroll.easing.easeOutBack});
 	}
 
 	return (
@@ -64,13 +76,14 @@ export function renderShows(days: Day[], dayStarts: MutableRefObject<HTMLDivElem
 						</div>
 					)}
 				</div>
-				<div className={styles.day_buttons}>
+				<div className={styles.day_buttons} ref={top}>
 					{Array.apply(null, Array(5)).map((_, i) =>
 						<button className={styles.styled_button} onClick={scrollToDay.bind(null, i)} key={i+"daybutton"}>
 							{getWeekdayString(i)}
 						</button>
 					)}
 				</div>
+				<button className={styles.scroll_to_top} onClick={scrollToTop}>Scroll to top</button>
 				<div className={styles.shows_container}>
 					<div className={styles.shows}>
 						{days.map((day) =>

diff --git a/src/app/utils/is_client.ts b/src/app/utils/is_client.ts
@@ -0,0 +1,4 @@
+// https://stackoverflow.com/questions/32216383/in-react-how-do-i-detect-if-my-component-is-rendering-from-the-client-or-the-se
+export function isClient(): boolean {
+	return (typeof window !== 'undefined' && !!window.document && !!window.document.createElement);
+}