what-input 5.2.12 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Gulpfile.js DELETED
@@ -1,178 +0,0 @@
1
- /*
2
- * load plugins
3
- */
4
-
5
- const pkg = require('./package.json')
6
-
7
- const banner = [
8
- '/**',
9
- ' * <%= pkg.name %> - <%= pkg.description %>',
10
- ' * @version v<%= pkg.version %>',
11
- ' * @link <%= pkg.homepage %>',
12
- ' * @license <%= pkg.license %>',
13
- ' */',
14
- ''
15
- ].join('\n')
16
-
17
- // gulp
18
- const gulp = require('gulp')
19
-
20
- // load all plugins in "devDependencies" into the letiable $
21
- const $ = require('gulp-load-plugins')({
22
- pattern: ['*'],
23
- scope: ['devDependencies']
24
- })
25
-
26
- /*
27
- * clean task
28
- */
29
-
30
- function clean() {
31
- return $.del(['**/.DS_Store', './build/*', './dist/*'])
32
- }
33
-
34
- /*
35
- * scripts tasks
36
- */
37
-
38
- function scripts() {
39
- return gulp
40
- .src(['./src/scripts/what-input.js'])
41
- .pipe($.standard())
42
- .pipe(
43
- $.standard.reporter('default', {
44
- breakOnError: false,
45
- quiet: true
46
- })
47
- )
48
- .pipe(
49
- $.webpackStream({
50
- module: {
51
- loaders: [
52
- {
53
- test: /.jsx?$/,
54
- loader: 'babel-loader',
55
- exclude: /node_modules/,
56
- query: {
57
- presets: ['env']
58
- }
59
- }
60
- ]
61
- },
62
- output: {
63
- chunkFilename: '[name].js',
64
- library: 'whatInput',
65
- libraryTarget: 'umd',
66
- umdNamedDefine: true
67
- }
68
- })
69
- )
70
- .pipe($.rename('what-input.js'))
71
- .pipe($.header(banner, { pkg: pkg }))
72
- .pipe(gulp.dest('./dist/'))
73
- .pipe(gulp.dest('./build/scripts/'))
74
- .pipe($.sourcemaps.init())
75
- .pipe($.uglify())
76
- .pipe(
77
- $.rename({
78
- suffix: '.min'
79
- })
80
- )
81
- .pipe($.header(banner, { pkg: pkg }))
82
- .pipe($.sourcemaps.write('./'))
83
- .pipe(gulp.dest('./dist/'))
84
- .pipe($.notify('Build complete'))
85
- }
86
-
87
- /*
88
- * stylesheets
89
- */
90
-
91
- function styles() {
92
- let processors = [
93
- $.autoprefixer(),
94
- $.cssMqpacker({
95
- sort: true
96
- })
97
- ]
98
-
99
- return gulp
100
- .src(['./src/styles/index.scss'])
101
- .pipe(
102
- $.plumber({
103
- errorHandler: $.notify.onError('Error: <%= error.message %>')
104
- })
105
- )
106
- .pipe($.sourcemaps.init())
107
- .pipe($.sassGlob())
108
- .pipe($.sass())
109
- .pipe($.postcss(processors))
110
- .pipe(
111
- $.cssnano({
112
- minifySelectors: false,
113
- reduceIdents: false,
114
- zindex: false
115
- })
116
- )
117
- .pipe($.sourcemaps.write('./'))
118
- .pipe(gulp.dest('./build/styles'))
119
- .pipe($.browserSync.stream())
120
- .pipe($.notify('Styles task complete'))
121
- }
122
-
123
- /*
124
- * images task
125
- */
126
-
127
- function images() {
128
- return gulp.src(['./src/images/**/*']).pipe(gulp.dest('./build/images'))
129
- }
130
-
131
- /*
132
- * markup task
133
- */
134
-
135
- function markup() {
136
- return gulp.src(['./src/markup/*']).pipe(gulp.dest('./build'))
137
- }
138
-
139
- /*
140
- * deploy task
141
- */
142
-
143
- function deploy() {
144
- return gulp.src('./build/**/*').pipe($.ghPages())
145
- }
146
-
147
- /*
148
- * default task
149
- */
150
-
151
- function watch() {
152
- $.browserSync.init({
153
- server: {
154
- baseDir: './build/'
155
- }
156
- })
157
-
158
- gulp.watch(
159
- ['./src/scripts/what-input.js', './src/scripts/polyfills/*.js'],
160
- scripts,
161
- { events: 'all' },
162
- function() {
163
- $.browserSync.reload
164
- }
165
- )
166
-
167
- gulp.watch(['./src/styles/{,*/}{,*/}*.scss'], styles)
168
-
169
- gulp.watch(['./src/markup/*.html'], markup, { events: 'all' }, function() {
170
- $.browserSync.reload
171
- })
172
- }
173
-
174
- exports.default = gulp.series(
175
- clean,
176
- gulp.parallel(markup, scripts, styles, images),
177
- watch
178
- )
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.941" height="24" viewBox="0 0 40.941 24"><defs><path id="a" d="M0 0h40.94v24H0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path fill="#555" clip-path="url(#b)" d="M1.116 6.93C2.556 8.404 17.69 22.82 17.69 22.82c.768.785 1.773 1.18 2.78 1.18 1.008 0 2.014-.395 2.78-1.18 0 0 15.136-14.416 16.574-15.89 1.44-1.476 1.536-4.13 0-5.703-1.535-1.573-3.678-1.7-5.56 0L20.47 14.453 6.678 1.23C4.794-.47 2.65-.346 1.116 1.227c-1.537 1.574-1.44 4.227 0 5.702"/></svg>
@@ -1,141 +0,0 @@
1
- <!DOCTYPE html>
2
- <html dir="ltr" lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
-
7
- <title>What Input?</title>
8
-
9
- <link rel="stylesheet" href="styles/index.css">
10
- </head>
11
- <body>
12
- <div class="container">
13
- <h1>What Input?</h1>
14
-
15
- <p class="lede">
16
- A global utility for tracking the current input method (<span class="input-indicator -mouse">mouse</span>, <span class="input-indicator -keyboard">keyboard</span>, or <span class="input-indicator -touch">touch</span>), as well as the current <em>intent</em> (<span class="input-intent -mouse">mouse</span>, <span class="input-intent -keyboard">keyboard</span>, or <span class="input-intent -touch">touch</span>).
17
- </p>
18
-
19
- <p>
20
- Tab, click or tap the links and form controls to see how <strong>What Input</strong> allows them to be styled differently.
21
- </p>
22
-
23
- <div class="well">
24
- <div class="well-row">
25
- <div class="well-column">
26
- <ul class="list-group">
27
- <li class="list-group-item"><a href="#">Cras justo odio</a></li>
28
- <li class="list-group-item">
29
- <a href="#">Dapibus ac facilisis in</a>
30
- </li>
31
- <li class="list-group-item"><a href="#">Morbi leo risus</a></li>
32
- <li class="list-group-item">
33
- <a href="#">Porta ac consectetur ac</a>
34
- </li>
35
- <li class="list-group-item">
36
- <a href="#">Vestibulum at eros</a>
37
- </li>
38
- </ul>
39
-
40
- <p>
41
- <button data-module="alert" data-message="This button is not inside a form.">Do Something</button>
42
- </p>
43
- </div>
44
-
45
- <form class="well-column">
46
- <p>
47
- <label for="exampleInput">Example Text Input</label>
48
- <input type="email" id="exampleInput" name="exampleInput">
49
- </p>
50
-
51
- <p>
52
- <label for="exampleSelect">Selection</label>
53
- <select id="exampleSelect" name="exampleSelect">
54
- <option value="" disabled selected>Select an Option</option>
55
- <option>Option 1</option>
56
- <option>Option 2</option>
57
- <option>Option 3</option>
58
- </select>
59
- </p>
60
-
61
- <p>
62
- <label for="exampleTextarea">Example Textarea</label>
63
- <textarea id="exampleTextarea" name="exampleTextarea"></textarea>
64
- </p>
65
-
66
- <p class="checkbox">
67
- <label><input type="checkbox"> Check me out</label>
68
- </p>
69
-
70
- <p>
71
- <button type="submit" data-module="alert" data-message="This button is inside a form.">Form Submit</button>
72
- </p>
73
- </form>
74
- </div>
75
- </div>
76
-
77
- <footer>
78
- <p class="pull-left">
79
- Made with <span class="text-love">&hearts;</span> at
80
- <a href="http://viget.com/">Viget</a>.
81
- </p>
82
-
83
- <p class="pull-right">
84
- Check out the project
85
- <a href="https://github.com/ten1seven/what-input">on GitHub</a>.
86
- </p>
87
- </footer>
88
- </div>
89
-
90
- <script src="scripts/what-input.js"></script>
91
- <script>
92
- // use `whatInput.ask()`
93
- var links = document.querySelectorAll('.well a, .well button')
94
- for (var i = 0, len = links.length; i < len; i++) {
95
- links[i].addEventListener('click', function(event) {
96
- console.log(
97
- '[script test] ' + whatInput.ask() + ' ' + whatInput.element()
98
- )
99
-
100
- event.preventDefault()
101
- })
102
- }
103
-
104
- var formControls = document.querySelectorAll('input, textarea, select')
105
- for (var i = 0, len = formControls.length; i < len; i++) {
106
- formControls[i].addEventListener('click', function(event) {
107
- console.log(
108
- '[script test] ' + whatInput.ask() + ' ' + whatInput.element()
109
- )
110
- })
111
- }
112
-
113
- // use `whatInput.registerOnChange()`
114
- var myInputFunction = function(type) {
115
- console.log('input: ' + type)
116
- }
117
-
118
- var myIntentFunction = function(type) {
119
- console.log('intent: ' + type)
120
- }
121
-
122
- whatInput.registerOnChange(myInputFunction)
123
- whatInput.registerOnChange(myIntentFunction, 'intent')
124
-
125
- // don't let the form submit because it's not real
126
- var form = document.querySelector('form')
127
- form.addEventListener('submit', function(event) {
128
- event.preventDefault()
129
- })
130
-
131
- // alert functionality
132
- var alerts = document.querySelectorAll('[data-module="alert"]')
133
- for (var i = 0, len = alerts.length; i < len; i++) {
134
- alerts[i].addEventListener('click', function(event) {
135
- alert(this.dataset.message)
136
- event.preventDefault()
137
- })
138
- }
139
- </script>
140
- </body>
141
- </html>
@@ -1,15 +0,0 @@
1
- declare const whatInput: {
2
- ask: (strategy?: Strategy) => InputMethod;
3
- element: () => string | null;
4
- ignoreKeys: (keyCodes: number[]) => void;
5
- specificKeys: (keyCodes: number[]) => void;
6
- registerOnChange: (callback: (type: InputMethod) => void, strategy?: Strategy) => void;
7
- unRegisterOnChange: (callback: (type: InputMethod) => void) => void;
8
- clearStorage: () => void;
9
- };
10
-
11
- export type InputMethod = "initial" | "pointer" | "keyboard" | "mouse" | "touch";
12
-
13
- export type Strategy = "input" | "intent";
14
-
15
- export default whatInput;