Awesome angular swipe
During a barcamp organized by our enterprise “Linagora” , we have decided to add the swipe feature to our lovely application OpenPaaS, which is built on Angular.js. To do so, we have started testing several JavaScript libraries that add the swipe feature to Angular.js (e.g., hammer.js and interact.js). During these tests, we were not satisfied by the performance of these non-Angularized libraries.
To this end, we have decided to build our own library that leverages “$swipe”. $swipe is an Angular.js built-in service that abstracts the messier details of hold-and-drag swipe behavior, to make implementing swipe-related directives more convenient.
Our library, called awesome-angular-swipe, exposes a directive which allows mobile swipe feature on everything in the DOM. The source code of awesome-angular-swipe can be found at the project page on GitHub.
What is under the hood?
Awesome-angular-swipe provides a directive, called swipe, that can be used as a class or as an attribute. The swipe directive accepts callbacks for right and left swipes. It also accepts attributes for template customization, as shown in the following code:
It is worth noting that swipe-left and swipe-right are functions. Indeed, they represents the actions to be triggered (i.e., callbacks) when the swiping actions is complete. Along the same lines, left-template and right-template are whatever templates you want. That is, developers can customize the template to be shown behind each element while swiping.
How to use?
As you have seen, it is really easy to use the awesome-angular-swipe library. If you want only to perform some actions after swiping, all you have to do is to provide a similar code:
Along the same lines, if you want to customize the template shown behind the element while swiping, you have to provide a similar code:
Where leftTemplate.html/rightTemplate.html should have a similar code:
A demo page is accessible from here, where you can test this library on your smartphone. It worth noting that if you want to run this demo on your desktop, the browser must simulate mobile devices from developer tools. That’s it. Happy coding!
Summary
As you have noticed, you can easily add the swipe feature to your Angular.js application by using our awesome-angular-swipe. This library is not going to over-charge your Angular.js application since that it leverages a built-in Angular.js service.
For more information about this library, please have a look on the example folder on our GitHub project. Please note that this library is coded with ❤ by Linagora folks, so check our website www.linagora.com out in order to catch up with our latest news and job opportunities.
