Swipe List

The swipe list component shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task.

For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.

You can set the details when swiping such as elements that appear, background color and the property of the animation.

Note
This component is released for 2.3 rectangular UI.
When you create this component in round screen, layout can be shown broken because screen hide swipe component.

Table of Contents

  1. How to Create Swipe List
  2. Options
  3. Events

How to Create Swipe List

In the following, left swipe shows "Calling" text and right swipe shows "Message" on the list item.

HTML

<div class="ui-page" id="pageSwipeList">
   <div class="ui-content">
      <!--List items that can be swiped-->
      <ul class="ui-listview ui-swipelist-list">
         <li>Andrew</li>
         <li>Bill</li>
         <li>Christina</li>
         <li>Daniel</li>
         <li>Edward</li>
         <li>Peter</li>
         <li>Sam</li>
         <li>Tom</li>
      </ul>
      <!--Swipe actions-->
      <div class="ui-swipelist">
         <div class="ui-swipelist-left">
            <div class="ui-swipelist-icon"></div>
            <div class="ui-swipelist-text">Calling</div>
         </div>
         <div class="ui-swipelist-right">
            <div class="ui-swipelist-icon"></div>
            <div class="ui-swipelist-text">Message</div>
         </div>
      </div>
   </div>
</div>

JavaScript

   var page = document.getElementById("pageSwipeList"),
       listElement = page.getElementsByClassName("ui-swipelist-list")[0],
       swipeList;
   page.addEventListener("pageshow", function()
   {
      /* Make swipe list object */
      swipeList = new tau.widget.SwipeList(listElement,
      {
         swipeTarget: "li",
         swipeElement: ".ui-swipelist"
      });
   });
   page.addEventListener("pagehide", function()
   {
      /* Release object */
      swipeList.destroy();
   });

Options

The following table describes the supported swipe list options.

Option Input type Default value Description
swipeTarget string li Swipe list selector.
swipeElement string .ui-swipelist Swipe list container selector.
swipeLeftElement string .ui-swipelist-left. Swipe left container selector.
swipeRightElement string .ui-swipelist-right Swipe right container selector.
threshold number 10 Define the threshold (in pixels) for the minimum swipe movement which allows the swipe action to appear.
animationThreshold number 150 Define the threshold (in pixels) for the minimum swipe movement that allows a swipe animation (with a color change) to be shown. The animation threshold is usually the threshold for the next operation after the swipe.
animationDuration number 200 Define the swipe list animation duration.

Do not change the default value, since it has been defined to show a complete color change.
animationInterval number 8 Define the swipe list animation interval. The animation is called with the requestAnimationFrame() method once every 1/60 seconds. The interval determines how many coordinates the animation proceeds between each call. The animation ends when the coordinates reach the value defined as animationDuration. This option basically allows you to control the speed of the animation.
ltrStartColor string #62a917 Define the start color for the left-to-right swipe.
ltrEndColor string #58493a Define the end color for the left-to-right swipe.
rtlStartColor string #eaa317 Define the start color for the right-to-left swipe.
rtlEndColor string #58493a Define the end color for the right-to-left swipe.

Events

The following table lists the events related to swipe lists.

Event Description
swipelist.left Triggered when a left-to-right swipe is completed.
swipelist.right Triggered when a right-to-left swipe is completed.

To use the swipe list events, use the following code:

   var slist = document.getElementById("swipelist");
   slist.addEventListener("swipelist.left", function(evt)
   {
      /* You can connect your app with a native app (such as phone call or message) using the Device API */
   });