diff options
| -rw-r--r-- | Pages/ViewMedia.razor | 46 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor.css | 34 |
2 files changed, 65 insertions, 15 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> diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css index 60b04be..924691d 100644 --- a/Pages/ViewMedia.razor.css +++ b/Pages/ViewMedia.razor.css @@ -17,23 +17,29 @@ div#hcontainer { } div#image-container { - box-sizing: border-box; - flex: 1 0 0; - height: 100%; - overflow: auto; - padding: var(--size-default-gap); - width: 100%; + align-items: center; + box-sizing: border-box; + cursor: grab; + display: flex; + flex: 1 0 0; + height: 100%; + justify-content: center; + overflow: hidden; + padding: var(--size-default-gap); + width: 100%; +} + +div#image-container:active { + cursor: grabbing; } div#image-container > img { - display: block; - left: 50%; - max-height: 100%; - max-width: 100%; - object-fit: contain; - position: relative; - top: 50%; - transform: translate(-50%, -50%); + display: block; + max-height: 100%; + max-width: 100%; + object-fit: contain; + transition: transform 0.1s ease-out; + user-select: none; } div#metadata-show-button { |