Skip to content

Commit

Permalink
Media View: scroll to pointer when zooming.
Browse files Browse the repository at this point in the history
  • Loading branch information
PortableProgrammer committed Jan 22, 2025
1 parent 6cd1bd9 commit 7e73b06
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions src/views/media.pug
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ doctype html
html
+head("home")
script(type='text/javascript').
function toggleZoom() {
function toggleZoom(event) {
const percentX = event.offsetX / event.target.width;
const percentY = event.offsetY / event.target.height;
Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
const moveClientX = (event.target.width * percentX) + event.target.offsetLeft - (event.view.visualViewport.width / 2)
const moveClientY = (event.target.height * percentY) + event.target.offsetTop - (event.view.visualViewport.height / 2);
event.target.parentElement.scrollTo(moveClientX, moveClientY);
}

body.media-maximized
div.media-maximized.container
if kind == 'img'
img(src=url onclick=`toggleZoom()`).media-maximized
img(src=url onclick=`toggleZoom(event)`).media-maximized
else
video(src=url controls).media-maximized

0 comments on commit 7e73b06

Please sign in to comment.