Add data-whatpersist

ten1seven · Sep 27, 2019 · ec9a7d2 · ec9a7d2
1 parent 0612dfe
commit ec9a7d2
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 63 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,6 +5,7 @@
   },
 
   "env": {
+    "browser": true,
     "es6": true,
     "node": true
   }

diff --git 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 `<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).
+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
 
@@ -80,7 +80,35 @@ requirejs.config({
 require(['whatInput'], function() {})
 ```
 
-What Input will start doing its thing while you do yours.
+_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
 
@@ -101,7 +129,7 @@ What Input will start doing its thing while you do yours.
 
 #### 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`).
+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`
@@ -135,7 +163,7 @@ whatInput.ask('intent') // returns `mouse` because mouse movement was the most r
 
 ### Current Element
 
-Ask What Input the currently focused DOM element.
+Ask _What Input_ the currently focused DOM element.
 
 ```javascript
 whatInput.element() // returns a string, like `input` or null
@@ -189,10 +217,15 @@ whatInput.unRegisterOnChange(myFunction)
 
 ## Compatibility
 
-What Input works in all modern browsers.
+_What Input_ works in all modern browsers.
 
 ## Changelog
 
+### 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).
@@ -224,7 +257,7 @@ What Input works in all modern browsers.
 
 ### v5.1.0
 
-- **Added:** Session variable stores last used input and intent so subsiquent page loads don't have to wait for interactions to set the correct input and intent state.
+- **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
@@ -257,8 +290,8 @@ Special thanks to [Viget](http://viget.com/) for their encouragement and commitm
 
 Thanks to [mAAdhaTTah](https://github.com/mAAdhaTTah) for the initial conversion to Webpack.
 
-What Input is written and maintained by [@ten1seven](https://github.com/ten1seven).
+_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).
+_What Input_ is freely available under the [MIT License](http://opensource.org/licenses/MIT).
diff --git a/dist/maps/what-input.min.js.map b/dist/maps/what-input.min.js.map
diff --git a/dist/what-input.js b/dist/what-input.js
@@ -1,6 +1,6 @@
 /**
  * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
- * @version v5.2.3
+ * @version v5.2.4
  * @link https://github.com/ten1seven/what-input
  * @license MIT
  */
@@ -114,17 +114,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	  // UNIX timestamp of current event
 	  var 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`
+	  var 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
 	  var formInputs = ['button', 'input', 'select', 'textarea'];
@@ -182,6 +188,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    window.addEventListener('test', null, opts);
 	  } catch (e) {}
+	  // fail silently
+
 
 	  /*
 	   * set up
@@ -260,10 +268,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    if (shouldUpdate && currentInput !== value) {
 	      currentInput = value;
 
-	      try {
-	        window.sessionStorage.setItem('what-input', currentInput);
-	      } catch (e) {}
-
+	      persistInput('input', currentInput);
 	      doUpdate('input');
 	    }
 
@@ -275,10 +280,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (notFormInput) {
 	        currentIntent = value;
 
-	        try {
-	          window.sessionStorage.setItem('what-intent', currentIntent);
-	        } catch (e) {}
-
+	        persistInput('intent', currentIntent);
 	        doUpdate('intent');
 	      }
 	    }
@@ -306,10 +308,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    if ((!isScrolling && !validateTouch(value) || isScrolling && event.type === 'wheel' || event.type === 'mousewheel' || event.type === 'DOMMouseScroll') && currentIntent !== value) {
 	      currentIntent = value;
 
-	      try {
-	        window.sessionStorage.setItem('what-intent', currentIntent);
-	      } catch (e) {}
-
+	      persistInput('intent', currentIntent);
 	      doUpdate('intent');
 	    }
 	  };
@@ -337,6 +336,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    docElem.removeAttribute('data-whatclasses');
 	  };
 
+	  var persistInput = function persistInput(which, value) {
+	    try {
+	      window.sessionStorage.setItem('what-' + which, value);
+	    } catch (e) {
+	      // fail silently
+	    }
+	  };
+
 	  /*
 	   * utilities
 	   */
@@ -484,6 +491,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (position || position === 0) {
 	        functionList.splice(position, 1);
 	      }
+	    },
+
+	    clearStorage: function clearStorage() {
+	      window.sessionStorage.clear();
 	    }
 	  };
 	}();

diff --git a/dist/what-input.min.js b/dist/what-input.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "what-input",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "A global utility for tracking the current input method (mouse, keyboard or touch).",
   "main": "dist/what-input.js",
   "repository": {

diff --git a/src/markup/index.html b/src/markup/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -17,7 +17,7 @@ <h1>What Input?</h1>
       </p>
 
       <p>
-        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 <strong>What Input</strong> allows them to be styled differently.
       </p>
 
       <div class="well">