open-authenticator documentation
  1. Directives
  2. LongPressDirective

File

src/app/shared/directives/long-press.directive.ts

Description

HOW TO USE:

Metadata

Selector [appLongPress]
Standalone true

Index

Properties
Inputs
Outputs
HostListeners

Inputs

longPressTimeout
Type : number
Default value : 500
Defined in src/app/shared/directives/long-press.directive.ts:22

Outputs

appLongPressDo
Type : EventEmitter<number>
Defined in src/app/shared/directives/long-press.directive.ts:23

HostListeners

mousedown
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:37
mouseleave
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
mousemove
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
mouseup
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
touchcancel
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
touchend
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
touchmove
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:33
touchstart
Arguments : '$event'
Defined in src/app/shared/directives/long-press.directive.ts:37

Properties

Private Readonly handle
Default value : new Subject()
Defined in src/app/shared/directives/long-press.directive.ts:25
onExit
Default value : () => {...}
Decorators :
@HostListener('touchend', ['$event'])
@HostListener('touchcancel', ['$event'])
@HostListener('touchmove', ['$event'])
@HostListener('mouseup', ['$event'])
@HostListener('mouseleave', ['$event'])
@HostListener('mousemove', ['$event'])
Defined in src/app/shared/directives/long-press.directive.ts:33
startHold
Default value : () => {...}
Decorators :
@HostListener('mousedown', ['$event'])
@HostListener('touchstart', ['$event'])
Defined in src/app/shared/directives/long-press.directive.ts:37
 
import {
  Directive,
  HostListener,
  EventEmitter,
  Output,
  Input,
} from '@angular/core';
import { interval, Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';

/**
 * HOW TO USE:
 * <div appLongPress [holdTime]="500" (appLongPressDo)="holdHandler(anything)"></div>
 *
 * @param longPressTime (Optional). Will `emit()` every 100ms by default.
 */
@Directive({
  selector: '[appLongPress]',
  standalone: true,
})
export class LongPressDirective {
  @Input() longPressTimeout = 500;
  @Output() appLongPressDo: EventEmitter<number> = new EventEmitter();

  private readonly handle = new Subject();

  @HostListener('touchend', ['$event'])
  @HostListener('touchcancel', ['$event'])
  @HostListener('touchmove', ['$event'])
  @HostListener('mouseup', ['$event'])
  @HostListener('mouseleave', ['$event'])
  @HostListener('mousemove', ['$event'])
  onExit = () => this.handle.next(false);

  @HostListener('mousedown', ['$event'])
  @HostListener('touchstart', ['$event'])
  startHold = ($event: any) =>
    interval(this.longPressTimeout)
      .pipe(take(1), takeUntil(this.handle))
      .subscribe(() => this.appLongPressDo.emit($event));
}

results matching ""

    No results matching ""