mirror of
https://github.com/bitwarden/browser
synced 2026-02-02 09:43:29 +00:00
279d16999a
* use intersection observer to fix dynamic content load issue * set up mock intersection observer * Create reusable hasScrollable content util * return null from resize to fix type error * remove Observer mock * return observable * refactor util and remove resize * use async pipe for observable in template * remove comment left in error
27 lines
932 B
TypeScript
27 lines
932 B
TypeScript
import { Observable, animationFrameScheduler } from "rxjs";
|
|
import { auditTime, map, startWith, observeOn, distinctUntilChanged } from "rxjs/operators";
|
|
|
|
import { intersectionObserver$ } from "./dom-observables";
|
|
/**
|
|
* Utility to determine if an element has scrollable content.
|
|
* Returns an Observable that emits whenever scroll/resize/layout might change visibility
|
|
*/
|
|
export const hasScrollableContent$ = (
|
|
root: HTMLElement,
|
|
target: HTMLElement,
|
|
threshold: number = 1,
|
|
): Observable<boolean> => {
|
|
return intersectionObserver$(target, { root, threshold }).pipe(
|
|
startWith(null as IntersectionObserverEntry | null),
|
|
auditTime(0, animationFrameScheduler),
|
|
observeOn(animationFrameScheduler),
|
|
map((entry: IntersectionObserverEntry | null) => {
|
|
if (!entry) {
|
|
return root.scrollHeight > root.clientHeight;
|
|
}
|
|
return !entry.isIntersecting;
|
|
}),
|
|
distinctUntilChanged(),
|
|
);
|
|
};
|