diff --git a/HOW_TO_MAP.md b/HOW_TO_MAP.md index 7d25b7d..8e4d0cb 100644 --- a/HOW_TO_MAP.md +++ b/HOW_TO_MAP.md @@ -60,4 +60,11 @@ Tout espace qui est en mixité choisie sans mec-cis Les endroits oú l'on peut jouer au badmington -* **badmington**=true (booleen) \ No newline at end of file +* **badmington**=true (booleen) + +## Zone interdite ou protégées + +Les endorit oú il ne faut pas aller + +* **zone-interdite**=true +* **description-interdiction** Une longue description qui remplacera le générique "Veuillez ne pas circuler ici" (texte) \ No newline at end of file diff --git a/couches/poubelles.geojson b/couches/poubelles.geojson index ac99b1f..52058e5 100644 --- a/couches/poubelles.geojson +++ b/couches/poubelles.geojson @@ -6,6 +6,6 @@ { "type": "Feature", "properties": { "tout-venant": true, "recyclage": false, "compost caca": false, "compost vegetal": false, "poubelle": true }, "geometry": { "type": "Point", "coordinates": [ -2.091632273753862, 47.541964182561429 ] } }, { "type": "Feature", "properties": { "tout-venant": false, "recyclage": true, "compost caca": false, "compost vegetal": false, "poubelle": true }, "geometry": { "type": "Point", "coordinates": [ -2.091609674840965, 47.541963379645793 ] } }, { "type": "Feature", "properties": { "tout-venant": false, "recyclage": false, "compost caca": true, "compost vegetal": false, "poubelle": true }, "geometry": { "type": "Point", "coordinates": [ -2.091148822106654, 47.542307623733166 ] } }, -{ "type": "Feature", "properties": { "tout-venant": false, "recyclage": false, "compost caca": false, "compost vegetal": true, "poubelle": false }, "geometry": { "type": "Point", "coordinates": [ -2.091149910988561, 47.542277486881417 ] } } +{ "type": "Feature", "properties": { "tout-venant": false, "recyclage": false, "compost caca": false, "compost vegetal": true, "poubelle": true }, "geometry": { "type": "Point", "coordinates": [ -2.091149910988561, 47.542277486881417 ] } } ] } diff --git a/css/style.css b/css/style.css index c7a4b23..ca7547c 100644 --- a/css/style.css +++ b/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; @@ -327,4 +354,109 @@ camp-feature-short-header .feature-location { camp-feature { min-height: 25vh; + font-family: sans-serif; } + +camp-feature .feature-header { + margin-bottom: 1.5em; +} + +camp-feature .feature-widgets { + display: grid; + grid-template-columns: max-content minmax(50%, 1fr); + grid-auto-rows: max-content; + grid-auto-flow: column; +} + +camp-feature .feature-widgets > * { + grid-column: 1 / 3; + margin-bottom: 2em; +} + +camp-feature .widget > :first-child { + margin-top: 0; +} + +camp-feature .widget > :last-child { + margin-bottom: 0; +} + +camp-feature .widget h2 { + font-size: 1em; + text-transform: uppercase; + margin-bottom: 1ex; +} + +camp-feature .widget p { + margin-top: 1ex; + margin-bottom: 1ex; + line-height: 1.5; +} + +.table-widget { + display: grid; + grid-template-columns: max-content minmax(50%, 1fr); + column-gap: 1ex; + row-gap: 1ex; +} + +camp-feature .table-widget { + grid-template-columns: subgrid; + grid-column: 1 / 3; +} + +.table-widget > * { + margin: 0 !important; +} + +.table-widget > * { + grid-column: 2; +} + +.table-widget > h2 { + grid-column: 1; +} + +camp-feature .table-widget > h2 { + text-transform: none; +} + +.box-widget { + --box-color: white; + border: solid 3px var(--box-color); + padding: 10px; + box-sizing: border-box; +} + +.box-widget h2 { + float: left; + background-color: var(--box-color); + color: white; + padding: 5px 10px; + display: block; + width: fit-content; + position: relative; + font-size: 1em; +} + +.box-widget p:first-of-type { + margin-top: 0; +} + +.box-widget h2::after { + content: ""; + width: 0; height: 0; + border-style: solid; + border-width: calc(1em + 17.667px) calc(1em + 10px) 0px 0px; + border-color: var(--box-color) transparent transparent transparent; + position: absolute; + right: calc((1em + 9px) * -1); + top: 0; +} + +camp-feature .box-widget h2:first-child, +.box-widget h2 { + margin-left: -10px; + margin-top: -10px; + margin-right: 2em; +} \ No newline at end of file diff --git a/css/widgets.css b/css/widgets.css new file mode 100644 index 0000000..e6f0fdf --- /dev/null +++ b/css/widgets.css @@ -0,0 +1,12 @@ +:root { + --verboten-color:#c51a00; + --mixite-choisie-color: #640aa4; +} + +.zone-interdite-widget { + --box-color: var(--verboten-color); +} + +.mixite-choisie-widget { + --box-color: var(--mixite-choisie-color); +} \ No newline at end of file diff --git a/icons/close.svg b/icons/close.svg new file mode 100644 index 0000000..fd47460 --- /dev/null +++ b/icons/close.svg @@ -0,0 +1,53 @@ + + + + diff --git a/icons/poubelle-caca.svg b/icons/poubelle-caca.svg new file mode 100644 index 0000000..783944a --- /dev/null +++ b/icons/poubelle-caca.svg @@ -0,0 +1,88 @@ + + + + diff --git a/icons/poubelle-compost.svg b/icons/poubelle-compost.svg new file mode 100644 index 0000000..4fc1325 --- /dev/null +++ b/icons/poubelle-compost.svg @@ -0,0 +1,89 @@ + + + + diff --git a/icons/poubelle-recyclable.svg b/icons/poubelle-recyclable.svg new file mode 100644 index 0000000..108f878 --- /dev/null +++ b/icons/poubelle-recyclable.svg @@ -0,0 +1,97 @@ + + + + diff --git a/icons/poubelle.svg b/icons/poubelle.svg new file mode 100644 index 0000000..60a2ee2 --- /dev/null +++ b/icons/poubelle.svg @@ -0,0 +1,83 @@ + + + + diff --git a/index.html b/index.html index 6c88e83..bde105d 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Carte Interhack Camp 2026 + @@ -26,6 +27,11 @@ - + + + + diff --git a/js/components/feature.js b/js/components/feature.js index a8fb046..f85c295 100644 --- a/js/components/feature.js +++ b/js/components/feature.js @@ -1,8 +1,10 @@ import "./feature-short-header.js" +import FEATURE_WIDGETS from "../feature-widgets/feature-widgets.js" const TEMPLATE = document.createElement("template") TEMPLATE.innerHTML = ` +
1){ + value.textContent = `${feature.properties["n couchage"]} lits` + } else { + value.textContent = `${feature.properties["n couchage"]} lit` + } + content.append(value) + + return content + } +} \ No newline at end of file diff --git a/js/feature-widgets/capacite-espace.js b/js/feature-widgets/capacite-espace.js new file mode 100644 index 0000000..a302940 --- /dev/null +++ b/js/feature-widgets/capacite-espace.js @@ -0,0 +1,28 @@ +function exclude(feature){ + return feature.properties["Parking"] || + feature.properties["n couchage"]; +} + +export function capaciteEspaceWidget(feature){ + let capacityValue = feature.properties["capacity"] || feature.properties["capacite"] + if((capacityValue !== undefined && capacityValue !== null) && !(exclude(feature))){ + let content = document.createElement("div") + content.classList.add("widget") + content.classList.add("table-widget") + content.classList.add("capacite-espace-widget") + + let fielName = document.createElement("h2"); + fielName.textContent = "Capacité :" + content.append(fielName) + + let value = document.createElement("p"); + if(capacityValue > 1){ + value.textContent = `${capacityValue} personnes` + } else { + value.textContent = `${capacityValue} personne` + } + content.append(value) + + return content + } +} \ No newline at end of file diff --git a/js/feature-widgets/capacite-parking.js b/js/feature-widgets/capacite-parking.js new file mode 100644 index 0000000..22c3295 --- /dev/null +++ b/js/feature-widgets/capacite-parking.js @@ -0,0 +1,22 @@ +export function capaciteParkingWidget(feature){ + if(feature.properties["Parking"] && feature.properties["capacite"]){ + let content = document.createElement("div") + content.classList.add("widget") + content.classList.add("table-widget") + content.classList.add("capacite-parking-widget") + + let fielName = document.createElement("h2"); + fielName.textContent = "Capacité :" + content.append(fielName) + + let value = document.createElement("p"); + if(feature.properties["capacite"] > 1){ + value.textContent = `${feature.properties["capacite"]} places` + } else { + value.textContent = `${feature.properties["capacite"]} place` + } + content.append(value) + + return content + } +} \ No newline at end of file diff --git a/js/feature-widgets/depose-minute.js b/js/feature-widgets/depose-minute.js new file mode 100644 index 0000000..ce74dec --- /dev/null +++ b/js/feature-widgets/depose-minute.js @@ -0,0 +1,17 @@ +export function deposeMinuteWidget(feature){ + if(feature.properties["Parking"] && feature.properties["Depose-minute"]){ + let content = document.createElement("div") + content.classList.add("widget") + content.classList.add("depose-minute-widget") + + let h2 = document.createElement("h2") + h2.textContent = "Dépose minute" + content.append(h2) + + let p = document.createElement("p") + p.textContent = `Ce parking est un dépose minute, veuillez laisser les places libres et ne pas y rester trop longtemps.` + content.append(p) + + return content + } +} \ No newline at end of file diff --git a/js/feature-widgets/feature-widgets.js b/js/feature-widgets/feature-widgets.js new file mode 100644 index 0000000..c809be1 --- /dev/null +++ b/js/feature-widgets/feature-widgets.js @@ -0,0 +1,22 @@ +import { campingCarsWidget } from "./camping-cars.js" +import { capaciteDortoirWidget } from "./capacite-dortoir.js" +import { capaciteEspaceWidget } from "./capacite-espace.js" +import { capaciteParkingWidget } from "./capacite-parking.js" +import { deposeMinuteWidget } from "./depose-minute.js" +import { mixiteChoisieWidget } from "./mixite-choisie.js" +import { zoneInterditeWidget } from "./zone-interdite.js" + +export const FEATURE_WIDGETS = [ + // Boxes + mixiteChoisieWidget, + zoneInterditeWidget, + // Other + deposeMinuteWidget, + campingCarsWidget, + // Fields + capaciteParkingWidget, + capaciteDortoirWidget, + capaciteEspaceWidget, +] + +export default FEATURE_WIDGETS \ No newline at end of file diff --git a/js/feature-widgets/mixite-choisie.js b/js/feature-widgets/mixite-choisie.js new file mode 100644 index 0000000..a8ab513 --- /dev/null +++ b/js/feature-widgets/mixite-choisie.js @@ -0,0 +1,24 @@ +export function mixiteChoisieWidget(feature){ + if(feature.properties["mixite-choisie"]){ + let content = document.createElement("div") + content.classList.add("mixite-choisie-widget") + content.classList.add("widget") + content.classList.add("box-widget") + + let h2 = document.createElement("h2") + h2.textContent = "Mixité choisie" + content.append(h2) + + if(feature.properties["description-mixite-choisie"]){ + let description = document.createElement("p") + description.textContent = feature.properties["description-mixite-choisie"] + content.append(description) + } else { + let p = document.createElement("p") + p.textContent = `Cet espace est en mixité choisie sans mecs cis` + content.append(p) + } + + return content + } +} \ No newline at end of file diff --git a/js/feature-widgets/zone-interdite.js b/js/feature-widgets/zone-interdite.js new file mode 100644 index 0000000..3774792 --- /dev/null +++ b/js/feature-widgets/zone-interdite.js @@ -0,0 +1,24 @@ +export function zoneInterditeWidget(feature){ + if(feature.properties["zone-interdite"] || feature.properties["autorisee"] === false){ + let content = document.createElement("div") + content.classList.add("zone-interdite-widget") + content.classList.add("widget") + content.classList.add("box-widget") + + let h2 = document.createElement("h2") + h2.textContent = "Zone interdite" + content.append(h2) + + if(feature.properties["description-interdiction"]){ + let description = document.createElement("p") + description.textContent = feature.properties["description-interdiction"] + content.append(description) + } else { + let p = document.createElement("p") + p.textContent = `Cette zone est interdite. Veuillez ne pas y entrer.` + content.append(p) + } + + return content + } +} \ No newline at end of file diff --git a/js/index.js b/js/index.js index 8f12cbe..5eea888 100644 --- a/js/index.js +++ b/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) { @@ -32,8 +39,13 @@ window.addEventListener("hashchange", () => { if (feature) { MAP.highlight(place_id) if(document.getElementById("search-result")) { + + // If we have a search in progress, opening search item openSearchResultItem(feature) + } else { + + let foundIndex = null; let panelChildren = document.getElementById("result-panel").children for(let i = 0; i { } if(foundIndex != null){ + // If a panel with this feature was already added to dom, scrolling to this item document.getElementById("result-panel").setActiveChildrenIndex(foundIndex, {behavior: "instant"}) } else { + + // If nothing was selected and there is no search result, opening feature only openFeature(feature) } } - for(let feature_el of document.getElementById("result-panel").children) { - if(feature_el instanceof FeatureElement){ - MAP.show(feature_el.feature) + if(document.getElementById("result-panel").children.length > 1){ + for(let feature_el of document.getElementById("result-panel").children) { + if(feature_el instanceof FeatureElement){ + MAP.show(feature_el.feature) + } + } + } else { + for(let feature of places.featuresShownOnEmptyMap){ + MAP.show(feature) } } } } else { - MAP.unhighlight_all() + document.getElementById("result-panel").replaceChildren(null) + showDefaultMapState() } }) -if(location.hash){ - window.dispatchEvent(new Event("hashchange")) -} +window.dispatchEvent(new Event("hashchange")) search_form.addEventListener("submit", e => { e.preventDefault() @@ -104,6 +124,7 @@ search_form.addEventListener("submit", e => { } else { document.getElementById("search-result")?.remove() + showDefaultMapState() } } @@ -178,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() +} \ No newline at end of file diff --git a/js/places.js b/js/places.js index 85c44f8..01dbb1a 100644 --- a/js/places.js +++ b/js/places.js @@ -13,7 +13,12 @@ export const FEATURE_ID = Symbol("Feature id") */ export class PlaceDatabase extends EventTarget { + /** @type {Object} */ featuresById = {} + + /** @type {MapFeature[]} */ + featuresShownOnEmptyMap = [] + fullTextIndex = null /** @@ -166,6 +171,9 @@ export class PlaceDatabase extends EventTarget { buildIndex(){ let database = this; + this.featuresShownOnEmptyMap = [] + let showOnEmptyMap = this.featuresShownOnEmptyMap + this.fullTextIndex = lunr(function(){ this.ref("id") this.field("name") @@ -184,6 +192,10 @@ export class PlaceDatabase extends EventTarget { synonyms.push(...sym.indexSynonyms) } + if(feature.properties["show-on-empty-map"]){ + showOnEmptyMap.push(feature) + } + this.add({ id, name: feature.properties.name || sym.genericName, @@ -219,6 +231,7 @@ export class PlaceDatabase extends EventTarget { default_database.loadGeojson(new URL("../couches/terrain-de-basket.geojson", import.meta.url), {batch: true}), default_database.loadGeojson(new URL("../couches/wifi.geojson", import.meta.url), {batch: true}), default_database.loadGeojson(new URL("../couches/zones-interdite.geojson", import.meta.url), {batch: true}), + default_database.loadGeojson(new URL("../couches/zones-protegees.geojson", import.meta.url), {batch: true}), ]) default_database.buildIndex() diff --git a/js/symbols.js b/js/symbols.js index 3358eb6..170849d 100644 --- a/js/symbols.js +++ b/js/symbols.js @@ -71,7 +71,7 @@ function getBaseSymbolForFeature(feature){ return WIFI_SYMBOL } - if(feature.properties["zone-interdite"]){ + if(feature.properties["zone-interdite"] || feature.properties["autorisee"] === false){ return VERBOTEN_AREA_SYMBOL } @@ -99,6 +99,19 @@ function getBaseSymbolForFeature(feature){ return DRINKING_WATER_SYMBOL } + if(feature.properties["poubelle"]){ + if(feature.properties["recyclage"]){ + return RECYCLE_BIN_SYMBOL + } + if(feature.properties["compost vegetal"]){ + return COMPOST_BIN_SYMBOL + } + if(feature.properties["compost caca"]){ + return POOP_BIN_SYMBOL + } + return BIN_SYMBOL + } + if(feature.properties["batiment"] || feature.properties["piece-batiment"]){ return BUILDING_SYMBOL } @@ -213,4 +226,56 @@ export const WIFI_SYMBOL = new MapSymbol() { WIFI_SYMBOL.genericName = "Wifi" WIFI_SYMBOL.markerUrl = new URL("../icons/wifi.svg", import.meta.url) +} + +export const BIN_SYMBOL = new MapSymbol() +{ + BIN_SYMBOL.genericName = "Poubelle" + BIN_SYMBOL.markerUrl = new URL("../icons/poubelle.svg", import.meta.url) + BIN_SYMBOL.indexSynonyms = [ + "poubelle", + "dechet", + "déchet" + ] +} + +export const RECYCLE_BIN_SYMBOL = new MapSymbol() +{ + RECYCLE_BIN_SYMBOL.genericName = "Poubelle recyclable" + RECYCLE_BIN_SYMBOL.markerUrl = new URL("../icons/poubelle-recyclable.svg", import.meta.url) + RECYCLE_BIN_SYMBOL.indexSynonyms = [ + "poubelle", + "dechet", + "déchet", + "recyclable", + 'recyclage' + ] +} + +export const COMPOST_BIN_SYMBOL = new MapSymbol() +{ + COMPOST_BIN_SYMBOL.genericName = "Compost" + COMPOST_BIN_SYMBOL.markerUrl = new URL("../icons/poubelle-compost.svg", import.meta.url) + COMPOST_BIN_SYMBOL.indexSynonyms = [ + "poubelle", + "dechet", + "déchet", + "compost", + "épluchures" + ] +} + +export const POOP_BIN_SYMBOL = new MapSymbol() +{ + POOP_BIN_SYMBOL.genericName = "Compost des toilettes sèches" + POOP_BIN_SYMBOL.markerUrl = new URL("../icons/poubelle-caca.svg", import.meta.url) + POOP_BIN_SYMBOL.indexSynonyms = [ + "poubelle", + "dechet", + "déchet", + "compost", + "épluchures", + "toilettes sèches", + "caca" + ] } \ No newline at end of file