oppi.li
1include ../mixins/head
2doctype html
3html
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