diff options
author | Noah Loomans <noahloomans@gmail.com> | 2016-12-14 12:57:59 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2016-12-14 12:57:59 +0100 |
commit | 7c4d1ca2d771ee527201ccd6447e70da97ad33be (patch) | |
tree | e151354bb2182d9788c0e2e8e85d560ccb862f3f /public/javascripts/autocomplete.js | |
parent | a016343e0a88e1bb46a2deed0b27dda7b6bc7e44 (diff) | |
parent | b7027583efff12e1bd5acdbb4077ab36c5226839 (diff) |
Merge branch 'refactor' into beta
Diffstat (limited to 'public/javascripts/autocomplete.js')
-rw-r--r-- | public/javascripts/autocomplete.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js new file mode 100644 index 0000000..71fb17d --- /dev/null +++ b/public/javascripts/autocomplete.js @@ -0,0 +1,87 @@ +const EventEmitter = require('events') + +const self = new EventEmitter() + +self._items = [] +self._selectedItemIndex = -1 + +self._nodes = { + search: document.querySelector('#search'), + input: document.querySelector('input[type="search"]'), + autocomplete: document.querySelector('.autocomplete') +} + +self.getSelectedItem = function () { + if (self.getItems() === []) return + + if (self.getSelectedItemIndex() === -1) { + return self.getItems()[0] + } else { + return self.getItems()[self.getSelectedItemIndex()] + } +} + +self.getSelectedItemIndex = function () { + return self._selectedItemIndex +} + +self.getItems = function () { + return self._items +} + +self.removeAllItems = function () { + while (self._nodes.autocomplete.firstChild) { + self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild) + } + self._items = [] + self._selectedItemIndex = -1 +} + +self.addItem = function (item) { + const listItem = document.createElement('li') + listItem.textContent = item.value + self._nodes.autocomplete.appendChild(listItem) + self._items.push(item) +} + +self._moveSelected = function (shift) { + if (self._selectedItemIndex + shift >= self.getItems().length) { + self._selectedItemIndex = -1 + } else if (self._selectedItemIndex + shift < -1) { + self._selectedItemIndex = self.getItems().length - 1 + } else { + self._selectedItemIndex += shift + } + + for (let i = 0; i < self.getItems().length; i++) { + self._nodes.autocomplete.children[i].classList.remove('selected') + } + if (self._selectedItemIndex >= 0) { + self._nodes.autocomplete + .children[self._selectedItemIndex].classList.add('selected') + } +} + +self._handleItemClick = function (event) { + if (!self._nodes.autocomplete.contains(event.target)) return + const itemIndex = Array.prototype.indexOf + .call(self._nodes.autocomplete.children, event.target) + self._selectedItemIndex = itemIndex + self.emit('select', self.getSelectedItem()) +} + +self._handleKeydown = function (event) { + if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { + event.preventDefault() + if (event.key === 'ArrowDown') { + self._moveSelected(1) + } else if (event.key === 'ArrowUp') { + self._moveSelected(-1) + } + } +} + +self._nodes.autocomplete.addEventListener('click', self._handleItemClick) +self._nodes.input.addEventListener('keydown', self._handleKeydown) + +module.exports = self |