Initial commit

1 files changed, 45 insertions, 1 deletions

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index 46cbc45..70fff4c 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -28,15 +28,59 @@
 			if(e.key == 's')
 				toggleSidebar();
 	}
+
+	function imageScrollHandler(e) {
+		e.preventDefault();
+
+		let zoom = (imageScrollHandler.zoom ?? 1) + (e.deltaY * -0.01);
+		zoom = Math.max(1, Math.min(zoom, 5));
+
+		document.getElementById('image').style.transform = `scale(${zoom})`;
+
+		imageScrollHandler.zoom = zoom;
+	}
+
+	function imageMouseDownHandler(e) {
+		let img = document.getElementById('image');
+
+		img.dataset.dragging = true;
+		window.lastMouseX    = e.clientX;
+		window.lastMouseY    = e.clientY;
+	}
+
+	function pageMouseMoveHandler(e) {
+		let img = document.getElementById('image');
+
+		if(img.dataset.dragging !== 'true')
+			return;
+
+		let div = document.getElementById('image-container');
+
+		div.scrollBy(window.lastMouseX - e.clientX, window.lastMouseY - e.clientY);
+
+		window.lastMouseX = e.clientX;
+		window.lastMouseY = e.clientY;
+	}
+
+	function pageMouseUpHandler(e) {
+		document.getElementById('image').dataset.dragging = false;
+	}
+
+	window.onmousemove = (e) => pageMouseMoveHandler(e);
+	window.onmouseup = (e) => pageMouseUpHandler(e);
 </script>
 
 <div id="vcontainer">
 	<div id="hcontainer">
 		<div id="image-container" class="mobile-pane-image visible">
 			<img
+				id="image"
 				src="/media/@(media.Guid)"
 				width=@media.CurrentUploadedFile.Width
-				height=@media.CurrentUploadedFile.Height/>
+				height=@media.CurrentUploadedFile.Height
+				draggable="false"
+				onmousedown="imageMouseDownHandler(event)"
+				onwheel="imageScrollHandler(event)"/>
 		</div>
 		<div id="metadata-show-button">
 			<a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a>