blob: cb3c28fff7d92506b5e6ca8176fd6dc37a669858 [file] [log] [blame]
Javier López-Contreras6d1d72d2018-12-27 23:17:18 +01001// *********** HERE STARTS autocomplete.js *************
2
Andreu Hugueta5cd3482018-12-28 12:52:30 +01003function autocomplete(inp, obj, act, rectBorrar) {
avm99963027b5b02018-12-28 02:31:46 +01004 /*the autocomplete function takes two arguments,
5 the text field element and an objay of possible autocompleted values:*/
6 var currentFocus;
7 /*execute a function when someone writes in the text field:*/
8 inp.addEventListener("input", function(e) {
9 var a, b, i, val = this.value;
10 /*close any already open lists of autocompleted values*/
11 clearLists();
12 document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
13 if (!val || val.length < 3) return false;
14 currentFocus = -1;
15 var is_empty = true;
avm99963a00c43e2018-09-26 20:16:07 +020016
avm99963027b5b02018-12-28 02:31:46 +010017 /*for each item in the object...*/
18 for (node in obj) {
19 var nomNode = obj[node].name;
avm99963a00c43e2018-09-26 20:16:07 +020020
Andreu Huguete5be6792018-12-28 13:21:44 +010021 if (isInRect(obj[node].x, obj[node].y, rectBorrar)) continue;
Andreu Hugueta5cd3482018-12-28 12:52:30 +010022
avm99963027b5b02018-12-28 02:31:46 +010023 if (nomNode.toUpperCase().includes(val.toUpperCase())) {
24 is_empty = false;
25 var parts = nomNode.toUpperCase().split(val.toUpperCase());
avm99963a00c43e2018-09-26 20:16:07 +020026
avm99963027b5b02018-12-28 02:31:46 +010027 /*create a DIV element for each matching element:*/
28 b = document.createElement("div");
29 b.setAttribute("class", "autocomplete-item");
avm99963a00c43e2018-09-26 20:16:07 +020030
avm99963027b5b02018-12-28 02:31:46 +010031 /*make the matching letters bold:*/
32 if (parts[0].length == 0) b.innerHTML = "";
33 else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>";
avm99963a00c43e2018-09-26 20:16:07 +020034
avm99963027b5b02018-12-28 02:31:46 +010035 b.innerHTML += nomNode.substr(parts[0].length, val.length);
36 b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
37 b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
avm99963a00c43e2018-09-26 20:16:07 +020038
avm99963027b5b02018-12-28 02:31:46 +010039 /*include node id to keep track of which is it*/
40 b.dataset.id = node;
Javier López-Contreras6d1d72d2018-12-27 23:17:18 +010041
avm99963027b5b02018-12-28 02:31:46 +010042 /*execute a function when someone clicks on the item value (DIV element):*/
43 b.addEventListener("click", function(e) {
44 /*insert the value for the autocomplete text field:*/
45 var n = this.dataset.id;
46 inp.value = obj[n].name;
avm99963a00c43e2018-09-26 20:16:07 +020047
avm99963027b5b02018-12-28 02:31:46 +010048 var node = null;
avm99963a00c43e2018-09-26 20:16:07 +020049
avm99963027b5b02018-12-28 02:31:46 +010050 s.graph.nodes().forEach( function(nnode) {
51 if(nnode.id == n) node = nnode;
52 });
avm99963a00c43e2018-09-26 20:16:07 +020053
avm99963a00c43e2018-09-26 20:16:07 +020054
avm99963027b5b02018-12-28 02:31:46 +010055 switch (act) {
56 case "search":
57 // Move camera to desired node
58 cameraGoto(node.x, node.y);
59 break;
60 case "addEdge":
61 // @TODO: Add an edge between A and B
62 alert(obj[n].name);
63 break;
64 }
avm99963a00c43e2018-09-26 20:16:07 +020065
avm99963027b5b02018-12-28 02:31:46 +010066 /*close the list of autocompleted values,
67 (or any other open lists of autocompleted values:*/
68 clearLists();
69 });
avm99963a00c43e2018-09-26 20:16:07 +020070
avm99963027b5b02018-12-28 02:31:46 +010071 // Set "data-edges" attribute and compare with others
72 var nEdges = Object.keys(s.graph.neighbors(node)).length;
73 b.dataset.edges = nEdges;
74 var inserted = false;
avm99963a00c43e2018-09-26 20:16:07 +020075
avm99963027b5b02018-12-28 02:31:46 +010076 // Sort nodes by degree
77 for (i in document.querySelector("#autocomplete-list").childNodes) {
78 var child = document.querySelector("#autocomplete-list").childNodes[i];
79 if (!child.dataset) break;
80 if (nEdges > child.dataset.edges) {
81 document.querySelector("#autocomplete-list").insertBefore(b, child);
82 inserted = true;
83 break;
84 }
85 }
86
87 if (!inserted) {
88 document.querySelector("#autocomplete-list").appendChild(b);
89 }
90 }
91 }
92
93 document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
94 });
95
96 document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
97 document.querySelector("#search-input").value = "";
98 this.style.display = "none";
99 });
100
101 /*execute a function presses a key on the keyboard:*/
102 inp.addEventListener("keydown", function(e) {
103 var x = document.getElementById("autocomplete-list");
104 if (x) x = x.getElementsByTagName("div");
105 if (x.length == 0) return;
106 if (e.keyCode == 40) {
107 /*If the objow DOWN key is pressed,
108 increase the currentFocus variable:*/
109 currentFocus++;
110 /*and and make the current item more visible:*/
111 addActive(x);
112 } else if (e.keyCode == 38) { //up
113 /*If the objow UP key is pressed,
114 decrease the currentFocus variable:*/
115 currentFocus--;
116 /*and and make the current item more visible:*/
117 addActive(x);
118 } else if (e.keyCode == 13) {
119 /*If the ENTER key is pressed, prevent the form from being submitted,*/
120 e.preventDefault();
121 if (currentFocus > -1) {
122 /*and simulate a click on the "active" item:*/
123 if (x) x[currentFocus].click();
124 }
125 }
126 });
127 function addActive(x) {
128 /*a function to classify an item as "active":*/
129 if (!x) return false;
130 /*start by removing the "active" class on all items:*/
131 removeActive(x);
132 if (currentFocus >= x.length) currentFocus = 0;
133 if (currentFocus < 0) currentFocus = (x.length - 1);
134 /*add class "autocomplete-active":*/
135 x[currentFocus].classList.add("autocomplete-active");
136 }
137 function removeActive(x) {
138 /*a function to remove the "active" class from all autocomplete items:*/
139 for (var i = 0; i < x.length; i++) {
140 x[i].classList.remove("autocomplete-active");
141 }
142 }
143 function clearLists() {
144 /*close all autocomplete lists in the document,
145 except the one passed as an argument:*/
146 var x = document.querySelector("#autocomplete-list");
147 x.innerHTML = "";
148 document.querySelector(".autocomplete-container").style.display = "none";
149 }
150 /*execute a function when someone clicks in the document:*/
151 document.addEventListener("click", function (e) {
152 clearLists();
153 });
Huguet575b885692018-07-23 01:18:56 +0200154}