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