From e3ba971aa6e8331e9b456a3f38b2fbd509c5e74a Mon Sep 17 00:00:00 2001 From: atomiks Date: Sat, 30 Dec 2017 02:41:53 +1100 Subject: [PATCH 1/5] Create onUserInputChange.md --- snippets/onUserInputChange.md | 43 +++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 snippets/onUserInputChange.md diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md new file mode 100644 index 000000000..f54d84e76 --- /dev/null +++ b/snippets/onUserInputChange.md @@ -0,0 +1,43 @@ +### 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) + }); +}; +``` + +```js +onUserInputChange(type => { + console.log('The user is now using', type, 'as an input method.'); +}); +``` From e4f8aa26a1237d0524270c19b2e1acb93e5a91b3 Mon Sep 17 00:00:00 2001 From: atomiks Date: Sat, 30 Dec 2017 02:46:10 +1100 Subject: [PATCH 2/5] Update tag_database --- tag_database | 1 + 1 file changed, 1 insertion(+) diff --git a/tag_database b/tag_database index f5633a5fa..8169555b8 100644 --- a/tag_database +++ b/tag_database @@ -85,6 +85,7 @@ negate:logic nthElement:array objectFromPairs:object objectToPairs:object +onUserInputChange:browser orderBy:object palindrome:math percentile:math From f9afb5e0ee86c60470300c677b80801a60a1772c Mon Sep 17 00:00:00 2001 From: atomiks Date: Sat, 30 Dec 2017 02:51:10 +1100 Subject: [PATCH 3/5] semicolons --- snippets/onUserInputChange.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md index f54d84e76..5a3063d44 100644 --- a/snippets/onUserInputChange.md +++ b/snippets/onUserInputChange.md @@ -24,14 +24,14 @@ const onUserInputChange = callback => { document.removeEventListener('mousemove', mousemoveHandler); } lastTime = now; - } + }; })(); document.addEventListener('touchstart', () => { if (type === 'touch') return; type = 'touch'; callback(type); - document.addEventListener('mousemove', mousemoveHandler) + document.addEventListener('mousemove', mousemoveHandler); }); }; ``` From 0fc5cfed996df57bc5d6aa2aa213d3463ed09b80 Mon Sep 17 00:00:00 2001 From: atomiks Date: Sat, 30 Dec 2017 03:11:20 +1100 Subject: [PATCH 4/5] Make it shorter --- snippets/onUserInputChange.md | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md index 5a3063d44..d726c51fb 100644 --- a/snippets/onUserInputChange.md +++ b/snippets/onUserInputChange.md @@ -12,26 +12,17 @@ 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; - }; - })(); - + 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); + type = 'touch', callback(type), document.addEventListener('mousemove', mousemoveHandler); }); }; ``` From 38cdc85f38bc50868749cdd70589c2d5374ea724 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 30 Dec 2017 12:52:30 +0200 Subject: [PATCH 5/5] Update onUserInputChange.md --- snippets/onUserInputChange.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md index d726c51fb..99f5ac60d 100644 --- a/snippets/onUserInputChange.md +++ b/snippets/onUserInputChange.md @@ -1,23 +1,18 @@ ### 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). +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`, 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. +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) { + if (now - lastTime < 20) type = 'mouse', callback(type), document.removeEventListener('mousemove', mousemoveHandler); - } lastTime = now; }; document.addEventListener('touchstart', () => {