Skip to content

Commit

Permalink
Merge pull request #42 from ten1seven/version-4
Browse files Browse the repository at this point in the history 
Version 4
  • Loading branch information
@ten1seven
ten1seven authored Sep 24, 2016
2 parents 692b955 + 82ceb4c commit dbbfe82
Show file tree
Hide file tree
Showing 10 changed files with 375 additions and 745 deletions.
56 changes: 25 additions & 31 deletions Gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ var banner = ['/**',
' */',
''].join('\n');
var browserSync = require('browser-sync').create();
var casperJs = require('gulp-casperjs');
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
Expand All @@ -16,10 +15,9 @@ var pkg = require('./package.json');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');
var webpackStream = require('webpack-stream');
var webpack = require('webpack');
var cloneDeep = require('lodash.clonedeep');
var webpackConfig = require('./webpack.config');
var uglify = require('gulp-uglify');
var webpack = require('webpack-stream');


/*
--------------------
Expand All @@ -38,28 +36,34 @@ gulp.task('clean', function () {
--------------------
*/

gulp.task('scripts:dev', function() {
gulp.task('scripts:main', function() {
return gulp.src(['./src/what-input.js'])
.pipe(webpackStream(webpackConfig))
.pipe(webpack({
output: {
chunkFilename: '[name].js',
library: 'whatInput',
libraryTarget: 'umd',
umdNamedDefine: true
}
}))
.pipe(rename('what-input.js'))
.pipe(header(banner, { pkg : pkg } ))
.pipe(gulp.dest('./dist/'))
.pipe(notify('Development build complete'));
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(notify('Build complete'));
});

gulp.task('scripts:build', function() {
var webpackBuildConfig = cloneDeep(webpackConfig);
webpackBuildConfig.plugins = [new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({minimize: true})];

return gulp.src(['./src/what-input.js'])
.pipe(webpackStream(webpackBuildConfig))
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
gulp.task('scripts:minify', function() {
return gulp.src(['./dist/what-input.js'])
.pipe(rename({
suffix: '.min'
}))
.pipe(rename('what-input.min.js'))
.pipe(header(banner, { pkg : pkg } ))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
.pipe(notify('Minified build complete'));
.pipe(notify('Minify complete'));
});

gulp.task('scripts:ie8', function() {
Expand All @@ -68,22 +72,12 @@ gulp.task('scripts:ie8', function() {
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(concat('lte-IE8.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
.pipe(notify('IE8 scripts task complete'));
});

gulp.task('scripts', ['scripts:dev', 'scripts:build', 'scripts:ie8']);

/*
--------------------
Test runner
--------------------
*/

gulp.task('test', function () {
gulp.src('./tests/*.js')
.pipe(casperJs());
});
gulp.task('scripts', ['scripts:main', 'scripts:ie8', 'scripts:minify']);


/*
Expand Down
91 changes: 45 additions & 46 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
# What Input?

## What Input is now v3
__A global utility for tracking the current input method (mouse, keyboard or touch).__

UMD is back thanks to [mAAdhaTTah](https://github.com/mAAdhaTTah)!
## What Input is now v4

## About What Input
What Input adds data attributes to the `<html>` tag based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.

__A global utility for tracking the current input method (mouse, keyboard or touch).__
### Changes from v3

What Input improves on [track-focus](https://github.com/ten1seven/track-focus) by adding a data attribute on the `<body>` instead of littering the DOM with classes on elements that have been interacted with. It also exposes a simple API that can be used for scripting interactions.
* `mousemove` and `pointermove` events no longer affect the `data-whatinput` attribute.
* A new `data-whatintent` attribute now works like v3. This change is intended to separate direct interaction from potential.
* Key logging and the corresponding `whatInput.keys()` API option have been removed.
* Event binding and attributes are now added to the `<html>` tag to eliminate the need to test for `DOMContentLoaded`.
* The `whatInput.set()` API option has been removed.
* A new set of `whatinput-types-[type]` classes are now added as inputs are detected. New classes are added but existing ones remain, creating the same output as what the `whatInput.types()` returns.

## How it works

What Input uses event bubbling on the `<body>` to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` on the `<body>`.
What Input uses event bubbling on the `<html>` tag to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` attribute.

Where present, 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 or set the current input.

_What Input does not make assumptions about the input environment before the user makes their first interaction._
_What Input does not make assumptions about the input environment before the page is directly 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_.

### Interacting with Forms

Since interacting with a form requires use of the keyboard, What Input _does not switch the input type while form inputs are being interacted with_, preserving the last detected input type. To override this behavior and allow the keyboard to be recorded, add:

```html
<body data-whatinput-formswitching>
```
Since interacting with a form requires use of the keyboard, What Input _does not switch the input type while form `<input>`s and `<textarea>`s are being interacted with_, preserving the last detected input type.

## Installing

Expand Down Expand Up @@ -70,33 +71,39 @@ What Input will start doing its thing while you do yours.
/**
* set a custom default :focus style
*/

/* default styling before what input executes */
:focus {
outline: none;
border: dotted 2px black;

}

/* initial styling after what input has executed but before any interaction */
[data-whatinput="initial"] :focus {
outline: 2px dotted black;
}

/* mouse */
[data-whatinput='mouse'] :focus {
border-color: red;
[data-whatinput="mouse"] :focus {
outline-color: red;
}

/* keyboard */
[data-whatinput='keyboard'] :focus {
border-color: green;
[data-whatinput="keyboard"] :focus {
outline-color: green;
}

/* touch */
[data-whatinput='touch'] :focus {
border-color: blue;
[data-whatinput="touch"] :focus {
outline-color: blue;
}
```
**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.
**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`). Because `click` always executes last in the event tree, What Input will be able to answer with the event that _just_ happened.
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`
Expand All @@ -112,41 +119,31 @@ myButton.addEventListener('click', function() {
});
```

Ask What Input to return an array of all the input types that have been used _so far_.
If it's necessary to know if `mousemove` is being used, use the `'loose'` option. For example:

```javascript
whatInput.types(); // ex. returns ['mouse', 'keyboard']
```

Tell What Input what's being used. This can be useful if you'd like to set an input method before the user has actually interacted with the page. What Input is not so assumptive on its own.
/*
nothing has happened but the mouse has moved
*/

```javascript
whatInput.set('hamster');
whatInput.ask(); // returns `initial` because the page has not been directly interacted with
whatInput.ask('loose'); // returns `mouse` because mouse movement was detected

whatInput.ask(); // 'hamster'
```

#### Key Logging
/*
the keyboard has been used, then the mouse was moved
*/

Along with tracking the use of the keyboard, What Input keeps track of the currently pressed keys and stores them in an array. Instead of returning cryptic key codes, What Input uses plain language.
whatInput.ask(); // returns `keyboard` because the keyboard was the last direct page interaction
whatInput.ask('loose'); // returns `mouse` because mouse movement was the most recent action detected
```

This can be used if, for example, you want to track how an element is being interacted with.
Ask What Input to return an array of all the input types that have been used _so far_.

```javascript
whatInput.keys(); // ex. returns ['shift', 'tab']

myMenuTab.addEventListener('keyup', function() {

// query for the down arrow
if (whatInput.keys().indexOf('down') !== -1) {
// open the dropdown menu
}

});
whatInput.types(); // ex. returns ['mouse', 'keyboard']
```

What Input only responds to the following "action" keys: 'tab', 'enter', 'shift', 'esc', 'space', 'left', 'up', 'right' and 'down'.

## Compatibility

What Input works in all modern browsers. For compatibility with IE8, polyfills are required for:
Expand All @@ -172,6 +169,8 @@ http://ten1seven.github.io/what-input

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.

What Input is written and maintained by [@ten1seven](https://github.com/ten1seven).

## License
Expand Down
Loading

0 comments on commit dbbfe82

Please sign in to comment.