open-bus-map-search/src/hooks/useConstrainedFloatingButton.ts at 6ec4f7b83a1278f942473449b0e1b0ca6c61c491 · hasadna/open-bus-map-search · GitHub

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
127
128
129
130
131
132
133
134
import { RefObject, useEffect } from 'react'

export function useConstrainedFloatingButton(
  mapContainerRef: RefObject<HTMLDivElement | null>,
  buttonRef: RefObject<HTMLButtonElement | null>,
  isExpanded: boolean,
) {
  useEffect(() => {
    const updateButtonPosition = () => {
      if (!mapContainerRef.current || !buttonRef.current) return

      const mapRect = mapContainerRef.current.getBoundingClientRect()
      const buttonRect = buttonRef.current.getBoundingClientRect()
      const buttonHeight = buttonRect.height || 48
      const offset = 5

      const buttonElement = buttonRef.current

      const isRtl = document.documentElement.dir === 'rtl'

      if (isExpanded) {
        if (buttonElement) {
          if (isRtl) {
            buttonElement.style.left = `${offset}px`
            buttonElement.style.right = ''
          } else {
            buttonElement.style.right = `${offset}px`
            buttonElement.style.left = ''
          }
          buttonElement.style.bottom = `${offset}px`
          buttonElement.style.top = ''
          buttonElement.style.display = ''
        }
        return
      }

      const mapTop = mapRect.top
      const mapBottom = mapRect.bottom
      const mapVisible = mapBottom > 0 && mapTop < window.innerHeight

      if (!mapVisible) {
        if (buttonElement) {
          buttonElement.style.display = 'none'
        }
        return
      }

      if (buttonElement) {
        buttonElement.style.display = ''
      }

      const desiredBottomFromViewportBottom = offset
      const desiredTopFromViewportTop = window.innerHeight - buttonHeight - offset
      const desiredBottomFromViewportTop = window.innerHeight - desiredBottomFromViewportBottom

      let finalTop: number | undefined
      let finalBottom: number | undefined

      const buttonTopFromViewportTop = desiredTopFromViewportTop
      const buttonBottomFromViewportTop = desiredBottomFromViewportTop

      if (buttonTopFromViewportTop < mapTop) {
        finalTop = mapTop + offset
        finalBottom = undefined
      } else if (buttonBottomFromViewportTop > mapBottom) {
        const constrainedBottomFromTop = mapBottom - offset
        if (constrainedBottomFromTop - buttonHeight < mapTop) {
          finalTop = mapTop + offset
          finalBottom = undefined
        } else {
          finalBottom = window.innerHeight - constrainedBottomFromTop
          finalTop = undefined
        }
      } else {
        finalBottom = desiredBottomFromViewportBottom
        finalTop = undefined
      }

      if (buttonElement) {
        if (isRtl) {
          buttonElement.style.left = `${mapRect.left + offset}px`
          buttonElement.style.right = ''
        } else {
          buttonElement.style.right = `${window.innerWidth - mapRect.right + offset}px`
          buttonElement.style.left = ''
        }
        if (finalTop !== undefined) {
          buttonElement.style.top = `${finalTop}px`
          buttonElement.style.bottom = ''
        } else if (finalBottom !== undefined) {
          buttonElement.style.bottom = `${finalBottom}px`
          buttonElement.style.top = ''
        }
      }
    }

    updateButtonPosition()

    let intersectionObserver: IntersectionObserver | null = null
    if (mapContainerRef.current) {
      intersectionObserver = new IntersectionObserver(
        () => {
          updateButtonPosition()
        },
        {
          threshold: 0,
          rootMargin: '0px',
        },
      )
      intersectionObserver.observe(mapContainerRef.current)
    }

    window.document
      .getElementsByClassName('ant-layout-content')
      .item(0)
      ?.addEventListener('scroll', updateButtonPosition)
    window.addEventListener('resize', updateButtonPosition)

    const dirObserver = new MutationObserver(updateButtonPosition)
    dirObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] })

    return () => {
      if (intersectionObserver) {
        intersectionObserver.disconnect()
      }
      dirObserver.disconnect()
      window.document
        .getElementsByClassName('ant-layout-content')
        .item(0)
        ?.removeEventListener('scroll', updateButtonPosition)
      window.removeEventListener('resize', updateButtonPosition)
    }
  }, [mapContainerRef, buttonRef, isExpanded])
}