pdf.js should support pinch-zooming on OS X

Created on 9 Apr 2012  路  6Comments  路  Source: mozilla/pdf.js

pdf.js should support pinch-zooming in a more interesting way than the browser's default zoom controls on Mac OS X (and other platforms that support MozMagnifyGesture). For instance, Preview.app (and Safari's built in PDF viewer) zooms very smoothly, apparently not in discretized sizes, when one applies the pinch gesture.

This issue would be a pull request, but I did a handful of research on it tonight, and it's somewhat harder than it looks. Notably, web-like content is explicitly disallowed from seeing MozMagnifyGesture since it is not standard (see the base/content/browser.js code for this, and the relevant discussion in bug 412486); extension-like content (chrome) is permitted to see it, but requires hijacking of some code deep in browser.js.

The first thing I would think of would be calling into gGestureSupport to unregister its handlers in PdfStreamConverter.js, in onStartRequest. But that seems pretty dubious -- and anyway, we don't have a callback to put gGestureSupport's handlers back later when we navigate away from the PDF.

So, barring a change in Firefox itself, I'm not sure I see an easy way to do this. Perhaps the Content folks have more info on how extensions are meant to use this (if at all)? Otherwise, if we want this feature, we might want to be aiming in the direction of poking upstream to make that event interface standardized.

Most helpful comment

thanks everyone from Mozilla for making this happen! I know everyone is asking for pinch to zoom on iPad (that included me), yet after searching all the issue and didn't find the answer. I decide to do it myself and found a working solution with another project on github (you gotta like open source community) https://github.com/eightmedia/hammer.js

below is the code i added to "viewer.html" (just before the closing head tag) to add pinch to zoom

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="hammer.js"></script>
<script type="text/javascript" src="jquery.hammer.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var HammerPinch = function (ev) {
            if (ev.scale > 1){
                PDFView.zoomIn();
            } else {
                PDFView.zoomOut();
            }
        };
        $('#viewer').hammer(
            {  
                prevent_default: false, //allow native vertical scroll of the pdf
                drag : false,  //prevent hammer js hijack the veritcal scroll touch event 
                swipe : false,  
                tap : false,
                hold : false 
            }
        ).bind('transform', HammerPinch);
    });
</script>

All 6 comments

Dup of #1513, and the same base issue as #902, better explained though, so I'd rather close #1513 in favor of this one. (Not like I have a vote anyhow)

@jwise, thanks a lot for raising this one! I didn't knew about the background of gestures, and your explanations helped a lot to now know where to get started/what the issue is :)

From https://bug456520.bugzilla.mozilla.org/attachment.cgi?id=344187

+// As per bug #412486, web content must not be allowed to receive any
+// simple gesture events. Multi-touch gesture APIs are in their
+// infancy and we do NOT want to be forced into supporting an API that
+// will probably have to change in the future. (The current Mac OS X
+// API is undocumented and was reverse-engineered.) Until support is
+// implemented in the event dispatcher to keep these events as
+// chrome-only, we must listen for the simple gesture events during
+// the capturing phase and call stopPropagation on every event.

Seems like the really only way to get access to the events is by adding some code to the extension and forward the events to the browser/user content. I think we should get this going, as it will hopefully make people like the feature and this makes the standardization process get started.

Dup of #1513, and the same base issue as #902, better explained though, so I'd rather close #1513 in favor of this one. (Not like I have a vote anyhow)

Agreed. Closing this one and make a reference to the issues other issues.

Oops! I searched three or four days ago to see if anyone had submitted this, but in the mean time, someone did... oh well.

Oops! I searched three or four days ago to see if anyone had submitted this, but in the mean time, someone did... oh well.

@jwise, no worries :) It's worth knowing you would like to see this feature in PDF.JS and the information you've provided how things are handled in Firefox were very helpful for me!

thanks everyone from Mozilla for making this happen! I know everyone is asking for pinch to zoom on iPad (that included me), yet after searching all the issue and didn't find the answer. I decide to do it myself and found a working solution with another project on github (you gotta like open source community) https://github.com/eightmedia/hammer.js

below is the code i added to "viewer.html" (just before the closing head tag) to add pinch to zoom

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="hammer.js"></script>
<script type="text/javascript" src="jquery.hammer.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var HammerPinch = function (ev) {
            if (ev.scale > 1){
                PDFView.zoomIn();
            } else {
                PDFView.zoomOut();
            }
        };
        $('#viewer').hammer(
            {  
                prevent_default: false, //allow native vertical scroll of the pdf
                drag : false,  //prevent hammer js hijack the veritcal scroll touch event 
                swipe : false,  
                tap : false,
                hold : false 
            }
        ).bind('transform', HammerPinch);
    });
</script>

I guess #2582 should be linked.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandonros picture brandonros  路  3Comments

timvandermeij picture timvandermeij  路  4Comments

kleins05 picture kleins05  路  3Comments

sujit-baniya picture sujit-baniya  路  3Comments

AlexP3 picture AlexP3  路  3Comments