Add pointerMoveTolerance slider to the events demo

rj33 · Nov 21, 2014 · 56f1705 · 56f1705
1 parent 6a2a059
commit 56f1705
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/demo/events.html b/demo/events.html
@@ -1,14 +1,12 @@
-
 <!DOCTYPE html>
 <html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>interact.js events demo</title>
- <meta name="description" content="Display events with interact.js"
+ <meta name="description" content="Display events with interact.js"/>
  <meta name="author" content="Taye Adeyemi" />
  <script type="text/javascript" src="../interact.js"></script>
  <script type="text/javascript" src="js/events.js"></script>
- <link rel="stylesheet" href="css/html_svg.css" type="text/css"/>
  </head>
  <body>
  <style>
@@ -28,10 +26,53 @@
  font-size: 8em;
  font-size: 10vmin;
  font-family: sans-serif;
+
+ cursor: default;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ }
+
+ .tolerance-slider {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 80%;
+ height: 5%;
+ margin: 5% 10%;
+ }
+
+ #tolerance-display {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ margin: 2% 0%;
+
+ font-size: 2em;
+ font-size: 4vmin;
+ text-align: center;
+
+ color: #fff;
+ }
+
+ #tolerance-display::before {
+ content: "interact.pointerMoveTolerance( ";
+ }
+ #tolerance-display::after {
+ content: " )";
  }
  </style>
 
- <div id="swipe">Swipe accros the screen</div>
+ <div id="swipe">Tap, drag and swipe accros the screen</div>
+
+ <input class="tolerance-slider" type="range" value="1" step="1" min="1" max="100">
+
+ <pre id="tolerance-display">1</pre>
+
  </body>
 </html>
 
diff --git a/demo/js/events.js b/demo/js/events.js
@@ -46,4 +46,12 @@ interact('#swipe')
  });
 });
 
+interact('.tolerance-slider').on('input', function (event) {
+ var value = event.target.value|0;
+
+ interact.pointerMoveTolerance(value);
+
+ document.getElementById('tolerance-display').textContent = value;
+});
+
 }(window.interact));