Merge pull request #230 from Suwayomi/main

fix drawer opening

src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+layout@.svelte

@@ -10,25 +10,15 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { getDrawerStore, AppShell } from '@skeletonlabs/skeleton';
 	import type { LayoutData } from './$types';
-	import { writable } from 'svelte/store';
+	import { get, writable, type Writable } from 'svelte/store';
+	import { makeToggleDrawer } from './chapterStores';
 
 	export let data: LayoutData;
 
 	const drawerStore = getDrawerStore();
 	const dataStore = writable(data);
-
 	$: dataStore.set(data);
-
-	function draw() {
-		if ($drawerStore.open) drawerStore.close();
-		else {
-			drawerStore.open({
-				id: 'ChapterMenu',
-				width: 'w-[280px] md:w-[480px]',
-				meta: dataStore
-			});
-		}
-	}
+	const draw = makeToggleDrawer(drawerStore, dataStore);
 </script>
 
 <AppShell>

src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/+page.svelte

@@ -18,7 +18,12 @@
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
-	import { ViewNav, chapterTitle, mangaTitle } from './chapterStores';
+	import {
+		ViewNav,
+		chapterTitle,
+		makeToggleDrawer,
+		mangaTitle
+	} from './chapterStores';
 	import { filterChapters } from '../../util';
 	import { paths, type PathLayout, type Paths, type TPath } from './paths';
 	import {
@@ -35,6 +40,7 @@
 	} from '$lib/gql/Mutations';
 	import { ChapterTypeFragment } from '$lib/gql/Fragments';
 	import { queryParam, ssp } from 'sveltekit-search-params';
+	import { writable } from 'svelte/store';
 
 	export let data: PageData;
 	let mangaMeta = MangaMeta(data.MangaID);
@@ -208,24 +214,18 @@
 		}
 	}
 
+	const dataStore = writable(data);
+	$: dataStore.set(data);
+	const Toggledraw = makeToggleDrawer(drawerStore, dataStore);
+
 	async function handelKeypress(keyEvent: KeyboardEvent) {
 		if (!pageElement) {
 			pageElement = document.querySelector('#page') as HTMLDivElement;
 		}
 		if (keyEvent.code === 'Escape') {
 			keyEvent.preventDefault();
 			keyEvent.stopPropagation();
-			if ($drawerStore.open) {
-				drawerStore.close();
-				return;
-			}
-			drawerStore.open({
-				id: 'ChapterMenu',
-				width: 'w-[280px] md:w-[480px]',
-				meta: {
-					id: data.MangaID
-				}
-			});
+			Toggledraw();
 			return;
 		}
 		if (keyEvent.code === 'Space') {
@@ -331,13 +331,7 @@
 		} else if (pointInPoly([e.x, e.y], polyToPOLLY(path.back))) {
 			scrollBy(-0.8);
 		} else if (path.menu && pointInPoly([e.x, e.y], polyToPOLLY(path.menu))) {
-			drawerStore.open({
-				id: 'ChapterMenu',
-				width: 'w-[280px] md:w-[480px]',
-				meta: {
-					id: data.MangaID
-				}
-			});
+			Toggledraw();
 		}
 	}
 

src/routes/(app)/manga/[MangaID]/chapter/[ChapterID]/chapterStores.ts

@@ -5,8 +5,28 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 // import { localStorageStore } from "@skeletonlabs/skeleton";
-import { writable } from 'svelte/store';
+import type { getDrawerStore } from '@skeletonlabs/skeleton';
+import { get, writable, type Writable } from 'svelte/store';
 
 export const mangaTitle = writable('');
 export const chapterTitle = writable('');
 export const ViewNav = writable<boolean>(false);
+
+export function makeToggleDrawer(
+	drawerStore: ReturnType<typeof getDrawerStore>,
+	dataStore: Writable<{
+		MangaID: number;
+		ChapterID: number;
+	}>
+) {
+	return () => {
+		if (get(drawerStore).open) drawerStore.close();
+		else {
+			drawerStore.open({
+				id: 'ChapterMenu',
+				width: 'w-[280px] md:w-[480px]',
+				meta: dataStore
+			});
+		}
+	};
+}

versionToServerVersionMapping.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"tag": "v1.1.0",
-		"uiVersion": "r1143",
+		"uiVersion": "r1146",
 		"serverVersion": "r1502",
 		"comment": "the server version is between 1.0.0 and 1.1.0 release",
 		"comment2": "because its the preview version that implemented the breaking changes"