SwipeCommandsMixin

Overview

Purpose: adds template elements to a list-like component, exposing commands that act on list items when the user swipes to the left or right.

This mixin does most of its work at the beginning of the Elix render pipeline:

events ➞ methods → setState → render DOM → post-render

Expects the component to provide:

• swipeFraction state member and swipeStart, swipeLeft, and swipeRight methods, typically via TouchSwipeMixin and TrackpadSwipeMixin.
• enableEffects optional state member, typically via EffectMixin. If present, the component uses that member to ensure animations are suppressed on initial page load.

Provides the component with:

• internal.template getter that adds the template elements to contain and position the elements (typically some form of buttons) for the commands.

Usage

import SwipeCommandsMixin from "elix/src/base/SwipeCommandsMixin.js";
class MyElement extends SwipeCommandsMixin(HTMLElement) {}

Example

A typical usage of this mixin in the context of an email application might look like:

In the above demo, you can swipe with touch on a mobile device or with a trackpad on a desktop. The above demo also provides keyboard support (Space key toggles a message's read/unread state; the Delete key deletes a message) to show how you can also support both keyboard and touch/trackpad use.

Defining commands

This mixin gives your component the ability to provide commands on a list item swipe to the left or right; your component must define the specific command visualization and behavior.

To define the UI for the commands, define a button-like element and slot it into leftCommandSlot (via slot="leftCommandSlot") for a command that should be revealed on a swipe to the right. Conversely, slot a command into rightCommandSlot that should be revealed on a swipe to the left.

The associated swipe mixins TouchSwipeMixin and TrackpadSwipeMixin will invoke the methods internal.swipeLeft and internal.swipeRight when the user completes a swipe in the desired direction. You can implement those methods to perform work at that point. In some cases, you may wish to defer work until SwipeCommandMixin has finished animating the commands and list item follow the swipe. For that, implement the method internal.swipeLeftComplete or internal.swipeRightComplete instead.