oppi.li
+7
-2
src/views/media.pug
+7
-2
src/views/media.pug
···
3
html
4
+head("home")
5
script(type='text/javascript').
6
-
function toggleZoom() {
7
Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
8
}
9
10
body.media-maximized
11
div.media-maximized.container
12
if kind == 'img'
13
-
img(src=url onclick=`toggleZoom()`).media-maximized
14
else
15
video(src=url controls).media-maximized
···
3
html
4
+head("home")
5
script(type='text/javascript').
6
+
function toggleZoom(event) {
7
+
const percentX = event.offsetX / event.target.width;
8
+
const percentY = event.offsetY / event.target.height;
9
Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
10
+
const moveClientX = (event.target.width * percentX) + event.target.offsetLeft - (event.view.visualViewport.width / 2)
11
+
const moveClientY = (event.target.height * percentY) + event.target.offsetTop - (event.view.visualViewport.height / 2);
12
+
event.target.parentElement.scrollTo(moveClientX, moveClientY);
13
}
14
15
body.media-maximized
16
div.media-maximized.container
17
if kind == 'img'
18
+
img(src=url onclick=`toggleZoom(event)`).media-maximized
19
else
20
video(src=url controls).media-maximized