diff options
Diffstat (limited to 'client/src/app/core/wrappers/screen.service.ts')
-rw-r--r-- | client/src/app/core/wrappers/screen.service.ts | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts index 96fb7ae57..88cf662b3 100644 --- a/client/src/app/core/wrappers/screen.service.ts +++ b/client/src/app/core/wrappers/screen.service.ts | |||
@@ -54,6 +54,64 @@ export class ScreenService { | |||
54 | return this.windowInnerWidth | 54 | return this.windowInnerWidth |
55 | } | 55 | } |
56 | 56 | ||
57 | // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android | ||
58 | onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) { | ||
59 | let touchDownClientX: number | ||
60 | let touchDownClientY: number | ||
61 | |||
62 | const onTouchStart = (event: TouchEvent) => { | ||
63 | const firstTouch = event.touches[0] | ||
64 | touchDownClientX = firstTouch.clientX | ||
65 | touchDownClientY = firstTouch.clientY | ||
66 | } | ||
67 | |||
68 | const onTouchMove = (event: TouchEvent) => { | ||
69 | if (!touchDownClientX || !touchDownClientY) { | ||
70 | return | ||
71 | } | ||
72 | |||
73 | const touchUpClientX = event.touches[0].clientX | ||
74 | const touchUpClientY = event.touches[0].clientY | ||
75 | |||
76 | const touchClientX = Math.abs(touchDownClientX - touchUpClientX) | ||
77 | const touchClientY = Math.abs(touchDownClientY - touchUpClientY) | ||
78 | |||
79 | if (touchClientX > touchClientY) { | ||
80 | if (touchClientX > 0) { | ||
81 | if (direction === 'left') { | ||
82 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | ||
83 | action() | ||
84 | } | ||
85 | } else { | ||
86 | if (direction === 'right') { | ||
87 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | ||
88 | action() | ||
89 | } | ||
90 | } | ||
91 | } else { | ||
92 | if (touchClientY > 0) { | ||
93 | if (direction === 'up') { | ||
94 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | ||
95 | action() | ||
96 | } | ||
97 | } else { | ||
98 | if (direction === 'down') { | ||
99 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | ||
100 | action() | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | } | ||
105 | |||
106 | document.addEventListener('touchstart', onTouchStart, false) | ||
107 | document.addEventListener('touchmove', onTouchMove, false) | ||
108 | } | ||
109 | |||
110 | private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) { | ||
111 | document.removeEventListener('touchstart', onTouchStart) | ||
112 | document.removeEventListener('touchmove', onTouchMove) | ||
113 | } | ||
114 | |||
57 | private refreshWindowInnerWidth () { | 115 | private refreshWindowInnerWidth () { |
58 | this.lastFunctionCallTime = new Date().getTime() | 116 | this.lastFunctionCallTime = new Date().getTime() |
59 | 117 | ||