aboutsummaryrefslogtreecommitdiff
path: root/public/javascripts/autocomplete.js
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-01-08 11:48:13 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-01-08 11:48:13 +0100
commit320c18af3ee9cbeaaae3d4796dd7f15a5ac90889 (patch)
treed63339d425a2a6a20c883d896b9ed492272d6085 /public/javascripts/autocomplete.js
parent4e8da42863406764a659a7337e774ad216d356c9 (diff)
parentdea89e1ec600b302a8db33dd48080b901aee7c7e (diff)
Merge branch 'master' of github.com:nloomans/rooster-mml
Diffstat (limited to 'public/javascripts/autocomplete.js')
-rw-r--r--public/javascripts/autocomplete.js87
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