Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 1643508 - Disable touch-based pinch zooming on pdf.js.

Browse Source 
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.
This commit is contained in:
Kartikaya Gupta 2020-08-12 15:09:42 -04:00
parent 7edc5cb79f
commit c6e5686b6a
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/app.js
View File

@ -1760,6 +1760,9 @@ const PDFViewerApplication = {
window.addEventListener("visibilitychange", webViewerVisibilityChange); window.addEventListener("visibilitychange", webViewerVisibilityChange);
window.addEventListener("wheel", webViewerWheel, { passive: false }); window.addEventListener("wheel", webViewerWheel, { passive: false });
window.addEventListener("touchstart", webViewerTouchStart, {
passive: false,
});
window.addEventListener("click", webViewerClick); window.addEventListener("click", webViewerClick);
window.addEventListener("keydown", webViewerKeyDown); window.addEventListener("keydown", webViewerKeyDown);
window.addEventListener("keyup", webViewerKeyUp); window.addEventListener("keyup", webViewerKeyUp);
@ -1822,6 +1825,9 @@ const PDFViewerApplication = {
window.removeEventListener("visibilitychange", webViewerVisibilityChange); window.removeEventListener("visibilitychange", webViewerVisibilityChange);
window.removeEventListener("wheel", webViewerWheel, { passive: false }); window.removeEventListener("wheel", webViewerWheel, { passive: false });
window.removeEventListener("touchstart", webViewerTouchStart, {
passive: false,
});
window.removeEventListener("click", webViewerClick); window.removeEventListener("click", webViewerClick);
window.removeEventListener("keydown", webViewerKeyDown); window.removeEventListener("keydown", webViewerKeyDown);
window.removeEventListener("keyup", webViewerKeyUp); window.removeEventListener("keyup", webViewerKeyUp);
@ -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) { function webViewerClick(evt) {
// Avoid triggering the fallback bar when the user clicks on the // Avoid triggering the fallback bar when the user clicks on the
// toolbar or sidebar. // toolbar or sidebar.