Swipeout

Note! Swipeout is not complete tested in Android, and there is a known bug in some Android: Swipeout element may flicker when page scroll.

You must include these to file after light7.js and light7.css to use Swipeout:

{% highlight html %} {% endhighlight %}

Swipeout is an extension of list view that allows you to swipe over list elements to reveal hidden menu with available actions, like swipe-to-delete.

Let's look on layout structure of swipeout element in your list views:

{% highlight html %}

...

...

Action 1 Action 2

Action 1 Action 2

{% endhighlight %}

Where:

swipeout-content - wrapper for your list element. This container will move during swipe over the list item
swipeout-actions-left - container with left swipeout action buttons/links
swipeout-actions-right - container with right swipeout action buttons/links
swipeout-close - additional class on swipeout link that will close swipeout element when you click this link

Close And Delete

Add .swipeout-close to action link to close swipeout.

Add .swipeout-delete to action link to close swipeout. You can also add data-confirm="confirm message" and data-confirm-title="confirm title" to show a confirm dialog when user click the delete button.

{% highlight html %}

Swipe me left!

666

Action 1 Close

Remove me after confirm!

Delete Action 2

{% endhighlight %}

JavaScript

Swipeouts also has rich JavaScript API that allows you to control swipeout elements. Let's look on appropriate App's properties and methods:

$.swipeoutOpen(el, direction, callback) - reveal swipeout actions on specified element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
direction - string (could be "left" or "right") swipeout actions to open. Should be specified if item has both left and right swipeout actions. Optional
callback - function - callback function will be executed after swipeout element completes its opening animation

$.swipeoutClose(el, callback) - close swipeout actions on specified element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
callback - function - callback function will be executed after swipeout element completes its closing animation

$.swipeoutDelete(el, callback) - delete specified swipeout element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
callback - function - callback function will be executed after swipeout element completes its delete animation right before it will be removed from DOM

Swipeout Events

Swipeout elements have the following events:

Event	Target	Description
swipeout	Swipeout Element<li class="swipeout">	Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
open	Swipeout Element<li class="swipeout">	Event will be triggered when swipeout element starts its opening animation
opened	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its opening animation
close	Swipeout Element<li class="swipeout">	Event will be triggered when swipeout element starts its closing animation
closed	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its closing animation
delete	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element starts its delete animation
deleted	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM

{% highlight js %} $('.swipeout').on('swipeout', function (e) { console.log('Item opened on: ' + e.detail.progress + '%'); }); {% endhighlight %}