diff options
Diffstat (limited to 'Pages/ViewMedia.razor')
| -rw-r--r-- | Pages/ViewMedia.razor | 46 |
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> |