import { EventEmitter , Directive , OnInit , Output , Input , ElementRef } from '@angular/core' ; import { timer , Subscription } from 'rxjs' ; declare var window ; @ Directive ( { selector : '[long-press]' } ) export class LongPressDirective implements OnInit { private timerSub : Subscription ; @ Input ( 'long-press-delay' ) public delay ? : number = 500 ; @ Output ( 'long-press' ) public longPress : EventEmitter < any > = new EventEmitter ( ) ; constructor ( private elementRef ) { } public ngOnInit ( ) { const isTouch = ( 'ontouchstart' in document . documentElement ) ; const element = this . elementRef . nativeElement ; if ( element . onpointerdown ) { element . onpointerdown = ( ev ) => { this . timerSub = timer ( this . delay ) . subscribe ( ( ) => { this . longPress . emit ( ev ) ; const bodyEl = window . document . querySelector ( 'body' ) ; bodyEl . classList . add ( 'disablePointerEvents' ) ; setTimeout ( ( ) => { bodyEl . classList . remove ( 'disablePointerEvents' ) ; setTimeout ( ( ) => { bodyEl . style . setProperty ( 'transform' , 'translateZ(0)' ) ; requestAnimationFrame ( ( ) => { bodyEl . style . removeProperty ( 'transform' ) ; } ) ; } , 25 ) ; } , 750 ) ; } ) ; } ; } else { element . addEventListener ( 'touchstart' , ( ev ) => { this . timerSub = timer ( this . delay ) . subscribe ( ( ) => { this . longPress . emit ( ev ) ; const bodyEl = window . document . querySelector ( 'body' ) ; bodyEl . classList . add ( 'disablePointerEvents' ) ; setTimeout ( ( ) => { bodyEl . classList . remove ( 'disablePointerEvents' ) ; setTimeout ( ( ) => { bodyEl . style . setProperty ( 'transform' , 'translateZ(0)' ) ; requestAnimationFrame ( ( ) => { bodyEl . style . removeProperty ( 'transform' ) ; } ) ; } , 25 ) ; } , 750 ) ; } ) ; } , false ) ; element . addEventListener ( 'touchmove' , ( ev ) => { this . unsub ( ) ; } , false ) ; element . addEventListener ( 'touchend' , ( ev ) => { this . unsub ( ) ; } , false ) ; element . addEventListener ( 'touchcancel' , ( ev ) => { this . unsub ( ) ; } , false ) ; } element . onpointerup = ( ) => { this . unsub ( ) ; } ; element . onpointercancel = ( ) => { this . unsub ( ) ; } ; if ( isTouch ) { element . onpointerleave = ( ) => { this . unsub ( ) ; } ; } } private unsub ( ) { if ( this . timerSub && ! this . timerSub . closed ) { this . timerSub . unsubscribe ( ) ; } } }