JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<span class="btn">Tap me</span> <span class="btn">Or Me</span> <span class="btn">Button</span>
<span id="debug"></span>

SCSS

body {
    font-family: sans-serif;
    padding: 2em;
}
.btn {
    display: inline-block;
    padding: 1em 1.5em;
    background: #EEE;
    font-size: 1em;
    &:active {
        background: #39C;
        color: #FFF;   
    }
}

#debug {
    margin-left: 20px;
}

JavaScript

/* global jQuery:true */
(function () {
  'use strict';
  var isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;

  function Touche(nodes) {
    // Doing this allows the developer to omit the `new` keyword from their calls to Touche
    if (!(this instanceof Touche)) {
      return new Touche(nodes);
    }

    if (!nodes) {
      throw new Error('No DOM elements passed into Touche');
    }

    this.nodes = nodes;

    return this;
  }

  // Our own event handler
  Touche.prototype.on = function (event, fn) {
    var nodes = this.nodes, len = nodes.length, ev;

    ev = function (el, event, fn) {
        var called, move = function() {
            this.move = true;
        }, end = function () {
        if (!called && (called = true)) {
            console.log('this.move', this.move);
            if(typeof this.move === "undefined" || this.move == false) {
                fn.apply(this, arguments);
            }
            this.move = false
            this.timeout = setTimeout(function() {
                called = false;
                clearTimeout(this.timeout);
            }, 300);
        }
      };

      if (isTouch && event === 'click') {
        el.addEventListener('touchmove', move, false);
        el.addEventListener('touchend', end, false);
      } else {
        el.addEventListener(event, end, false);  
      }
    };

    // NodeList or just a Node?
    if (len) {
      while (len--) {
        ev(nodes[len], event, fn);
      }
    } else {
      ev(nodes, event, fn);
    }

    return this;
  };

  // Expose Touche
  window.Touche = Touche;

  // Has the developer used jQuery?
  if (window.jQuery && isTouch) {
    var originalOnMethod = jQuery.fn.on;

    // Change event type and re-apply .on() method
    jQuery.fn.on = function () {
      var event = arguments[0];
      arguments[0] = event === 'click' ? 'touchend' : event;
      originalOnMethod.apply(this, arguments);
      return this;
    };
 ...