1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
const fuzzy = require('fuzzy')
const getUsers = require('./getUsers')
const getURLOfUser = require('./getURLOfUser')
const removeDiacritics = require('diacritics').remove
const getWeek = require('./getWeek')
const searchNode = document.querySelector('#search')
const inputNode = searchNode.querySelector('input[type="text"]')
const autocompleteNode = document.querySelector('.autocomplete')
const scheduleIframe = document.querySelector('#schedule')
const prevButton = document.querySelectorAll('input[type="button"]')[0]
const nextButton = document.querySelectorAll('input[type="button"]')[1]
const currentWeekNode = document.querySelector('.current')
let selectedResult = -1
let results
let matches
let offset = 0
function updateWeekText () {
if (offset === 0) currentWeekNode.innerHTML = `Week ${getWeek() + offset}`
else currentWeekNode.innerHTML = `<strong>Week ${getWeek() + offset}</strong>`
}
getUsers().then(function (users) {
updateWeekText()
searchNode.addEventListener('keydown', function (e) {
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
e.preventDefault()
if (document.querySelector('.selected')) document.querySelector('.selected').classList.remove('selected')
const change = e.key === 'ArrowDown' ? 1 : -1
selectedResult += change
if (selectedResult < -1) selectedResult = matches.length - 1
else if (selectedResult > matches.length - 1) selectedResult = -1
if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected')
}
})
searchNode.addEventListener('keyup', function (e) {
// console.log(e)
if (!(e.key === 'Enter' || e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
autocompleteNode.innerHTML = ''
if (inputNode.value.trim() === '') return
selectedResult = -1
results = fuzzy.filter(removeDiacritics(inputNode.value), users, {
extract: function (el) { return removeDiacritics(el.value) }
}).slice(0, 7)
matches = results.map(function (el) { return users[el.index].value })
results.forEach(function (result) {
const resultNode = document.createElement('li')
resultNode.innerHTML = `${result.original.value}<span class="other">${result.original.other}</span>`
autocompleteNode.appendChild(resultNode)
})
}
})
searchNode.addEventListener('submit', submitForm)
function submitForm (e) {
if (results == null) return
if (e) e.preventDefault()
const indexInResult = selectedResult === -1 ? 0 : selectedResult
const selectedUser = users[results[indexInResult].index]
inputNode.value = selectedUser.value
autocompleteNode.innerHTML = ''
inputNode.blur()
scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1)
}
autocompleteNode.addEventListener('click', function (e) {
if (e.target.tagName === 'LI' && e.target.parentElement === autocompleteNode) {
selectedResult = Array.prototype.indexOf.call(e.target.parentElement.childNodes, e.target)
submitForm()
}
})
prevButton.addEventListener('click', function () {
offset--
updateWeekText()
submitForm()
})
nextButton.addEventListener('click', function () {
offset++
updateWeekText()
submitForm()
})
})
inputNode.addEventListener('click', function () {
inputNode.select()
})
inputNode.addEventListener('blur', function () {
inputNode.selectionStart = inputNode.selectionEnd = -1
autocompleteNode.innerHTML = ''
})
|
