···

       
1
       
 
       
import { useLayoutEffect } from './utils/react';

     

       
2
       
-
       
import { observeScrollHeight } from './utils/observeScrollHeight';

     

       
3
       
 
       
import { Ref } from './types';

     

       
4
       
 
       


     

       
5
       
 
       
const getIdForState = (() => {

     
···

       
16
       
 
       
  };

     

       
17
       
 
       
})();

     

       
18
       
 
       


     

       
19
       
-
       
const scrollPositions: Record<string, number> = {};

     

       
20
       
 
       


     

       
21
       
 
       
export function useScrollRestoration<T extends HTMLElement>(

     

       
22
       
 
       
  ref: 'window' | Ref<T>

     
···

       
33
       
 
       
      const id = `${addonId}${getIdForState(

     

       
34
       
 
       
        event ? event.state : history.state

     

       
35
       
 
       
      )}:${window.location}`;

     

       
36
       
-
       
      const scrollHeight =

     

       
37
       
-
       
        ref === 'window'

     

       
38
       
-
       
          ? document.body.scrollHeight

     

       
39
       
-
       
          : ref.current!.scrollHeight;

     

       
40
       
-
       
      const scrollY = scrollPositions[id];

     

       
41
       
-
       
      if (!scrollY) {

     

       
42
       
 
       
        // noop

     

       
43
       
-
       
      } else if (scrollHeight >= scrollY) {

     

       
44
       
-
       
        scrollTarget.scrollTo(0, scrollY);

     

       
45
       
 
       
      } else {

     

       
46
       
 
       
        if (unsubscribe) unsubscribe();

     

       
47
       
-
       
        unsubscribe = observeScrollHeight(

     

       
48
       
 
       
          ref === 'window' ? document.body : ref.current!,

     

       
49
       
-
       
          (scrollHeight: number) => {

     

       
50
       
-
       
            // the scroll position shouldn't have changed by more than half the screen height

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
51
       
 
       
            const hasMoved =

     

       
52
       
-
       
              Math.abs(scrollY - scrollPositions[id]) > window.innerHeight / 2;

     

       
0
       
 
       

     

       
53
       
 
       
            // then we restore the position as it's now possible

     

       
54
       
-
       
            if (!hasMoved && scrollHeight >= scrollY)

     

       
55
       
-
       
              scrollTarget.scrollTo(0, scrollY);

     

       
56
       
-
       
            if (unsubscribe) unsubscribe();

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
57
       
 
       
          }

     

       
58
       
 
       
        );

     

       
59
       
 
       
      }

     
···

       
63
       
 
       
      const id = `${addonId}${getIdForState(history.state)}:${window.location}`;

     

       
64
       
 
       
      const scrollY =

     

       
65
       
 
       
        ref === 'window' ? window.scrollY : ref.current!.scrollTop;

     

       
66
       
-
       
      scrollPositions[id] = scrollY || 0;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
67
       
 
       
      if (unsubscribe) {

     

       
68
       
 
       
        unsubscribe();

     

       
69
       
 
       
        unsubscribe = undefined;

     

···

       
1
       
 
       
import { useLayoutEffect } from './utils/react';

     

       
2
       
+
       
import { observeScrollArea } from './utils/observeScrollArea';

     

       
3
       
 
       
import { Ref } from './types';

     

       
4
       
 
       


     

       
5
       
 
       
const getIdForState = (() => {

     
···

       
16
       
 
       
  };

     

       
17
       
 
       
})();

     

       
18
       
 
       


     

       
19
       
+
       
const scrollPositions: Record<string, [number, number]> = {};

     

       
20
       
 
       


     

       
21
       
 
       
export function useScrollRestoration<T extends HTMLElement>(

     

       
22
       
 
       
  ref: 'window' | Ref<T>

     
···

       
33
       
 
       
      const id = `${addonId}${getIdForState(

     

       
34
       
 
       
        event ? event.state : history.state

     

       
35
       
 
       
      )}:${window.location}`;

     

       
36
       
+
       
      const { scrollWidth, scrollHeight } = scrollTarget;

     

       
37
       
+
       
      const scrollTo = scrollPositions[id];

     

       
38
       
+
       
      if (!scrollTo) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
39
       
 
       
        // noop

     

       
40
       
+
       
      } else if (scrollWidth >= scrollTo[0] && scrollHeight >= scrollTo[1]) {

     

       
41
       
+
       
        scrollTarget.scrollTo(scrollTo[0], scrollTo[1]);

     

       
42
       
 
       
      } else {

     

       
43
       
 
       
        if (unsubscribe) unsubscribe();

     

       
44
       
+
       
        unsubscribe = observeScrollArea(

     

       
45
       
 
       
          ref === 'window' ? document.body : ref.current!,

     

       
46
       
+
       
          (scrollWidth: number, scrollHeight: number) => {

     

       
47
       
+
       
            // check whether the scroll position has already moved too far

     

       
48
       
+
       
            const halfViewportX = window.innerWidth / 2;

     

       
49
       
+
       
            const halfViewportY = window.innerHeight / 2;

     

       
50
       
+
       
            const newScrollTo = scrollPositions[id];

     

       
51
       
 
       
            const hasMoved =

     

       
52
       
+
       
              Math.abs(scrollTo[0] - newScrollTo[0]) > halfViewportX ||

     

       
53
       
+
       
              Math.abs(scrollTo[1] - newScrollTo[1]) > halfViewportY;

     

       
54
       
 
       
            // then we restore the position as it's now possible

     

       
55
       
+
       
            if (

     

       
56
       
+
       
              hasMoved ||

     

       
57
       
+
       
              (scrollWidth >= scrollTo[0] && scrollHeight >= scrollTo[1])

     

       
58
       
+
       
            ) {

     

       
59
       
+
       
              if (!hasMoved) scrollTarget.scrollTo(scrollTo[0], scrollTo[1]);

     

       
60
       
+
       
              if (unsubscribe) unsubscribe();

     

       
61
       
+
       
            }

     

       
62
       
 
       
          }

     

       
63
       
 
       
        );

     

       
64
       
 
       
      }

     
···

       
68
       
 
       
      const id = `${addonId}${getIdForState(history.state)}:${window.location}`;

     

       
69
       
 
       
      const scrollY =

     

       
70
       
 
       
        ref === 'window' ? window.scrollY : ref.current!.scrollTop;

     

       
71
       
+
       
      const scrollX =

     

       
72
       
+
       
        ref === 'window' ? window.scrollX : ref.current!.scrollLeft;

     

       
73
       
+
       
      scrollPositions[id] = [scrollX, scrollY];

     

       
74
       
 
       
      if (unsubscribe) {

     

       
75
       
 
       
        unsubscribe();

     

       
76
       
 
       
        unsubscribe = undefined;

     

···

       
13
       
 
       
  }

     

       
14
       
 
       
});

     

       
15
       
 
       


     

       
16
       
-
       
export function observeScrollHeight(

     

       
17
       
 
       
  element: HTMLElement,

     

       
18
       
-
       
  onScrollHeightChange: (scrollHeight: number) => void

     

       
19
       
 
       
): () => void {

     

       
20
       
 
       
  const listeners = resizeListeners.get(element) || [];

     

       
21
       
 
       
  const isFirstListener = !listeners.length;

     
···

       
26
       
 
       
  const onResize = () => {

     

       
27
       
 
       
    const scrollHeight = element.scrollHeight || 0;

     

       
28
       
 
       
    if (!hasUnmounted && scrollHeight !== previousScrollHeight) {

     

       
29
       
-
       
      onScrollHeightChange(element.scrollHeight);

     

       
30
       
 
       
      previousScrollHeight = scrollHeight;

     

       
31
       
 
       
    }

     

       
32
       
 
       
  };

     

···

       
13
       
 
       
  }

     

       
14
       
 
       
});

     

       
15
       
 
       


     

       
16
       
+
       
export function observeScrollArea(

     

       
17
       
 
       
  element: HTMLElement,

     

       
18
       
+
       
  onAreaChange: (width: number, height: number) => void

     

       
19
       
 
       
): () => void {

     

       
20
       
 
       
  const listeners = resizeListeners.get(element) || [];

     

       
21
       
 
       
  const isFirstListener = !listeners.length;

     
···

       
26
       
 
       
  const onResize = () => {

     

       
27
       
 
       
    const scrollHeight = element.scrollHeight || 0;

     

       
28
       
 
       
    if (!hasUnmounted && scrollHeight !== previousScrollHeight) {

     

       
29
       
+
       
      onAreaChange(element.scrollWidth, element.scrollHeight);

     

       
30
       
 
       
      previousScrollHeight = scrollHeight;

     

       
31
       
 
       
    }

     

       
32
       
 
       
  };