JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="ait-swipe-container">


   <div class="swipe-item">
     <div class="swipe-front">Weird things things are swiping.</div>
     <div class="swipe-rear"><button class="btn" type="button">Delete</button></div>
   </div>
   





 </div>

CSS

.ait-swipe-container {
  display: flex;
  border: 1px solid lightgray;
  margin: 1em;
  flex-direction: column;
}

.ait-swipe-container .swipe-item {
  overflow: hidden;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  border-bottom: 1px solid lightgray;

}


.ait-swipe-container .swipe-item:last-of-type {
  border-bottom: 0;
}

.ait-swipe-container .swipe-front {
  z-index: 2;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  touch-action: none; 
  padding: 1em;
  background-color: white;
  cursor: grab;
}


@media (pointer: fine) {
  .ait-swipe-container .swipe-item:hover .swipe-front {
    transform: translateX(var(--swipe-list-reveal-distance));
  }
}


.ait-swipe-container .swipe-rear {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background-color: lightgray;
  opacity: 0.5;
  transition: opacity 150ms ease-out;
}

.ait-swipe-container .swipe-item.active .swipe-rear {
  opacity: 1;
}




.swipe-item[data-swipe-left="true"] .swipe-rear {
  margin-left: auto;
}

.ait-swipe-container .swipe-rear .btn {
  margin: 0;
  border-radius: 0;
  flex-direction: column;
  font-size: 0.876rem;
  width: 5em;
}

JavaScript

var AIT = {};

AIT.revealSwipe = {

    debug: true,

    init: function () {

        "use strict";

        if (AIT.revealSwipe.debug) {
            console.log('[AIT.revealSwipe] init');
        }

        //swipe options
        AIT.revealSwipe.items = [];
        AIT.revealSwipe.options = {
            threshold: 50, // move threshold in px before detecting as swipe
            handleSize: 10, // width of handle in px that detect touch drag.
            mode: "horizontal", // horizontal - verrtical , allow swipe left right or top bottom
            state: {
                default: 1, //no swipe
                left: 2, //swipe to left
                right: 3, //swipe to right
                top: 4, //swipt to top
                bottom: 5 //swipe to bottom
            },
        };

        //smooth swiping animation engine:
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        // Simple way to check if some form of pointerevents is enabled or not
        window.PointerEventsSupport = false;
        if (window.PointerEvent) {
            window.PointerEventsSupport = true;
        }


        // all reveal swipe items:
        AIT.revealSwipe.container = document.querySelectorAll('.ait-swipe-container');
        // set a class to the swiper container:

        // loop trough all swipeable elements and bind swipe settings:
        if (AIT.revealSwipe.container) {

            AIT.revealSwipe.container.forEach(function (cont) {

                cont.querySelectorAll('.swipe-item').forEach(function (elm) {
                    AIT.revealSwipe.items.push(new AIT.revealSwipe.reveal(elm));
                });

            });

        } else {

            if...