fsylvain/projet_programmation_web
1
0
Fork 0
mirror of https://github.com/Floriansylvain/projet_programmation_web.git synced 2026-08-19 11:43:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ Hamburger menu integration and style improvements

Browse Source
This commit is contained in:
Florian Sylvain
2021-11-02 22:29:42 +01:00
parent 7a492caf7d
commit 286c3cad96
4 changed files with 187 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/app.js
+61 -27
View File
@@ -3,20 +3,47 @@ let searchBar = document.querySelector('#searchbar')
let searchBarButton = document.querySelector('#search-button')
let suggestions = document.querySelector('#suggestions')
let loader = document.querySelector('.loader')
let error = document.querySelector("#error")
let errorMessage = document.querySelector("#error-message")
let errorButton = document.querySelector("#error-button")
let error = document.querySelector('#error')
let errorMessage = document.querySelector('#error-message')
let errorButton = document.querySelector('#error-button')
let hamMenu = document.querySelector('#hamburger-menu')
let header = document.querySelector('header')
function sanitize(chain) {
return chain.replace(/[^a-zA-Z0-9 ]/g,'')
}
function showSuggestions() {
if (!suggestionsDisplayed) {
navbarForm.style.borderRadius = '15px 15px 0 0'
suggestions.style.display = 'block'
searchBarButton.style.boxShadow = 'none'
searchBarButton.classList.replace('animation-in', 'animation-out')
suggestionsDisplayed = true
}
}
function hideSuggestions() {
if (suggestionsDisplayed) {
navbarForm.style.borderRadius = '15px'
suggestions.style.display = 'none'
searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
searchBarButton.classList.replace('animation-out', 'animation-in')
suggestionsDisplayed = false
}
}
let authorName = "";
let lastRequest = null
function requestToApi(author) {
hideSuggestions()
if (lastRequest === null || (new Date().getTime() - lastRequest) > 1000) {
lastRequest = new Date().getTime()
document.querySelector('#results-count').innerHTML = ""
document.querySelector('#results').innerHTML = ""
loader.style.display = "block"
authorName = author.replace(/[^a-zA-Z0-9]/g,'')
authorName = sanitize(author)
fetch(`api.php?q=theses&author=${author}`)
.then(response => response.json())
.then(data => displayResults(data))
@@ -25,6 +52,7 @@ function requestToApi(author) {
}
}
window.addEventListener('scroll', fadeIn);
let elementsToFade = null
function fadeIn() {
elementsToFade.forEach(elem => {
@@ -45,7 +73,6 @@ function displayResults(results) {
return;
} else if (results.status === 200) {
let count = 0
results.data.forEach(elem => {
let result = document.createElement('div')
result.classList.add('result-element')
@@ -67,7 +94,6 @@ function displayResults(results) {
loader.style.display = "none"
elementsToFade = document.querySelectorAll(".result-element")
window.addEventListener('scroll', fadeIn);
fadeIn()
}
}
@@ -78,15 +104,19 @@ let suggestionsDisplayed = false
function realTimeDisplay() {
let search = document.querySelector('input[name=\'author\']').value
search = search.replace(/[^a-zA-Z0-9 ]/g,'')
if (search.length > 3 && (search !== lastSearch || (new Date().getTime() - lastSuggestion) > 500)) {
showSuggestions()
search = sanitize(search)
if (search.length > 3 && (search !== lastSearch && (new Date().getTime() - lastSuggestion) > 500)) {
lastSearch = search
lastSuggestion = new Date().getTime()
fetch(`api.php?q=authors&author=${search}`)
.then(response => response.json())
.then(results => {
suggestions.innerHTML = ""
if (!results.data.length) {
hideSuggestions()
} else {
showSuggestions()
}
results.data.forEach(elem => {
let name = document.createElement('p')
name.innerHTML = elem
@@ -100,42 +130,46 @@ function realTimeDisplay() {
}
}
function showSuggestions() {
if (!suggestionsDisplayed) {
navbarForm.style.borderRadius = '15px 15px 0 0'
suggestions.style.display = 'block'
searchBarButton.style.boxShadow = 'none'
searchBarButton.classList.replace('animation-in', 'animation-out')
suggestionsDisplayed = true
}
}
document.addEventListener('click', e => {
if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
if (suggestionsDisplayed) {
navbarForm.style.borderRadius = '15px'
suggestions.style.display = 'none'
searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
searchBarButton.classList.replace('animation-out', 'animation-in')
suggestionsDisplayed = false
}
hideSuggestions()
if (e.target.id === 'hamburger' || e.target.id === 'hamburgerSvg' || e.target.id === 'crossSvg') {
let ham = document.querySelector('#hamburgerSvg')
let cross = document.querySelector('#crossSvg')
if (ham.classList.contains('spin-fade')) {
cross.classList.add('spin-fade')
ham.classList.remove('spin-fade')
header.classList.replace('slide-in-header', 'slide-out-header')
hamMenu.classList.replace('slide-in', 'slide-out')
}
else {
ham.classList.add('spin-fade')
cross.classList.remove('spin-fade')
header.classList.remove('slide-out-header')
header.classList.add('slide-in-header')
hamMenu.classList.remove('slide-out')
hamMenu.classList.add('slide-in')
}
}
if (e.target === errorButton) {
error.classList.replace('fade-in', 'fade-out')
}
let toggleSwitch = null
if (e.target.classList.contains('slider')) {
toggleSwitch = e.target
} else if (e.target.classList.contains('toggle-switch')) {
toggleSwitch = e.target.firstElementChild
}
if (toggleSwitch !== null) {
if (toggleSwitch.classList.contains('untoggle')) {
toggleSwitch.classList.replace('untoggle', 'toggle')
} else {
toggleSwitch.classList.replace('toggle', 'untoggle')
}
}
}
})