Fixes event buffer and adds it to keyboard events

README.md

@@ -8,18 +8,6 @@ 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.
 
-### 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.
-
 ## 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.
@@ -205,6 +193,24 @@ Add your own, or grab the bundle included here.
 <![endif]-->
 ```
 
+## Changelog
+
+### 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).

dist/what-input.js

@@ -79,6 +79,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  // last used input intent
 	  var currentIntent = currentInput;
 
+	  // event buffer timer
+	  var eventTimer = null;
+
 	  // form input types
 	  var formInputs = ['input', 'select', 'textarea'];
 
@@ -161,38 +164,38 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    // pointer events (mouse, pen, touch)
 	    if (window.PointerEvent) {
-	      window.addEventListener('pointerdown', updateInput);
+	      window.addEventListener('pointerdown', setInput);
 	      window.addEventListener('pointermove', setIntent);
 	    } else if (window.MSPointerEvent) {
-	      window.addEventListener('MSPointerDown', updateInput);
+	      window.addEventListener('MSPointerDown', setInput);
 	      window.addEventListener('MSPointerMove', setIntent);
 	    } else {
 	      // mouse events
-	      window.addEventListener('mousedown', updateInput);
+	      window.addEventListener('mousedown', setInput);
 	      window.addEventListener('mousemove', setIntent);
 
 	      // touch events
 	      if ('ontouchstart' in window) {
-	        window.addEventListener('touchstart', touchBuffer, options);
-	        window.addEventListener('touchend', touchBuffer);
+	        window.addEventListener('touchstart', eventBuffer, options);
+	        window.addEventListener('touchend', setInput);
 	      }
 	    }
 
 	    // mouse wheel
 	    window.addEventListener(detectWheel(), setIntent, options);
 
 	    // keyboard events
-	    window.addEventListener('keydown', updateInput);
-	    window.addEventListener('keyup', updateInput);
+	    window.addEventListener('keydown', eventBuffer);
+	    window.addEventListener('keyup', eventBuffer);
 
 	    // focus events
 	    window.addEventListener('focusin', setElement);
 	    window.addEventListener('focusout', clearElement);
 	  };
 
 	  // checks conditions before updating new input
-	  var updateInput = function updateInput(event) {
-	    // only execute if the touch buffer timer isn't running
+	  var setInput = function setInput(event) {
+	    // only execute if the event buffer timer isn't running
 	    if (!isBuffering) {
 	      var eventKey = event.which;
 	      var value = inputMap[event.type];
@@ -233,7 +236,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
 	    detectScrolling(event);
 
-	    // only execute if the touch buffer timer isn't running
+	    // only execute if the event buffer timer isn't running
 	    // or scrolling isn't happening
 	    if (!isBuffering && !isScrolling) {
 	      var value = inputMap[event.type];
@@ -264,16 +267,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	    docElem.removeAttribute('data-whatclasses');
 	  };
 
-	  // buffers touch events because they frequently also fire mouse events
-	  var touchBuffer = function touchBuffer(event) {
-	    if (event.type === 'touchstart') {
-	      isBuffering = false;
+	  // buffers events that frequently also fire mouse events
+	  var eventBuffer = function eventBuffer(event) {
+	    // set the current input
+	    setInput(event);
 
-	      // set the current input
-	      updateInput(event);
-	    } else {
-	      isBuffering = true;
-	    }
+	    // clear the timer if it happens to be running
+	    window.clearTimeout(eventTimer);
+
+	    // set the isBuffering to `true`
+	    isBuffering = true;
+
+	    // run the timer
+	    eventTimer = window.setTimeout(function () {
+	      // if the timer runs out, set isBuffering back to `false`
+	      isBuffering = false;
+	    }, 100);
 	  };
 
 	  /*

package.json

@@ -1,18 +1,14 @@
 {
   "name": "what-input",
-  "version": "5.0.2",
-  "description": "A global utility for tracking the current input method (mouse, keyboard or touch).",
+  "version": "5.0.3",
+  "description":
+    "A global utility for tracking the current input method (mouse, keyboard or touch).",
   "main": "dist/what-input.js",
   "repository": {
     "url": "https://github.com/ten1seven/what-input.git",
     "type": "git"
   },
-  "keywords": [
-    "accessibility",
-    "a11y",
-    "input",
-    "javascript"
-  ],
+  "keywords": ["accessibility", "a11y", "input", "javascript"],
   "author": "Jeremy Fields <[email protected]>",
   "license": "MIT",
   "bugs": {

src/scripts/what-input.js

@@ -15,6 +15,9 @@ module.exports = (() => {
   // last used input intent
   let currentIntent = currentInput
 
+  // event buffer timer
+  let eventTimer = null
+
   // form input types
   const formInputs = ['input', 'select', 'textarea']
 
@@ -101,38 +104,38 @@ module.exports = (() => {
 
     // pointer events (mouse, pen, touch)
     if (window.PointerEvent) {
-      window.addEventListener('pointerdown', updateInput)
+      window.addEventListener('pointerdown', setInput)
       window.addEventListener('pointermove', setIntent)
     } else if (window.MSPointerEvent) {
-      window.addEventListener('MSPointerDown', updateInput)
+      window.addEventListener('MSPointerDown', setInput)
       window.addEventListener('MSPointerMove', setIntent)
     } else {
       // mouse events
-      window.addEventListener('mousedown', updateInput)
+      window.addEventListener('mousedown', setInput)
       window.addEventListener('mousemove', setIntent)
 
       // touch events
       if ('ontouchstart' in window) {
-        window.addEventListener('touchstart', touchBuffer, options)
-        window.addEventListener('touchend', touchBuffer)
+        window.addEventListener('touchstart', eventBuffer, options)
+        window.addEventListener('touchend', setInput)
       }
     }
 
     // mouse wheel
     window.addEventListener(detectWheel(), setIntent, options)
 
     // keyboard events
-    window.addEventListener('keydown', updateInput)
-    window.addEventListener('keyup', updateInput)
+    window.addEventListener('keydown', eventBuffer)
+    window.addEventListener('keyup', eventBuffer)
 
     // focus events
     window.addEventListener('focusin', setElement)
     window.addEventListener('focusout', clearElement)
   }
 
   // checks conditions before updating new input
-  const updateInput = event => {
-    // only execute if the touch buffer timer isn't running
+  const setInput = event => {
+    // only execute if the event buffer timer isn't running
     if (!isBuffering) {
       let eventKey = event.which
       let value = inputMap[event.type]
@@ -184,7 +187,7 @@ module.exports = (() => {
     // test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
     detectScrolling(event)
 
-    // only execute if the touch buffer timer isn't running
+    // only execute if the event buffer timer isn't running
     // or scrolling isn't happening
     if (!isBuffering && !isScrolling) {
       let value = inputMap[event.type]
@@ -218,16 +221,22 @@ module.exports = (() => {
     docElem.removeAttribute('data-whatclasses')
   }
 
-  // buffers touch events because they frequently also fire mouse events
-  const touchBuffer = event => {
-    if (event.type === 'touchstart') {
-      isBuffering = false
+  // buffers events that frequently also fire mouse events
+  const eventBuffer = event => {
+    // set the current input
+    setInput(event)
 
-      // set the current input
-      updateInput(event)
-    } else {
-      isBuffering = true
-    }
+    // clear the timer if it happens to be running
+    window.clearTimeout(eventTimer)
+
+    // set the isBuffering to `true`
+    isBuffering = true
+
+    // run the timer
+    eventTimer = window.setTimeout(() => {
+      // if the timer runs out, set isBuffering back to `false`
+      isBuffering = false
+    }, 100)
   }
 
   /*