JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="https://rawgithub.com/mariomc/bean/master/src/bean.js"></script>
<script src="https://rawgithub.com/mariomc/hammer.js/master/hammer.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<p class="alert"><strong>Press shift on your desktop for multitouch.</strong></p>


<div class="sidebar well well-small">
    <h4>Events</h4>
    <label class="checkbox">
        <input type="checkbox" checked id="prevent-default" /> block browser behavior (preventDefault)
    </label>
    <ul class="unstyled events" id="events-list">
        <li>touch</li>
        <li>release</li>
        <li>hold</li>
        <li>tap</li>
        <li>doubletap</li>

        <li>dragstart</li>
        <li>drag</li>
        <li>dragend</li>
        <li>dragleft</li>
        <li>dragright</li>
        <li>dragup</li>
        <li>dragdown</li>

        <li>swipe</li>
        <li>swipeleft</li>
        <li>swiperight</li>
        <li>swipeup</li>
        <li>swipedown</li>

        <li>transformstart</li>
        <li>transform</li>
        <li>transformend</li>
        <li>rotate</li>
        <li>pinch</li>
        <li>pinchin</li>
        <li>pinchout</li>
    </ul>
    <h4>EventData</h4>
    <ul class="unstyled properties">
        <li class="property-gesture"><strong>gesture</strong> <span id="log-prop-gesture"></span></li>
        <li><strong>touches</strong> <span id="log-prop-touches"></span></li>
        <li><strong>pointerType</strong> <span id="log-prop-pointerType"></span></li>
        <li><strong>center</strong> <span id="log-prop-center"></span></li>
        <li><strong>angle</strong> <span id="log-prop-angle"></span>&deg;</li>
        <li><strong>direction</strong> <span id="log-prop-direction"></span></li>
        <li><strong>distance</strong> <span id="log-prop-distance"></span>px</li>

        <li><strong>deltaTime</strong> <span id="log-prop-deltaTime"></span>ms</li>
       ...

CSS

body {
            padding: 30px;
        }

        #center-pos {
            position: absolute;
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 30px;
            border: solid 1px rgba(0,0,0,.3);
            margin-left: -16px;
            margin-top: -16px;
            pointer-events: none;
        }

        .sidebar {
            float: right;
            width: 150px;
            font-size: 12px;
        }

        .sidebar li {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .events li.active { background: lightgreen; }

        .properties li { white-space: nowrap; }
        .properties span { margin-left: 5px; }

        .hitarea {
            background: aliceblue;
            padding: 20px;
            border: solid #ccc 1px;
        }

        .hitarea-nested {
            background: lightblue;
        }

        @media screen and (max-width:640px) {
            body {
                padding: 10px;
            }

            .sidebar {
                float: none;
                width: auto;
                margin-bottom: 25px;
            }

            .sidebar li {
                display: inline-block;
                width: 30%;
            }

            .sidebar li.property-gesture {
                position: fixed;
                right: 0;
                top: 0;
                background: lightgreen;
                padding: 1px 4px;
                width: auto;
            }
        }

        @media screen and (max-width:480px) {
            .sidebar li {
                width: 49%;
            }
        }

JavaScript

/**
   * bind dom events
   * this overwrites addEventListener
   * @param   {HTMLElement}   element
   * @param   {String}        eventTypes
   * @param   {Function}      handler
   */
  Hammer.event.bindDoms = function(element, eventTypes, handler) {
      bean.on(element, eventTypes, function(ev) {
      var data = ev.originalEvent || ev;

      if(data.pageX === undefined) {
        data.pageX = ev.pageX;
        data.pageY = ev.pageY;
      }

      if(!data.target) {
        data.target = ev.target;
      }

      if(data.which === undefined) {
        data.which = data.button;
      }

      if(!data.preventDefault) {
        data.preventDefault = ev.preventDefault;
      }

      if(!data.stopPropagation) {
        data.stopPropagation = ev.stopPropagation;
      }

      handler.call(this, data);
    });
  };

  

  /**
   * the methods are called by the instance, but with the jquery plugin
   * we use the jquery event methods instead.
   * @this    {Hammer.Instance}
   * @return  {jQuery}
   */
  Hammer.Instance.prototype.ons = function(types, handler) {
      bean.on(this.element, types, function(ev, options){
          console.log(options);
          options = options || {};
          var hidrated_event = Hammer.utils.extend(ev, {gesture: options});
          return handler.call(this, hidrated_event);
      });
      return this.element;
  };
  Hammer.Instance.prototype.offs = function(types, handler) {
      var lol = bean.off(this.element, types, handler);
      console.log("lol", lol);
      return lol;
  };


  /**
   * trigger events
   * this is called by the gestures to trigger an event like 'tap'
   * @this    {Hammer.Instance}
   * @param   {String}    gesture
   * @param   {Object}    eventData
   * @return  {jQuery}
   */
  Hammer.Instance.prototype.trigger = function(gesture, eventData) {
    // trigger on the target if it is in the instance element,
    // this is for event delegation tricks
     var element = this.element;
   ...