-
-
Notifications
You must be signed in to change notification settings - Fork 211
/
actions.ts
102 lines (91 loc) · 3.28 KB
/
actions.ts
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
import { OverlayScrollbars } from 'overlayscrollbars';
import { eventObserver } from './events';
let osInstance: OverlayScrollbars | undefined;
let contentHidden = false;
let elementHidden = false;
let useOverlayScrollbars = true;
const activateEvent = eventObserver();
const target = document.querySelector('#target') as HTMLElement;
const targetContent = document.querySelector('#targetContent') as HTMLElement;
const impostor = document.querySelector('#impostor') as HTMLElement;
const scrollButton = document.querySelector('#scrollButton') as HTMLButtonElement;
const toggleContentButton = document.querySelector('#toggleContentButton') as HTMLButtonElement;
const toggleElementButton = document.querySelector('#toggleElementButton') as HTMLButtonElement;
const toggleOverlayScrollbarsButton = document.querySelector(
'#toggleOverlayScrollbarsButton'
) as HTMLButtonElement;
const updateToggleContent = () => {
if (contentHidden) {
targetContent.style.display = 'none';
toggleContentButton.textContent = 'Show Content';
} else {
targetContent.style.display = '';
toggleContentButton.textContent = 'Hide Content';
}
};
const updateToggleElement = () => {
if (elementHidden) {
target.style.display = 'none';
toggleElementButton.textContent = 'Show Element';
} else {
target.style.display = '';
toggleElementButton.textContent = 'Hide Element';
}
};
const updateUseOverlayScrollbars = () => {
if (useOverlayScrollbars) {
impostor.parentElement?.append(target);
impostor.remove();
scrollButton.style.display = '';
toggleContentButton.style.display = '';
toggleElementButton.style.display = '';
toggleOverlayScrollbarsButton.textContent = 'Destroy OverlayScrollbars';
osInstance = OverlayScrollbars(
target,
{},
{
initialized: () => activateEvent('initialized'),
destroyed: () => activateEvent('destroyed'),
updated: () => activateEvent('updated'),
scroll: () => activateEvent('scroll'),
}
);
} else {
osInstance?.destroy();
target.parentElement?.append(impostor);
target.remove();
impostor.style.display = '';
scrollButton.style.display = 'none';
toggleContentButton.style.display = 'none';
toggleElementButton.style.display = 'none';
toggleOverlayScrollbarsButton.textContent = 'Initialize OverlayScrollbars';
}
};
scrollButton.addEventListener('click', () => {
if (!osInstance) {
return;
}
const { overflowAmount } = osInstance.state();
const { scrollOffsetElement } = osInstance.elements();
const { scrollLeft, scrollTop } = scrollOffsetElement;
scrollOffsetElement.scrollTo({
behavior: 'smooth',
left: Math.round((overflowAmount.x - scrollLeft) / overflowAmount.x) * overflowAmount.x,
top: Math.round((overflowAmount.y - scrollTop) / overflowAmount.y) * overflowAmount.y,
});
});
toggleContentButton.addEventListener('click', () => {
contentHidden = !contentHidden;
updateToggleContent();
});
toggleElementButton.addEventListener('click', () => {
elementHidden = !elementHidden;
updateToggleElement();
});
toggleOverlayScrollbarsButton.addEventListener('click', () => {
useOverlayScrollbars = !useOverlayScrollbars;
updateUseOverlayScrollbars();
});
updateToggleContent();
updateToggleElement();
updateUseOverlayScrollbars();