JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<script src="https://raw.githubusercontent.com/john-doherty/swiped-events/master/src/swiped-events.js"></script>

JavaScript

document.addEventListener('swiped-left', function(e) {
    console.log('swiped left'); // the element that was swiped
});
document.addEventListener('swiped-right', function(e) {
    console.log('swiped right'); // the element that was swiped
});
document.addEventListener('swiped-up', function(e) {
    console.log('swiped up'); // the element that was swiped
});
document.addEventListener('swiped-down', function(e) {
    console.log('swiped down'); // the element that was swiped
});
/*!
 * swiped-events.js - v@version@
 * Pure JavaScript swipe events
 * https://github.com/john-doherty/swiped-events
 * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
 * @author John Doherty <www.johndoherty.info>
 * @license MIT
 */
(function (window, document) {

    'use strict';

    // patch CustomEvent to allow constructor creation (IE/Chrome)
    if (typeof window.CustomEvent !== 'function') {

        window.CustomEvent = function (event, params) {

            params = params || { bubbles: false, cancelable: false, detail: undefined };

            var evt = document.createEvent('CustomEvent');
            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
            return evt;
        };

        window.CustomEvent.prototype = window.Event.prototype;
    }

    document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchmove', handleTouchMove, false);
    document.addEventListener('touchend', handleTouchEnd, false);

    var xDown = null;
    var yDown = null;
    var xDiff = null;
    var yDiff = null;
    var timeDown = null;
    var startEl = null;

    function handleTouchEnd(e) {

        // if the user released on a different target, cancel!
        if (startEl !== e.target) return;

        var swipeThreshold = parseInt(startEl.getAttribute('data-swipe-threshold') || '20', 10);    // default 10px
        var swipeTimeout =...