Travis build: 655
This commit is contained in:
40
README.md
40
README.md
@ -91,6 +91,7 @@
|
|||||||
* [`hasClass`](#hasclass)
|
* [`hasClass`](#hasclass)
|
||||||
* [`hide`](#hide)
|
* [`hide`](#hide)
|
||||||
* [`httpsRedirect`](#httpsredirect)
|
* [`httpsRedirect`](#httpsredirect)
|
||||||
|
* [`onUserInputChange`](#onuserinputchange)
|
||||||
* [`redirect`](#redirect)
|
* [`redirect`](#redirect)
|
||||||
* [`scrollToTop`](#scrolltotop)
|
* [`scrollToTop`](#scrolltotop)
|
||||||
* [`setStyle`](#setstyle)
|
* [`setStyle`](#setstyle)
|
||||||
@ -1704,6 +1705,45 @@ const httpsRedirect = () => {
|
|||||||
<br>[⬆ Back to top](#table-of-contents)
|
<br>[⬆ 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);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Examples</summary>
|
||||||
|
|
||||||
|
```js
|
||||||
|
onUserInputChange(type => {
|
||||||
|
console.log('The user is now using', type, 'as an input method.');
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<br>[⬆ Back to top](#table-of-contents)
|
||||||
|
|
||||||
|
|
||||||
### redirect
|
### redirect
|
||||||
|
|
||||||
Redirects to a specified URL.
|
Redirects to a specified URL.
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -8,16 +8,17 @@ Run the callback with the input type as an argument in either of these situation
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
const onUserInputChange = callback => {
|
const onUserInputChange = callback => {
|
||||||
let type = 'mouse', lastTime = 0;
|
let type = 'mouse',
|
||||||
|
lastTime = 0;
|
||||||
const mousemoveHandler = () => {
|
const mousemoveHandler = () => {
|
||||||
const now = performance.now();
|
const now = performance.now();
|
||||||
if (now - lastTime < 20)
|
if (now - lastTime < 20)
|
||||||
type = 'mouse', callback(type), document.removeEventListener('mousemove', mousemoveHandler);
|
(type = 'mouse'), callback(type), document.removeEventListener('mousemove', mousemoveHandler);
|
||||||
lastTime = now;
|
lastTime = now;
|
||||||
};
|
};
|
||||||
document.addEventListener('touchstart', () => {
|
document.addEventListener('touchstart', () => {
|
||||||
if (type === 'touch') return;
|
if (type === 'touch') return;
|
||||||
type = 'touch', callback(type), document.addEventListener('mousemove', mousemoveHandler);
|
(type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user