On component swipe

Code Library
1

Trigger an action when a component is swiped

PRE-REQUISITES

For the following snippets to work as intended you will need to add HammerJS to your app. It gives you a range of options to detect different swipe gestures. To add it to your app follow these steps:

  1. When in Fliplet Studio’s Edit screen, open the Developer Options from the right hand menu
  2. With the Developer Options open, click the Libraries button in the top right corner
  3. In the search field, type in ‘hammer.js’
  4. Click it to add it to the list
  5. Click Save

Certain Fliplet components can detect a swipe movement (such as the slider component or certain menu types). However if you’re looking to add a swipe gesture to an element that doesn’t do this already you’ll need to add an external library to Fliplet. There are many to choose from but we would recommend something like HammerJS.

Once the Hammer JS library is added to your screen you can then apply event listeners to any element you choose. In the example below, we’ll add some code to a container component to let it detect a pan-left or pan-right gesture. For a list of possible gestures please use this link.

To do this, add the container component to your Fliplet app and open the Developer Options.

In the HTML window add an ID to the container component with a name of your choice. In the example below we’ve added an ID with the name of “my-container”.

HTML

<fl-container id="my-container" cid="12345"></fl-container>

Then in the JavaScript window you can write the following:

JavaScript

var myElement = document.getElementById('my-container');

// Create a simple hammer.js instance
// By default, it only adds horizontal recognizers
var mc = new Hammer(myElement);

// Listen to events
// Panning left
mc.on('panleft', function(ev) {
  // Add your custom code here
});

// Panning right
mc.on('panright', function(ev) {
  // Add your custom code here
});

The above code finds an element in the screen HTML with an ID of ‘my-container’. It then starts up hammer.js in the app, attaches it to the selected element and gives it a name of ‘mc’ (yes… MC Hammer… it’s not an accident).

You can then use the new element ‘mc’ to detect gestures such as panning left and panning right and run the code that you give it.

If you wanted to navigate to a different screen when a user pans left or right you could use the following code. When panning left, the user will go to a new screen with an ID of 1234. If they pan right then they will get taken to the screen they were previously on.

JavaScript

// Listen to events
// Panning left will navigate to the screen with the ID 1234
mc.on('panleft', function() {
  Fliplet.Navigate.screen(1234);
});

// Panning right will go back to the previous screen
mc.on('panright', function() {
  Fliplet.Navigate.back();
});