angular2-longpress-button.js

import {
  Directive,
  Output,
  EventEmitter,
  HostBinding,
  HostListener
} from 'angular2/core.js';

@Directive({
  selector: '[long-press]'
})
export class LongPressButton {
  
  @Output()
  onLongPress = new EventEmitter();
  
  @Output()
  onLongPressing = new EventEmitter();
  
  @HostBinding('class.press')
  get press() { return this._pressing; }
  
  @HostBinding('class.longpress')
  get longPress() { return this._longPressing; }
  
  @HostListener('mousedown', ['$event'])
  onMouseDown(event) {
    this._pressing = true;
    this._longPressing = false;
    
    this._timeout = setTimeout(() => {
      this._longPressing = true;
      this.onLongPress.emit(event);
      
      this._interval = setInterval(() => {
        this.onLongPressing.emit(event);
      }, 50);
    }, 300); 
  }
  
  @HostListener('mouseup')
  onMouseUp = () => this.endPress()
  
  @HostListener('mouseleave')
  onMouseLeave = () => this.endPress()
  
  endPress() {
    clearTimeout(this._timeout);
    clearInterval(this._interval);
    
    this._longPressing = false;
    this._pressing = false;
  }
  
}

usage.html

<button 
  long-press 
  (onLongPressing)="myLongContinousPressFn()"
  (onLongPress)="myLongPressFn()"
/>

https://gist.github.com/leoiii12/7579bbcc7d5213203f63a476e729197c

This revision capable of touching on mobile.

Hello, what is the license of this gist?