Permalink
Browse files

Update index.html

  • Loading branch information...
1 parent f6b62fb commit 3c9a61288d010ac5282894f48e472a8ce39d5217 @andyjamesdavies committed Mar 24, 2012
Showing with 63 additions and 2 deletions.
  1. +63 −2 index.html
View
@@ -27,6 +27,26 @@
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; }
+
+ #triggerArea,
+ #logger {
+ display:block;
+ width:47%;
+ height:400px;
+ border:1px solid #333;
+ margin:0;
+ }
+
+ #triggerArea {
+ float:left;
+ margin-right:0.5%;
+ }
+
+ #logger {
+ float:right;
+ margin-left:0.5%;
+ overflow-y:auto;
+ }
</style>
</head>
@@ -55,10 +75,51 @@
<h2>Contact</h2>
<p>Twitter - @andyjamesdavies</p>
+ <h2>Example Usage</h2>
+
+ <div id="triggerArea"></div>
+
+ <ul id="logger"></ul>
+
+ <script type="text/javascript" src="https://raw.github.com/andyjamesdavies/jsTouchLayer/master/jsTouchLayer.min.js"></script>
+ <script type="text/javascript">
+ var logger = document.getElementById('logger');
+ var target = document.getElementById('triggerArea');
+ var touchLayer = new TouchLayer();
- </div>
+ var callback = function(event) {
+ console.log(event);
+ var element = document.createElement('li'),
+ str = event.type;
-<script type="text/javascript">
+ if (event.type === 'swipe' && event.data) {
+ str += ' direction:' + event.data.direction + ' deltaX:' + event.data.deltaX + ' deltaTime:' + event.data.deltaTime;
+ }
+
+ element.innerHTML = str;
+
+ if (logger.childNodes.length > 0) {
+ logger.insertBefore(element, logger.childNodes[0]);
+ } else {
+ logger.appendChild(element);
+ }
+ };
+
+ touchLayer.bind('tapstart', target, callback);
+ touchLayer.bind('tapcancel', target, callback);
+ touchLayer.bind('tap', target, callback);
+ touchLayer.bind('taphold', target, callback);
+ touchLayer.bind('doubletap', target, callback);
+ touchLayer.bind('singletap', target, callback);
+
+ touchLayer.bind('drag', target, callback);
+ touchLayer.bind('dragstart', target, callback);
+ touchLayer.bind('dragend', target, callback);
+
+ touchLayer.bind('swipe', target, callback);
+ </script>
+ </div>
+ <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

0 comments on commit 3c9a612

Please sign in to comment.