SwipeDirectionMixin

Overview

Purpose: maps swipe gestures to direction semantics.

This mixin works in the middle of the Elix render pipeline:

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

Expects the component to provide:

• internal.goLeft and internal.goRight methods, e.g., by applying DirectionCursorMixin.

Provides the component with:

• swipeLeft and swipeRight methods compatible with TouchSwipeMixin and TrackpadSwipeMixin.

Usage

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

Mapping swipe gestures to direction semantics

This mixin maps a swipeLeft call to internal.goRight, and a swipeRight call to internal.goLeft. Note that the reversal of direction in those mappings: e.g., a swipe to the left means the user wants to go right, because the user is typically dragging something in from the right.