Mobile Events Listeners

mobile-events-listeners.js

//Simple Orientation

onorientationchange="updateOrientation();";  onload="updateOrientation();";

              var displayStr = "Orientation : ";

              switch (window.orientation) {
                  case 0:
                      displayStr += "Portrait (0 deg)";
                      break;

                  case -90:
                      displayStr += "Landscape (-90 deg clockwise)";
                      break;

                  case 90:
                      displayStr += "Landscape (90 deg counterclockwise)";
                      break;

                  case 180:
                      displayStr += "Portrait (180 upside-down)";
                      break;

              }
              document.querySelector("#output").innerHTML = displayStr;

//Complex Motion

          var time=0;
          function handleMotion(e) {
          	time += e.interval;

          	if (time <= 1.5)
          		return;

          	time=0;
              var displayStr = "Acceleration: ";

			displayStr += "<p>x: " + e.acceleration.x + "</p>";
			displayStr += "<p>y: " + e.acceleration.y + "</p>";
			displayStr += "<p>z: " + e.acceleration.z + "</p>";

			displayStr += "Rotation Rate: ";

			displayStr += "<p>alpha: " + e.rotationRate.alpha + "</p>";
			displayStr += "<p>beta: " + e.rotationRate.beta + "</p>";
			displayStr += "<p>gamma: " + e.rotationRate.gamma + "</p>";

              document.querySelector("#output").innerHTML = displayStr;
          }

          window.addEventListener("devicemotion", handleMotion);


//Using Touch Events

function handleSwipe(elem, func) {
	var swipeDir;
	var startX, startY;
	var deltaX;
	var yThreshhold = 30;
	var xThreshhold = 50;

	 function trackTouchMove(e) {
		if (e.changedTouches.length != 1) {
			stopTouch();
		}
		else {
			deltaX = e.touches[0].pageX - startX;
			var deltaY = e.touches[0].pageY - startY;
			if (swipeDir == null) {
				swipeDir = deltaX;
				e.preventDefault();
			}
			else if (Math.abs(deltaY ) > yThreshhold) {
				stopTouch();
			}
			e.preventDefault();
		}
	}

	 function handleTouchEnd(e) {
		stopTouch();
		if (Math.abs(deltaX) > xThreshhold) {
			func(elem, deltaX > 0 ? 'right' : 'left' );
		}
	 }

	function handleTouchStart(e) {
		document.querySelector("#output").innerHTML = "";
		if (e.touches.length == 1)	{
			startX = e.touches[0].pageX;
			startY = e.touches[0].pageY;
			elem.addEventListener('touchmove', trackTouchMove, false);
			elem.addEventListener('touchend', handleTouchEnd, false);

			e.preventDefault();
		}
	}

	function stopTouch() {
		elem.removeEventListener('touchmove', trackTouchMove);
		elem.removeEventListener('touchend', handleTouchEnd);
	}

	elem.addEventListener("touchstart", handleTouchStart, false);
}

function swipe(elem, direction) {
	document.querySelector("#output").innerHTML = "You swiped: " + direction + " on element: " + elem.tagName;
}

window.onload = function() {
	handleSwipe(document.body, swipe);
}