New JS files
Slight change in autocomplete for bug fix
Separated the old script.js in function-oriented different files
diff --git a/js/autocomplete.js b/js/autocomplete.js
index d7648da..7751bc1 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -1,142 +1,143 @@
function autocomplete(inp, obj, act) {
- /*the autocomplete function takes two arguments,
- the text field element and an objay of possible autocompleted values:*/
- var currentFocus;
- /*execute a function when someone writes in the text field:*/
- inp.addEventListener("input", function(e) {
- var a, b, i, val = this.value;
- /*close any already open lists of autocompleted values*/
- clearLists();
- document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
- if (!val || val.length < 3) return false;
- currentFocus = -1;
- var is_empty = true;
+ /*the autocomplete function takes two arguments,
+ the text field element and an objay of possible autocompleted values:*/
+ var currentFocus;
+ /*execute a function when someone writes in the text field:*/
+ inp.addEventListener("input", function(e) {
+ var a, b, i, val = this.value;
+ /*close any already open lists of autocompleted values*/
+ clearLists();
+ document.querySelector(".md-google-search__empty-btn").style.display = (val ? "block" : "none");
+ if (!val || val.length < 3) return false;
+ currentFocus = -1;
+ var is_empty = true;
- /*for each item in the object...*/
- for (node in obj) {
- var nomNode = obj[node].name;
+ /*for each item in the object...*/
+ for (node in obj) {
+ var nomNode = obj[node].name;
- if (nomNode.toUpperCase().includes(val.toUpperCase())) {
- is_empty = false;
- var parts = nomNode.toUpperCase().split(val.toUpperCase());
+ if (nomNode.toUpperCase().includes(val.toUpperCase())) {
+ is_empty = false;
+ var parts = nomNode.toUpperCase().split(val.toUpperCase());
+
+ /*create a DIV element for each matching element:*/
+ b = document.createElement("div");
+ b.setAttribute("class", "autocomplete-item");
- /*create a DIV element for each matching element:*/
- b = document.createElement("div");
- b.setAttribute("class", "autocomplete-item");
+ /*make the matching letters bold:*/
+ if (parts[0].length == 0) b.innerHTML = "";
+ else b.innerHTML = "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(0, parts[0].length) + "</span>";
+
+ b.innerHTML += nomNode.substr(parts[0].length, val.length);
+ b.innerHTML += "<span style='font-weight: bold; position:relative; z-index:120;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
+ b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
- /*make the matching letters bold:*/
- if (parts[0].length == 0) b.innerHTML = "";
- else b.innerHTML = "<span style='font-weight: bold;'>" + nomNode.substr(0, parts[0].length) + "</span>";
- b.innerHTML += nomNode.substr(parts[0].length, val.length);
- b.innerHTML += "<span style='font-weight: bold;'>" + nomNode.substr(parts[0].length + val.length) + "</span>";
- b.innerHTML += " <span class='autocomplete-year'>(" + obj[node].year + ")</span>";
+ /*include node id to keep track of which is it*/
+ b.dataset.id = node;
- /*include node id to keep track of which is it*/
- b.dataset.id = node;
+ /*execute a function when someone clicks on the item value (DIV element):*/
+ b.addEventListener("click", function(e) {
+ /*insert the value for the autocomplete text field:*/
+ var n = this.dataset.id;
+ inp.value = obj[n].name;
- /*execute a function when someone clicks on the item value (DIV element):*/
- b.addEventListener("click", function(e) {
- /*insert the value for the autocomplete text field:*/
- var n = this.dataset.id;
- inp.value = obj[n].name;
+ switch (act) {
+ case "search":
+ // Move camera to desired node
+ cameraGoto(obj[n].x, obj[n].y);
+ break;
+ case "addEdge":
+ // @TODO: Add an edge between A and B
+ alert(obj[n].name);
+ break;
+ }
- switch (act) {
- case "search":
- // Move camera to desired node
- cameraGoto(obj[n].x, obj[n].y);
- break;
- case "addEdge":
- // @TODO: Add an edge between A and B
- alert(obj[n].name);
- break;
- }
+ /*close the list of autocompleted values,
+ (or any other open lists of autocompleted values:*/
+ clearLists();
+ });
- /*close the list of autocompleted values,
- (or any other open lists of autocompleted values:*/
- clearLists();
- });
+ // Set "data-edges" attribute and compare with others
+ var nEdges = Object.keys(s.graph.neighbors(node)).length;
+ b.dataset.edges = nEdges;
+ var inserted = false;
- // Set "data-edges" attribute and compare with others
- var nEdges = Object.keys(s.graph.neighbors(node)).length;
- b.dataset.edges = nEdges;
- var inserted = false;
+ // Sort nodes by degree
+ for (i in document.querySelector("#autocomplete-list").childNodes) {
+ var child = document.querySelector("#autocomplete-list").childNodes[i];
+ if (!child.dataset) break;
+ if (nEdges > child.dataset.edges) {
+ document.querySelector("#autocomplete-list").insertBefore(b, child);
+ inserted = true;
+ break;
+ }
+ }
- // Sort nodes by degree
- for (i in document.querySelector("#autocomplete-list").childNodes) {
- var child = document.querySelector("#autocomplete-list").childNodes[i];
- if (!child.dataset) break;
- if (nEdges > child.dataset.edges) {
- document.querySelector("#autocomplete-list").insertBefore(b, child);
- inserted = true;
- break;
- }
- }
+ if (!inserted) {
+ document.querySelector("#autocomplete-list").appendChild(b);
+ }
+ }
+ }
- if (!inserted) {
- document.querySelector("#autocomplete-list").appendChild(b);
- }
- }
- }
+ document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
+ });
- document.querySelector(".autocomplete-container").style.display = (is_empty ? "none" : "block");
- });
+ document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
+ document.querySelector("#search-input").value = "";
+ this.style.display = "none";
+ });
- document.querySelector(".md-google-search__empty-btn").addEventListener("click", function() {
- document.querySelector("#search-input").value = "";
- this.style.display = "none";
- });
-
- /*execute a function presses a key on the keyboard:*/
- inp.addEventListener("keydown", function(e) {
- var x = document.getElementById("autocomplete-list");
- if (x) x = x.getElementsByTagName("div");
- if (x.length == 0) return;
- if (e.keyCode == 40) {
- /*If the objow DOWN key is pressed,
- increase the currentFocus variable:*/
- currentFocus++;
- /*and and make the current item more visible:*/
- addActive(x);
- } else if (e.keyCode == 38) { //up
- /*If the objow UP key is pressed,
- decrease the currentFocus variable:*/
- currentFocus--;
- /*and and make the current item more visible:*/
- addActive(x);
- } else if (e.keyCode == 13) {
- /*If the ENTER key is pressed, prevent the form from being submitted,*/
- e.preventDefault();
- if (currentFocus > -1) {
- /*and simulate a click on the "active" item:*/
- if (x) x[currentFocus].click();
- }
- }
- });
- function addActive(x) {
- /*a function to classify an item as "active":*/
- if (!x) return false;
- /*start by removing the "active" class on all items:*/
- removeActive(x);
- if (currentFocus >= x.length) currentFocus = 0;
- if (currentFocus < 0) currentFocus = (x.length - 1);
- /*add class "autocomplete-active":*/
- x[currentFocus].classList.add("autocomplete-active");
- }
- function removeActive(x) {
- /*a function to remove the "active" class from all autocomplete items:*/
- for (var i = 0; i < x.length; i++) {
- x[i].classList.remove("autocomplete-active");
- }
- }
- function clearLists() {
- /*close all autocomplete lists in the document,
- except the one passed as an argument:*/
- var x = document.querySelector("#autocomplete-list");
- x.innerHTML = "";
- document.querySelector(".autocomplete-container").style.display = "none";
- }
- /*execute a function when someone clicks in the document:*/
- document.addEventListener("click", function (e) {
- clearLists();
- });
+ /*execute a function presses a key on the keyboard:*/
+ inp.addEventListener("keydown", function(e) {
+ var x = document.getElementById("autocomplete-list");
+ if (x) x = x.getElementsByTagName("div");
+ if (x.length == 0) return;
+ if (e.keyCode == 40) {
+ /*If the objow DOWN key is pressed,
+ increase the currentFocus variable:*/
+ currentFocus++;
+ /*and and make the current item more visible:*/
+ addActive(x);
+ } else if (e.keyCode == 38) { //up
+ /*If the objow UP key is pressed,
+ decrease the currentFocus variable:*/
+ currentFocus--;
+ /*and and make the current item more visible:*/
+ addActive(x);
+ } else if (e.keyCode == 13) {
+ /*If the ENTER key is pressed, prevent the form from being submitted,*/
+ e.preventDefault();
+ if (currentFocus > -1) {
+ /*and simulate a click on the "active" item:*/
+ if (x) x[currentFocus].click();
+ }
+ }
+ });
+ function addActive(x) {
+ /*a function to classify an item as "active":*/
+ if (!x) return false;
+ /*start by removing the "active" class on all items:*/
+ removeActive(x);
+ if (currentFocus >= x.length) currentFocus = 0;
+ if (currentFocus < 0) currentFocus = (x.length - 1);
+ /*add class "autocomplete-active":*/
+ x[currentFocus].classList.add("autocomplete-active");
+ }
+ function removeActive(x) {
+ /*a function to remove the "active" class from all autocomplete items:*/
+ for (var i = 0; i < x.length; i++) {
+ x[i].classList.remove("autocomplete-active");
+ }
+ }
+ function clearLists() {
+ /*close all autocomplete lists in the document,
+ except the one passed as an argument:*/
+ var x = document.querySelector("#autocomplete-list");
+ x.innerHTML = "";
+ document.querySelector(".autocomplete-container").style.display = "none";
+ }
+ /*execute a function when someone clicks in the document:*/
+ document.addEventListener("click", function (e) {
+ clearLists();
+ });
}
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..ac4894f
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', initCamera);
+
+function cameraGoto(nodeX, nodeY) {
+ sigma.misc.animation.camera( s.camera,
+ { x: nodeX, y: nodeY, ratio: 1 },
+ { duration: s.settings('animationsTime') || 300 }
+ );
+}
+
+function initCamera() {
+ document.querySelector("#zoomin").addEventListener("click", function() {
+ s.camera.goTo({
+ ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
+ });
+ });
+
+ document.querySelector("#zoomout").addEventListener("click", function() {
+ s.camera.goTo({
+ ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
+ });
+ });
+}
diff --git a/js/circle-mode.js b/js/circle-mode.js
new file mode 100644
index 0000000..ea5f423
--- /dev/null
+++ b/js/circle-mode.js
@@ -0,0 +1,32 @@
+window.addEventListener("load", initCircleMode);
+
+circleMode = false;
+
+function initCircleMode() {
+ document.querySelector("#circle-mode").addEventListener('click', function() {
+ if(circleMode) {
+ circleMode = false;
+ document.querySelector("#circle-mode i").innerText = "trip_origin";
+
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.originalX;
+ n.y = n.originalY;
+ n.size = 10;
+ });
+
+ s.refresh();
+
+ }
+ else {
+ circleMode = true;
+ document.querySelector("#circle-mode i").innerText = "shuffle";
+
+ s.graph.nodes().forEach(function(n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ });
+
+ s.refresh();
+ }
+ });
+}
\ No newline at end of file
diff --git a/js/dialog.js b/js/dialog.js
new file mode 100644
index 0000000..275fb0c
--- /dev/null
+++ b/js/dialog.js
@@ -0,0 +1,82 @@
+window.addEventListener("load", initDialog);
+
+var dialog = {
+ fill: function(data, text, html=false) {
+ var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
+ for (var i in el) {
+ if (html === true) {
+ el[i].innerHTML = text;
+ } else {
+ el[i].innerText = text;
+ }
+ }
+ },
+ show: function(id, neighbors) {
+ var neighbors = Object.values(neighbors);
+
+ this.fill("name", graf.nodes[id].name);
+ this.fill("year", graf.nodes[id].year);
+ this.fill("sex", graf.nodes[id].sex);
+ this.fill("id", "#"+id);
+ this.fill("n-edges", neighbors.length);
+
+ var list = "";
+ neighbors.forEach(function (a) {
+ list += "<li><b>"+graf.nodes[id].name+" - "+a.label+":</b> "+(graf.edges[id+"_"+a.id] ? graf.edges[id+"_"+a.id].votes : graf.edges[a.id+"_"+id].votes)+" vots</li>";
+ });
+ this.fill("edges", list, true);
+
+ if (window.innerWidth > 700) {
+ document.querySelector("#dialog").style.display = "block";
+ document.querySelector("#backdrop-container").style.display = "block";
+ } else {
+ document.querySelector("#summary-dialog").style.display = "block";
+ }
+ },
+ close: function() {
+ document.querySelector("#dialog").style.display = "none";
+ document.querySelector("#summary-dialog").style.display = "none";
+ document.querySelector("#backdrop-container").style.display = "none";
+
+ s.graph.nodes().forEach(function(n) {
+ n.color = n.originalColor;
+ });
+
+ s.graph.edges().forEach(function(e) {
+ e.color = e.originalColor;
+ });
+
+ if(circleMode) {
+ s.graph.nodes().forEach(function (n) {
+ n.x = n.circleX;
+ n.y = n.circleY;
+ n.size = 10;
+ });
+ }
+ else {
+ s.graph.nodes().forEach(function (n) {
+ n.x = n.originalX;
+ n.y = n.originalY;
+ n.size = 10;
+ });
+ }
+ s.refresh();
+
+ },
+ max: function() {
+ document.querySelector("#summary-dialog").style.display = "none";
+ document.querySelector("#dialog").style.display = "block";
+ },
+ min: function() {
+ document.querySelector("#dialog").style.display = "none";
+ document.querySelector("#summary-dialog").style.display = "block";
+ }
+};
+
+
+function initDialog() {
+ document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
+ document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
+ document.querySelector("#max-dialog").addEventListener("click", dialog.max);
+ document.querySelector("#min-dialog").addEventListener("click", dialog.min);
+}
diff --git a/js/easter-egg.js b/js/easter-egg.js
new file mode 100644
index 0000000..ac73b2a
--- /dev/null
+++ b/js/easter-egg.js
@@ -0,0 +1,40 @@
+window.addEventListener("load", initEasterEgg);
+
+var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13];
+var cur = 0;
+
+function justdoit() {
+ s.graph.nodes().forEach(function(n) {
+ switch(n.color) {
+ case "#d61c08":
+ n.color = "#0159aa";
+ break;
+
+ case "#0159aa":
+ n.color = "#0ca80a";
+ break;
+
+ case "#0ca80a":
+ n.color = "#d61c08";
+ break;
+ }
+ });
+
+ s.refresh();
+ setTimeout(justdoit, 333);
+}
+
+
+function initEasterEgg() {
+ document.addEventListener("keydown", function() {
+ if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar();
+ if (event.which == seq[cur]) {
+ if (cur < seq.length) {
+ ++cur;
+ if (cur == seq.length) {
+ justdoit();
+ }
+ }
+ } else cur = 0;
+ });
+}
diff --git a/js/graf.js b/js/graf.js
new file mode 100644
index 0000000..feab604
--- /dev/null
+++ b/js/graf.js
@@ -0,0 +1,181 @@
+window.addEventListener("load", initGraf);
+
+// s is the sigma graph
+// graf is the JSON graph
+var s, graf;
+
+// query dario JSON for the graph information
+function xhr(method, url, params, callback) {
+ var http = new XMLHttpRequest();
+ if (method == "POST") {
+ http.open(method, url, true);
+ } else {
+ if (params != "") {
+ http.open(method, url+"?"+params, true);
+ } else {
+ http.open(method, url, true);
+ }
+ }
+ http.onload = function() {
+ if(this.status != 200) {
+ console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
+ }
+ callback(this.responseText, this.status);
+ };
+ if (method == "POST") {
+ http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+ http.send(params);
+ } else {
+ http.send();
+ }
+}
+
+
+function initGraf() {
+ // create new methods for sigma library
+ updateSigma();
+
+ // create graf, s is the sigma graf
+ s = new sigma({
+ renderers: [{
+ container: "graf",
+ type: "webgl"
+ }],
+ settings: {
+ defaultEdgeColor: "#fff",
+ edgeColor: "default",
+ defaultLabelColor: "#fff",
+ autoRescale: false,
+ zoomMax: 10,
+ // enableEdgeHovering: true,
+ font: "Roboto",
+ labelThreshold: 5
+ }
+ });
+
+
+ // query for JSON for graph data
+ xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
+ // graf is the JSON data
+ graf = JSON.parse(responseText);
+
+ // does graf.nodes have a size attribute?
+ var sizegraf = 0;
+ for (var i in graf.nodes) {
+ sizegraf++;
+ }
+
+ var nnode = 0;
+ for (var i in graf.nodes) {
+ var ncolor = null;
+
+ if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
+ else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
+ else ncolor = "#0ca80a";
+
+ // post-processing for year corrections
+ if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
+
+ var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
+ var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
+
+ s.graph.addNode({
+ // we add color, originalColor, size, originalX..Y, circleX..Y atributes
+ id: graf.nodes[i].id,
+ year: graf.nodes[i].year,
+ sex: graf.nodes[i].sex,
+ label: graf.nodes[i].name,
+ x: graf.nodes[i].x,
+ y: graf.nodes[i].y,
+ circleX: newX,
+ circleY: newY,
+ originalX: graf.nodes[i].x,
+ originalY: graf.nodes[i].y,
+ size: 10,
+ color: ncolor,
+ originalColor: ncolor
+ });
+ nnode++;
+ }
+
+ for (var i in graf.edges) {
+
+ s.graph.addEdge({
+ id: i,
+ source: graf.edges[i].a,
+ target: graf.edges[i].b,
+ size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
+ });
+
+ }
+
+ s.bind('clickNode', function(e) {
+ var nodeId = e.data.node.id,
+ toKeep = s.graph.neighbors(nodeId);
+ // toKeep[nodeId] = e.data.node;
+
+ s.graph.nodes().forEach(function(n) {
+ if (toKeep[n.id] || n.id == nodeId) {
+ n.color = n.originalColor;
+ } else {
+ n.color = '#333';
+ }
+ });
+
+ s.graph.edges().forEach(function(e) {
+ if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+ e.color = '#fff';
+ } else {
+ e.color = '#333';
+ }
+ });
+
+ if (circleMode) {
+ e.data.node.x = 0;
+ e.data.node.y = 0;
+ e.data.node.size = 30;
+ }
+
+ s.refresh();
+
+ dialog.show(nodeId, toKeep);
+ });
+
+
+ s.refresh();
+ initSearchBar();
+
+ autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
+ });
+}
+
+function updateSigma() {
+ // returns set of neighouts
+ sigma.classes.graph.addMethod("neighbors", function(nodeId) {
+ var k,
+ neighbors = {},
+ index = this.allNeighborsIndex[nodeId] || [];
+
+ for (k in index) {
+ neighbors[k] = this.nodesIndex[k];
+ }
+
+ return neighbors;
+ });
+
+ // returns number of neighbours from a set of years
+ sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
+ var k,
+ neighbors = 0,
+ index = this.allNeighborsIndex[nodeId] || [];
+
+ for (k in index) {
+ if(this.nodesIndex){
+ if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
+ else if (this.nodesIndex[k].year == 0) neighbors++;
+ }
+ }
+
+ return neighbors;
+ });
+}
\ No newline at end of file
diff --git a/js/limit-years.js b/js/limit-years.js
new file mode 100644
index 0000000..6d99c37
--- /dev/null
+++ b/js/limit-years.js
@@ -0,0 +1,89 @@
+window.addEventListener("load", addYearList);
+
+var limitYears = false;
+var showYears = new Set();
+
+function repaint() {
+ //targetYear: graf.nodes[e.source].year,
+ if(limitYears) {
+ var added = new Set();
+
+ s.graph.nodes().forEach(function(n) {
+ var numNeig = s.graph.numNeighborsFromYears(n.id, showYears);
+
+ if ((n.year == 0 && (n.sex == 'F' || n.sex == 'M') )
+ || numNeig == 0
+ || (!showYears.has("" + n.year) && (n.year != 0) )) {
+ n.hidden = true;
+ }
+ else {
+ n.hidden = false;
+ added.add(n.id);
+ }
+ });
+
+ s.graph.edges().forEach(function(e) {
+ if(!added.has(e.source) && !added.has(e.target)){
+ e.hidden = true;
+ }
+ else e.hidden = false;
+ });
+ }
+ else {
+ s.graph.nodes().forEach(function(n) {
+ n.hidden = false;
+ });
+
+ s.graph.edges().forEach(function(e) {
+ e.hidden = false;
+ });
+ }
+}
+
+function altYearList() {
+ var yearlist = document.querySelector("#year-list");
+
+ if(yearlist.style.display == "none"){
+ yearlist.style.display = "block";
+ yearLimits = true;
+ }
+ else{
+ yearlist.style.display = "none";
+ yearLimits = true;
+ }
+}
+
+function addYearList() {
+ var ylistspan = document.querySelector("#year-list-span")
+ for(var year=2006; year<2019; year++) {
+ var yin = document.createElement("input");
+ yin.type = "checkbox";
+ yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored";
+ yin.name = "" + year;
+ yin.addEventListener("change", function(){
+ limitYears = true;
+
+ if(this.checked) {
+ showYears.add(this.name);
+ }
+ else {
+ showYears.delete(this.name);
+ }
+
+ if(showYears.size == 0) limitYears = false;
+
+ repaint();
+
+ s.refresh();
+ });
+
+ var lab = document.createElement("label");
+ lab.innerHTML = "" + year + "<br>";
+
+ ylistspan.appendChild(yin);
+ ylistspan.appendChild(lab);
+ }
+
+ document.querySelector("#settings").addEventListener("click", altYearList);
+}
+
diff --git a/js/search-bar.js b/js/search-bar.js
new file mode 100644
index 0000000..a52ee65
--- /dev/null
+++ b/js/search-bar.js
@@ -0,0 +1,15 @@
+function altSearchBar() {
+ if (document.querySelector(".md-google-search__metacontainer").style.display == "none") {
+ document.querySelector(".md-google-search__metacontainer").style.display = "block";
+ document.querySelector("#search i").innerText = "fullscreen";
+ } else {
+ document.querySelector(".md-google-search__metacontainer").style.display = "none";
+ document.querySelector(".autocomplete-container").style.display = "none";
+ document.querySelector("#search i").innerText = "search";
+ }
+}
+
+function initSearchBar() {
+ document.querySelector("#search").addEventListener("click", altSearchBar);
+ if (window.innerWidth > 700) altSearchBar();
+}