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/main.bak.js | 244 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 public/javascripts/main.bak.js (limited to 'public/javascripts/main.bak.js') diff --git a/public/javascripts/main.bak.js b/public/javascripts/main.bak.js new file mode 100644 index 0000000..895dd3f --- /dev/null +++ b/public/javascripts/main.bak.js @@ -0,0 +1,244 @@ +/* global ga FLAGS USERS */ + +require('flexibility') + +const fuzzy = require('fuzzy') +// const getUsers = require('./getUsers') +const getURLOfUser = require('./getURLOfUser') +const removeDiacritics = require('diacritics').remove +const getWeek = require('./getWeek') +const easterEggs = require('./easterEggs') + +const searchNode = document.querySelector('#search') +const inputNode = searchNode.querySelector('input[type="search"]') +const autocompleteNode = document.querySelector('.autocomplete') +const scheduleIframe = document.querySelector('#schedule') +const prevButton = document.querySelectorAll('#week-selector button')[0] +const nextButton = document.querySelectorAll('#week-selector button')[1] +const currentWeekNode = document.querySelector('.current') +const favNode = document.querySelector('.fav') + +if (FLAGS.indexOf('NO_FEATURE_DETECT') === -1) { + if (document.querySelector('#schedule').getClientRects()[0].bottom !== + document.body.getClientRects()[0].bottom) { + window.location = 'http://www.meetingpointmco.nl/Roosters-AL/doc/' + } else { + window.onerror = function () { + window.location = 'http://www.meetingpointmco.nl/Roosters-AL/doc/' + } + } +} else { + console.log('feature detection is OFF') +} + +let selectedResult = -1 +let selectedUser +let results = [] +let offset = 0 + +function getCurrentFav () { + if (!window.localStorage.getItem('fav')) return + const favCode = window.localStorage.getItem('fav').split(':') + const fav = USERS.filter(user => user.type === favCode[0] && user.index === Number(favCode[1])) + return fav[0] +} + +function changeFav (isFav) { + if (!selectedUser) return + if (isFav) { + window.localStorage.setItem('fav', selectedUser.type + ':' + selectedUser.index) + } else { + window.localStorage.removeItem('fav') + } + updateFavNode() +} + +function usersEqual (user1, user2) { + if (user1 == null || user2 == null) return false + return user1.type === user2.type && user1.index === user2.index +} + +function updateFavNode () { + if (usersEqual(getCurrentFav(), selectedUser)) { + favNode.innerHTML = '' + } else { + favNode.innerHTML = '' + } +} + +function updateWeekText () { + if (offset === 0) currentWeekNode.innerHTML = `Week ${getWeek() + offset}` + else currentWeekNode.innerHTML = `Week ${getWeek() + offset}` +} + +updateWeekText() + +searchNode.addEventListener('keydown', function (e) { + if ((results.length !== 0) && (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 = results.length - 1 + else if (selectedResult > results.length - 1) selectedResult = -1 + + if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected') + } +}) + +let inputEventStr +if (navigator.userAgent.indexOf('MSIE') !== -1 || + navigator.appVersion.indexOf('Trident/') > 0) { + inputEventStr = 'textinput' // IE 6-11 +} else { + inputEventStr = 'input' // normal browsers +} + +searchNode.addEventListener(inputEventStr, function (e) { + document.body.classList.remove('no-input') + 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) + + results.forEach(function (result) { + const resultNode = document.createElement('li') + resultNode.innerHTML = `${result.original.value}` + autocompleteNode.appendChild(resultNode) + }) +}) + +searchNode.addEventListener('submit', submitForm) + +function submitForm (e) { + if (e) e.preventDefault() + if (results.length !== 0) { + const indexInResult = selectedResult === -1 ? 0 : selectedResult + selectedUser = USERS[results[indexInResult].index] + } + if (selectedUser == null) return + + document.body.classList.add('searched') + + updateFavNode() + + inputNode.value = selectedUser.value + autocompleteNode.innerHTML = '' + + inputNode.blur() + + scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1) + + let eventAction + switch (selectedUser.type) { + case 'c': + eventAction = 'Class' + break + case 't': + eventAction = 'Teacher' + break + case 'r': + eventAction = 'Room' + break + case 's': + eventAction = 'Student' + break + } + const eventLabel = selectedUser.value + + ga(function () { + ga('send', { hitType: 'event', eventCategory: 'search', eventAction, eventLabel }) + }) +} + +autocompleteNode.addEventListener('click', function (e) { + if (autocompleteNode.contains(e.target)) { + 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() +}) + +window.addEventListener('blur', function () { + // this will removed the selection without drawing focus on it (safari) + // this will removed selection even when focusing an iframe (chrome) + const oldValue = inputNode.value + inputNode.value = '' + inputNode.value = oldValue + + // this will hide the keyboard (iOS safari) + document.activeElement.blur() +}) + +searchNode.addEventListener('blur', function (e) { + autocompleteNode.innerHTML = '' +}) + +favNode.addEventListener('click', function () { + if (usersEqual(getCurrentFav(), selectedUser)) { + changeFav(false) + } else { + changeFav(true) + } +}) + +const currentFav = getCurrentFav() + +if (currentFav) { + selectedUser = currentFav + inputNode.value = selectedUser.value + scheduleIframe.src = getURLOfUser(offset, selectedUser.type, selectedUser.index + 1) + updateFavNode() + + let eventAction + switch (selectedUser.type) { + case 'c': + eventAction = 'Class' + break + case 't': + eventAction = 'Teacher' + break + case 'r': + eventAction = 'Room' + break + case 's': + eventAction = 'Student' + break + } + const eventLabel = selectedUser.value + + ga(function () { + ga('send', { hitType: 'event', eventCategory: 'search fav', eventAction, eventLabel }) + }) +} else if (inputNode.value === '') { + document.body.classList.add('no-input') + inputNode.focus() +} + +if (scheduleIframe.src !== '') { + document.body.classList.add('searched') +} + +document.body.style.opacity = '1' + +window.easterEggs = easterEggs -- cgit v1.1