From b7ba4ba50e449567f03e94647ee67e1830dc57ed Mon Sep 17 00:00:00 2001 From: Travis CI Date: Fri, 29 Dec 2017 15:52:38 +0000 Subject: [PATCH] Travis build: 636 --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 28 +++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 112aa68c6..e3a8e7fdf 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) @@ -1703,6 +1704,58 @@ const httpsRedirect = () => {
[⬆ Back to top](#table-of-contents) +### onUserInputChange + +Will run the callback whenever the user changes their input type (either `mouse` or `touch`). This is useful +if you want to disable certain code depending on if the user is using touch as input or a mouse (including trackpads). + +Use two event listeners. Assume `mouse` input initially and bind a `touchstart` event listener to the document. +On `touchstart`, the callback is run and supplied with the current input type as an argument. +Then, add a `mousemove` event listener to listen for two consecutive `mousemove` events firing within 20ms +using `performance.now()` (browsers recently fire them every animation frame). Run the callback and supply the new type +`mouse` as the argument. This process needs to happen dynamically because of hybrid devices (such as a touchscreen laptop), +where the user can switch between either input type at will. + +```js +const onUserInputChange = callback => { + let type = 'mouse'; + + const mousemoveHandler = (() => { + let lastTime = 0; + return () => { + 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 a45295e6e..e41764024 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,32 @@ 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
Will run the callback whenever the user changes their input type (either mouse or touch). This is useful if you want to disable certain code depending on if the user is using touch as input or a mouse (including trackpads).
Use two event listeners. Assume mouse input initially and bind a touchstart event listener to the document. On touchstart, the callback is run and supplied with the current input type as an argument. Then, add a mousemove event listener to listen for two consecutive mousemove events firing within 20ms using performance.now() (browsers recently fire them every animation frame). Run the callback and supply the new type mouse as the argument. This process needs to happen dynamically because of hybrid devices (such as a touchscreen laptop), where the user can switch between either input type at will.
const onUserInputChange = callback => {
+  let type = 'mouse';
+
+  const mousemoveHandler = (() => {
+    let lastTime = 0;
+    return () => {
+      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');