diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js index 631ab0c..242f594 100644 --- a/ProjetProgWeb/app.js +++ b/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 } -}); +}) + diff --git a/ProjetProgWeb/navbar.php b/ProjetProgWeb/navbar.php index f51e978..126218b 100644 --- a/ProjetProgWeb/navbar.php +++ b/ProjetProgWeb/navbar.php @@ -2,6 +2,11 @@