Configure gestures for the Tealeaf Web SDK

To capture touch gestures in your web application, perform the following tasks:

1. Integrate the hammer.js gestures library with your application.
2. Take the gestures module (tealeaf.gestures.js) from Web SDK release bundle and add it to your Web SDK JS file. Ensure the module is added at the end of the library source (tealeaf.js or tealeaf.min.js) but before the configuration and invocation of TLT.init (defaultconfiguration.js).
3. Update the Web SDK configuration to enable the gestures module and optionally add a module-specific configuration.
4. SaaS customers need to add the following rule to enable gestures in the replay.

<HostProfile name="www.sample.com">
    <SimulateUIEvents value=".*" uiEvents="gestures,resize,valuechange,click,mouseup,scroll"/>
</HostProfile>

hammer.js library

The Tealeaf Web SDK uses the hammer.js library to enable gesture capture. The hammer.js library can be found and downloaded through GitHub, here: https://github.com/hammerjs/hammer.js/tree/1.1.x

📘

Note:

hammer.js version 2 and above are not supported. The Web SDK only supports hammer.js version 1.X.X.

hammer.js limitations

• hammer.js does not support Internet Explorer 8. If your customer base is using Internet Explorer 8, do not load hammer.js.
• hammer.js depends on touch events in the browser to work. Touch events are canceled in chrome =<35, the native android browser, and webviews in android apps. Because of this the end points of gesture events are not accurate and both the start and end coordinates of pinches and swipes are reported as the same. Because events are canceled, slower swipes may also not be captured. the option dragMinDistance sets how many pixels a finger must be moved along the screen before the swipe is captured. By default the value is set to 10. Because of the touch event canceling in the mentioned browsers the swipe event might be canceled before it reaches the 10 pixel threshold.
• There is a limitation with mobile Safari on iOS7. During resize events, clientX and clientY can be reported as negative values causing events to replay in the wrong position.
• To replay events correctly, window.innerWidth must be updated correctly. To ensure that the width is set correctly, include the following meta tag in the head of your application pages:
  <meta name="viewport" content="width=device-width"
• Pinch gestures that cause web content to scale by "zoom-in/zoom-out" are currently not supported and may not replay correctly for certain mobile browsers.

Gestures configuration object

To enable the Gestures module, add the following module specific configuration object to the core configuration:

"core": {
    "modules": {
        "gestures": {
            "enabled": true,
            "events": [{
                    "name": "tap",
                    "target": window
                },
                {
                    "name": "hold",
                    "target": window
                },
                {
                    "name": "drag",
                    "target": window
                },
                {
                    "name": "pinch",
                    "target": window
                },
                {
                    "name": "release",
                    "target": window
                },
                {
                    "name": "unload",
                    "target": window
                }
            ]
        }
    }

}

Add to your page

To replay events correctly, window.innerWidth must be updated correctly. To insure that the width is set correctly, include this code in the head for your page.

<meta name="viewport" content="width=device-width">

Example Gestures options configuration

This example shows the gestures module configuration option for specifying the maximum interval (in milliseconds) between two successive tap events so that they are processed as a doubletap gesture.

"modules": {
    "gestures": {
        "options": {
            "doubleTapInterval": 300
        }
    }
}

For information about the types of Gesture events captured, see Capture gestures.