x-tag touch

testing x-tag touch events

by Aras Balali Moghaddam

HTML

<script src="https://rawgithub.com/x-tag/core/master/dist/x-tag-core.min.js"></script>
<script src="https://rawgithub.com/x-tag/gestures/master/src/main.js"></script>
<div id="container"></div>
<div id="centroid"></div>

CSS

#centroid {
  width: 50px;
  height: 50px;
  margin: auto;
  background: #AA1010;
  border-radius: 50%;
}

#container {
  width: 600px;
  height: 600px;
  margin: auto;
  background: #999;
  border-radius: 50%;
}

#centroid:after {
  content: attr(msg);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  line-height: 11px;
  font-size: 11px;
  font-weight: bold;
}

html, body {
  height: 100%;
}

body {
  background-color: #fff;
  -webkit-transition: background-color ease 0.7s;
  -moz-transition: background-color ease 0.7s;
  -ms-transition: background-color ease 0.7s;
  transition: background-color ease 0.7s;
}

body:after {
  content: attr(msg);
  position: absolute;
  top: 25px;
  left: 50%;
}

JavaScript

var centroid = document.getElementById('centroid');
var container = document.getElementById('container');

xtag.addEvent(container, 'pinch', function(e) {
  centroid.setAttribute('msg', 'pinch ' + e.detail.direction.toUpperCase());
  e.baseEvent.preventDefault();
  centroid.style.top = e.detail.centroid.y + 'px';
  centroid.style.left = e.detail.centroid.x + 'px';
  centroid.style.width = centroid.style.height = e.detail.distance * .35 + 'px';
  centroid.style.backgroundColor = e.detail.direction == 'in' ? 'limegreen' : 'orangered';
});

xtag.addEvent(container, 'touchstart', function(e) {
  e.preventDefault();
});

xtag.addEvent(container, 'touchmove', function(e) {
  e.preventDefault();
  var touchPoint = e.changedTouches[0];
  centroid.style.top = touchPoint.clientY + 'px';
  centroid.style.left = touchPoint.clientX + 'px';
});

xtag.addEvent(container, 'swipe', function(e) {
  document.body.setAttribute('msg', 'swipe');
  document.body.style.backgroundColor = 'lightblue';
});

xtag.addEvent(container, 'longtap', function(e) {
  document.body.setAttribute('msg', 'longtap');
  document.body.style.backgroundColor = 'pink';
  centroid.style.top = e.detail.centroid.y + 'px';
  centroid.style.left = e.detail.centroid.x + 'px';
});

xtag.addEvent(container, 'transitionend', function(e) {
  document.body.style.backgroundColor = '';
});