Swipe-Li

swipable list elements

DemoSource

Recently we at rangle.io had a chance to work on a short project. The app was largely a functional prototype built in 1 week. One of the requirements was to build an interface to allow the user to quickly accept or reject items. We came up with swipe-li: a three pane swipeable <li> element. Swipe right for accept. Swipe left for reject.

Most of the swiping code is taken from the hammer.js carousel example. To support the directive I built a hammerRemote service. This delegate service allows you to register/destroy/control multiple instances of hammer.

<div
  swipe-li
  disabled=""
  intent="true"
  accept="done(item)"
  reject="skip(item)"
  main-content="'sample-content.html'"
  accept-content="'accept-content.html'"
  reject-content="'reject-content.html'"
  reset-to-content="false"
></div>

Where:

  • disabled: disable the swipe-li element
  • intent: user intent detection, if the user drags the pane > 50% of the width - the swipe will auto complete
  • accept: accept callback
  • reject: reject callback
  • main-content: template for the start pane
  • accept-content: template for the accept pane
  • reject-content: template for the reject pane
  • reset-to-content: should the swiped pane reset back to start pane on complete

Questions, Comments or Suggestions? Open an Issue

Creative coding from a front-end developer's perspective

My goal with this blog is to go beyond the basics. Breakdown my sketches. And make animation math approachable. The newsletter is more of that.

Hear about what's got my attention—new tools and techniques I've picked up. Experiments I'm working on. And previews of upcoming posts.