From 7e73b06afc434fe6a62166ead138345010c22b8e Mon Sep 17 00:00:00 2001 From: PortableProgrammer Date: Sat, 11 Jan 2025 20:11:28 +0000 Subject: [PATCH] Media View: scroll to pointer when zooming. --- src/views/media.pug | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/views/media.pug b/src/views/media.pug index e945704..3a59542 100644 --- a/src/views/media.pug +++ b/src/views/media.pug @@ -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