Ajout d'un panneau vertical pour le resultat de la recerche

js/index.js

@@ -1,5 +1,7 @@
 import * as MAP from "./map.js"
 import { PlaceDatabase } from "./places.js";
+import {FeatureElement} from "./components/feature.js"
+import "./components/feature-short-header.js"
 
 /** La carte */
 
@@ -47,18 +49,82 @@ search_form.addEventListener("submit", e => {
                 let a = document.createElement("a")
                 el.append(a)
                 a.href = "#"+encodeURIComponent(result_item.ref)
-                a.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
+		a.addEventListener("click", e => {
+			e.preventDefault()
+			openSearchResultItem(result_item.feature)
+		})
+		let header = document.createElement("camp-feature-short-header")
+		header.feature = result_item.feature
+        	a.append(header)
                 resultElements.push(el)
             }
 
+	    if(!document.getElementById("search-result")){
+	    	let el = document.createElement("ol")
+		el.id = "search-result"
+		document.getElementById("result-panel").replaceChildren(el)
+	    }
+
             if(resultElements.length > 0){
                 document.getElementById("search-result").replaceChildren(...resultElements)
             } else {
                 document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
             }
+
+	   document.getElementById("search-result").children[0]?.scrollIntoView()
         } else {
-            document.getElementById("search-result").replaceChildren([])
+            document.getElementById("search-result")?.remove()
         }
 
     }
-})
+})
+
+function openSearchResultItem(feature){
+	let searchResultContainer = document.getElementById("search-result")
+	if(searchResultContainer){
+		let featureIndex = -1
+		let featureFound = false
+		let newChildren = []
+		for(let el of searchResultContainer.children){
+			let featureHeader = el.querySelector("camp-feature-short-header")
+			if(!featureHeader)
+				continue
+			let root = document.createElement("camp-feature")
+			root.feature = featureHeader.feature
+			newChildren.push(root)
+			if(!featureFound){
+				featureIndex += 1
+				if(feature == root.feature){
+					featureFound = true
+				}
+			}
+		}
+		let panel = document.getElementById("result-panel")
+		panel.replaceChildren(...newChildren)
+		requestAnimationFrame(() => {
+		if(featureFound){
+			panel.setActiveChildrenIndex(featureIndex, {behavior: "instant"})
+		} else {
+			panel.activeChildrenIndex = 0
+		}
+		})
+		let newUrl = new URL(window.location)
+		newUrl.hash = feature.id
+		window.history.replaceState(newUrl.toString(), "")
+	}
+}
+
+document.getElementById("result-panel").addEventListener("activePanelChange", e => {
+	let activeElement = e.target.children[e.activePanelIndex]
+	if(activeElement instanceof FeatureElement){
+		let feature = activeElement.feature
+		if(feature){
+			MAP.highlight(feature.id)
+		} else {
+			MAP.unhighlight_all()
+		}
+		console.log("active panel changed: "+e.activePanelIndex, feature)
+	} else {
+		MAP.unhighlight_all()
+	}
+})