ben/ben.wiegand.pw
1
0
Fork 0
Code Issues Pull Requests Activity

close image viewer on escape key

Browse Source
This commit is contained in:
Benjamin Wiegand 2024-09-08 12:45:17 -07:00
parent dc5acea909
commit ca036ad6ed
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
www/image-modal.js
View File

@ -5,6 +5,7 @@ for (const image of images) {
const close = image.querySelector('.close')
const lazy_image = image.querySelector('.lazy-image')
const zoom = modal.querySelector('input')
const open = image.querySelector('input');
// for pan
let grabbed = false;
@ -22,18 +23,18 @@ for (const image of images) {
lazy_image.addEventListener('mouseup', () => {
grabbed = false;
});
lazy_image.addEventListener('mousedown', (e) => {
lazy_image.addEventListener('mousedown', e => {
grabbed = true;
startX = modal.scrollLeft + e.pageX;
startY = modal.scrollTop + e.pageY;
// set stuff for zoom
clickX = e.clientX - lazy_image.offsetLeft;
clickY = e.clientY - lazy_image.offsetTop;
initW = lazy_image.clientWidth;
initH = lazy_image.clientHeight;
});
lazy_image.addEventListener('mousemove', (e) => {
lazy_image.addEventListener('mousemove', e => {
if(!grabbed) return;
modal.scrollLeft = startX - e.pageX;
modal.scrollTop = startY - e.pageY;
@ -51,12 +52,17 @@ for (const image of images) {
lazy_image.clientWidth / initW,
lazy_image.clientHeight / initH
);
console.log(zoom_factor);
x = clickX * zoom_factor - (window.innerWidth / 2);
y = clickY * zoom_factor - (window.innerHeight / 2);
console.log('zoom 2 ' + x + ', ' + y);
modal.scrollLeft = x;
modal.scrollTop = y;
}
})
}
// close image on escape key
document.addEventListener('keydown', e => {
if (e.key == 'Escape') open.checked = false;
});
}