d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, NgZone } from '@angular/core';
import { reqAnimFrame } from './request-animation';

export type EasyingFn = (t: number, b: number, c: number, d: number) => number;

function easeInOutCubic(t: number, b: number, c: number, d: number): number {
    const cc = c - b;
    let tt = t / (d / 2);
    if (tt < 1) {
        return (cc / 2) * tt * tt * tt + b;
    } else {
        return (cc / 2) * ((tt -= 2) * tt * tt + 2) + b;
    }
}

@Injectable({
    providedIn: 'root'
})
export class ThyScrollService {
    private document: Document;

    constructor(@Inject(DOCUMENT) document: any, private ngZone: NgZone) {
        this.document = document;
    }

    /** Set the position of the scroll bar of `element`. */
    setScrollTop(element: Element | Window, topValue: number = 0): void {
        if (element === window) {
            this.document.body.scrollTop = topValue;
            this.document.documentElement.scrollTop = topValue;
        } else {
            (element as Element).scrollTop = topValue;
        }
    }

    /** Get the position of the scoll bar of `element`. */
    getScroll(element?: Element | Window, top: boolean = true): number {
        const target = element ? element : window;
        const prop = top ? 'pageYOffset' : 'pageXOffset';
        const method = top ? 'scrollTop' : 'scrollLeft';
        const isWindow = target === window;
        let ret = isWindow ? target[prop] : target[method];
        if (isWindow && typeof ret !== 'number') {
            ret = this.document.documentElement[method];
        }
        return ret;
    }

    /**
     * Scroll `element` to some position with animation.
     *
     * @param container container, `window` by default
     * @param topValue Scroll to `top`, 0 by default
     * @param easing Transition curve, `easeInOutCubic` by default
     * @param callback callback invoked when transition is done
     */
    scrollTo(container: Element | Window, topValue: number = 0, easing?: EasyingFn, callback?: () => void): void {
        const target = container ? container : window;
        const scrollTop = this.getScroll(target);
        const startTime = Date.now();
        const frameFunc = () => {
            const timestamp = Date.now();
            const time = timestamp - startTime;
            this.setScrollTop(target, (easing || easeInOutCubic)(time, scrollTop, topValue, 450));
            if (time < 450) {
                this.ngZone.runOutsideAngular(() => reqAnimFrame(frameFunc));
            } else {
                if (callback) {
                    // The `frameFunc` is called within the `<root>` zone, but we have to re-enter
                    // the Angular zone when calling custom callback to be backwards-compatible.
                    this.ngZone.run(() => callback());
                }
            }
        };
        // The `requestAnimationFrame` triggers change detection, but setting
        // `document.scrollTop` doesn't require Angular to run `ApplicationRef.tick()`.
        this.ngZone.runOutsideAngular(() => reqAnimFrame(frameFunc));
    }
}

1	import { DOCUMENT } from '@angular/common';
2	import { Inject, Injectable, NgZone } from '@angular/core';
3	import { reqAnimFrame } from './request-animation';
4
5	export type EasyingFn = (t: number, b: number, c: number, d: number) => number;
6		×
7	function easeInOutCubic(t: number, b: number, c: number, d: number): number {	×
8	const cc = c - b;	×
9	let tt = t / (d / 2);	×
10	if (tt < 1) {
11	return (cc / 2) * tt * tt * tt + b;
12	} else {	×
13	return (cc / 2) * ((tt -= 2) * tt * tt + 2) + b;
14	}
15	}	1✔
16
17	@Injectable({	×
18	providedIn: 'root'	×
19	})
20	export class ThyScrollService {
21	private document: Document;	×
22		×
23	constructor(@Inject(DOCUMENT) document: any, private ngZone: NgZone) {	×
24	this.document = document;	×
25	}
26
27	/** Set the position of the scroll bar of `element`. */	×
28	setScrollTop(element: Element \| Window, topValue: number = 0): void {
29	if (element === window) {
30	this.document.body.scrollTop = topValue;
31	this.document.documentElement.scrollTop = topValue;	×
32	} else {	×
33	(element as Element).scrollTop = topValue;	×
34	}	×
35	}	×
36		×
37	/** Get the position of the scoll bar of `element`. */	×
38	getScroll(element?: Element \| Window, top: boolean = true): number {	×
39	const target = element ? element : window;
40	const prop = top ? 'pageYOffset' : 'pageXOffset';	×
41	const method = top ? 'scrollTop' : 'scrollLeft';
42	const isWindow = target === window;
43	let ret = isWindow ? target[prop] : target[method];
44	if (isWindow && typeof ret !== 'number') {
45	ret = this.document.documentElement[method];
46	}
47	return ret;
48	}
49
50	/**	×
51	* Scroll `element` to some position with animation.	×
52	*	×
53	* @param container container, `window` by default	×
54	* @param topValue Scroll to `top`, 0 by default	×
55	* @param easing Transition curve, `easeInOutCubic` by default	×
56	* @param callback callback invoked when transition is done	×
57	*/	×
58	scrollTo(container: Element \| Window, topValue: number = 0, easing?: EasyingFn, callback?: () => void): void {	×
59	const target = container ? container : window;	×
60	const scrollTop = this.getScroll(target);
61	const startTime = Date.now();
62	const frameFunc = () => {	×
63	const timestamp = Date.now();
64	const time = timestamp - startTime;
65	this.setScrollTop(target, (easing \|\| easeInOutCubic)(time, scrollTop, topValue, 450));	×
66	if (time < 450) {
67	this.ngZone.runOutsideAngular(() => reqAnimFrame(frameFunc));
68	} else {
69	if (callback) {
70	// The `frameFunc` is called within the `<root>` zone, but we have to re-enter
71	// the Angular zone when calling custom callback to be backwards-compatible.	×
72	this.ngZone.run(() => callback());
73	}	1✔
74	}
75	};
76	// The `requestAnimationFrame` triggers change detection, but setting
77	// `document.scrollTop` doesn't require Angular to run `ApplicationRef.tick()`.
78	this.ngZone.runOutsideAngular(() => reqAnimFrame(frameFunc));	1✔
79	}
80	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous