JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<dl id="data">	<dt><strong>Event Name</strong></dt>

    <dd id="eventName"></dd>	<dt>Event x</dt>

    <dd id="currX"></dd>	<dt>Event y</dt>

    <dd id="currY"></dd>	<dt>Swipe Event distance x</dt>

    <dd id="distanceX"></dd>	<dt>Swipe Event distance y</dt>

    <dd id="distanceY"></dd>
</dl>
<div id="test"></div>

CSS

body {
    overflow:scroll;
}
#test {
    margin:0;
    width:100%;
    height:3500px;
    color:white;
    background:url(http://lorempixel.com/500/500/sports/);
    cursor:pointer;
}
dl {
    color:white;
    background:black;
    position:fixed;
}

JavaScript

/**
*
* Version: 0.0.8
* Author: Gianluca Guarini
* Contact: [email protected]
* Website: http://www.gianlucaguarini.com/
* Twitter: @gianlucaguarini
*
* Copyright (c) 2013 Gianluca Guarini
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/

(function(doc, win) {
	'use strict';
	if (typeof doc.createEvent !== 'function') return false; // no touch events here
	// helpers
	var useJquery = typeof jQuery !== 'undefined',
		isTouch = !!('ontouchstart' in window) && navigator.userAgent.indexOf('PhantomJS') < 0,
		setListener = function(elm, events, callback) {
			var eventsArray = events.split(' '),
				i = eventsArray.length;

			while (i--) {
				elm.addEventListener(eventsArray[i], callback, false);
			}
		},
		getPointerEvent = function(event) {
			return event.targetTouches ? event.targetTouches[0] : event;
		},
		sendEvent = function(elm, eventName, originalEvent, data) {
			var customEvent = doc.createEvent('Event');

			data = data || {};
			data.x =...