From 7f0d5953bd0746d4d388a87223aec8c05c9b1eca Mon Sep 17 00:00:00 2001 From: Jeremy Fields Date: Mon, 3 Jul 2017 13:37:53 -0600 Subject: [PATCH] Custom events can be unregistered, ref #59 --- README.md | 13 ++++++++++--- bower.json | 17 +++-------------- dist/what-input.js | 28 +++++++++++++++++++++++----- dist/what-input.min.js | 4 ++-- docs/index.html | 4 ++-- docs/scripts/what-input.js | 28 +++++++++++++++++++++++----- package.json | 9 ++------- src/what-input.js | 31 ++++++++++++++++++++++++------- 8 files changed, 89 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 7ad99d3..da7039d 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,14 @@ __A global utility for tracking the current input method (mouse, keyboard or touch).__ -## What Input is now v4.2.0 +## What Input is now v4.3.0 What Input adds data attributes to the `` tag based on the type of input being used. It also exposes a simple API that can be used for scripting interactions. +### July 3, 2017 + +* Updated: custom events can now be registered and unregistered. + ### June 13, 2017 * Updated: Typing _in_ form inputs does not change input type, but tabbing between inputs _does_ initiate a switch from `mouse` to `keyboard`. @@ -178,10 +182,13 @@ var myFunction = function(type) { }; // fire `myFunction` when the intent changes -whatInput.onChange(myFunction, 'intent'); +whatInput.registerOnChange(myFunction, 'intent'); // fire `myFunction` when the input changes -whatInput.onChange(myFunction, 'input'); +whatInput.registerOnChange(myFunction, 'input'); + +// remove custom event +whatInput.unRegisterOnChange(myFunction); ``` ## Compatibility diff --git a/bower.json b/bower.json index 2fee18b..996048f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "what-input", - "version": "4.2.0", + "version": "4.3.0", "homepage": "https://github.com/ten1seven/what-input", "repository": { "url": "https://github.com/ten1seven/what-input.git", @@ -9,18 +9,7 @@ "author": "Jeremy Fields ", "description": "A global utility for tracking the current input method (mouse, keyboard or touch).", "main": "dist/what-input.js", - "keywords": [ - "accessibility", - "a11y", - "input", - "javascript" - ], + "keywords": ["accessibility", "a11y", "input", "javascript"], "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] + "ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"] } diff --git a/dist/what-input.js b/dist/what-input.js index c4226e1..40b40af 100644 --- 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 v4.2.0 + * @version v4.3.0 * @link https://github.com/ten1seven/what-input * @license MIT */ @@ -97,6 +97,7 @@ return /******/ (function(modules) { // webpackBootstrap // mapping of events to input types var inputMap = { keydown: 'keyboard', + keyup: 'keyboard', mousedown: 'mouse', mousemove: 'mouse', MSPointerDown: 'pointer', @@ -185,6 +186,7 @@ return /******/ (function(modules) { // webpackBootstrap // keyboard events doc.addEventListener('keydown', updateInput); + doc.addEventListener('keyup', updateInput); }; // checks conditions before updating new input @@ -275,7 +277,7 @@ return /******/ (function(modules) { // webpackBootstrap var fireFunctions = function fireFunctions(type) { for (var i = 0, len = functionList.length; i < len; i++) { if (functionList[i].type === type) { - functionList[i].function.call(undefined, currentIntent); + functionList[i].fn.call(undefined, currentIntent); } } }; @@ -310,6 +312,14 @@ return /******/ (function(modules) { // webpackBootstrap return wheelType; }; + var objPos = function objPos(match) { + for (var i = 0, len = functionList.length; i < len; i++) { + if (functionList[i].fn === match) { + return i; + } + } + }; + /* * init */ @@ -346,11 +356,19 @@ return /******/ (function(modules) { // webpackBootstrap // attach functions to input and intent "events" // funct: function to fire on change // eventType: 'input'|'intent' - onChange: function onChange(funct, eventType) { + registerOnChange: function registerOnChange(fn, eventType) { functionList.push({ - function: funct, - type: eventType + fn: fn, + type: eventType || 'input' }); + }, + + unRegisterOnChange: function unRegisterOnChange(fn) { + var position = objPos(fn); + + if (position) { + functionList.splice(position, 1); + } } }; }(); diff --git a/dist/what-input.min.js b/dist/what-input.min.js index d34e22b..70c4678 100644 --- a/dist/what-input.min.js +++ b/dist/what-input.min.js @@ -1,7 +1,7 @@ /** * what-input - A global utility for tracking the current input method (mouse, keyboard or touch). - * @version v4.2.0 + * @version v4.3.0 * @link https://github.com/ten1seven/what-input * @license MIT */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";e.exports=function(){var e="initial",t=null,n=document.documentElement,o=["input","select","textarea"],i=[],r=[16,17,18,91,93],u=[9],d={keydown:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch"},s=[],a=!1,c=!1,p={x:null,y:null},f={2:"touch",3:"touch",4:"mouse"},v=!1;try{var m=Object.defineProperty({},"passive",{get:function(){v=!0}});window.addEventListener("test",null,m)}catch(e){}var w=function(){window.PointerEvent?(n.addEventListener("pointerdown",l),n.addEventListener("pointermove",y)):window.MSPointerEvent?(n.addEventListener("MSPointerDown",l),n.addEventListener("MSPointerMove",y)):(n.addEventListener("mousedown",l),n.addEventListener("mousemove",y),"ontouchstart"in window&&(n.addEventListener("touchstart",x),n.addEventListener("touchend",x))),n.addEventListener(b(),y,!!v&&{passive:!0}),n.addEventListener("keydown",l)},l=function(n){if(!a){var i=n.which,s=d[n.type];if("pointer"===s&&(s=L(n)),e!==s||t!==s){var c=document.activeElement,p=!1;(c&&c.nodeName&&-1===o.indexOf(c.nodeName.toLowerCase())||-1!==u.indexOf(i))&&(p=!0),("touch"===s||"mouse"===s||"keyboard"===s&&i&&p&&-1===r.indexOf(i))&&(e=t=s,h())}}},h=function(){n.setAttribute("data-whatinput",e),n.setAttribute("data-whatintent",e),-1===s.indexOf(e)&&(s.push(e),n.className+=" whatinput-types-"+e),E("input")},y=function(e){if(p.x!==e.screenX||p.y!==e.screenY?(c=!1,p.x=e.screenX,p.y=e.screenY):c=!0,!a&&!c){var o=d[e.type];"pointer"===o&&(o=L(e)),t!==o&&(t=o,n.setAttribute("data-whatintent",t),E("intent"))}},x=function(e){"touchstart"===e.type?(a=!1,l(e)):a=!0},E=function(e){for(var n=0,o=i.length;nWhat Input? console.log('intent: ' + type) }; - whatInput.onChange(myIntentFunction, 'intent'); - whatInput.onChange(myInputFunction, 'input'); + whatInput.registerOnChange(myInputFunction); + whatInput.registerOnChange(myIntentFunction, 'intent'); diff --git a/docs/scripts/what-input.js b/docs/scripts/what-input.js index c4226e1..40b40af 100644 --- a/docs/scripts/what-input.js +++ b/docs/scripts/what-input.js @@ -1,6 +1,6 @@ /** * what-input - A global utility for tracking the current input method (mouse, keyboard or touch). - * @version v4.2.0 + * @version v4.3.0 * @link https://github.com/ten1seven/what-input * @license MIT */ @@ -97,6 +97,7 @@ return /******/ (function(modules) { // webpackBootstrap // mapping of events to input types var inputMap = { keydown: 'keyboard', + keyup: 'keyboard', mousedown: 'mouse', mousemove: 'mouse', MSPointerDown: 'pointer', @@ -185,6 +186,7 @@ return /******/ (function(modules) { // webpackBootstrap // keyboard events doc.addEventListener('keydown', updateInput); + doc.addEventListener('keyup', updateInput); }; // checks conditions before updating new input @@ -275,7 +277,7 @@ return /******/ (function(modules) { // webpackBootstrap var fireFunctions = function fireFunctions(type) { for (var i = 0, len = functionList.length; i < len; i++) { if (functionList[i].type === type) { - functionList[i].function.call(undefined, currentIntent); + functionList[i].fn.call(undefined, currentIntent); } } }; @@ -310,6 +312,14 @@ return /******/ (function(modules) { // webpackBootstrap return wheelType; }; + var objPos = function objPos(match) { + for (var i = 0, len = functionList.length; i < len; i++) { + if (functionList[i].fn === match) { + return i; + } + } + }; + /* * init */ @@ -346,11 +356,19 @@ return /******/ (function(modules) { // webpackBootstrap // attach functions to input and intent "events" // funct: function to fire on change // eventType: 'input'|'intent' - onChange: function onChange(funct, eventType) { + registerOnChange: function registerOnChange(fn, eventType) { functionList.push({ - function: funct, - type: eventType + fn: fn, + type: eventType || 'input' }); + }, + + unRegisterOnChange: function unRegisterOnChange(fn) { + var position = objPos(fn); + + if (position) { + functionList.splice(position, 1); + } } }; }(); diff --git a/package.json b/package.json index 382fa14..6e35315 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,13 @@ { "name": "what-input", - "version": "4.2.0", + "version": "4.3.0", "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 ", "license": "MIT", "bugs": { diff --git a/src/what-input.js b/src/what-input.js index a39740d..23d4723 100644 --- a/src/what-input.js +++ b/src/what-input.js @@ -35,6 +35,7 @@ module.exports = (() => { // mapping of events to input types const inputMap = { keydown: 'keyboard', + keyup: 'keyboard', mousedown: 'mouse', mousemove: 'mouse', MSPointerDown: 'pointer', @@ -127,6 +128,7 @@ module.exports = (() => { // keyboard events doc.addEventListener('keydown', updateInput) + doc.addEventListener('keyup', updateInput) } // checks conditions before updating new input @@ -225,7 +227,7 @@ module.exports = (() => { const fireFunctions = type => { for (let i = 0, len = functionList.length; i < len; i++) { if (functionList[i].type === type) { - functionList[i].function.call(this, currentIntent) + functionList[i].fn.call(this, currentIntent) } } } @@ -254,14 +256,21 @@ module.exports = (() => { } else { // Webkit and IE support at least "mousewheel" // or assume that remaining browsers are older Firefox - wheelType = document.onmousewheel !== undefined - ? 'mousewheel' - : 'DOMMouseScroll' + wheelType = + document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll' } return wheelType } + const objPos = match => { + for (let i = 0, len = functionList.length; i < len; i++) { + if (functionList[i].fn === match) { + return i + } + } + } + /* * init */ @@ -298,11 +307,19 @@ module.exports = (() => { // attach functions to input and intent "events" // funct: function to fire on change // eventType: 'input'|'intent' - onChange: (funct, eventType) => { + registerOnChange: (fn, eventType) => { functionList.push({ - function: funct, - type: eventType + fn: fn, + type: eventType || 'input' }) + }, + + unRegisterOnChange: fn => { + let position = objPos(fn) + + if (position) { + functionList.splice(position, 1) + } } } })()