1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { Injectable } from '@angular/core'
@Injectable()
export class ScreenService {
isBroadcastMessageDisplayed = false
private windowInnerWidth: number
private lastFunctionCallTime: number
private cacheForMs = 500
constructor () {
this.refreshWindowInnerWidth()
}
isInSmallView (marginLeft = 0) {
if (marginLeft > 0) {
const contentWidth = this.getWindowInnerWidth() - marginLeft
return contentWidth < 800
}
return this.getWindowInnerWidth() < 800
}
isInMediumView () {
return this.getWindowInnerWidth() < 1100
}
isInMobileView () {
return this.getWindowInnerWidth() < 500
}
isInTouchScreen () {
return !!('ontouchstart' in window || navigator.msMaxTouchPoints)
}
getNumberOfAvailableMiniatures () {
const screenWidth = this.getWindowInnerWidth()
let numberOfVideos = 1
if (screenWidth > 1850) numberOfVideos = 7
else if (screenWidth > 1600) numberOfVideos = 6
else if (screenWidth > 1370) numberOfVideos = 5
else if (screenWidth > 1100) numberOfVideos = 4
else if (screenWidth > 850) numberOfVideos = 3
return numberOfVideos
}
// Cache window inner width, because it's an expensive call
getWindowInnerWidth () {
if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
return this.windowInnerWidth
}
// https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) {
let touchDownClientX: number
let touchDownClientY: number
const onTouchStart = (event: TouchEvent) => {
const firstTouch = event.touches[0]
touchDownClientX = firstTouch.clientX
touchDownClientY = firstTouch.clientY
}
const onTouchMove = (event: TouchEvent) => {
if (!touchDownClientX || !touchDownClientY) {
return
}
const touchUpClientX = event.touches[0].clientX
const touchUpClientY = event.touches[0].clientY
const touchClientX = Math.abs(touchDownClientX - touchUpClientX)
const touchClientY = Math.abs(touchDownClientY - touchUpClientY)
if (touchClientX > touchClientY) {
if (touchClientX > 0) {
if (direction === 'left') {
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
action()
}
} else {
if (direction === 'right') {
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
action()
}
}
} else {
if (touchClientY > 0) {
if (direction === 'up') {
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
action()
}
} else {
if (direction === 'down') {
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
action()
}
}
}
}
document.addEventListener('touchstart', onTouchStart, false)
document.addEventListener('touchmove', onTouchMove, false)
}
private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
document.removeEventListener('touchstart', onTouchStart)
document.removeEventListener('touchmove', onTouchMove)
}
private refreshWindowInnerWidth () {
this.lastFunctionCallTime = new Date().getTime()
this.windowInnerWidth = window.innerWidth
}
private cacheWindowInnerWidthExpired () {
if (!this.lastFunctionCallTime) return true
return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
}
}
|
