blob: e72c6fe1679ed9797371ddb32d653e3b313969dd (
plain)
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
|
import { contentTop } from './common_utils';
const interactionEvents = ['mousedown', 'touchstart', 'keydown', 'wheel'];
export function createResizeObserver() {
return new ResizeObserver((entries) => {
entries.forEach((entry) => {
entry.target.dispatchEvent(new CustomEvent(`ResizeUpdate`, { detail: { entry } }));
});
});
}
// watches for change in size of a container element (e.g. for lazy-loaded images)
// and scroll the target element to the top of the content area
// stop watching after any user input. So if user opens sidebar or manually
// scrolls the page we don't hijack their scroll position
export function scrollToTargetOnResize({
target = window.location.hash,
container = '#content-body',
} = {}) {
if (!target) return null;
const ro = createResizeObserver();
const containerEl = document.querySelector(container);
let interactionListenersAdded = false;
function keepTargetAtTop() {
const anchorEl = document.querySelector(target);
if (!anchorEl) return;
const anchorTop = anchorEl.getBoundingClientRect().top + window.scrollY;
const top = anchorTop - contentTop();
document.documentElement.scrollTo({
top,
});
if (!interactionListenersAdded) {
interactionEvents.forEach((event) =>
// eslint-disable-next-line no-use-before-define
document.addEventListener(event, removeListeners),
);
interactionListenersAdded = true;
}
}
function removeListeners() {
interactionEvents.forEach((event) => document.removeEventListener(event, removeListeners));
ro.unobserve(containerEl);
containerEl.removeEventListener('ResizeUpdate', keepTargetAtTop);
}
containerEl.addEventListener('ResizeUpdate', keepTargetAtTop);
ro.observe(containerEl);
return ro;
}
|
