diff options
Diffstat (limited to 'client/src/app/helpers/utils/dom.ts')
-rw-r--r-- | client/src/app/helpers/utils/dom.ts | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/client/src/app/helpers/utils/dom.ts b/client/src/app/helpers/utils/dom.ts new file mode 100644 index 000000000..f65e4d726 --- /dev/null +++ b/client/src/app/helpers/utils/dom.ts | |||
@@ -0,0 +1,43 @@ | |||
1 | function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') { | ||
2 | window.scrollTo({ | ||
3 | left: 0, | ||
4 | top: 0, | ||
5 | behavior | ||
6 | }) | ||
7 | } | ||
8 | |||
9 | function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) { | ||
10 | const boundingEl = el.getBoundingClientRect() | ||
11 | const boundingContainer = container.getBoundingClientRect() | ||
12 | |||
13 | const relativePos = { | ||
14 | top: 0, | ||
15 | left: 0, | ||
16 | bottom: 0, | ||
17 | right: 0 | ||
18 | } | ||
19 | |||
20 | relativePos.top = boundingEl.top - boundingContainer.top | ||
21 | relativePos.left = boundingEl.left - boundingContainer.left | ||
22 | |||
23 | return relativePos.top >= 0 && | ||
24 | relativePos.left >= 0 && | ||
25 | boundingEl.bottom <= boundingContainer.bottom && | ||
26 | boundingEl.right <= boundingContainer.right | ||
27 | } | ||
28 | |||
29 | function isXPercentInViewport (el: HTMLElement, percentVisible: number) { | ||
30 | const rect = el.getBoundingClientRect() | ||
31 | const windowHeight = (window.innerHeight || document.documentElement.clientHeight) | ||
32 | |||
33 | return !( | ||
34 | Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible || | ||
35 | Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible | ||
36 | ) | ||
37 | } | ||
38 | |||
39 | export { | ||
40 | scrollToTop, | ||
41 | isInViewport, | ||
42 | isXPercentInViewport | ||
43 | } | ||