d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Inject, Injectable, NgZone } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { ThyDistanceVector } from './typings';

/**
 * @internal
 */
@Injectable({
    providedIn: 'root'
})
export class ThyCarouselService {
    private listeners = new Map<string, (event: MouseEvent | TouchEvent) => void>();
    private document: Document;

    documentDraggingOutside$ = new Subject<MouseEvent | Touch>();

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

    private clearListeners(): void {
        this.listeners.forEach((handler, name) => {
            this.document.removeEventListener(name, handler as EventListener);
        });
        this.listeners.clear();
    }

    private getEventPotions(event: MouseEvent | TouchEvent): MouseEvent | Touch {
        if (event instanceof MouseEvent) {
            return event;
        } else {
            return event.touches[0] || event.changedTouches[0];
        }
    }

    registerDrag(event: MouseEvent | TouchEvent): Observable<ThyDistanceVector> {
        if (this.documentDraggingOutside$) {
            this.documentDraggingOutside$.complete();
        }

        const startPoint = this.getEventPotions(event);

        this.documentDraggingOutside$ = new Subject<MouseEvent | Touch>();

        this.registerHandler(event);

        return this.documentDraggingOutside$.pipe(
            map(e => {
                return {
                    x: e.pageX - startPoint!.pageX,
                    y: e.pageY - startPoint!.pageY
                };
            })
        );
    }

    registerHandler(event: MouseEvent | TouchEvent) {
        this.clearListeners();
        const _isTouchEvent = event instanceof MouseEvent;
        const moveEvent = _isTouchEvent ? 'mousemove' : 'touchmove';
        const upEvent = _isTouchEvent ? 'mouseup' : 'touchend';
        const moveEventHandler = (e: MouseEvent | TouchEvent) => {
            this.documentDraggingOutside$.next(e instanceof MouseEvent ? e : e.touches[0] || e.changedTouches[0]);
        };
        const upEventHandler = () => {
            this.documentDraggingOutside$.complete();
            this.clearListeners();
        };
        this.listeners.set(moveEvent, moveEventHandler);
        this.listeners.set(upEvent, upEventHandler);
        this.ngZone.runOutsideAngular(() => {
            this.listeners.forEach((handler, name) => {
                this.document.addEventListener(name, handler as EventListener);
            });
        });
    }
}

1	import { Inject, Injectable, NgZone } from '@angular/core';
2	import { DOCUMENT } from '@angular/common';
3	import { Observable, Subject } from 'rxjs';
4	import { map } from 'rxjs/operators';
5	import { ThyDistanceVector } from './typings';
6
7	/**
8	* @internal
9	*/	1✔
10	@Injectable({
11	providedIn: 'root'	×
12	})	×
13	export class ThyCarouselService {	×
14	private listeners = new Map<string, (event: MouseEvent \| TouchEvent) => void>();	×
15	private document: Document;
16
17	documentDraggingOutside$ = new Subject<MouseEvent \| Touch>();	×
18		×
19	constructor(private ngZone: NgZone, @Inject(DOCUMENT) document: any) {
20	this.document = document;	×
21	}
22
23	private clearListeners(): void {	×
24	this.listeners.forEach((handler, name) => {	×
25	this.document.removeEventListener(name, handler as EventListener);
26	});
27	this.listeners.clear();	×
28	}
29
30	private getEventPotions(event: MouseEvent \| TouchEvent): MouseEvent \| Touch {
31	if (event instanceof MouseEvent) {	×
32	return event;	×
33	} else {
34	return event.touches[0] \|\| event.changedTouches[0];	×
35	}	×
36	}	×
37		×
38	registerDrag(event: MouseEvent \| TouchEvent): Observable<ThyDistanceVector> {	×
39	if (this.documentDraggingOutside$) {
40	this.documentDraggingOutside$.complete();
41	}
42
43	const startPoint = this.getEventPotions(event);
44
45	this.documentDraggingOutside$ = new Subject<MouseEvent \| Touch>();	×
46		×
47	this.registerHandler(event);	×
48		×
49	return this.documentDraggingOutside$.pipe(	×
50	map(e => {	×
51	return {
52	x: e.pageX - startPoint!.pageX,	×
53	y: e.pageY - startPoint!.pageY	×
54	};	×
55	})
56	);	×
57	}	×
58		×
59	registerHandler(event: MouseEvent \| TouchEvent) {	×
60	this.clearListeners();	×
61	const _isTouchEvent = event instanceof MouseEvent;
62	const moveEvent = _isTouchEvent ? 'mousemove' : 'touchmove';
63	const upEvent = _isTouchEvent ? 'mouseup' : 'touchend';
64	const moveEventHandler = (e: MouseEvent \| TouchEvent) => {	1✔
65	this.documentDraggingOutside$.next(e instanceof MouseEvent ? e : e.touches[0] \|\| e.changedTouches[0]);
66	};
67	const upEventHandler = () => {
68	this.documentDraggingOutside$.complete();
69	this.clearListeners();	1✔
70	};
71	this.listeners.set(moveEvent, moveEventHandler);
72	this.listeners.set(upEvent, upEventHandler);
73	this.ngZone.runOutsideAngular(() => {
74	this.listeners.forEach((handler, name) => {
75	this.document.addEventListener(name, handler as EventListener);
76	});
77	});
78	}
79	}

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