Compare Gesture Handling

Compare gesture handling of each library(Hammer.js/QuoJS/TouchSwipe)

HTML

<script src="https://rawgithub.com/EightMedia/hammer.js/master/hammer.min.js"></script>
<script src="https://rawgithub.com/icoxfog417/temporaryCDN/master/quojs/quo.js"></script>
<script src="https://rawgithub.com/mattbryson/TouchSwipe-Jquery-Plugin/master/jquery.touchSwipe.min.js"></script>
<script src="https://rawgithub.com/HotStudio/touchy/master/jquery.touchy.min.js"></script>
<div class="container">
  <div class="title">
    <h2>Gesture Detector</h2>
  </div>
  
  <div id="gesture-pad">
    Gesture Here!!
  </div>
  
  <div class="panel">
    Detected Gesture
    <hr></hr>
    <div id="detected" >
    </div>
    <br/>
   
    Select Library
    <hr></hr>
    <div id="hammer" class="detector">
      Hammer.js
    </div>
    <div id="quojs" class="detector">
      QuoJS
    </div>
    <div id="touchSwipe" class="detector">
      TouchSwipe
    </div>
    <div id="touchy" class="detector">
      Touchy
    </div>
  
</div>
<br style="clear:both"/>
</div>
<br/>
<div class="container">
  <h2>Gestures of each library.</h2>
  <div class="gesturelist">
      <a href="https://github.com/EightMedia/hammer.js">Hammer.js</a>
    <ul id="hammerList">
      <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>
  </div>

  <div class="gesturelist">
      <a href="https://github.com/soyjavi/QuoJS">Quo.js</a>
    <ul id="quojsList">
      <li>tap</li>
      <li>hold</li>
      <li>singleTap</li>
      <li>doubleTap</li>
      <li>swipe</li>
      <li>swiping</li>
     ...

CSS

html,body{
 padding:0px;
 margin:3px;
}

.container{
  width:99%;
}
#gesture-pad{
  width:60%;
  height:370px;
  min-width:300px;
  line-height:370px;
  color:gray;
  text-align:center;
  border:1px solid silver;
  background-color:ghostwhite;
  float:left;
  margin-right:15px;
  margin-bottom:15px;
  touch-action:pan-x;
}
.panel{
  width:60%;
  min-width:250px;
  max-width:350px;
  float:left;
}

#detected{
  border:1px solid silver;
  border-radius:10px;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  background-color:seagreen;
  color:white
}

.detector{
  border:1px solid silver;
  border-radius:10px;
  height:2.5em;
  margin-bottom:10px;
  line-height:2.5em;
  text-align:center;
}
.selected{
  background-color:palegreen;
}

.gesturelist{
  float:left;
  margin-right:10px;
}

JavaScript

document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0" />' );

$(function(){
  //initialization 
  $(".detector").bind("click touchstart",function(e){
    $(".detector").removeClass("selected");
    $(this).addClass("selected");
    
    unbindLibrary();
    bindLibrary($(this).prop("id"));
  });

  //bind library to gesture pad
  bindLibrary = function(id){
    var $pad = $("#gesture-pad");
    var events = [];
    var eventStr = "";
    $("#" + id + "List li").each(function(){
      events.push($(this).text());
    })
    //make target event list from each library's gestureList
    eventStr = events.join(" ");

    switch(id){
      case "hammer":
        hammer = Hammer($pad.get(0), {
          prevent_default: true
        })
        .on(eventStr, logEvent);
        break;
      case "quojs":
        for(var i = 0;i<events.length;i++){
          $$("#gesture-pad").on(events[i], logEvent);
        }
        $$("#gesture-pad").on("touchstart",function(e){
          e.preventDefault();
        });
        break;
      case "touchSwipe":
        var options = {};
        var touchSwipeHandler = function(name){
          if(name.indexOf("pinch") < 0){
            return function(event, distance, duration, fingerCount){ 
                     var e = {}; e["type"] = name; logEvent(e);        
                   };
          }else{
            return function(e, direction, distance, d, f, pinchZoom){ 
                     var e = {}; e["type"] = name; logEvent(e);        
                   };
          }
        };

        for(var i = 0;i<events.length;i++){
            options[events[i]] = new touchSwipeHandler(events[i]); 
        }
        $pad.swipe(options);
        break;
      case "touchy" :
        var handler = function(name){
            return function(event, phase, $target, data){
                     var e = {}; e["type"] = name; logEvent(e);
                  ...