From 29f35540bac3f3c8ad0043d03758142267bcef9a Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 9 Sep 2016 14:30:04 +0200 Subject: send data directly --- public/javascripts/main.js | 190 ++++++++++++++++++++++++--------------------- 1 file changed, 103 insertions(+), 87 deletions(-) (limited to 'public/javascripts/main.js') diff --git a/public/javascripts/main.js b/public/javascripts/main.js index 6a781c2..1711cb5 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -1,7 +1,7 @@ /* global ga */ const fuzzy = require('fuzzy') -const getUsers = require('./getUsers') +// const getUsers = require('./getUsers') const getURLOfUser = require('./getURLOfUser') const removeDiacritics = require('diacritics').remove const getWeek = require('./getWeek') @@ -24,108 +24,124 @@ function updateWeekText () { else currentWeekNode.innerHTML = `Week ${getWeek() + offset}` } -getUsers().then(function (users) { - updateWeekText() +updateWeekText() + +function getUsers () { + const nodes = document.querySelector('#data') + .querySelectorAll('.data-user') + const elements = Array.prototype.slice.call(nodes) + const users = elements.map(userNode => { + const type = userNode.querySelector('.data-type').textContent + const value = userNode.querySelector('.data-value').textContent + const index = Number(userNode.querySelector('.data-index').textContent) + const other = userNode.querySelector('.data-other').textContent + const isID = userNode.querySelector('.data-isID').textContent === 'true' + return { type, value, index, other, isID } + }) - searchNode.addEventListener('keydown', function (e) { - if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { - e.preventDefault() + document.querySelector('#data').remove() - if (document.querySelector('.selected')) document.querySelector('.selected').classList.remove('selected') + return users +} - const change = e.key === 'ArrowDown' ? 1 : -1 - selectedResult += change - if (selectedResult < -1) selectedResult = matches.length - 1 - else if (selectedResult > matches.length - 1) selectedResult = -1 +const users = getUsers() - if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected') - } - }) +searchNode.addEventListener('keydown', function (e) { + if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { + e.preventDefault() - 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}${result.original.other}` - autocompleteNode.appendChild(resultNode) - }) - } - }) + if (document.querySelector('.selected')) document.querySelector('.selected').classList.remove('selected') - searchNode.addEventListener('submit', submitForm) + const change = e.key === 'ArrowDown' ? 1 : -1 + selectedResult += change + if (selectedResult < -1) selectedResult = matches.length - 1 + else if (selectedResult > matches.length - 1) selectedResult = -1 - function submitForm (e) { - if (results == null) return - if (e) e.preventDefault() - const indexInResult = selectedResult === -1 ? 0 : selectedResult - const selectedUser = users[results[indexInResult].index] + if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected') + } +}) - inputNode.value = selectedUser.value +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 = '' - - inputNode.blur() - - scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1) - - const hitType = 'event' - let eventCategory - switch (selectedUser.type) { - case 'c': - eventCategory = 'Class' - break - case 't': - eventCategory = 'Teacher' - break - case 'r': - eventCategory = 'Room' - break - case 's': - eventCategory = 'Student' - break - } - let eventAction - if (selectedUser.isID) { - eventAction = 'by id' - } else { - eventAction = 'by name' - } - const eventLabel = selectedUser.value - - console.log({ hitType, eventCategory, eventAction, eventLabel }) - - ga(function () { - ga('send', { hitType, eventCategory, eventAction, eventLabel }) + 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}${result.original.other}` + autocompleteNode.appendChild(resultNode) }) } +}) - 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() - } - }) +searchNode.addEventListener('submit', submitForm) - prevButton.addEventListener('click', function () { - offset-- - updateWeekText() - 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) + + const hitType = 'event' + let eventCategory + switch (selectedUser.type) { + case 'c': + eventCategory = 'Class' + break + case 't': + eventCategory = 'Teacher' + break + case 'r': + eventCategory = 'Room' + break + case 's': + eventCategory = 'Student' + break + } + let eventAction + if (selectedUser.isID) { + eventAction = 'by id' + } else { + eventAction = 'by name' + } + const eventLabel = selectedUser.value + + ga(function () { + ga('send', { hitType, eventCategory, eventAction, eventLabel }) }) +} - nextButton.addEventListener('click', function () { - offset++ - updateWeekText() +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 () { -- cgit v1.1