Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pinch gestures for pdf.js
<script type="text/javascript">
var gesturesSetUp = false;
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
document.addEventListener('textlayerrendered', function (e) {
if (gesturesSetUp || e.detail.pageNumber !== PDFViewerApplication.page) {
return;
}
var viewer = document.getElementById('viewer');
// http://blog.fspm.jp/2014/06/androidpinch-inoutjsgesturestart.html
var funcGestureStart = function (e) {};
var funcGestureChange = function (e) {};
var funcGestureEnd = function (e) {
if (e.scale < 1.0) {
// User moved fingers closer together
document.getElementById('zoomOut').click()
} else if (e.scale > 1.0) {
// User moved fingers further apart
document.getElementById('zoomIn').click()
}
};
 
// iOS
document.body.addEventListener('gesturestart', funcGestureStart, false);
document.body.addEventListener('gesturechange', funcGestureChange, false);
document.body.addEventListener('gestureend', funcGestureEnd, false);
 
// Android
if (isAndroid) {
var pinchDistance = 0;
var pinchScale = 1;
document.body.addEventListener('touchstart',function(e){
  if(e.touches.length > 1){
    pinchDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
    funcGestureStart(e);
  } else {
    pinchDistance = 0;
pinchScale = 1;
  }
},false);
document.body.addEventListener('touchmove', function (e) {
  if (pinchDistance <= 0 || e.touches.length < 2) {
    return;
  }
  var newDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
pinchScale = newDistance / pinchDistance;
  var event = { scale: pinchScale };
  funcGestureChange(event);
});
document.body.addEventListener('touchend', function (e) {
    if (pinchDistance <= 0 || e.touches.length > 0) {
       return;
    }
var event = {scale: pinchScale};
funcGestureEnd(event);
});
}
gesturesSetUp = true;
}, true);
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
</script>
@hendricius
Copy link

hendricius commented Jan 27, 2017

Very nice, exactly what we were looking for :D. Thanks!

@patcharinn
Copy link

patcharinn commented May 5, 2017

i am try it add code to viewer.html its great !!!! and thank you

@squallstar
Copy link
Author

squallstar commented Sep 19, 2017

no worries! glad to help ;)

@tetpsy
Copy link

tetpsy commented Jan 15, 2018

Thanks @squallstar works great.

@choidroid
Copy link

choidroid commented May 15, 2018

당신의 지식에 감탄합니다.
Thank you for your kindness

@seba47
Copy link

seba47 commented Sep 4, 2018

Worked like a charm! thanks for sharing!

@dsemerida
Copy link

dsemerida commented Sep 5, 2018

thats so good, but on my project not working becauase i use the pdf viewer on iframe , can you help me?

@rulovet
Copy link

rulovet commented Oct 31, 2018

Thank you so much! Just what I was looking for.

@MrSunshyne
Copy link

MrSunshyne commented Mar 14, 2019

I tried the above, it doesn't seem to work. Can you let me know if this still works @squallstar

@RDevR99
Copy link

RDevR99 commented Jun 28, 2021

Not working for me either. What version worked with this code?

@RDevR99
Copy link

RDevR99 commented Jun 29, 2021

Update: It seems the "textlayerrendered" event is not getting fired.
P.S. Even with a small pinch there is a drastic amount of zoom. Any idea why?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment