I'm using hammer.js to implement some touchscreen functionality on a pet project.
The desired product is a map that can be dragged around and zoomed in and out with a touchscreen. I got it working, and everything is nice except the pinchin/pinchout mechanics are very, very slow. There is a very noticeable delay between when the pinch happens, and when the event fires.
Here's the relevant JQuery/JS code:
EDIT: Code is way nicer (and faster) now per Simon's suggestions. Here's the finished version
$(document).ready(function(){
//Function which simulates zoom on the map on pinchin/pinchout
$('#map').hammer()
.on("pinchin", function(e) {
var scale = $(this).css('transform');
scale = (scale == null ? $(this).css('-webkit-transform') : scale);
scale = (scale == null ? $(this).css('-ms-transform') : scale);
scale = scale.split(" ");
scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
if(scale > 1) {
scale = ('scale(' + (scale - .1).toString() + ')');
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
}
})
.on("pinchout", function(e) {
var scale = $(this).css('transform');
scale = (scale == null ? $(this).css('-webkit-transform') : scale);
scale = (scale == null ? $(this).css('-ms-transform') : scale);
scale = scale.split(" ");
scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
if(scale < 5) {
scale = ('scale(' + (scale + .1).toString() + ')');
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
}
});
});