1. web-application

2. 2 3. 3 4. SWIPE / 5. Touch events touchstarttouchmove touchend touchcancel 6. Touch/mouse events touchstart mousedowntouchmove mousemovetouchend mouseup touchcancel mouseup 7. Mouse events mousedown mousemove mouseup click 8. EPIC FAILmousedown mousemove mouseup click mousemovemousedown mouseup click 9. Touch EventtoucheschangedTouches targetTouches 10. Touch ObjectidentifierpageX/Y screenX/YclientX/Y 11. touchstartif (e.touches.length != 1 || started){ return;} 12. touchstartif (e.touches.length != 1 || started){ return;}detecting = true;touch = e.changedTouches[0];x = pageX;y = pageY; 13. touchmoveif (!started && !detecting){return;}if (detecting){detect();}if (started){draw();} 14. Touchmove - detectingif (e.changedTouches.indexOf(touch) == -1){return;} 15. Touchmove - detectingif (e.changedTouches.indexOf(touch) == -1){return;}if (abs(x - newX) >= abs(y - newY)){} 16. Touchmove - detectingif (e.changedTouches.indexOf(touch) == -1){return;}if (abs(x - newX) >= abs(y - newY)){e.preventDefault();started = true;} 17. Touchmove - detectingif (e.changedTouches.indexOf(touch) == -1){return;}if (abs(x - newX) >= abs(y - newY)){e.preventDefault();started = true;}detecting = false; 18. Touchmove - movee.preventDefault(); 19. Touchmove - movee.preventDefault();if (e.changedTouches.indexOf(touch) == -1){return;} 20. Touchmove - movee.preventDefault();if (e.changedTouches.indexOf(touch) == -1){return;}delta = x newX; 21. Touchmove - movee.preventDefault();if (e.changedTouches.indexOf(touch) == -1){return;}delta = x newX;if (delta > 0 && !leftPage || delta < 0 && !rightPage){ delta = delta / 5;} 22. Touchmove - movee.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/cancelif (e.changedTouches.indexOf(touch) == -1 || !started){return;} 24. Touchend/cancelif (e.changedTouches.indexOf(touch) == -1 || !started){return;}e.preventDefault(); 25. Touchend/cancelif (e.changedTouches.indexOf(touch) == -1 || !started){return;}e.preventDefault();swipeTo = delta < 0 ? left : right; 26. Touchend/cancelif (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.length100%/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 ~7ms44 45. 45 46. 46 47. TouchStartif(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. Clickif( !ignoreEvent ){if( allowClick(event) ){startTap = true;}else{event.preventDefault();event.stopPropagation();}} 49 50. AllowClickif( !event ) return true;if( !event._fake ){fired =e...vent.target != startTarget ||rget)return !( fired || startTap );}else{ return true;}50 51. AllowClickif( !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. PullToRefresh53 54. PullToRefreshScroll scroll:move scroll:end 54 55. PullToRefresh scroll:movetop > 35startTime = 0; startTime = new Date();pulltorefresh:pushpulltorefresh:pull 56. PullToRefreshscroll:endpulltorefresh:releasenew Date() -startTime > 100 pulltorefresh:push pulltorefresh:process 57. Zoom 58. Zoom 59. Zoom 60. Zoomtransform-origin 50% 50% 0px 0px 61. Zooml= x +y 222 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:touchmovedeltaZoom =currentTouchesLength / initialTouchesLength;currentZoom = initialZoom * deltaZoom; 65. Zoom:touchmovedeltaZoom =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