134 lines
3.9 KiB
JavaScript
134 lines
3.9 KiB
JavaScript
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 */
|
|
|
|
/** La base de données de lieux @type {PlaceDatabase|null} */
|
|
let places = null
|
|
|
|
// CHARGEMENT
|
|
await Promise.all([
|
|
// Base de données des zones
|
|
PlaceDatabase.createDefault().then(db => places = db),
|
|
MAP.init()
|
|
]);
|
|
|
|
// Un petit point de debug
|
|
window.interhackPlaces = places;
|
|
|
|
await MAP.init_places(places)
|
|
|
|
// GESTION de la recherche
|
|
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())
|
|
|
|
window.addEventListener("hashchange", () => {
|
|
let place_id = decodeURIComponent(location.hash.substring(1))
|
|
if(place_id){
|
|
MAP.highlight(place_id)
|
|
} else {
|
|
MAP.unhighlight_all()
|
|
}
|
|
})
|
|
|
|
search_form.addEventListener("submit", e => {
|
|
e.preventDefault()
|
|
if(places){
|
|
let data = new FormData(search_form)
|
|
|
|
if(data.get("query")){
|
|
let resultElements = []
|
|
|
|
let search_results = places.search(data.get("query"))
|
|
|
|
for(let result_item of search_results){
|
|
let el = document.createElement("li")
|
|
let a = document.createElement("a")
|
|
el.append(a)
|
|
a.href = "#"+encodeURIComponent(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")?.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
|
|
}
|
|
})
|
|
updateActiveFeature(feature)
|
|
}
|
|
}
|
|
|
|
function updateActiveFeature(feature_or_featureid){
|
|
let newUrl = new URL(window.location)
|
|
if(feature_or_featureid){
|
|
newUrl.hash = encodeURIComponent(feature_or_featureid.id || feature_or_featureid)
|
|
} else {
|
|
delete newUrl.hash;
|
|
}
|
|
window.history.replaceState(null, "", newUrl.toString())
|
|
window.dispatchEvent(new Event("hashchange"))
|
|
}
|
|
|
|
document.getElementById("result-panel").addEventListener("activePanelChange", e => {
|
|
let activeElement = e.target.children[e.activePanelIndex]
|
|
if(activeElement instanceof FeatureElement){
|
|
let feature = activeElement.feature
|
|
updateActiveFeature(feature)
|
|
} else {
|
|
MAP.unhighlight_all()
|
|
}
|
|
})
|