diff options
Diffstat (limited to 'src/app.js')
| -rw-r--r-- | src/app.js | 7 |
1 files changed, 5 insertions, 2 deletions
@@ -620,7 +620,7 @@ function imageViewer() { // off, so the picture does its own. Only the first-mounted nodes keep these // listeners: later renders morph into them, and the img is left out of the // morph so its transform survives a background render. -function attachZoom(box, img) { +function attachZoom(box, img, { wheel = true } = {}) { img._skipMorph = true; const MAX = 5, pts = new Map(); let s = 1, x = 0, y = 0, pinch = null, pan = null, moved = false; @@ -634,6 +634,8 @@ function attachZoom(box, img) { img.style.transition = animate ? 'transform .2s ease' : 'none'; img.style.transform = s === 1 && !x && !y ? '' : `translate(${x}px, ${y}px) scale(${s})`; img.style.cursor = s > 1 ? 'grab' : ''; + // zoomed, the finger pans the picture; at 1× the touch is the page's (a pager's swipe) + img.style.touchAction = s > 1 ? 'none' : ''; }; // scale to ns keeping the picture point under (cx, cy) where it is const zoomAt = (ns, cx, cy) => { @@ -693,7 +695,7 @@ function attachZoom(box, img) { if (e.target.closest('.lightbox-x')) return; if (moved) { moved = false; e.stopImmediatePropagation(); e.preventDefault(); return; } }, true); - box.addEventListener('wheel', (e) => { + if (wheel) box.addEventListener('wheel', (e) => { e.preventDefault(); zoomAt(s * Math.exp(-e.deltaY * 0.002), e.clientX, e.clientY); clamp(); apply(false); @@ -6243,6 +6245,7 @@ const ctx = { parseAmount: parseField, worthLine, openImage: (src) => { ui.lightbox = src; render(); }, + attachZoom: (box, img, opts) => attachZoom(box, img, opts), // What woke this run, if anything did, and how to say we're finished. // Both read through a closure: ctx is built before these are defined, and // a bare `wakeDone` shorthand captured the binding while it was still |