-
-
Save leoiii12/7579bbcc7d5213203f63a476e729197c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core'; | |
/** | |
* Generated class for the LongPressDirective directive. | |
* | |
* See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html | |
* for more info on Angular Directives. | |
*/ | |
@Directive({ | |
selector: '[long-press]' | |
}) | |
export class LongPressDirective { | |
private timeoutId: number = null; | |
private intervalId: number = null; | |
private isLongPressing: boolean; | |
private isPressing: boolean; | |
@Output() onLongPress = new EventEmitter(); | |
@Output() onLongPressing = new EventEmitter(); | |
@Input() timeout: number = 300; | |
@HostBinding('class.press') | |
get press() { | |
return this.isPressing; | |
} | |
@HostBinding('class.long-press') | |
get longPress() { | |
return this.isLongPressing; | |
} | |
@HostListener('touchstart', ['$event']) | |
public onMouseDown(event) { | |
this.isPressing = true; | |
this.isLongPressing = false; | |
this.timeoutId = (<any> window).setTimeout(() => { | |
this.isLongPressing = true; | |
this.onLongPress.emit(event); | |
this.intervalId = (<any> window).setInterval(() => { | |
this.onLongPressing.emit(event); | |
}, 30); | |
}, this.timeout); | |
} | |
@HostListener('touchend', ['$event']) | |
public onMouseLeave() { | |
this.endPress(); | |
} | |
private endPress() { | |
if (this.timeoutId !== null) | |
clearTimeout(this.timeoutId); | |
if (this.intervalId !== null) | |
clearInterval(this.intervalId); | |
this.isLongPressing = false; | |
this.isPressing = false; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button | |
long-press | |
[timeout]="250" | |
(onLongPressing)="myLongContinousPressFn()" | |
(onLongPress)="myLongPressFn()"> | |
Press me | |
</button |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment