epickiwi/2026.camp.carte
1
1
Fork 0
Code Issues 1 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Ajout d'une croix permettant de fermer les resultats de recherche

Browse source
This commit is contained in:
EpicKiwi 2026-06-14 12:57:18 +02:00
parent 03f5bf0215
commit 8fda06c77f
Signed by: epickiwi
GPG key ID: C4B28FD2729941CE
4 changed files with 136 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

48
js/index.js
View file

@ -25,6 +25,13 @@ const search_form = document.getElementById("search-section")
search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
function showDefaultMapState(){
MAP.unhighlight_all()
for(let feature of places.featuresShownOnEmptyMap){
MAP.show(feature)
}
}
window.addEventListener("hashchange", () => {
let place_id = decodeURIComponent(location.hash.substring(1))
if (place_id) {
@ -72,10 +79,8 @@ window.addEventListener("hashchange", () => {
}
}
} else {
MAP.unhighlight_all()
for(let feature of places.featuresShownOnEmptyMap){
MAP.show(feature)
}
document.getElementById("result-panel").replaceChildren(null)
showDefaultMapState()
}
})
window.dispatchEvent(new Event("hashchange"))
@ -119,6 +124,7 @@ search_form.addEventListener("submit", e => {
} else {
document.getElementById("search-result")?.remove()
showDefaultMapState()
}
}
@ -193,3 +199,37 @@ document.getElementById("result-panel").addEventListener("activePanelChange", e
}
}
})
{
const RESULT_PANEL = document.getElementById("result-panel")
/** @type {HTMLDialogElement} */
const RESULT_DIALOG = document.getElementById("result-panel-dialog")
function udpateDialogState(){
if(RESULT_PANEL.children.length > 0) {
// BUG d'accessibilité: Il ne faut pas modifier le focus lors de l'ouverture d'une modale
// Il est preferable de ne pas ouvrir la modale avant d'être sur que l'utilisateur·ice veux vraiment y aller
let active_element = document.activeElement;
RESULT_DIALOG.show()
if(active_element){
active_element.focus()
}
} else {
RESULT_DIALOG.close()
}
}
// Oberve changes in modal DOM
new MutationObserver(udpateDialogState).observe(RESULT_PANEL, {
childList: true
})
// Empty result panel on close
document.getElementById("close-result-panel-btn").addEventListener("click", e => {
updateActiveFeature(null)
document.getElementById("result-panel").replaceChildren()
})
//Init
udpateDialogState()
}