Skip to content

Commit e8832e8

Browse files
muanmuan
authored
Merge pull request #22 from github/tsclass
TypeScript and class Combobox
2 parents 24bf194 + d702f0f commit e8832e8

19 files changed

+1835
-1717
lines changed

‎.babelrc

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
prettier.config.js
3+
karma.config.js

‎.eslintrc.json

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
11
{
2-
"extends": ["plugin:github/es6", "plugin:github/browser", "plugin:github/flow"],
3-
"parser": "babel-eslint"
2+
"extends": [
3+
"plugin:github/browser",
4+
"plugin:github/es6",
5+
"plugin:github/typescript"
6+
],
7+
"globals": {
8+
"Combobox": "readable"
9+
},
10+
"overrides": [
11+
{
12+
"files": "test/**/*.js",
13+
"rules": {
14+
"github/unescaped-html-literal": "off"
15+
}
16+
}
17+
]
418
}

‎.flowconfig

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,23 @@ $ npm install @github/combobox-nav
2828
### JS
2929

3030
```js
31-
import {clearSelection, install, navigate, start, stop, uninstall} from '@github/combobox-nav'
31+
import Combobox from '@github/combobox-nav'
3232
const input = document.querySelector('#robot-input')
3333
const list = document.querySelector('#list-id')
3434

3535
// install combobox pattern on a given input and listbox
36-
install(input, list)
36+
const combobox = new Combobox(input, list)
3737
// when options appear, start intercepting keyboard events for navigation
38-
start(input)
38+
combobox.start()
3939
// when options disappear, stop intercepting keyboard events for navigation
40-
stop(input)
40+
combobox.stop()
4141

4242
// move selection to the nth+1 item in the list
43-
navigate(input, list, 1)
43+
combobox.navigate(1)
4444
// reset selection
45-
clearSelection(input, list)
45+
combobox.clearSelection()
4646
// uninstall combobox pattern from the input
47-
uninstall(input)
47+
combobox.destroy()
4848
```
4949

5050
## Events

‎examples/index.html

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
<head>
44
<meta charset="utf-8">
55
<title>combobox-nav demo</title>
6-
<!-- <script type="text/javascript" src="../dist/combobox-nav.umd.js"></script> -->
7-
<script type="text/javascript" src="https://unpkg.com/@github/combobox-nav@latest/dist/combobox-nav.umd.js"></script>
86
<style>[aria-selected="true"] { font-weight: bold; }</style>
97
</head>
108
<body>
@@ -21,31 +19,43 @@
2119
<li role="presentation"><a id="wall-e" href="#wall-e" role="option">Wall-E</a></li>
2220
</ul>
2321
</form>
24-
<pre class="events"></pre>
25-
<script type="text/javascript">
22+
<pre class="events" aria-live="polite"></pre>
23+
24+
<script type="module">
25+
// import Combobox from '../dist/index.js'
26+
import Combobox from 'https://unpkg.com/@github/combobox-nav@latest/dist/index.js'
2627
const input = document.querySelector('input')
2728
const list = document.querySelector('ul')
28-
comboboxNav.install(input, list)
29+
const comboboxController = new Combobox(input, list)
2930

30-
function toggleList() {
31-
const hidden = input.value.length === 0
31+
function toggleList(show) {
32+
const hidden = show === true ? false : input.value.length === 0
3233
if (hidden) {
33-
comboboxNav.stop(input)
34+
comboboxController.stop()
3435
} else {
35-
comboboxNav.start(input)
36+
comboboxController.start()
3637
}
3738
list.hidden = hidden
3839
}
39-
input.addEventListener('input', toggleList)
40-
input.addEventListener('focus', toggleList)
40+
input.addEventListener('keydown', event => {
41+
if (!['ArrowDown', 'ArrowUp'].includes(event.key) || !list.hidden) return
42+
toggleList(true)
43+
comboboxController.navigate(event.key === 'ArrowDown' ? 1 : -1)
44+
})
45+
input.addEventListener('input', () => toggleList())
46+
input.addEventListener('focus', () => toggleList())
4147
input.addEventListener('blur', () => {
4248
list.hidden = true
43-
comboboxNav.stop(input)
49+
comboboxController.clearSelection()
50+
comboboxController.stop()
4451
})
4552

4653
const events = document.querySelector('.events')
4754
document.addEventListener('combobox-commit', function(event) {
48-
events.append(`combobox-commit event on ${event.target.textContent}\n`)
55+
events.append(`${event.target.textContent} committed, combobox-commit event fired\n`)
56+
list.hidden = true
57+
comboboxController.clearSelection()
58+
comboboxController.stop()
4959
})
5060
</script>
5161
</body>

‎index.d.ts

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎test/karma.config.js renamed to ‎karma.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = function(config) {
22
config.set({
33
frameworks: ['mocha', 'chai'],
4-
files: ['../dist/combobox-nav.umd.js', 'test.js'],
4+
files: [{pattern: 'dist/index.js', type: 'module'}, {pattern: 'test/test.js', type: 'module'}],
55
reporters: ['mocha'],
66
port: 9876,
77
colors: true,

0 commit comments

Comments
 (0)