Huguet57 | ae6d974 | 2018-07-23 01:07:26 +0200 | [diff] [blame] | 1 | // Get the box
|
| 2 | var searchBox = document.getElementById('searchBox');
|
| 3 |
|
| 4 | // Get the button that opens the box
|
| 5 | var searchButton = document.getElementById("searchButton");
|
| 6 |
|
| 7 | // Get the <span> element that closes the box
|
| 8 | var closeBox = document.getElementsByClassName("closeBox")[0];
|
| 9 |
|
| 10 | // When the user clicks the button, open the box
|
| 11 | searchButton.onclick = function() {
|
| 12 | searchBox.style.display = "block";
|
Huguet57 | 004b155 | 2018-07-23 03:29:12 +0200 | [diff] [blame] | 13 | // Focus on the search input bar
|
| 14 | document.getElementById("searchInput").focus();
|
Huguet57 | ae6d974 | 2018-07-23 01:07:26 +0200 | [diff] [blame] | 15 | }
|
| 16 |
|
| 17 | // When the user clicks on <span> (x), close the box
|
| 18 | closeBox.onclick = function() {
|
| 19 | searchBox.style.display = "none";
|
Huguet57 | 004b155 | 2018-07-23 03:29:12 +0200 | [diff] [blame] | 20 | // Empty the input bar
|
| 21 | var searchInput = document.getElementById('searchInput');
|
| 22 | searchInput.value = "";
|
Huguet57 | ae6d974 | 2018-07-23 01:07:26 +0200 | [diff] [blame] | 23 | }
|
| 24 |
|
| 25 | // When the user clicks anywhere outside of the box, close it
|
| 26 | window.onclick = function(event) {
|
| 27 | if (event.target == searchBox) {
|
| 28 | searchBox.style.display = "none";
|
Huguet57 | 004b155 | 2018-07-23 03:29:12 +0200 | [diff] [blame] | 29 | // Empty the input bar
|
| 30 | var searchInput = document.getElementById('searchInput');
|
| 31 | searchInput.value = "";
|
Huguet57 | ae6d974 | 2018-07-23 01:07:26 +0200 | [diff] [blame] | 32 | }
|
| 33 | } |