From c6aee6e370fe88909d462a2e10e45b72d20196f7 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Wed, 7 Dec 2016 22:56:09 +0100 Subject: starting refactor --- public/javascripts/autocomplete.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 public/javascripts/autocomplete.js (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js new file mode 100644 index 0000000..7a56e16 --- /dev/null +++ b/public/javascripts/autocomplete.js @@ -0,0 +1,15 @@ +const autocomplete = {} +const self = autocomplete + +self._nodes = { + input: document.querySelector('input[type="search"]'), + autocomplete: document.querySelector('.autocomplete') +} + +self._textUpdate = function () { + self._nodes.autocomplete +} + +self._nodes.input.addEventListener('input', self.hide) + +module.exports = autocomplete -- cgit v1.1 From 3a9bdee97f9d05cbdb10f7530d4e94cf28d99602 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Thu, 8 Dec 2016 21:23:19 +0100 Subject: did some more work --- public/javascripts/autocomplete.js | 121 +++++++++++++++++++++++++++++++++++-- 1 file changed, 115 insertions(+), 6 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index 7a56e16..7e7fcbe 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -1,15 +1,124 @@ -const autocomplete = {} -const self = autocomplete +/* global USERS */ + +const fuzzy = require('fuzzy') +const search = require('./search') + +const self = {} + +self._items = [] +self._selectedItemIndex = -1 self._nodes = { + form: document.querySelector('#search'), input: document.querySelector('input[type="search"]'), autocomplete: document.querySelector('.autocomplete') } -self._textUpdate = function () { - self._nodes.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 + listItem.addEventListener('click', self._handleItemClick) + 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._calculate = function (searchTerm) { + const allResults = fuzzy.filter(searchTerm, USERS, { + extract: item => item.value + }) + const firstResults = allResults.slice(0, 7) + + const originalResults = firstResults.map(result => result.original) + + return originalResults +} + +self._handleItemClick = function (event) { + const itemIndex = Array.prototype.indexOf + .call(self._nodes.autocomplete.children, event.target) + console.log(itemIndex) + self._selectedItemIndex = itemIndex + console.log(search) + search.submit() +} + +self._handleFocus = function () { + self._nodes.autocomplete.style.display = 'block' +} + +self._handleBlur = function (event) { + // console.log(document.querySelector(':focus')) + // if (event.target.parentNode === self._nodes.autocomplete) return + // self._nodes.autocomplete.style.display = 'none' +} + +self._handleTextUpdate = function () { + const results = self._calculate(self._nodes.input.value) + + self._removeAllItems() + for (let i = 0; i < results.length; i++) { + self._addItem(results[i]) + } +} + +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.input.addEventListener('input', self.hide) +self._nodes.input.addEventListener('focus', self._handleFocus) +self._nodes.input.addEventListener('blur', self._handleBlur) +self._nodes.input.addEventListener('input', self._handleTextUpdate) +self._nodes.input.addEventListener('keydown', self._handleKeydown) -module.exports = autocomplete +module.exports = self -- cgit v1.1 From c547e6910ea7ad077771343ae75a4204223a118a Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 8 Dec 2016 22:40:08 +0100 Subject: use events and fix focus issues --- public/javascripts/autocomplete.js | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index 7e7fcbe..681dba8 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -1,15 +1,17 @@ /* global USERS */ const fuzzy = require('fuzzy') -const search = require('./search') - +const EventEmitter = require('events') +const process = require('process') const self = {} self._items = [] self._selectedItemIndex = -1 +self.events = new EventEmitter() + self._nodes = { - form: document.querySelector('#search'), + search: document.querySelector('#search'), input: document.querySelector('input[type="search"]'), autocomplete: document.querySelector('.autocomplete') } @@ -32,6 +34,14 @@ self.getItems = function () { return self._items } +self.show = function () { + self._nodes.autocomplete.style.display = 'block' +} + +self.hide = function () { + self._nodes.autocomplete.style.display = 'none' +} + self._removeAllItems = function () { while (self._nodes.autocomplete.firstChild) { self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild) @@ -43,7 +53,6 @@ self._removeAllItems = function () { self._addItem = function (item) { const listItem = document.createElement('li') listItem.textContent = item.value - listItem.addEventListener('click', self._handleItemClick) self._nodes.autocomplete.appendChild(listItem) self._items.push(item) } @@ -78,22 +87,11 @@ self._calculate = function (searchTerm) { } self._handleItemClick = function (event) { + if (!self._nodes.autocomplete.contains(event.target)) return const itemIndex = Array.prototype.indexOf .call(self._nodes.autocomplete.children, event.target) - console.log(itemIndex) self._selectedItemIndex = itemIndex - console.log(search) - search.submit() -} - -self._handleFocus = function () { - self._nodes.autocomplete.style.display = 'block' -} - -self._handleBlur = function (event) { - // console.log(document.querySelector(':focus')) - // if (event.target.parentNode === self._nodes.autocomplete) return - // self._nodes.autocomplete.style.display = 'none' + self.events.emit('select', self.getSelectedItem()) } self._handleTextUpdate = function () { @@ -116,8 +114,7 @@ self._handleKeydown = function (event) { } } -self._nodes.input.addEventListener('focus', self._handleFocus) -self._nodes.input.addEventListener('blur', self._handleBlur) +self._nodes.autocomplete.addEventListener('click', self._handleItemClick) self._nodes.input.addEventListener('input', self._handleTextUpdate) self._nodes.input.addEventListener('keydown', self._handleKeydown) -- cgit v1.1 From 5c7fed6eda250d91d4babd14da73166425fab85b Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 8 Dec 2016 22:43:21 +0100 Subject: moved function from autocomplete to search --- public/javascripts/autocomplete.js | 29 ++--------------------------- 1 file changed, 2 insertions(+), 27 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index 681dba8..f7bd046 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -1,8 +1,4 @@ -/* global USERS */ - -const fuzzy = require('fuzzy') const EventEmitter = require('events') -const process = require('process') const self = {} self._items = [] @@ -42,7 +38,7 @@ self.hide = function () { self._nodes.autocomplete.style.display = 'none' } -self._removeAllItems = function () { +self.removeAllItems = function () { while (self._nodes.autocomplete.firstChild) { self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild) } @@ -50,7 +46,7 @@ self._removeAllItems = function () { self._selectedItemIndex = -1 } -self._addItem = function (item) { +self.addItem = function (item) { const listItem = document.createElement('li') listItem.textContent = item.value self._nodes.autocomplete.appendChild(listItem) @@ -75,17 +71,6 @@ self._moveSelected = function (shift) { } } -self._calculate = function (searchTerm) { - const allResults = fuzzy.filter(searchTerm, USERS, { - extract: item => item.value - }) - const firstResults = allResults.slice(0, 7) - - const originalResults = firstResults.map(result => result.original) - - return originalResults -} - self._handleItemClick = function (event) { if (!self._nodes.autocomplete.contains(event.target)) return const itemIndex = Array.prototype.indexOf @@ -94,15 +79,6 @@ self._handleItemClick = function (event) { self.events.emit('select', self.getSelectedItem()) } -self._handleTextUpdate = function () { - const results = self._calculate(self._nodes.input.value) - - self._removeAllItems() - for (let i = 0; i < results.length; i++) { - self._addItem(results[i]) - } -} - self._handleKeydown = function (event) { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault() @@ -115,7 +91,6 @@ self._handleKeydown = function (event) { } self._nodes.autocomplete.addEventListener('click', self._handleItemClick) -self._nodes.input.addEventListener('input', self._handleTextUpdate) self._nodes.input.addEventListener('keydown', self._handleKeydown) module.exports = self -- cgit v1.1 From bd86bfa5de79b0d098a5ea7540b0717f195825ff Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 9 Dec 2016 13:50:58 +0100 Subject: removed autocomplete.show & hide function --- public/javascripts/autocomplete.js | 8 -------- 1 file changed, 8 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index f7bd046..9cd6689 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -30,14 +30,6 @@ self.getItems = function () { return self._items } -self.show = function () { - self._nodes.autocomplete.style.display = 'block' -} - -self.hide = function () { - self._nodes.autocomplete.style.display = 'none' -} - self.removeAllItems = function () { while (self._nodes.autocomplete.firstChild) { self._nodes.autocomplete.removeChild(self._nodes.autocomplete.firstChild) -- cgit v1.1 From 670976458b5375d27dc525f66b8faa3dc78e799b Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 14 Dec 2016 11:07:04 +0100 Subject: extend EventEmitter instaid of property --- public/javascripts/autocomplete.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'public/javascripts/autocomplete.js') diff --git a/public/javascripts/autocomplete.js b/public/javascripts/autocomplete.js index 9cd6689..71fb17d 100644 --- a/public/javascripts/autocomplete.js +++ b/public/javascripts/autocomplete.js @@ -1,11 +1,10 @@ const EventEmitter = require('events') -const self = {} + +const self = new EventEmitter() self._items = [] self._selectedItemIndex = -1 -self.events = new EventEmitter() - self._nodes = { search: document.querySelector('#search'), input: document.querySelector('input[type="search"]'), @@ -68,7 +67,7 @@ self._handleItemClick = function (event) { const itemIndex = Array.prototype.indexOf .call(self._nodes.autocomplete.children, event.target) self._selectedItemIndex = itemIndex - self.events.emit('select', self.getSelectedItem()) + self.emit('select', self.getSelectedItem()) } self._handleKeydown = function (event) { -- cgit v1.1