1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112 'use strict';
import { registerLoaderOnLinks, ElementById, showDiv, hideDiv, showLoader, showModal, showAlertModal, hideOverlay } from './helpers.js';
import { html, render } from './lit-html.js';
export const loadSuggestions = async (mode) => {
const result = await fetch('/suggestions?query=' + encodeURI(document.getElementById(mode).value)).then(resp => resp.json());
if (result.status !== "success") return false;
render(html`
<div class="suggestionsbox" @mouseover=${() => mouseOverSuggestions(mode)} @mouseout=${() => stopMouseOverSuggestions(mode)}>
${result.data.map(element => html`
<p class="suggestion" @click=${() => setSuggestion(mode, element)}>${element}</p>
`)}</div>`, ElementById(mode + 'Suggestions'));
};
export const setSuggestion = (mode, value) => {
ElementById(mode).value = value;
ElementById(mode + 'Suggestions').classList.remove('mouseover');
ElementById(mode + 'Suggestions').classList.remove('typing');
if (mode !== 'to') {
ElementById('to').focus();
}
};
const startTyping = (mode) => {
ElementById(mode + 'Suggestions').classList.add('typing');
ElementById(mode + 'Suggestions').classList.remove('mouseover');
};
const stopTyping = (mode) => {
ElementById(mode + 'Suggestions').classList.remove('typing');
};
export const mouseOverSuggestions = (mode) => {
ElementById(mode + 'Suggestions').classList.add('mouseover');
};
export const stopMouseOverSuggestions = (mode) => {
ElementById(mode + 'Suggestions').classList.remove('mouseover');
};
const onKeypress = (e, mode) => {
if (e.keyCode == 13) { // enter
document.querySelector(`#${mode}Suggestions>.suggestionsbox>:first-child`).click();
if (mode === 'to') {
if (ElementById("from").value !== "" && ElementById("to").value !== "") {
ElementById('go').click();
showLoader();
}
}
e.preventDefault();
return false;
}
return true;
};
const swapFromTo = () => {
let from = ElementById('from');
let to = ElementById('to');
from.value = [to.value, to.value = from.value][0];
};
const registerSearchInput = (id) => {
const el = ElementById(id);
el.addEventListener('keyup', () => loadSuggestions(id));
el.addEventListener('focus', () => startTyping(id));
el.addEventListener('blur', () => stopTyping(id));
el.addEventListener('keypress', (evt) => onKeypress(evt, id));
};
const registerSwapButton = () => {
const el = ElementById('btn-swap');
el.classList.remove('hidden');
el.addEventListener('click', () => swapFromTo());
}
const registerHistoryButton = () => {
/*const el = ElementById('btn-history');
el.classList.remove('hidden');
el.addEventListener('click', () => showModal("History", html`
`));*/
}
registerSearchInput('from');
registerSearchInput('to');
registerSwapButton();
registerLoaderOnLinks();
ElementById('go').addEventListener('click', () => {
if (ElementById("from").value !== "" && ElementById("to").value !== "") {
showLoader();
}
});
window.onbeforeunload = function(e) {
hideOverlay();
}
window.onpageshow = function(event) {
if (event.persisted) {
hideOverlay();
}
};