Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 16:54:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

add pan and zoom controls to image viewer

Browse Source
This commit is contained in:
Vladimir Mandic
2023-07-05 09:47:07 -04:00
parent 3eff89f1ab
commit 65f036e42a
6 changed files with 1797 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/imageViewer.js
+7 -12
View File
@@ -149,9 +149,8 @@ onAfterUiUpdate(() => {
});
document.addEventListener('DOMContentLoaded', () => {
// const modalFragment = document.createDocumentFragment();
const modal = document.createElement('div');
modal.onclick = closeModal;
// modal.onclick = closeModal;
modal.id = 'lightboxModal';
modal.tabIndex = 0;
modal.addEventListener('keydown', modalKeyHandler, true);
@@ -182,21 +181,17 @@ document.addEventListener('DOMContentLoaded', () => {
modalSave.title = 'Save Image(s)';
modalControls.appendChild(modalSave);
/*
const modalClose = document.createElement('span');
modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '×';
modalClose.onclick = closeModal;
modalClose.title = 'Close image viewer';
modalControls.appendChild(modalClose);
*/
const modalImage = document.createElement('img');
modalImage.id = 'modalImage';
modalImage.onclick = closeModal;
modalImage.tabIndex = 0;
modalImage.addEventListener('keydown', modalKeyHandler, true);
modal.appendChild(modalImage);
modalImage.onload = () => panzoom(modalImage, { zoomSpeed: 0.025, minZoom: 0.25, maxZoom: 4.0 });
let drag = false;
modalImage.addEventListener('mousedown', () => drag = false);
modalImage.addEventListener('mousemove', () => drag = true);
modalImage.addEventListener('mouseup', () => { if (!drag) closeModal(); });
// modalImage.onclick = closeModal;
const modalPrev = document.createElement('a');
modalPrev.className = 'modalPrev';