Touch gestures with hammer.js (part 2)
[music] [music] Hello and
welcome to Web Dev Break. I'm Eliot Sykes and you're watching episode 9: Touch gestures with
hammer.js part 2 recorded in May 2014. In part 1, we got as far as using hammer.js to drag list
items to the right with touch. In part 2, we're going to finish our example by having the list items
deleted when we swipe and release using a finger. Let's get back to it. We're coding in Chrome with
touch emulation turned on. So how do we delete these list items, rather than just move them to the
right? Hammer.js has a swiperight gesture which gets fired when both the following things happen in
sequence. 1. Your finger moves across the screen at a fast enough speed that exceeds hammer.js'
swipeVelocityX option default value, and then 2. You're finger is lifted from the screen so as to
trigger hammer.js' release event. When this sequence happens, hammer.js will fire the swiperight
event and then we can hook into that to call a callback that will delete the list item for us. The
configuration options for a hammer.js touch control are passed in as the second argument to the
Hammer constructor. Let's just show that. We'll pass in our swipeOptions. I'm going to use the
options as recommended on the tips and tricks page of the hammer.js wiki. It recommends using these
options for horizontal swipe and drag gestures. The swipe options are dragLockToAxis is true, and
dragBlockHorizontal is true. These get passed in as the 2nd argument to the constructor. To detect
for other gestures, like swiperight, we chain these on() function calls to our touchControl. That
looks like this. What's going to happen here is when a swiperight happens the deleteElement function
(that we haven't written yet) is going to be called. Let's write deleteElement with a console.log
call in it. We'll put a console.log call in dragElement too. I'll show you that after a few
sustained drag events that a swipe event is called. Let's look at the console. I'm going to do a
swipe here. As you can see we had 5 drag events called, and then a swipe at the end. Getting those
swipes to be detected is a little easier on a touchscreen. Let's have a look at what we need to do
in deleteElement. We'll get rid of these console.logs. So when we delete an element, I want to set
the display style property to none for that list item. That'll hide it off screen, and allow the
items below it to move up. This is what the code will look like. Let's walkthrough this code. We get
the list element we want to delete from event.target here. Then we call event.gesture.stopDetect()
on the swipe. We do that because without it I discovered you get some odd behaviour sometimes. When
you delete an element the touch detection on it continues to run. I started doing things like
deleting the body or the root html element. I think it's best to call stopDetect and the docs say
something along those lines too, especially for when you delete an element. Don't detect touch
gestures unnecessarily, and all stopDetect() if you can. Then what we do is set the display property
to none on the element. That'll make the list element disappear. Let's refresh the page and try
doing some swipes and see if our deleteElement() works. So there we swiped all of the list items
away. Getting the swipes detected in Chrome can be a little bit tricky. You do need to give your
finger a bit of a run up to get upto speed. If that's causing problems, even on the touchscreen, you
can adjust the hammer.js constructor options for swipe. You can adjust swipeVelocityX. Find a
velocity that works for you. Try lowering swipeVelocityX. We're almost there now. The swipes are
deleting the elements, but we've got this little problem here. If we do a drag, and we don't
actually swipe, the elements get left out of position like this. It'd be nice if the elements just
moved back to their original position here with their left style property set to zero. Let's see how
we would do that. Just refresh the page. What we'd want to do is detect yet another gesture with
hammer.js. The release gesture. Detecting the release gesture looks like this. Now the release
gesture happens when you stop touching the screen by lifting your finger off. Here, it'll call our
resetElement callback. Let's write that callback. In the resetElement callback all we do is get the
target from event.target. That'll be our list item. We reset the left property that we originally
changed up here when we were dragging in dragElement. We were setting the left style property to
event.gesture.deltaX pixels. We set that back down to zero here. Refresh the page. Move the dev
tools out of the way for now. See how that works for us. If I just drag the list items slowly and
release, they'll snap back into position. We can still swipe to delete. Now that you know how to
make swipe-to-delete work with hammer.js, you can figure out how to add other touch gestures to your
apps. See the hammer.js source for a few examples of other gestures you can implement. For example,
there's this pull-to-refresh demo. I'll just demonstrate it now. Pulling-to-refresh changes the
image. I'll put a link to those examples in the show notes. Please take a look at the getting
started page on the hammer.js wiki. Read through that, have a look at the available gesture events.
You've got hold, tap, doubletap, and quite a few others you can do. You'll also want to take a look
at gesture options. These are a list of all the options you can pass into the Hammer constructor,
along with their default values. Also take a look at event data. This is about the event argument
that gets passed to the callbacks, and also about the gesture attribute that is on that event, which
is specific to hammer.js. All of these attributes listed down here are attributes of event.gesture.
This page is well worth a read. One final thing I'll say about touch on the web is to just
re-iterate: be sure you do want to spend the time it takes to add and maintain touch gestures for
your app. If you decide to go ahead, keep an eye on the issue tracker for whatever touch gesture
library you go with. Just to make sure that popular devices are still supported and there's no
breaking changes that have been introduced in new versions. Of course check that whenever you update
your library version too. Ideally you'd test all of the devices that are favoured by your users and
many more devices that are perhaps not so in favour. Just to make sure that everything regarding
touch is working okay, and the scroll performance is alright. Bear in mind that emulators such as
iOS simulator and Chrome's touch emulation can give you a false impression of how your app is
working. You don't really know for sure until you use the actual, physical device with your app,
rather than the emulator. Sometimes, especially budget devices can have performance problems that
aren't apparent when you're using an emulator, so please bear that in mind. If you do encounter
performance problems during testing your app's touch gestures, then there are things you can do to
fix that and optimize performance. So, don't give up on touch if you do hit performance problems
early on, you may be able to remedy them. For all of this episode's links and to try out the demo
for yourself, see the show notes at webdevbreak.com. For those of you who've asked how long I can
keep giving you these screencasts for free, I just want to say thank you for your support. My
intention is to carry on producing the weekly free screencasts. I'll also start to produce and
charge for advanced training and screencasts that'll go more in-depth on the topics you want to
learn about. I want these to be in addition to the free weekly screencasts, which I'm keen to keep
making for you. So...until you can buy my stuff, another good way to support Web Dev Break is to
join the mailing list. It's free, and as a thank you for joining the mailing list, this week the
subscribers got early access to this video. Soon, all of the fantastic people on the mailing list
will start getting bonus tips and extras that I can't fit into the regular screencasts. If you're on
the mailing list you'll also get a discount on the advanced screencasts and training I offer in the
future. [music starts] So to join us on the mailing list, just go to webdevbreak.com and enter your
email in the form at the bottom of the home page. Ok, that's it for this episode. Thank you for
watching and see you next time! [music ends]
Watch part one of the touch gestures with hammer.js tutorial
and try the completed swipe-to-delete exercise .
Hammer.js wiki sections and pages referenced in the screencast:
getting started guide ,
gestures available
out-of-the-box (e.g. swipe, doubletap),
hammer.js configuration
options & default values (such as swipeVelocityX),
properties of
event.gesture (e.g. event.gesture.deltaX)
event.gesture.stopDetect()
advice
and
tips & tricks (including the
recommended horizontal swipe and drag config).
Hammer.js API docs
Hammer.js examples:
pull-to-refresh ,
carousel , and
more .
Save time. Stay up-to-date. Subscribe.
Hi —I’m Eliot. As a web developer I
often feel like I’m being buried under an endless
avalanche of all the latest things I don’t know:
Articles & APIs . Browser changes & blog posts. Tips, tools & techniques.
It’s work to stay on top of it all.
To help others—and myself —beat this feeling, I research and produce
short knowledge-packed screencasts.
In every episode I break a current web development topic down to
its essentials and demonstrate how to get real work done with it.
In just a few minutes of video, I’ll help you keep your skills up-to-date
and in-demand.
Save time, continue learning, and never miss an episode of Web Dev Break: