swipe-to-action v0.0.4

SwipeToAction

This library was created for simulate native swipe to action in a list:

Changelog

### Version 0.0.4

• Add: added input locked property for lock slide if you want.

Version 0.0.3

• Fix: initial design removed
• Fix: adding resize div => recalc values
• Add: reloadComponent.
• Fix: working ok without one side.
• Fix: calc of right side.

How to work

Add the module to your component:

imports: [
  BrowserModule,
  SwipeToActionModule <--
],

Now wrap your item code with tag lib-actionswipe

<lib-actionswipe #swiper (swiping)="swiping($event)" (swipeFinished)="swipeFinish($event)" [waitForFinish]="true">
  <div #leftContent>
    LEFT SIDE
  </div>
  <div #mainContent>
    YOUR ORIGINAL ITEM
  </div>
  <div #rightContent>
    RIGHT SIDE
  </div>
</lib-actionswipe>

## Events

You can detect the move of slider with event "Swiping":

swiping(status: Swipe) {
    console.log('swiping: ' + status.movement.toFixed(2) + '% Side:' + status.side);
}

The movement property is a percentage of the slide. And side can be RIGHT and LEFT.

You can detect the end of swipe (when te user slide the max or part), in the case of partial cancel action, the property Side get the value NONE

swipeFinish(side: Side) {
    console.log('Swiped to: ' + (side === Side.LEFT ? 'left' : side === Side.RIGHT ? 'right' : 'Cancelled'));

    if (side === Side.NONE) {
      this.swiper.finish(); // cancelled
    } else {
      // Call to backend and then to finish
      setTimeout(() => {
        this.swiper.finish();
      }, 1000);
    }
}

Additionally if you set waitForFinish in false, the annimation of finish is automatically and instantly. But if you set this in true, you need to call finish using view child:

@ViewChild('swiper') swiper: SwipeToActionComponent;

this.swiper.finish();

Functions

Using view child you can call to internal functions:

finish(); Used to end animation.

reloadComponent() Reload default values (recalc widths and positions), this be useful if you have an display: none and when you change to display: block the view is break.