Skip to content

Commit

Permalink
Bug 1643508 - Disable touch-based pinch zooming on pdf.js.
Browse files Browse the repository at this point in the history
Currently using a touchscreen with pdf.js doesn't work so well. In Firefox,
with apz.allow_zooming = false (default on current release/beta), it does a
reflow zoom which makes the UI elements bigger. And with apz.allow_zooming = true
(default on current Firefox nightly), or in Chrome, it does a smooth pinch-zoom
but that also scales up the entire UI. Neither of these is a particularly good
experience, so this patch just disables any multi-touch gestures. Touch-based
panning (which involves a single touch point) is left unaffected.
  • Loading branch information
staktrace committed Aug 13, 2020
1 parent 7edc5cb commit c6e5686
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions web/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -1760,6 +1760,9 @@ const PDFViewerApplication = {

window.addEventListener("visibilitychange", webViewerVisibilityChange);
window.addEventListener("wheel", webViewerWheel, { passive: false });
window.addEventListener("touchstart", webViewerTouchStart, {
passive: false,
});
window.addEventListener("click", webViewerClick);
window.addEventListener("keydown", webViewerKeyDown);
window.addEventListener("keyup", webViewerKeyUp);
Expand Down Expand Up @@ -1822,6 +1825,9 @@ const PDFViewerApplication = {

window.removeEventListener("visibilitychange", webViewerVisibilityChange);
window.removeEventListener("wheel", webViewerWheel, { passive: false });
window.removeEventListener("touchstart", webViewerTouchStart, {
passive: false,
});
window.removeEventListener("click", webViewerClick);
window.removeEventListener("keydown", webViewerKeyDown);
window.removeEventListener("keyup", webViewerKeyUp);
Expand Down Expand Up @@ -2519,6 +2525,20 @@ function webViewerWheel(evt) {
}
}

function webViewerTouchStart(evt) {
if (evt.touches.length > 1) {
// Disable touch-based zooming, because the entire UI bits gets zoomed and
// that doesn't look great. If we do want to have a good touch-based
// zooming experience, we need to implement smooth zoom capability (probably
// using a CSS transform for faster visual response, followed by async
// re-rendering at the final zoom level) and do gesture detection on the
// touchmove events to drive it. Or if we want to settle for a less good
// experience we can make the touchmove events drive the existing step-zoom
// behaviour that the ctrl+mousewheel path takes.
evt.preventDefault();
}
}

function webViewerClick(evt) {
// Avoid triggering the fallback bar when the user clicks on the
// toolbar or sidebar.
Expand Down

0 comments on commit c6e5686

Please sign in to comment.