Ajout des categories
This commit is contained in:
parent
8b4e21f32e
commit
7e654b4640
GPG key ID:
C4B28FD2729941CE
6 changed files with 803 additions and 7 deletions
680
assets/amenities-btn.svg
Normal file
680
assets/amenities-btn.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 MiB |
|
|
@ -195,6 +195,22 @@ body > hr {
|
|||
left: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599.9px) {
|
||||
#search-section:has(input:focus) {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
left: 10px;
|
||||
width: calc(100vw - 20px);
|
||||
margin: 0;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#search-result {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#search-section input {
|
||||
background: black;
|
||||
font-size: 1em;
|
||||
|
|
@ -526,4 +542,47 @@ camp-talk[data-track-id="34"] {
|
|||
|
||||
camp-talk.active {
|
||||
animation: active-talk 1.5s alternate-reverse infinite linear;
|
||||
}
|
||||
|
||||
/* EXPLORE NAV */
|
||||
|
||||
#explore {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#explore:has( ~ dialog:not([open])) {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#explore details {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
#explore details > summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#explore details > summary img {
|
||||
height: calc(20px + 2em + 2ex);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#explore details button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#explore details > button img {
|
||||
height: 2.7em;
|
||||
}
|
||||
12
index.html
12
index.html
|
|
@ -23,6 +23,18 @@
|
|||
<section id="map"></section>
|
||||
|
||||
<hr>
|
||||
|
||||
<nav id="explore">
|
||||
<details>
|
||||
<summary>
|
||||
<button id="explore-toggle-btn" title="Explorer les lieux"><img src="./assets/amenities-btn.svg" alt="Icone avec le signe +" /></button>
|
||||
</summary>
|
||||
<button title="Eau potable" id="explore-drinking-water"><img src="./icons/eau-potable.svg" alt="Icone de goutte sur fond bleu"></button>
|
||||
<button title="Poubelles" id="explore-bin"><img src="./icons/poubelle.svg" alt="Icone de poubelle sur fond marron"></button>
|
||||
<button title="Repos" id="explore-dodo"><img src="./icons/dortoir.svg" alt="Icone de lit"></button>
|
||||
<button title="Programmation" id="explore-on-schedule"><img src="./icons/prog.svg" alt="Icone d;orloge sur fond bleu canard"></button>
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
<form id="search-section">
|
||||
<label for="search-area-query">Rechercher une zone</label><br/>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class CoordsElement extends HTMLElement {
|
|||
}
|
||||
|
||||
updateContent(){
|
||||
this.#shadow.replaceChildren(
|
||||
this.#shadow?.replaceChildren(
|
||||
this.formatCoordComponent(this.lat),
|
||||
", ",
|
||||
this.formatCoordComponent(this.lon)
|
||||
|
|
|
|||
35
js/index.js
35
js/index.js
|
|
@ -163,21 +163,27 @@ function openSearchResultItem(feature){
|
|||
}
|
||||
}
|
||||
|
||||
function openFeature(feature){
|
||||
function openFeature(...feature){
|
||||
let panel = document.getElementById("result-panel")
|
||||
let root = document.createElement("camp-feature")
|
||||
root.feature = feature
|
||||
let root = document.createDocumentFragment()
|
||||
for(let featureItem of feature){
|
||||
let featureEl = document.createElement("camp-feature")
|
||||
featureEl.feature = featureItem
|
||||
root.append(featureEl)
|
||||
}
|
||||
panel.replaceChildren(root)
|
||||
requestAnimationFrame(() => {
|
||||
panel.setActiveChildrenIndex(0, {behavior: "instant"})
|
||||
})
|
||||
updateActiveFeature(feature)
|
||||
updateActiveFeature(feature[0])
|
||||
}
|
||||
|
||||
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)
|
||||
if(typeof feature_or_featureid == "string"){
|
||||
newUrl.hash = encodeURIComponent(feature_or_featureid)
|
||||
} else if(feature_or_featureid){
|
||||
newUrl.hash = encodeURIComponent(feature_or_featureid.id)
|
||||
} else {
|
||||
newUrl.hash = "";
|
||||
}
|
||||
|
|
@ -200,6 +206,23 @@ document.getElementById("result-panel").addEventListener("activePanelChange", e
|
|||
}
|
||||
})
|
||||
|
||||
document.getElementById("explore-toggle-btn").addEventListener("click", () => {
|
||||
let details = document.querySelector("#explore > details")
|
||||
details.open = !details.open
|
||||
})
|
||||
|
||||
function bindButtonToCategory(button, category){
|
||||
button.addEventListener("click", e => {
|
||||
e.preventDefault()
|
||||
openFeature(...places.featuresByCategory[category]);
|
||||
})
|
||||
}
|
||||
|
||||
bindButtonToCategory(document.getElementById("explore-drinking-water"), "drinking-water")
|
||||
bindButtonToCategory(document.getElementById("explore-on-schedule"), "on-schedule")
|
||||
bindButtonToCategory(document.getElementById("explore-dodo"), "dodo")
|
||||
bindButtonToCategory(document.getElementById("explore-bin"), "bin")
|
||||
|
||||
{
|
||||
const RESULT_PANEL = document.getElementById("result-panel")
|
||||
/** @type {HTMLDialogElement} */
|
||||
|
|
|
|||
22
js/places.js
22
js/places.js
|
|
@ -8,6 +8,13 @@ lunrFr(lunr)
|
|||
const FEATURE_INDEX = Symbol("Feature index")
|
||||
export const FEATURE_ID = Symbol("Feature id")
|
||||
|
||||
const CATEGORIES = {
|
||||
"drinking-water": (feature) => feature.properties["eau potable"] || feature.properties["douches"] || feature.properties["toilettes"],
|
||||
"bin": (feature) => feature.properties["poubelle"],
|
||||
"dodo": (feature) => feature.properties["n couchage"] > 0 || feature.properties["camping"],
|
||||
"on-schedule": (feature) => feature.properties["pretalx-room-id"] || feature.properties["pretalx-room-id"] == 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Base de données locale des différents endroits du lieu
|
||||
*/
|
||||
|
|
@ -21,6 +28,8 @@ export class PlaceDatabase extends EventTarget {
|
|||
|
||||
fullTextIndex = null
|
||||
|
||||
featuresByCategory = {}
|
||||
|
||||
/**
|
||||
* Résultats d'une recherche dans la base de données
|
||||
* @typedef {Object} SearchResult
|
||||
|
|
@ -178,6 +187,9 @@ export class PlaceDatabase extends EventTarget {
|
|||
this.featuresShownOnEmptyMap = []
|
||||
let showOnEmptyMap = this.featuresShownOnEmptyMap
|
||||
|
||||
let placesThis = this
|
||||
this.featuresByCategory = {}
|
||||
|
||||
this.fullTextIndex = lunr(function(){
|
||||
this.ref("id")
|
||||
this.field("name", {boost: 3})
|
||||
|
|
@ -219,6 +231,16 @@ export class PlaceDatabase extends EventTarget {
|
|||
boost = sym.searchBoost
|
||||
}
|
||||
|
||||
for(let [categoryName, categoryFilter] of Object.entries(CATEGORIES)){
|
||||
if(!Array.isArray(placesThis.featuresByCategory[categoryName])){
|
||||
placesThis.featuresByCategory[categoryName] = []
|
||||
}
|
||||
|
||||
if(categoryFilter(feature)){
|
||||
placesThis.featuresByCategory[categoryName].push(feature)
|
||||
}
|
||||
}
|
||||
|
||||
this.add({
|
||||
id,
|
||||
name: feature.properties.name || sym.genericName,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue