Touch has become an integral part of how we interact with our devices. It is the primary and most intuitive way of interacting with smartphones, tablets, Chromebooks, hybrid laptops and other touchscreen devices. Toss up your device to a five-year-old and they would quickly figure out how to operate it.

Web browsers, however, were initially designed for big screens with pointer devices. Even today only basic touch events – touchstart, touchend, touchcancel, and touchmove are recognized by them out of the box.

To implement advanced touch gestures like multiple taps, pan, swipe, pinch, and rotate, we need to write custom logic using the low-level touch APIs of JavaScript. This would typically involve measuring the distance traveled by the touch points, recording their timestamps, determine any rotations and then identify the type of event using all this information.

A better option is to use a library to make things easier for us. Hammer.js is one such popular library that we are going to explore in this article. Later, we will see how we can use this library in Drupal to enhance the user experience.

What is Hammer.js?

“Hammer is an open-source library that can recognize gestures made by touch, mouse, and pointer events.” – hammerjs.github.io

It is a popular JavaScript library that can be used to build web applications that require performing actions like panning, swiping, rotating, and zooming on touch gestures. We can use this library to add advance touch event listeners and serve a native application like behavior in their web counterparts. Being a widely popular open-source library, it provides support for a majority of web browsers and platforms.

Benefits of using Hammer.js

If you feel skeptical about using this library, here are some of the key benefits of using this library that you should consider before building your own custom solution.

• Open Source 
• Cross-browser and platform compatibility
• Easy to use
• Support for multi-touch gestures
• Custom Recognizers
• No dependencies
• Integration with jQuery and Angular

Touch gestures recognized by Hammer.js

Following are the touch gestures recognized by Hammer.js. Each of these touch gestures declares a set of events and configurable options. We can manipulate them and create our own gestures as well. You may refer the official documentation for more details.

1. Pan
   Pan is a superset of Swipe as it may involve translational movement in any direction. It can be used to move across a zoomed in or a large view. Moving across the map in Google Maps is a perfect example of using Pan touch gesture.
   
   You can alter the recognized direction which is set to DIRECTION_ALL by default and can also control the sensitivity by modifying its threshold.
    
2. Pinch
   A pinch is a multi-touch gesture which involves at least two touch points moving towards or away from each other. Again, Google Maps is a perfect example of this. When we zoom in or out using our fingers, the pinch gesture is being utilized.
   
   You can configure the number of touch points and their sensitivity by changing pointers and threshold options.
    
3. Press
   Press is recognized when we hold our finger or pointer for a certain amount of time. This is usually used to pop up a contextual menu or more options for some item. For example, if you press the saved articles in an app like Pocket or a chat in WhatsApp, it brings out more options for the saved article or the chat. You may implement something similar in your web application.
   
   Again, you can configure the threshold and the amount of time in milliseconds that recognizes the event.
    
4. Rotate
   Rotate is recognized when multiple touch points rotate around each other in a circular motion. Image gallery and Google Maps are the best examples of this. 
   
   This gesture is disabled by default in Hammer. You may configure the number of touch points and threshold.
    
5. Swipe
   Swipe identifies translational movements in horizontal and vertical directions. This can be used to change or switch between different views such as moving across tabs, dismissing cards in Google Now or swiping right or left in Tinder.
   
   By default, only horizontal swipes are recognized by Hammer. You may configure the direction, threshold and the velocity of the swipes.
    
6. Tap
   Taps are similar to click events, however, the biggest difference is that a tap event is called earlier than standard click events. By using Hammer you can eliminate the famous 300 ms delay on mobile devices. 
   
   You can also implement multiple taps simply by configuring the taps option and specify the intervals between them. Double tapping to like an image on Instagram is perhaps the best example of this.

Getting started with Hammer.js

Using Hammer.js is as simple as making an object, specifying the element and configuring the options as per the needs. Check out the Github page of the library for documentation and some neat examples.  

var element = document.getElementById("my_element");
var ham = new Hammer(element);
ham.get('press').set({ time: 500 });
ham.on('press', function(event) {
    // do something
});

How to use Hammer.js in Drupal?

To use HammerJS library, we need to declare it in the .libraries.yml file and attach it to the rendered array. Read our blog on how to use third-party libraries in Drupal here.

In Drupal 8, there is a contributed module Hammer.js, which can be used to declare the library, and manage its status from system reports. It also provides a drush command to download and place the library in the libraries directory of the Drupal site.

However, this module is not mandatory, you can omit this and use the Hammer.js library just like any other third-party library. A better alternative is to use a dependency manager like bower or npm.

$ bower install hammerjs --save

or

$ npm install hammerjs --save

You may also refer to the implementation of Responsive and off-canvas menu module to better your understanding.

Conclusion

By using Hammer.js, we can bring the native-like experience to web applications to enhance the user experience. It provides cross-browser support and takes away a lot of complexity in implementing touch and pointer gestures. Leveraging it in Drupal is easier than ever due to the Library API of Drupal 8.