🎨 Style improvement

ProjetProgWeb/app.js

@@ -1,8 +1,8 @@
-let navbarForm = document.getElementsByClassName('navbar-form')[0]
-let searchbar = document.getElementById('searchbar')
-let suggestions = document.getElementById('suggestions')
-let searchBarButton = document.getElementById('search-button')
-let loader = document.getElementsByClassName('loader')[0]
+let navbarForm = document.querySelectorAll('.navbar-form')[0]
+let searchBar = document.querySelectorAll('#searchbar')[0]
+let searchBarButton = document.querySelectorAll('#search-button')[0]
+let suggestions = document.querySelectorAll('#suggestions')[0]
+let loader = document.querySelectorAll('.loader')[0]
 
 let authorName = "";
 
@@ -14,14 +14,25 @@ function requestToApi(author) {
         .then(data => displayResults(data))
 }
 
+let elementsToFade = null
+function fadeIn() {
+    elementsToFade.forEach(elem => {
+        let distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;
+        if (distInView < 0) {
+            elem.classList.add("fade-in");
+        }
+    })
+}
+
 // TODO : Faire un système de page plutôt que de charger 10000 résultats en une fois s'il y en a 10000..
 function displayResults(results) {
     let count = 0
-    results.forEach(function(elem) {
+
+    results.forEach(elem => {
         let result = document.createElement('div')
         result.classList.add('result-element')
         let i = 0
-        elem.forEach(function(e) {
+        elem.forEach(e => {
             let child = document.createElement(i === 0 ? 'h1' : 'p')
             child.innerText = e
             result.appendChild(child)
@@ -30,25 +41,33 @@ function displayResults(results) {
         count += 1
         document.getElementById('results').appendChild(result)
     })
+
     let nb = document.createElement("p")
     nb.innerHTML = `Nombre de résultats pour "${authorName}": ${count}.`
     document.getElementById('results-count').appendChild(nb)
+
     loader.style.display = "none"
+
+    elementsToFade = document.querySelectorAll(".result-element")
+    window.addEventListener('scroll', fadeIn);
+    fadeIn()
 }
 
 let lastSearch = ""
 let last = new Date().getTime()
+let suggestionsDisplayed = false
 
 function realTimeDisplay() {
     let search = document.getElementsByName("author")[0].value
     if (search.length > 3 && (search !== lastSearch || (new Date().getTime() - last) > 500)) {
+        showSuggestions()
         lastSearch = search
         last = new Date().getTime()
         fetch(`api.php?q=authors&author=${search}`)
             .then(response => response.json())
             .then(function(data) {
                 suggestions.innerHTML = ""
-                data.forEach(function(elem) {
+                data.forEach(elem => {
                     let outsideTag = document.createElement('a')
                     outsideTag.href = "index.php?author=" + elem
                     let name = document.createElement('p')
@@ -60,19 +79,25 @@ function realTimeDisplay() {
     }
 }
 
-searchbar.addEventListener('focus', () => {
-    navbarForm.style.borderRadius = '15px 15px 0 0'
-    suggestions.style.display = 'block'
-    searchBarButton.style.boxShadow = 'none'
-    searchBarButton.classList.remove('animation-in')
-    searchBarButton.classList.add('animation-out')
-});
-searchbar.addEventListener('focusout', () => {
-    if (!suggestions === document.activeElement) {
+function showSuggestions() {
+    if (!suggestionsDisplayed) {
+        navbarForm.style.borderRadius = '15px 15px 0 0'
+        suggestions.style.display = 'block'
+        searchBarButton.style.boxShadow = 'none'
+        searchBarButton.classList.remove('animation-in')
+        searchBarButton.classList.add('animation-out')
+        suggestionsDisplayed = true
+    }
+}
+
+document.addEventListener('click', function (e){
+    if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
         navbarForm.style.borderRadius = '15px'
         suggestions.style.display = 'none'
         searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
         searchBarButton.classList.remove('animation-out')
         searchBarButton.classList.add('animation-in')
+        suggestionsDisplayed = false
     }
-});
+})
+