-
Notifications
You must be signed in to change notification settings - Fork 754
/
scroll.listener.ts
77 lines (72 loc) · 2.77 KB
/
scroll.listener.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
import { createTimedBooleanSwitch } from "../utils";
import { IncomingSocketNames, OutgoingSocketEvent } from "../socket-messages";
import {
getScrollPosition,
getScrollPositionForElement
} from "../browser.utils";
import { Observable } from "rxjs/Observable";
import * as ScrollEvent from "../messages/ScrollEvent";
import { filter } from "rxjs/operators/filter";
import { map } from "rxjs/operators/map";
import { withLatestFrom } from "rxjs/operators/withLatestFrom";
import { Inputs } from "../index";
import { pluck } from "rxjs/operators/pluck";
import { distinctUntilChanged } from "rxjs/operators/distinctUntilChanged";
import { switchMap } from "rxjs/operators/switchMap";
import { empty } from "rxjs/observable/empty";
import { skip } from "rxjs/operators/skip";
import { fromEvent } from "rxjs/observable/fromEvent";
export function getScrollStream(
window: Window,
document: Document,
socket$: Inputs["socket$"],
option$: Inputs["option$"]
): Observable<OutgoingSocketEvent> {
const canSync$ = createTimedBooleanSwitch(
socket$.pipe(filter(([name]) => name === IncomingSocketNames.Scroll))
);
/**
* If the option 'scrollElementMapping' is provided
* we cache thw
* @type {Observable<(Element | null)[]>}
*/
const elemMap$ = option$.pipe(
pluck("scrollElementMapping"),
map((selectors: string[]) =>
selectors.map(selector => document.querySelector(selector))
)
);
return option$.pipe(
skip(1), // initial option set before the connection event
pluck("ghostMode", "scroll"),
distinctUntilChanged(),
switchMap(scroll => {
if (!scroll) return empty();
return fromEvent(document, "scroll", true).pipe(
map((e: Event) => e.target),
withLatestFrom(canSync$, elemMap$),
filter(([, canSync]) => Boolean(canSync)),
map(([target, canSync, elemMap]: [any, boolean, any[]]) => {
if (target === document) {
return ScrollEvent.outgoing(
getScrollPosition(window, document),
"document",
0
);
}
const elems = document.getElementsByTagName(target.tagName);
const index = Array.prototype.indexOf.call(
elems || [],
target
);
return ScrollEvent.outgoing(
getScrollPositionForElement(target),
target.tagName,
index,
elemMap.indexOf(target)
);
})
);
})
);
}