1. Современный web-application

2. 2

3. 3

4. SWIPE / Листалка

5. Touch events
touchstart
touchmove
touchend
touchcancel

6. Touch/mouse events
touchstart – mousedown
touchmove – mousemove
touchend – mouseup
touchcancel – mouseup

7. Mouse events
mousedown mousemove mouseup click

8. EPIC FAIL
mousedown mousemove mouseup click
mousemove mousedown mouseup click

9. Touch Event
touches
changedTouches
targetTouches

10. Touch Object
identifier
pageX/Y
screenX/Y
clientX/Y

11. touchstart
if (e.touches.length != 1 || started){
return;
}

12. touchstart
if (e.touches.length != 1 || started){
return;
}
detecting = true;
touch = e.changedTouches[0];
x = pageX;
y = pageY;

13. touchmove
if (!started && !detecting){
return;
}
if (detecting){
detect();
}
if (started){
draw();
}

14. Touchmove - detecting
if (e.changedTouches.indexOf(touch) == -1){
return;
}

15. Touchmove - detecting
if (e.changedTouches.indexOf(touch) == -1){
return;
}
if (abs(x - newX) >= abs(y - newY)){
}

16. Touchmove - detecting
if (e.changedTouches.indexOf(touch) == -1){
return;
}
if (abs(x - newX) >= abs(y - newY)){
e.preventDefault();
started = true;
}

17. Touchmove - detecting
if (e.changedTouches.indexOf(touch) == -1){
return;
}
if (abs(x - newX) >= abs(y - newY)){
e.preventDefault();
started = true;
}
detecting = false;

18. Touchmove - move
e.preventDefault();

19. Touchmove - move
e.preventDefault();
if (e.changedTouches.indexOf(touch) == -1){
return;
}

20. Touchmove - move
e.preventDefault();
if (e.changedTouches.indexOf(touch) == -1){
return;
}
delta = x – newX;

21. Touchmove - move
e.preventDefault();
if (e.changedTouches.indexOf(touch) == -1){
return;
}
delta = x – newX;
if (delta > 0 && !leftPage || delta < 0 && !rightPage){
delta = delta / 5;
}

22. Touchmove - move
e.preventDefault();
if (e.changedTouches.indexOf(touch) == -1){
return;
}
delta = x – newX;
if (delta > 0 && !leftPage || delta < 0 && !rightPage){
delta = delta / 5;
}
moveTo(delta);

23. Touchend/cancel
if (e.changedTouches.indexOf(touch) == -1 || !started){
return;
}

24. Touchend/cancel
if (e.changedTouches.indexOf(touch) == -1 || !started){
return;
}
e.preventDefault();

25. Touchend/cancel
if (e.changedTouches.indexOf(touch) == -1 || !started){
return;
}
e.preventDefault();
swipeTo = delta < 0 ? 'left' : 'right';

26. Touchend/cancel
if (e.changedTouches.indexOf(touch) == -1 || !started){
return;
}
e.preventDefault();
swipeTo = delta < 0 ? 'left' : 'right';
swipe(swipeTo);

27. «Страницы»

28. «Страницы»
swipeWidth
swipeWidth swipeWidth swipeWidth

29. «Страницы»
-100% +100%

30. «Страницы» - таблица
leftPages.length*100% Pages.length*100%
100%/Pages.length 100%/Pages.length 100%/Pages.length

31. Обертка
.swipe {
position: relative;
overflow: hidden;
height: 300px;
}

32. Left/top
.swipe__page {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

33. CSS
.swipe__page_animating {
transition: transform 200ms linear;
}

34. Translate
.swipe__page_left {
transform: translate(-100%, 0);
transform: translate3d(-100%, 0, 0);
}
.swipe__page_center {
transform: translate(0, 0);
transform: translate3d(0, 0, 0);
}
.swipe__page_right {
transform: translate(100%, 0);
transform: translate3d(100%, 0, 0);
}

35. «Страницы»

36. «Страницы»
Next left Current Next right

37. Translate - move
transform =
translate(delta, 0);
delta

38. Translate - move
- swipeWidth + delta swipeWidth + delta

39. Touchend - swipe

40. TransitionEnd - clear

41. TransitionEnd - clear

42. Совместимость

43. Tap-events
43

44. Скорость
touchstart ... touchend … ~300ms … click
~250ms
~150ms
~70ms
~7ms
44

45. Точность
45

46. Внимание
46

47. TouchStart
if(
target.tagName == 'A' || closest(target, 'A')
){
// Сохраняем событие
}else{
ignoreEvent = true;
}
47

48. TouchEnd
if( !ignoreEvent ){
if( abs(startX - newX) < 4 && abs(startY - newY) < 4 ){
// Создаем событие Click
Click._fake = true;
dispatchEvent(Click);
}
}
48

49. Click
if( !ignoreEvent ){
if( allowClick(event) ){
startTap = true;
}else{
event.preventDefault();
event.stopPropagation();
}
}
49

50. AllowClick
if( !event ) return true;
if( !event._fake ){
fired =
e...vent.target != startTarget ||rget)
return !( fired || startTap );
}else{
return true;
} 50

51. AllowClick
if( !event ) return true;
if( !event._fake ){
fired =
event.target != startTarget;
return !( fired || startTap );
}else{
return true;
} 51

52. Scroll
Вертикальный:
• iOS - JavaScript
• Остальные - Нативный скролл
Горизонтальный:
• iOS - Zoom*
• WebKit - JavaScript
• Остальные - Нативный скролл
52

53. PullToRefresh
53

54. PullToRefresh
Scroll
scroll:move
scroll:end
54

55. PullToRefresh
scroll:move
top > 35
startTime = 0; startTime = new Date();
pulltorefresh:push pulltorefresh:pull

56. PullToRefresh
scroll:end
pulltorefresh:release
new Date() -
startTime > 100
pulltorefresh:push pulltorefresh:process

57. Zoom

58. Zoom

59. Zoom

60. Zoom
transform-origin
50% 50% 0px 0px

61. Zoom
l= x +y 2 2 2
InitialTouchesLength = Math.sqrt(
Math.pow( touches[0].x - touches[1].x, 2 )
+
Math.pow( touches[0].y - touches[1].y, 2 )
);

62. Zoom
X = X0 – ( X0 – X1 ) / 2;
Y = Y0 – ( Y0 – Y1 ) / 2;

63. Zoom
documentX =
( targetX - scrollX - deltaX ) /
initialZoom;
documentY =
( targetY - scrollY - deltaY ) /
initialZoom;

64. Zoom:touchmove
deltaZoom =
currentTouchesLength / initialTouchesLength;
currentZoom = initialZoom * deltaZoom;

65. Zoom:touchmove
deltaZoom =
currentTouchesLength / initialTouchesLength;
currentZoom = initialZoom * deltaZoom;
left = currentTouch.x –
( documentX * currentZoom + deltaX );
top = currentTouch.y –
( documentY * currentZoom + deltaY );

66. Zoom
content.style['WebkitTransform']
'translate3d('+left+'px, 0px, 0px)
scale3d('+currentZoom+', ’
+currentZoom+', 1)'

67. СПАСИБО!
Иван Чашкин, Егор Дыдыкин
Front-end разработчики
i.chashkin@corp.mail.ru e.dydykin@corp.mail.ru