This commit is contained in:
321
node_modules/what-input/README.md
generated
vendored
Normal file
321
node_modules/what-input/README.md
generated
vendored
Normal file
@@ -0,0 +1,321 @@
|
||||
# What Input?
|
||||
|
||||
**A global utility for tracking the current input method (mouse, keyboard or touch).**
|
||||
|
||||
## _What Input_ is now v5
|
||||
|
||||
Now with more information and less opinion!
|
||||
|
||||
_What Input_ adds data attributes to the `window` based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.
|
||||
|
||||
## How it works
|
||||
|
||||
_What Input_ uses event bubbling on the `window` to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` attribute.
|
||||
|
||||
Pointer Events are supported but note that `pen` inputs are remapped to `touch`.
|
||||
|
||||
_What Input_ also exposes a tiny API that allows the developer to ask for the current input, set custom ignore keys, and set and remove custom callback functions.
|
||||
|
||||
_What Input does not make assumptions about the input environment before the page is interacted with._ However, the `mousemove` and `pointermove` events are used to set a `data-whatintent="mouse"` attribute to indicate that a mouse is being used _indirectly_.
|
||||
|
||||
## Demo
|
||||
|
||||
Check out the demo to see _What Input_ in action.
|
||||
|
||||
https://ten1seven.github.io/what-input
|
||||
|
||||
### Interacting with Forms
|
||||
|
||||
Since interacting with a form _always_ requires use of the keyboard, _What Input_ uses the `data-whatintent` attribute to display a "buffered" version of input events while form `<input>`s, `<select>`s, and `<textarea>`s are being interacted with (i.e. mouse user's `data-whatintent` will be preserved as `mouse` while typing).
|
||||
|
||||
## Installing
|
||||
|
||||
Download the file directly.
|
||||
|
||||
Install via Yarn:
|
||||
|
||||
```shell
|
||||
yarn add what-input
|
||||
```
|
||||
|
||||
Install via NPM:
|
||||
|
||||
```shell
|
||||
npm install what-input
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Include the script directly in your project.
|
||||
|
||||
```html
|
||||
<script src="path/to/what-input.js"></script>
|
||||
```
|
||||
|
||||
Or require with a script loader.
|
||||
|
||||
```javascript
|
||||
import 'what-input'
|
||||
|
||||
// or
|
||||
|
||||
import whatInput from 'what-input'
|
||||
|
||||
// or
|
||||
|
||||
require('what-input')
|
||||
|
||||
// or
|
||||
|
||||
var whatInput = require('what-input')
|
||||
|
||||
// or
|
||||
|
||||
requirejs.config({
|
||||
paths: {
|
||||
whatInput: 'path/to/what-input',
|
||||
},
|
||||
})
|
||||
|
||||
require(['whatInput'], function () {})
|
||||
```
|
||||
|
||||
_What Input_ will start doing its thing while you do yours.
|
||||
|
||||
### Default Behavior
|
||||
|
||||
#### Persisting Input/Intent Across Pages
|
||||
|
||||
By default, _What Input_ uses [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist the input and intent values across pages. The benefit is that once a visitor has interacted with the page, subsequent pages won't have to wait for interactions to know the input method.
|
||||
|
||||
This behavior can be disabled by adding a `data-whatpersist="false"` attribute on either the `<html>` or `<body>`.
|
||||
|
||||
```html
|
||||
<html dir="ltr" lang="en" data-whatpersist="false">
|
||||
...
|
||||
</html>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<body data-whatpersist="false">
|
||||
...
|
||||
</body>
|
||||
```
|
||||
|
||||
Session storage can be cleared at any time with:
|
||||
|
||||
```javascript
|
||||
whatInput.clearStorage()
|
||||
```
|
||||
|
||||
### Basic Styling
|
||||
|
||||
```css
|
||||
/*
|
||||
* only suppress the focus ring once what-input has successfully started
|
||||
*/
|
||||
|
||||
/* suppress focus ring on form controls for mouse users */
|
||||
[data-whatintent='mouse'] *:focus {
|
||||
outline: none;
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** If you remove outlines with `outline: none;`, be sure to provide clear visual `:focus` styles so the user can see which element they are on at any time for greater accessibility. Visit [W3C's WCAG 2.0 2.4.7 Guideline](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) to learn more.
|
||||
|
||||
### Scripting
|
||||
|
||||
#### Current Input
|
||||
|
||||
Ask _What Input_ what the current input method is. This works best if asked after the events _What Input_ is bound to (`mousedown`, `keydown` and `touchstart`).
|
||||
|
||||
```javascript
|
||||
whatInput.ask() // returns `mouse`, `keyboard` or `touch`
|
||||
|
||||
myButton.addEventListener('click', () => {
|
||||
if (whatInput.ask() === 'mouse') {
|
||||
// do mousy things
|
||||
} else if (whatInput.ask() === 'keyboard') {
|
||||
// do keyboard things
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
If it's necessary to know if `mousemove` is being used, use the `'intent'` option. For example:
|
||||
|
||||
```javascript
|
||||
/*
|
||||
* nothing has happened but the mouse has moved
|
||||
*/
|
||||
|
||||
whatInput.ask() // returns `initial` because the page has not been directly interacted with
|
||||
whatInput.ask('intent') // returns `mouse` because mouse movement was detected
|
||||
|
||||
/*
|
||||
* the keyboard has been used, then the mouse was moved
|
||||
*/
|
||||
|
||||
whatInput.ask() // returns `keyboard` because the keyboard was the last direct page interaction
|
||||
whatInput.ask('intent') // returns `mouse` because mouse movement was the most recent action detected
|
||||
```
|
||||
|
||||
### Current Element
|
||||
|
||||
Ask _What Input_ the currently focused DOM element.
|
||||
|
||||
```javascript
|
||||
whatInput.element() // returns a string, like `input` or null
|
||||
```
|
||||
|
||||
#### Ignore Keys
|
||||
|
||||
Set a custom array of [keycodes](http://keycode.info/) that will be ignored (will not switch over to `keyboard`) when pressed. _A custom list will overwrite the default values._
|
||||
|
||||
```javascript
|
||||
/*
|
||||
* default ignored keys:
|
||||
* 16, // shift
|
||||
* 17, // control
|
||||
* 18, // alt
|
||||
* 91, // Windows key / left Apple cmd
|
||||
* 93 // Windows menu / right Apple cmd
|
||||
*/
|
||||
|
||||
whatInput.ignoreKeys([1, 2, 3])
|
||||
```
|
||||
|
||||
#### Specific Keys
|
||||
|
||||
Set a custom array of [keycodes](http://keycode.info/) that will trigger the keyboard pressed intent (will not switch to `keyboard` unless these keys are pressed). _This overrides ignoreKeys._
|
||||
|
||||
```javascript
|
||||
// only listen to tab keyboard press
|
||||
whatInput.specificKeys([9])
|
||||
```
|
||||
|
||||
#### Custom Callbacks
|
||||
|
||||
Fire a function when the input or intent changes.
|
||||
|
||||
```javascript
|
||||
// create a function to be fired
|
||||
var myFunction = function (type) {
|
||||
console.log(type)
|
||||
}
|
||||
|
||||
// fire `myFunction` when the intent changes
|
||||
whatInput.registerOnChange(myFunction, 'intent')
|
||||
|
||||
// fire `myFunction` when the input changes
|
||||
whatInput.registerOnChange(myFunction, 'input')
|
||||
|
||||
// remove custom event
|
||||
whatInput.unRegisterOnChange(myFunction)
|
||||
```
|
||||
|
||||
## Compatibility
|
||||
|
||||
_What Input_ works in all modern browsers.
|
||||
|
||||
## Changelog
|
||||
|
||||
### v5.2.12
|
||||
|
||||
- **Fixed:** Improved detection and respect for of `data-whatpersist` before `DOMContentLoaded`. Fix via [FanFataL](https://github.com/FanFataL).
|
||||
|
||||
### v5.2.11
|
||||
|
||||
- **Fixed:** Adds `useCapture` so events can be detected before `preventDefault` cancels them on local listeners (h/t [jojo080889](https://github.com/jojo080889)).
|
||||
|
||||
### v5.2.8 - 5.2.10
|
||||
|
||||
- **Added:** TypeScript definitions via [greypants](https://github.com/greypants).
|
||||
|
||||
### v5.2.7
|
||||
|
||||
- **Fixed:** Moves sourcemap to sit next to JavaScript package.
|
||||
|
||||
### v5.2.6
|
||||
|
||||
- **Fixed:** adds `DOMContentLoaded` event before looking for `data-whatpersist` attribute on body.
|
||||
|
||||
### v5.2.5
|
||||
|
||||
- **Fixed:** Hotfix for shaky support of `dataset` in IE10.
|
||||
|
||||
### v5.2.4
|
||||
|
||||
- **Added:** Ability to add `data-whatpersist="false"` attribute to the `<html>` or `<body>` tag to disable usage of session storage to persist input/intent across pages.
|
||||
- **Updated:** Build tools and added linting.
|
||||
|
||||
### v5.2.3
|
||||
|
||||
- **Fixed:** `activeElement` is null bug in IE is fixed (thanks @EasterPeanut).
|
||||
- **Fixed:** Mousewheel event detection works correctly again.
|
||||
|
||||
### v5.2.1
|
||||
|
||||
- **Fixed:** iOS was occasionally reporting `mouse` because of event execution order.
|
||||
- **Added:** `touchend` to input map
|
||||
- **Added:** Allows buttons inside forms to be treated like other form inputs.
|
||||
- **Added:** iTouch intent indicator in demo page (it worked all along, you just couldn't see it).
|
||||
|
||||
### v5.1.4
|
||||
|
||||
- **Fixed:** Increase buffering time by 20ms to fix iOS reporting mousedown
|
||||
- **Fixed:** Adds `touchend` to input map
|
||||
|
||||
### v5.1.3
|
||||
|
||||
- **Added:** Sourcemap for the minified version.
|
||||
|
||||
### v5.1.2
|
||||
|
||||
- **Added:** `specificKeys` functionality to allow overriding of keyboard keys list. Fix via [bk3](https://github.com/bk3).
|
||||
|
||||
### v5.1.1
|
||||
|
||||
- **Fixed:** Browsers with cookies turned off would throw an error with session storage. Fix via [yuheiy](https://github.com/yuheiy).
|
||||
|
||||
### v5.1.0
|
||||
|
||||
- **Added:** Session variable stores last used input and intent so subsequent page loads don't have to wait for interactions to set the correct input and intent state.
|
||||
- **Removed:** IE8 support.
|
||||
|
||||
### v5.0.7
|
||||
|
||||
- **Fixed:** `unRegisterOnChange` failed to unregister items at index 0.
|
||||
|
||||
### v5.0.5
|
||||
|
||||
- **Fixed:** Fail gracefully in non-DOM environments.
|
||||
|
||||
### v5.0.3
|
||||
|
||||
- **Fixed:** Event buffer for touch was not working correctly.
|
||||
|
||||
### Changes from v4
|
||||
|
||||
- **Added:** A the ability to add and remove custom callback function when the input or intent changes with `whatInput.registerOnChange` and `whatInput.unRegisterOnChange`.
|
||||
- **Added:** A `data-whatelement` attribute exposes any currently focused DOM element (i.e. `data-whatelement="a"` or `data-whatelement="input"`).
|
||||
- **Added:** A `data-whatclasses` attribute exposes any currently focused element's classes as a comma-separated list (i.e. `data-whatclasses="class1,class2"`).
|
||||
- **Added:** An API option to provide a custom array of keycodes that will be ignored.
|
||||
- **Changed:** Typing in form fields is no longer filtered out. The `data-whatinput` attribute immediately reflects the current input. The `data-whatintent` attribute now takes on the role of remembering mouse input prior to typing in or clicking on a form field.
|
||||
- **Changed:** If you use the Tab key to move from one input to another one - the `data-whatinput` attribute reflects the current input (switches to "keyboard").
|
||||
- **Removed:** `whatInput.types()` API option.
|
||||
- **Removed:** Bower support.
|
||||
- **Fixed:** Using mouse modifier keys (`shift`, `control`, `alt`, `cmd`) no longer toggles back to keyboard.
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
Special thanks to [Viget](http://viget.com/) for their encouragement and commitment to open source projects. Visit [code.viget.com](http://code.viget.com/) to see more projects from [Viget](http://viget.com).
|
||||
|
||||
Thanks to [mAAdhaTTah](https://github.com/mAAdhaTTah) for the initial conversion to Webpack. Thanks to [greypants](https://github.com/greypants) for adding TypeScript definitions.
|
||||
|
||||
_What Input_ is written and maintained by [@ten1seven](https://github.com/ten1seven).
|
||||
|
||||
## License
|
||||
|
||||
_What Input_ is freely available under the [MIT License](http://opensource.org/licenses/MIT).
|
||||
Reference in New Issue
Block a user