blob: 9b82f6aed4776c766ef5751ff96dcfdc183ddc2c [file] [log] [blame]
Andreu Hugueta5cd3482018-12-28 12:52:30 +01001function autocomplete(inp, obj, act, rectBorrar) {
avm99963027b5b02018-12-28 02:31:46 +01002 /*the autocomplete function takes two arguments,
3 the text field element and an objay of possible autocompleted values:*/
4 var currentFocus;
5 /*execute a function when someone writes in the text field:*/
6 inp.addEventListener("input", function(e) {
7 var a, b, i, val = this.value;
8 /*close any already open lists of autocompleted values*/
9 clearLists();
10 document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
11 if (!val || val.length < 3) return false;
12 currentFocus = -1;
13 var is_empty = true;
avm99963a00c43e2018-09-26 20:16:07 +020014
avm99963027b5b02018-12-28 02:31:46 +010015 /*for each item in the object...*/
16 for (node in obj) {
17 var nomNode = obj[node].name;
avm99963a00c43e2018-09-26 20:16:07 +020018
Andreu Huguete5be6792018-12-28 13:21:44 +010019 if (isInRect(obj[node].x, obj[node].y, rectBorrar)) continue;
Andreu Hugueta5cd3482018-12-28 12:52:30 +010020
avm99963027b5b02018-12-28 02:31:46 +010021 if (nomNode.toUpperCase().includes(val.toUpperCase())) {
22 is_empty = false;
23 var parts = nomNode.toUpperCase().split(val.toUpperCase());
avm99963a00c43e2018-09-26 20:16:07 +020024
avm99963027b5b02018-12-28 02:31:46 +010025 /*create a DIV element for each matching element:*/
26 b = document.createElement("div");
27 b.setAttribute("class", "autocomplete-item");
avm99963a00c43e2018-09-26 20:16:07 +020028
avm99963027b5b02018-12-28 02:31:46 +010029 /*make the matching letters bold:*/
30 if (parts[0].length == 0) b.innerHTML = "";
31 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 +020032
avm99963027b5b02018-12-28 02:31:46 +010033 b.innerHTML += nomNode.substr(parts[0].length, val.length);
34 b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
35 b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
avm99963a00c43e2018-09-26 20:16:07 +020036
avm99963027b5b02018-12-28 02:31:46 +010037 /*include node id to keep track of which is it*/
38 b.dataset.id = node;
Javier López-Contreras6d1d72d2018-12-27 23:17:18 +010039
avm99963027b5b02018-12-28 02:31:46 +010040 /*execute a function when someone clicks on the item value (DIV element):*/
41 b.addEventListener("click", function(e) {
42 /*insert the value for the autocomplete text field:*/
43 var n = this.dataset.id;
44 inp.value = obj[n].name;
avm99963a00c43e2018-09-26 20:16:07 +020045
avm99963027b5b02018-12-28 02:31:46 +010046 var node = null;
avm99963a00c43e2018-09-26 20:16:07 +020047
avm99963027b5b02018-12-28 02:31:46 +010048 s.graph.nodes().forEach( function(nnode) {
49 if(nnode.id == n) node = nnode;
50 });
avm99963a00c43e2018-09-26 20:16:07 +020051
avm99963a00c43e2018-09-26 20:16:07 +020052
avm99963027b5b02018-12-28 02:31:46 +010053 switch (act) {
54 case "search":
55 // Move camera to desired node
56 cameraGoto(node.x, node.y);
57 break;
58 case "addEdge":
59 // @TODO: Add an edge between A and B
60 alert(obj[n].name);
61 break;
62 }
avm99963a00c43e2018-09-26 20:16:07 +020063
avm99963027b5b02018-12-28 02:31:46 +010064 /*close the list of autocompleted values,
65 (or any other open lists of autocompleted values:*/
66 clearLists();
67 });
avm99963a00c43e2018-09-26 20:16:07 +020068
avm99963027b5b02018-12-28 02:31:46 +010069 // Set "data-edges" attribute and compare with others
70 var nEdges = Object.keys(s.graph.neighbors(node)).length;
71 b.dataset.edges = nEdges;
72 var inserted = false;
avm99963a00c43e2018-09-26 20:16:07 +020073
avm99963027b5b02018-12-28 02:31:46 +010074 // Sort nodes by degree
75 for (i in document.querySelector("#autocomplete-list").childNodes) {
76 var child = document.querySelector("#autocomplete-list").childNodes[i];
77 if (!child.dataset) break;
78 if (nEdges > child.dataset.edges) {
79 document.querySelector("#autocomplete-list").insertBefore(b, child);
80 inserted = true;
81 break;
82 }
83 }
84
85 if (!inserted) {
86 document.querySelector("#autocomplete-list").appendChild(b);
87 }
88 }
89 }
90
91 document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
92 });
93
94 document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
95 document.querySelector("#search-input").value = "";
96 this.style.display = "none";
97 });
98
99 /*execute a function presses a key on the keyboard:*/
100 inp.addEventListener("keydown", function(e) {
101 var x = document.getElementById("autocomplete-list");
102 if (x) x = x.getElementsByTagName("div");
103 if (x.length == 0) return;
104 if (e.keyCode == 40) {
105 /*If the objow DOWN key is pressed,
106 increase the currentFocus variable:*/
107 currentFocus++;
108 /*and and make the current item more visible:*/
109 addActive(x);
110 } else if (e.keyCode == 38) { //up
111 /*If the objow UP key is pressed,
112 decrease the currentFocus variable:*/
113 currentFocus--;
114 /*and and make the current item more visible:*/
115 addActive(x);
116 } else if (e.keyCode == 13) {
117 /*If the ENTER key is pressed, prevent the form from being submitted,*/
118 e.preventDefault();
119 if (currentFocus > -1) {
120 /*and simulate a click on the "active" item:*/
121 if (x) x[currentFocus].click();
122 }
123 }
124 });
125 function addActive(x) {
126 /*a function to classify an item as "active":*/
127 if (!x) return false;
128 /*start by removing the "active" class on all items:*/
129 removeActive(x);
130 if (currentFocus >= x.length) currentFocus = 0;
131 if (currentFocus < 0) currentFocus = (x.length - 1);
132 /*add class "autocomplete-active":*/
133 x[currentFocus].classList.add("autocomplete-active");
134 }
135 function removeActive(x) {
136 /*a function to remove the "active" class from all autocomplete items:*/
137 for (var i = 0; i < x.length; i++) {
138 x[i].classList.remove("autocomplete-active");
139 }
140 }
141 function clearLists() {
142 /*close all autocomplete lists in the document,
143 except the one passed as an argument:*/
144 var x = document.querySelector("#autocomplete-list");
145 x.innerHTML = "";
146 document.querySelector(".autocomplete-container").style.display = "none";
147 }
148 /*execute a function when someone clicks in the document:*/
149 document.addEventListener("click", function (e) {
150 clearLists();
151 });
Huguet575b885692018-07-23 01:18:56 +0200152}