Bugfix: preserve edit mode when clicking on thumbnail

When in edit mode on a year, clicking on a day album thumbnail wasn't preserving edit mode but instead going back to non-edit mode.
deanmoses · Jan 3, 2023 · 7f5fa85 · 7f5fa85
1 parent 66c8033
commit 7f5fa85
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/src/lib/components/pages/album/year/YearAlbumEditPage.svelte b/src/lib/components/pages/album/year/YearAlbumEditPage.svelte
@@ -43,6 +43,6 @@
 	</svelte:fragment>
 
 	<svelte:fragment slot="thumbnails">
-		<YearAlbumThumbnails {album} />
+		<YearAlbumThumbnails {album} albumUrlCreator={editUrl} />
 	</svelte:fragment>
 </YearAlbumPageLayout>
diff --git a/src/lib/components/pages/album/year/YearAlbumThumbnails.svelte b/src/lib/components/pages/album/year/YearAlbumThumbnails.svelte
@@ -3,19 +3,27 @@
 
   A year album's thumbnails by month
 -->
-
 <script lang="ts">
-	import Thumbnails from "$lib/components/site/Thumbnails.svelte";
-	import Thumbnail from "$lib/components/site/Thumbnail.svelte";
-	import {shortDate} from "$lib/utils/date-utils";
+	import Thumbnails from '$lib/components/site/Thumbnails.svelte';
+	import Thumbnail from '$lib/components/site/Thumbnail.svelte';
+	import { shortDate } from '$lib/utils/date-utils';
 	import type { Album } from '$lib/models/album';
-	import Config from "$lib/utils/config";
+	import Config from '$lib/utils/config';
 
 	export let album: Album;
 
+	/**
+	 * Function to create URL to child album.
+	 * Needed to handle edit URLs.
+	 * If not passed in, uses default non-edit URL behavior
+	 */
+	export let albumUrlCreator: (path: string | undefined) => string | undefined = (path) => {
+		return path;
+	};
+
 	type AlbumsByMonth = Array<{
-		monthName: string, 
-		albums: Album[]
+		monthName: string;
+		albums: Album[];
 	}>;
 
 	/**
@@ -27,7 +35,7 @@
 
 		if (albums) {
 			// iterate over the albums, putting them into the correct month
-			albums.forEach(album => {
+			albums.forEach((album) => {
 				const albumDate = new Date(album.date * 1000);
 				const month: number = albumDate.getMonth();
 				if (!albumsByMonth[month]) {
@@ -41,7 +49,7 @@
 		}
 
 		// remove empty months
-		albumsByMonth = albumsByMonth.filter(month => month);
+		albumsByMonth = albumsByMonth.filter((month) => month);
 
 		return albumsByMonth.reverse();
 	}
@@ -55,7 +63,7 @@
 				<Thumbnail
 					title={shortDate(childAlbum.date)}
 					summary={childAlbum.customdata}
-					href="/{childAlbum.path}"
+					href={albumUrlCreator(`/${childAlbum.path}`)}
 					src={Config.cdnUrl(childAlbum.url_thumb)}
 				/>
 			{/each}
@@ -64,18 +72,18 @@
 {/each}
 
 <style>
-  h3 {
-    background-color: var(--month-color, var(--header-color));
-    font-weight: bold;
-    font-size: 1.3em;
-    line-height: 1.1;
-    padding: 0.3em 0.4em;
-    width: 100%;
-  }
+	h3 {
+		background-color: var(--month-color, var(--header-color));
+		font-weight: bold;
+		font-size: 1.3em;
+		line-height: 1.1;
+		padding: 0.3em 0.4em;
+		width: 100%;
+	}
 
-  .month {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--default-padding) * 2);
-  }
-</style>
+	.month {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-padding) * 2);
+	}
+</style>