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

css/style.css

@@ -200,7 +200,7 @@ body > hr {
 	grid-template-rows: 1fr;
 }
 
-#search-section:has( ~ #result-panel.empty) {
+#search-section:has( ~ dialog:not([open])) {
 	position: fixed;
 	bottom: 5px;
 	left: 5px;
@@ -240,6 +240,38 @@ body > hr {
 
 /* PANEL */
 
+#result-panel-dialog {
+	display: block;
+	position: relative;
+	padding: 0;
+	margin: 0;
+	border: none;
+	width: 100%;
+}
+
+#result-panel-dialog:not([open]) {
+	display: none;
+}
+
+#result-panel-dialog #close-result-panel-btn {
+	position: sticky;
+	top: 0px;
+	right: 0px;
+	padding: 15px;
+	border: none;
+	background: none;
+	cursor: pointer;
+	z-index: 100;
+	margin-left: auto;
+	margin-bottom: calc( ( 1.5em + 30px ) * -1);
+	display: block;
+}
+
+#close-result-panel-btn img {
+	height: 1.5em;
+	display: block;
+}
+
 #result-panel {
 	background: black;
 	border-image: url("../assets/neon-border-image.svg") 12;
@@ -248,11 +280,6 @@ body > hr {
 	color: white;
 }
 
-#result-panel.empty,
-#result-panel:empty{
-	display:none;
-}
-
 #result-panel > * {
 	padding: 1em;
 	margin: 0;

icons/close.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.622803"
+   height="15.76709"
+   viewBox="0 0 15.622803 15.76709"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="mockup.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.80190072"
+     inkscape:cx="1174.0855"
+     inkscape:cy="1718.4172"
+     inkscape:window-width="2549"
+     inkscape:window-height="1367"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g32-8"><inkscape:page
+       x="0"
+       y="0"
+       width="15.622803"
+       height="15.76709"
+       id="page2"
+       margin="0"
+       bleed="0" /></sodipodi:namedview><defs
+     id="defs1" /><g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Default Mobile"
+     transform="translate(-1493.8409,-1697.5114)"><path
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.84565;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+       d="m 1508.8079,1712.6292 -14.3042,-14.45 7.0763,7.222 7.1362,-7.2422 -7.1362,7.2422 -7.0915,6.9854"
+       id="path23-6-2-3"
+       sodipodi:nodetypes="cccccc"
+       inkscape:export-filename="icons/close.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" /></g></svg>

index.html

@@ -26,6 +26,11 @@
 	</button>
     </form>
 
+    <dialog id="result-panel-dialog">
+        <button title="Fermer" id="close-result-panel-btn">
+            <img src="./icons/close.svg" alt="Icone de croix">
+        </button>
         <camp-bidi-panel id="result-panel" ></camp-bidi-panel>
+    </dialog>
 </body>
 </html>

js/index.js

@@ -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()
+}