diff --git a/.eslintrc b/.eslintrc
index 563e9e4..997fe47 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -5,6 +5,7 @@
},
"env": {
+ "browser": true,
"es6": true,
"node": true
}
diff --git a/README.md b/README.md
index ac5787d..0aca0ed 100644
--- a/README.md
+++ b/README.md
@@ -2,31 +2,31 @@
**A global utility for tracking the current input method (mouse, keyboard or touch).**
-## What Input is now v5
+## _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.
+_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.
+_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_ 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.
+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 ``s, `
- Tab, click or tap the links and form controls to see how What Input allows them to be styled differently.
+ Tab, click or tap the links and form controls to see how What Input allows them to be styled differently.
diff --git a/src/scripts/what-input.js b/src/scripts/what-input.js
index b65a412..c411d02 100644
--- a/src/scripts/what-input.js
+++ b/src/scripts/what-input.js
@@ -46,17 +46,25 @@ module.exports = (() => {
// UNIX timestamp of current event
let currentTimestamp = Date.now()
- // check for sessionStorage support
- // then check for session variables and use if available
- try {
- if (window.sessionStorage.getItem('what-input')) {
- currentInput = window.sessionStorage.getItem('what-input')
- }
+ // check for a `data-whatpersist` attribute on either the `html` or `body` elements, defaults to `true`
+ const shouldPersist = !(
+ docElem.dataset.whatpersist || document.body.dataset.whatpersist === 'false'
+ )
+
+ if (shouldPersist) {
+ // check for session variables and use if available
+ try {
+ if (window.sessionStorage.getItem('what-input')) {
+ currentInput = window.sessionStorage.getItem('what-input')
+ }
- if (window.sessionStorage.getItem('what-intent')) {
- currentIntent = window.sessionStorage.getItem('what-intent')
+ if (window.sessionStorage.getItem('what-intent')) {
+ currentIntent = window.sessionStorage.getItem('what-intent')
+ }
+ } catch (e) {
+ // fail silently
}
- } catch (e) {}
+ }
// form input types
const formInputs = ['button', 'input', 'select', 'textarea']
@@ -117,7 +125,9 @@ module.exports = (() => {
})
window.addEventListener('test', null, opts)
- } catch (e) {}
+ } catch (e) {
+ // fail silently
+ }
/*
* set up
@@ -201,10 +211,7 @@ module.exports = (() => {
if (shouldUpdate && currentInput !== value) {
currentInput = value
- try {
- window.sessionStorage.setItem('what-input', currentInput)
- } catch (e) {}
-
+ persistInput('input', currentInput)
doUpdate('input')
}
@@ -221,10 +228,7 @@ module.exports = (() => {
if (notFormInput) {
currentIntent = value
- try {
- window.sessionStorage.setItem('what-intent', currentIntent)
- } catch (e) {}
-
+ persistInput('intent', currentIntent)
doUpdate('intent')
}
}
@@ -261,10 +265,7 @@ module.exports = (() => {
) {
currentIntent = value
- try {
- window.sessionStorage.setItem('what-intent', currentIntent)
- } catch (e) {}
-
+ persistInput('intent', currentIntent)
doUpdate('intent')
}
}
@@ -295,6 +296,14 @@ module.exports = (() => {
docElem.removeAttribute('data-whatclasses')
}
+ const persistInput = (which, value) => {
+ try {
+ window.sessionStorage.setItem('what-' + which, value)
+ } catch (e) {
+ // fail silently
+ }
+ }
+
/*
* utilities
*/
@@ -451,6 +460,10 @@ module.exports = (() => {
if (position || position === 0) {
functionList.splice(position, 1)
}
+ },
+
+ clearStorage: () => {
+ window.sessionStorage.clear()
}
}
})()