diff --git a/assets/amenities-btn.svg b/assets/amenities-btn.svg new file mode 100644 index 0000000..69a848a --- /dev/null +++ b/assets/amenities-btn.svg @@ -0,0 +1,680 @@ + + + +Piscine++++++++++++Piscine de l'AntenneAu centre de la pelouse d'entree sur le site, a cote des jeux pour enfantGrand atelier de nage libre, tous cyborg accepteEVENEMENTS A VENIRNage libre3 Juil17:00-19:00++++++ diff --git a/css/style.css b/css/style.css index 0474dad..6406fc2 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } \ No newline at end of file diff --git a/index.html b/index.html index f4a09a3..46778a1 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,18 @@
+ +

diff --git a/js/components/coords.js b/js/components/coords.js index 85f2e13..03bcd74 100644 --- a/js/components/coords.js +++ b/js/components/coords.js @@ -23,7 +23,7 @@ class CoordsElement extends HTMLElement { } updateContent(){ - this.#shadow.replaceChildren( + this.#shadow?.replaceChildren( this.formatCoordComponent(this.lat), ", ", this.formatCoordComponent(this.lon) diff --git a/js/index.js b/js/index.js index 5eea888..0dc54a1 100644 --- a/js/index.js +++ b/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} */ diff --git a/js/places.js b/js/places.js index 51c3a9d..4785a36 100644 --- a/js/places.js +++ b/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,