@phosart/common 0.4.46 → 0.4.48

package/dist/ModalGallery/ImageSection.svelte

@@ -53,9 +53,15 @@
 	}
 
 	function scrollDown() {
-		if (!isComic) return;
+		if (!isComic || !bounded) return;
 
-		bounded?.scrollBy({ behavior: 'smooth', top: containerHeight });
+		bounded.scrollBy({
+			behavior: 'smooth',
+			top: Math.min(
+				bounded.scrollHeight - bounded.clientHeight - bounded.scrollTop,
+				(containerHeight * 2) / 3
+			)
+		});
 	}
 
 	let w = $derived(width(piece.image));
@@ -64,6 +70,53 @@
 	let config = useLibraryConfig();
 
 	let nameInHeader = $derived(!config.modal?.hideNames && w > 500);
+	let pointerStartPos: [x: number, y: number] = $state([0, 0]);
+	let pointerEndPos: [x: number, y: number] = $state([0, 0]);
+	let pointerStartTime = $state(0);
+
+	function onPointerDown(e: PointerEvent) {
+		e.stopPropagation();
+
+		pointerStartPos = [e.screenX, e.screenY];
+		pointerStartTime = Date.now();
+	}
+	function onPointerMove(e: PointerEvent) {
+		pointerEndPos = [e.screenX, e.screenY];
+	}
+	function onPointerUp(e: PointerEvent) {
+		e.stopPropagation();
+
+		if (pointerStartTime === 0) {
+			return;
+		}
+
+		const [sx, sy] = pointerStartPos;
+		const [ex, ey] = [e.screenX || pointerEndPos[0], e.screenY || pointerEndPos[1]];
+		const [dx, dy] = [ex - sx, ey - sy];
+
+		const isCancel = e.screenX === 0 && e.screenY === 0;
+
+		const pointerDownTime = Date.now() - pointerStartTime;
+		pointerStartTime = 0;
+		// pixels per second
+		const velocity = (dx / pointerDownTime) * 1000;
+
+		if (Math.abs(velocity) < 50) {
+			if (!isCancel) {
+				scrollDown();
+			}
+			return;
+		}
+		if (Math.abs(dy) > 50 || Math.abs(dx) < window.screenLeft / 5 || Math.abs(velocity) < 200) {
+			return;
+		}
+
+		if (velocity > 0) {
+			onprev();
+		} else {
+			onnext();
+		}
+	}
 </script>
 
 <div class="image-section">
@@ -78,9 +131,17 @@
 		></div>
 	</div>
 
-	<div class="main-container" style={isComic ? 'overflow: visible' : ''}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="main-container overscroll-contain"
+		ondragstartcapture={(e) => e.preventDefault()}
+		onpointerdown={onPointerDown}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		onpointermove={onPointerMove}
+	>
 		<div
-			class="bounding-div"
+			class="bounding-div overscroll-contain"
 			style={isComic ? 'overflow-y: scroll; align-items: flex-start; z-index: 100' : ''}
 			bind:clientHeight={containerHeight}
 			bind:clientWidth={containerWidth}
@@ -89,13 +150,12 @@
 			<div class="flex flex-col">
 				<div
 					class="bounded-div"
-					onclick={(e) => {
+					onkeypress={(e) => {
 						e.stopPropagation();
 						scrollDown();
 					}}
-					onkeypress={(e) => {
+					onclick={(e) => {
 						e.stopPropagation();
-						scrollDown();
 					}}
 					role="button"
 					tabindex={-1}
@@ -121,7 +181,6 @@
 							class="bounded-div"
 							onclick={(e) => {
 								e.stopPropagation();
-								scrollDown();
 							}}
 							onkeypress={(e) => {
 								e.stopPropagation();
@@ -167,7 +226,7 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		overflow: visible;
+		overflow: hidden;
 		max-height: calc(100% - var(--carousel-height));
 		position: relative;
 		height: 100%;

package/dist/ModalGallery/ImageSection.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSection.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,+CAA+C,CAAC;AAEvD,OAAO,KAAK,EAAE,QAAQ,EAAW,MAAM,gBAAgB,CAAC;AAMvD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAqHF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImageSection.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/ImageSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,+CAA+C,CAAC;AAEvD,OAAO,KAAK,EAAE,QAAQ,EAAW,MAAM,gBAAgB,CAAC;AAMvD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAyKF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ModalGallery/ImageView.svelte

@@ -41,6 +41,8 @@
 	class="headline-container"
 	onclick={(e) => e.stopPropagation()}
 	onkeypress={(e) => e.stopPropagation()}
+	onpointerdown={(e) => e.stopPropagation()}
+	onpointerup={(e) => e.stopPropagation()}
 	role="contentinfo"
 >
 	<Headline {piece} bind:showingDescription showName={!config.modal?.hideNames && nameInHeader} />
@@ -50,6 +52,8 @@
 	class="description-container"
 	onclick={(e) => e.stopPropagation()}
 	onkeypress={(e) => e.stopPropagation()}
+	onpointerdown={(e) => e.stopPropagation()}
+	onpointerup={(e) => e.stopPropagation()}
 	role="contentinfo"
 >
 	<Description

package/dist/ModalGallery.svelte

@@ -8,7 +8,16 @@
 		modelGalleryOpens.push(false);
 		return {
 			set open(isOpen: boolean) {
+				const wasOpen = isAnyModelGalleryOpen();
 				modelGalleryOpens[idx] = isOpen;
+				const nowOpen = isAnyModelGalleryOpen();
+				if (
+					wasOpen !== nowOpen &&
+					typeof window !== 'undefined' &&
+					typeof document !== 'undefined'
+				) {
+					document.body.style.overflow = isOpen ? 'hidden' : 'auto';
+				}
 			},
 			get open() {
 				return modelGalleryOpens[idx];
@@ -108,7 +117,10 @@
 </script>
 
 <Modal open={selected !== null && !!pieces[selected]} onclose={() => (selected = null)}>
-	<div class="gallery-container" style={currentIsComic ? '--carousel-height: 25px' : ''}>
+	<div
+		class="gallery-container overscroll-contain"
+		style={currentIsComic ? '--carousel-height: 25px' : ''}
+	>
 		<div
 			role="button"
 			tabindex={-1}

package/dist/ModalGallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalGallery.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ModalGallery.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,+CAA+C,CAAC;AAIvD,wBAAgB,qBAAqB;UAIlB,OAAO;EAOzB;AAED,wBAAgB,qBAAqB,YAEpC;AAGF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ7C,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CACjB;AA8GF,QAAA,MAAM,YAAY,uEAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModalGallery.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ModalGallery.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,+CAA+C,CAAC;AAIvD,wBAAgB,qBAAqB;UAIlB,OAAO;EAgBzB;AAED,wBAAgB,qBAAqB,YAEpC;AAGF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ7C,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CACjB;AA8GF,QAAA,MAAM,YAAY,uEAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosart/common",
-  "version": "0.4.46",
+  "version": "0.4.48",
   "files": [
     "dist",
     "!dist/**/*.test.*",

package/src/lib/ModalGallery/ImageSection.svelte

@@ -53,9 +53,15 @@
 	}
 
 	function scrollDown() {
-		if (!isComic) return;
+		if (!isComic || !bounded) return;
 
-		bounded?.scrollBy({ behavior: 'smooth', top: containerHeight });
+		bounded.scrollBy({
+			behavior: 'smooth',
+			top: Math.min(
+				bounded.scrollHeight - bounded.clientHeight - bounded.scrollTop,
+				(containerHeight * 2) / 3
+			)
+		});
 	}
 
 	let w = $derived(width(piece.image));
@@ -64,6 +70,53 @@
 	let config = useLibraryConfig();
 
 	let nameInHeader = $derived(!config.modal?.hideNames && w > 500);
+	let pointerStartPos: [x: number, y: number] = $state([0, 0]);
+	let pointerEndPos: [x: number, y: number] = $state([0, 0]);
+	let pointerStartTime = $state(0);
+
+	function onPointerDown(e: PointerEvent) {
+		e.stopPropagation();
+
+		pointerStartPos = [e.screenX, e.screenY];
+		pointerStartTime = Date.now();
+	}
+	function onPointerMove(e: PointerEvent) {
+		pointerEndPos = [e.screenX, e.screenY];
+	}
+	function onPointerUp(e: PointerEvent) {
+		e.stopPropagation();
+
+		if (pointerStartTime === 0) {
+			return;
+		}
+
+		const [sx, sy] = pointerStartPos;
+		const [ex, ey] = [e.screenX || pointerEndPos[0], e.screenY || pointerEndPos[1]];
+		const [dx, dy] = [ex - sx, ey - sy];
+
+		const isCancel = e.screenX === 0 && e.screenY === 0;
+
+		const pointerDownTime = Date.now() - pointerStartTime;
+		pointerStartTime = 0;
+		// pixels per second
+		const velocity = (dx / pointerDownTime) * 1000;
+
+		if (Math.abs(velocity) < 50) {
+			if (!isCancel) {
+				scrollDown();
+			}
+			return;
+		}
+		if (Math.abs(dy) > 50 || Math.abs(dx) < window.screenLeft / 5 || Math.abs(velocity) < 200) {
+			return;
+		}
+
+		if (velocity > 0) {
+			onprev();
+		} else {
+			onnext();
+		}
+	}
 </script>
 
 <div class="image-section">
@@ -78,9 +131,17 @@
 		></div>
 	</div>
 
-	<div class="main-container" style={isComic ? 'overflow: visible' : ''}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="main-container overscroll-contain"
+		ondragstartcapture={(e) => e.preventDefault()}
+		onpointerdown={onPointerDown}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		onpointermove={onPointerMove}
+	>
 		<div
-			class="bounding-div"
+			class="bounding-div overscroll-contain"
 			style={isComic ? 'overflow-y: scroll; align-items: flex-start; z-index: 100' : ''}
 			bind:clientHeight={containerHeight}
 			bind:clientWidth={containerWidth}
@@ -89,13 +150,12 @@
 			<div class="flex flex-col">
 				<div
 					class="bounded-div"
-					onclick={(e) => {
+					onkeypress={(e) => {
 						e.stopPropagation();
 						scrollDown();
 					}}
-					onkeypress={(e) => {
+					onclick={(e) => {
 						e.stopPropagation();
-						scrollDown();
 					}}
 					role="button"
 					tabindex={-1}
@@ -121,7 +181,6 @@
 							class="bounded-div"
 							onclick={(e) => {
 								e.stopPropagation();
-								scrollDown();
 							}}
 							onkeypress={(e) => {
 								e.stopPropagation();
@@ -167,7 +226,7 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		overflow: visible;
+		overflow: hidden;
 		max-height: calc(100% - var(--carousel-height));
 		position: relative;
 		height: 100%;

package/src/lib/ModalGallery/ImageView.svelte

@@ -41,6 +41,8 @@
 	class="headline-container"
 	onclick={(e) => e.stopPropagation()}
 	onkeypress={(e) => e.stopPropagation()}
+	onpointerdown={(e) => e.stopPropagation()}
+	onpointerup={(e) => e.stopPropagation()}
 	role="contentinfo"
 >
 	<Headline {piece} bind:showingDescription showName={!config.modal?.hideNames && nameInHeader} />
@@ -50,6 +52,8 @@
 	class="description-container"
 	onclick={(e) => e.stopPropagation()}
 	onkeypress={(e) => e.stopPropagation()}
+	onpointerdown={(e) => e.stopPropagation()}
+	onpointerup={(e) => e.stopPropagation()}
 	role="contentinfo"
 >
 	<Description

package/src/lib/ModalGallery.svelte

@@ -8,7 +8,16 @@
 		modelGalleryOpens.push(false);
 		return {
 			set open(isOpen: boolean) {
+				const wasOpen = isAnyModelGalleryOpen();
 				modelGalleryOpens[idx] = isOpen;
+				const nowOpen = isAnyModelGalleryOpen();
+				if (
+					wasOpen !== nowOpen &&
+					typeof window !== 'undefined' &&
+					typeof document !== 'undefined'
+				) {
+					document.body.style.overflow = isOpen ? 'hidden' : 'auto';
+				}
 			},
 			get open() {
 				return modelGalleryOpens[idx];
@@ -108,7 +117,10 @@
 </script>
 
 <Modal open={selected !== null && !!pieces[selected]} onclose={() => (selected = null)}>
-	<div class="gallery-container" style={currentIsComic ? '--carousel-height: 25px' : ''}>
+	<div
+		class="gallery-container overscroll-contain"
+		style={currentIsComic ? '--carousel-height: 25px' : ''}
+	>
 		<div
 			role="button"
 			tabindex={-1}