All files / directives upp-touch.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
103
104
105
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Directive, AfterViewInit  } from '@angular/core';
import { ElementRef, NgZone } from '@angular/core';
import { Output, EventEmitter} from '@angular/core';
 
/**
 * @Directive TouchDirective
 *
 * A custom Angular directive to handle touch and click events on an element.
 * This directive emits events for various touch and click interactions
 * outside of Angular's zone to improve performance.
 *
 * @selector [uppTouch]
 */
@Directive({
    selector: '[uppTouch]'
})
export class TouchDirective implements AfterViewInit {
 
    /**
     * Constructor
     *
     * @param el - Reference to the host DOM element where the directive is applied.
     * @param zone - Angular's NgZone service for running code inside or outside the Angular zone.
     */    
    constructor(private el: ElementRef, private zone: NgZone) {
        // nothing to do
    }
 
    /**
     * Lifecycle Hook: ngAfterViewInit
     *
     * Runs after the view has been initialized. Sets up event listeners
     * for various touch and click events on the host element.
     */    
    ngAfterViewInit() {
        this.zone.runOutsideAngular(() => {
            this.el.nativeElement.addEventListener('click', (event: MouseEvent) => {
                this._onTouchClick(event);
            }, { passive: true });
 
            this.el.nativeElement.addEventListener('touchstart', (event: TouchEvent) => {
                this._onTouchStart(event);
            }, { passive: true });
 
            this.el.nativeElement.addEventListener('touchend', (event: TouchEvent) => {
                this._onTouchLeave(event);
            }, { passive: true });
 
            this.el.nativeElement.addEventListener('touchcancel', (event: TouchEvent) => {
                this._onTouchLeave(event);
            }, { passive: true });
 
            this.el.nativeElement.addEventListener('touchleave', (event: TouchEvent) => {
                this._onTouchLeave(event);
            }, { passive: true });
 
            this.el.nativeElement.addEventListener('touchmove', (event: TouchEvent) => {
                this._onTouchLeave(event);
            }, { passive: true });
 
        });
    }
 
    /**
     * EventEmitter: TouchClick
     *
     * Emits when a `click` event is triggered on the host element.
     */
    @Output() TouchClick = new EventEmitter<any>();  
 
    /** @internal */
    private _onTouchClick(event: MouseEvent) {
        this.zone.run(() => {
            this.TouchClick.emit(event);
        });        
    }
 
    /**
     * EventEmitter: TouchStart
     *
     * Emits when a `touchstart` event is triggered on the host element.
     */    
    @Output() TouchStart = new EventEmitter<any>();  
 
    /** @internal */
    private _onTouchStart(event: TouchEvent) {
        this.zone.run(() => {
            this.TouchStart.emit(event);
        });        
    }
 
    /**
     * EventEmitter: TouchLeave
     *
     * Emits when a `touchend`, `touchcancel`, `touchleave`, or `touchmove` event is triggered
     * on the host element.
     */    
    @Output() TouchLeave = new EventEmitter<any>();  
 
    /** @internal */
    private _onTouchLeave(event: TouchEvent) {
        this.zone.run(() => {
            this.TouchLeave.emit(event);
        });        
    }
}