diff --git a/README.md b/README.md index 710164935..c568be78f 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ * [`hasClass`](#hasclass) * [`hide`](#hide) * [`httpsRedirect`](#httpsredirect) +* [`onUserInputChange`](#onuserinputchange) * [`redirect`](#redirect) * [`scrollToTop`](#scrolltotop) * [`setStyle`](#setstyle) @@ -1704,6 +1705,45 @@ const httpsRedirect = () => {
[⬆ Back to top](#table-of-contents) +### 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); + }); +}; +``` + +
+Examples + +```js +onUserInputChange(type => { + console.log('The user is now using', type, 'as an input method.'); +}); +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### redirect Redirects to a specified URL. diff --git a/docs/index.html b/docs/index.html index 56bfe1b42..ec5a6462d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -59,7 +59,7 @@ wrapper.appendChild(box); box.appendChild(el); }); - }

 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

call

Given a key and a set of arguments, call them when given a context. Primarily useful in composition.

Use a closure to call a stored key with stored arguments.

const call = (key, ...args) => context => context[key](...args);
+    }
 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
 
Promise.resolve([1, 2, 3])
   .then(call('map', x => 2 * x))
   .then(console.log); //[ 2, 4, 6 ]
@@ -325,6 +325,23 @@ elementIsVisibleInViewport(el, true); // true // (partially visible)
 

httpsRedirect
Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.
Use location.protocol to get the protocol currently being used. If it's not HTTPS, use location.replace() to replace the existing page with the HTTPS version of the page. Use location.href to get the full address, split it with String.split() and remove the protocol part of the URL.
const httpsRedirect = () => {
   if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
 };
+

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.
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);
+  });
+};
+
onUserInputChange(type => {
+  console.log('The user is now using', type, 'as an input method.');
+});
 

redirect
Redirects to a specified URL.
Use window.location.href or window.location.replace() to redirect to url. Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).
const redirect = (url, asLink = true) =>
   asLink ? (window.location.href = url) : window.location.replace(url);
 
redirect('https://google.com');
diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md
index 99f5ac60d..a159c835d 100644
--- a/snippets/onUserInputChange.md
+++ b/snippets/onUserInputChange.md
@@ -8,16 +8,17 @@ Run the callback with the input type as an argument in either of these situation
 
 ```js
 const onUserInputChange = callback => {
-  let type = 'mouse', lastTime = 0;
+  let type = 'mouse',
+    lastTime = 0;
   const mousemoveHandler = () => {
     const now = performance.now();
-    if (now - lastTime < 20) 
-      type = 'mouse', callback(type), document.removeEventListener('mousemove', mousemoveHandler);
+    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);
+    (type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler);
   });
 };
 ```