Merge pull request #417 from Chalarangelo/onUserInputChange

Create onUserInputChange.md

snippets/onUserInputChange.md

@@ -0,0 +1,29 @@
+### onUserInputChange
+
+Run the callback whenever the user input type changes (`mouse` or `touch`). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).
+
+Use two event listeners. Assume `mouse` input initially and bind a `touchstart` event listener to the document. 
+On `touchstart`, add a `mousemove` event listener to listen for two consecutive `mousemove` events firing within 20ms, using `performance.now()`.
+Run the callback with the input type as an argument in either of these situations.
+
+```js
+const onUserInputChange = callback => {
+  let type = 'mouse', lastTime = 0;
+  const mousemoveHandler = () => {
+    const now = performance.now();
+    if (now - lastTime < 20) 
+      type = 'mouse', callback(type), document.removeEventListener('mousemove', mousemoveHandler);
+    lastTime = now;
+  };
+  document.addEventListener('touchstart', () => {
+    if (type === 'touch') return;
+    type = 'touch', callback(type), document.addEventListener('mousemove', mousemoveHandler);
+  });
+};
+```
+
+```js
+onUserInputChange(type => {
+  console.log('The user is now using', type, 'as an input method.');
+});
+```