Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Gestures

Tilo
November 06, 2013

The State of Gestures

This talk is a technical deep dive into the world of gesture events. I'll introduce the work that has been and is currently being done in YUI Gestures and how you can use gesture events to create multi-device user experiences.

Tilo

November 06, 2013
Tweet

More Decks by Tilo

Other Decks in Technology

Transcript

  1. if (window && ("ontouchstart" in window)) { node.on('touchend', DoSomething); }

    else { node.on('mouseup', DoSomething); } This doesn’t get executed, so we can’t interact with mouse* events.
  2. if (window && ("ontouchstart" in window)) { node.on(['touchend', 'mouseup'], function

    (e) { //so mouse* doesn’t fire if touchend fires e.preventDefault(); doSomething(e); }); }
  3. if (window && ("ontouchstart" in window)) { node.on(['touchend', 'mouseup'], function

    (e) { //so mouse* doesn’t fire if touchend fires e.preventDefault(); doSomething(e); }); } else if (win && ("msPointerEnabled" in win.navigator)) { node.on('MSPointerUp', doSomething); }
  4. if (window && ("ontouchstart" in window)) { node.on(['touchend', 'mouseup'], function

    (e) { //so mouse* doesn’t fire if touchend fires e.preventDefault(); doSomething(e); }); } else if (win && ("msPointerEnabled" in win.navigator)) { node.on('MSPointerUp', doSomething); } else { node.on('mouseup', doSomething); }
  5. if (window && ("ontouchstart" in window)) { node.on(['touchend', 'mouseup'], function

    (e) { //so mouse* doesn’t fire if touchend fires e.preventDefault(); doSomething(e); }); } else if (win && ("msPointerEnabled" in win.navigator)) { node.on('MSPointerUp', doSomething); } else { node.on('mouseup', doSomething); } This gets complicated
  6. Desktop Browser iOS Android IE10+ mousedown mousemove mouseup click touchstart

    touchmove touchend click touchstart mousedown touchmove mousemove touchend mouseup click MSPointerDown mousedown MSPointerMove mousemove MSPointerUp mouseup click
  7. A pointer can be any point of contact on the

    screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. This model makes it easy to write sites and applications that work well no matter what hardware the user has.
  8. "gesturemovestart", "gesturemove", and "gesturemoveend" are events that serve as abstractions

    over mouse and touch events, forking internally based on the client device. From the Docs:
  9. Improvements to event-move to make it work for mouse, touch

    and devices that support both Pull #1309 Code in Progress
  10. EVENT UPDATES PAYLOAD STATUS STATUS tap Dual Listener Support, e.preventDefault()

    - Available Today Available Today flick flickup, flickdown flickleft, flickright direction velocity PULL #1323 PULL #1323 gesturemove* Dual Listener Support direction deltaX deltaY Pull #1309 See Demo move moveup, movedown moveleft, moveright, ability to lock axis direction deltaX deltaY See Demo See Demo NEW APIs
  11. WHAT WE DO NOW 1. Set up some gesturemove* and

    flick listeners 2. Store the [x1,y1] of gesturemovestart 3. Compare [x1,y1] to [x2,y2] from gesturemove to determine direction + delta 4. Compare [x1,y1] to [x2,y2] from gesturemoveend to determine direction + delta 5. In callbacks, branch logic based on direction 6. Make sure that these do not get called twice in devices that support mouse and touch, but yet, also works with both.
  12. WITH NEW APIs 1. Listen for move, flickleft, flickright, and

    gesturemoveend event 2. Inside move callback, get info with e.drag.direction and e.drag.deltaX 3. Transition to previous and next panels with flickleft and flickright 4. Inside gesturemoveend callback, get info with e.gesture.deltaX and e.gesture.dirX to decide whether or not to transition panels.
  13. Pull #1309 gesturemove* improvements Pull #1323 flick* improvements tilomitra/yui3/gesture- integration

    Build of YUI with all of these modules Demo http://bit.ly/gesture-events