Integrating Hammer.js touch gestures with jQuery SVG zoom library

Question

I am trying to incorporate jquery.zoomPanTouchSVG and hammer.js to create a svg zoom+pinch to zoom gestures. The problem is that I unable to understand the code structure of jquery.zoompantouchSVG library javascript. I found that the function "zoom(direction)" works for zooming and i am able to bind it with a button click.

$('#' + zoomInBtnID).click(function() {
            zoom('in');
        });
        $('#' + zoomOutBtnID).click(function() {
            zoom('out');

The problem arises when I try to bind this function with the "pinchin" and "pinchout" touch gestures of Hammer.js library. I cannot call the "zoom" function through a javascript code in my custom.js file.

var element = document.getElementById("mySVG");
  var hammertime = Hammer(element).on("pinchin", function(event) {
          console.log("pinch in event");
          zoom('out');
      });
  var hammertime = Hammer(element).on("pinchout", function(event) {
          console.log("pinch out event");
          zoom('in');
      });

I am getting the console messages in the above code but "zoom" is being shown as undefined in the logs when i place the above code out of the zoompantouchSVG library JS.

Please suggest how to call the "zoom" function outside the library JS so that I can implement zoom by hammer.js touch gestures.

Answer 1

If you want to do it like that, then this should work:

$(element).hammer().on("pinchin", function(evt) {
  $('#' + zoomInBtnID).trigger("click");
});

where zoomInBtnID is the reference to the id of "zoom in" button which - according to the source - is in format 'tZPSVGZoomIn' + tzpIndex;