diff --git a/src/css/directions-results.css b/src/css/directions-results.css index 1faf7a0f..a0d8fff6 100644 --- a/src/css/directions-results.css +++ b/src/css/directions-results.css @@ -116,7 +116,6 @@ color: white; } -/* INFO l'affichage est programmatique */ #directionsListDetails { display: none; position: relative; @@ -127,6 +126,10 @@ font-family: "Open Sans"; } +#directionsResults:has(#directionsShowDetail:checked) #directionsListDetails { + display: flex; +} + .divDirectionsDetailsItem { display: flex; flex-direction: row; diff --git a/src/css/index.css b/src/css/index.css index 2543ba86..3e15ee01 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -66,6 +66,10 @@ body { overflow-x: clip; } +body.scrollable { + overflow-y: scroll; +} + body:has(action-sheet:not(.d-none)) { overflow-y: hidden; } @@ -93,6 +97,10 @@ input, textarea, select { animation: fadeIn 0.15s; } +#whiteScreen.falseWhite { + background-color: var(--false-white); +} + .hidden { max-height: 0 !important; overflow: hidden !important; diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css index a24802b0..2f24b55a 100644 --- a/src/css/map-buttons.css +++ b/src/css/map-buttons.css @@ -29,6 +29,14 @@ transition: transform 0.5s ease-in-out; } +#bottomButtons.routeDraw { + bottom: calc(72px + 112px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 20px)); +} + +#bottomButtons.compare { + bottom: calc(42px + var(--safe-area-inset-bottom)); +} + #layerManagerBtn { background-image: url("assets/map-buttons/layers.svg"); position: absolute; @@ -414,6 +422,16 @@ button.maplibregl-ctrl-shrink { z-index: 2500; } + #bottomButtons.routeDraw { + left: min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px)); + width: auto; + bottom: calc(112px + var(--safe-area-inset-bottom)); + } + + #bottomButtons.compareWidth { + width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + } + #interactivityBtn { left: calc(85px + var(--safe-area-inset-left)); } @@ -456,4 +474,15 @@ button.maplibregl-ctrl-shrink { width: min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px)); border-top-right-radius: 8px; } + + #sideBySideLeftLayer.compareLayers { + left: calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 15px); + } + + #sideBySideFadeSlider.compareLayers { + left: calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 78px); + transform: unset; + width: calc(100vw - 144px - var(--safe-area-inset-left) - var(--safe-area-inset-right) - min(50vw, 100vh + var(--safe-area-inset-left) + 42px) - 15px); + } + } diff --git a/src/css/tabs.css b/src/css/tabs.css index 308ce157..8fa4674b 100644 --- a/src/css/tabs.css +++ b/src/css/tabs.css @@ -69,6 +69,18 @@ z-index: 3004; } +#tabContainer.white { + background-color: white; +} + +#tabContainer.compare { + top: 100vh; +} + +#tabContainer.noHeight { + height: 0px; +} + #sheetHeader, #tabHeader { width: 100%; diff --git a/src/html/index.html b/src/html/index.html index 4e2535d4..bee4f320 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -33,7 +33,7 @@ -
+
<%= require('html-loader!./tabs/layermanagerWindow.html').default %> <%= require('html-loader!./tabs/directionsWindow.html').default %> diff --git a/src/js/compare-poi/compare-poi.js b/src/js/compare-poi/compare-poi.js index 2ebe2926..32af5d61 100644 --- a/src/js/compare-poi/compare-poi.js +++ b/src/js/compare-poi/compare-poi.js @@ -157,8 +157,8 @@ class ComparePoi { this.dom.text.classList.remove("d-none"); this.dom.title.innerText = `${this.theme}`; DOM.$comparePoiWindow.classList.remove("d-none"); - DOM.$tabContainer.style.removeProperty("top"); - DOM.$bottomButtons.style.removeProperty("bottom"); + DOM.$tabContainer.classList.remove("compare"); + DOM.$bottomButtons.classList.remove("compare"); DOM.$sideBySideLeftLayer.classList.add("d-none"); DOM.$sideBySideRightLayer.classList.add("d-none"); Globals.currentScrollIndex = 2; diff --git a/src/js/directions/directions-results-dom.js b/src/js/directions/directions-results-dom.js index 1abec542..94589346 100644 --- a/src/js/directions/directions-results-dom.js +++ b/src/js/directions/directions-results-dom.js @@ -121,8 +121,6 @@ let DirectionsResultsDOM = { */ __addResultsDetailsContainerDOMElement () { // contexte de la classse - var self = this; - var div = document.createElement("div"); div.id = "directionsDetails"; div.className = ""; @@ -130,9 +128,6 @@ let DirectionsResultsDOM = { var inputShow = this.dom.inputShow = document.createElement("input"); inputShow.id = "directionsShowDetail"; inputShow.type = "checkbox"; - inputShow.addEventListener("change", function (e) { - self.toggleDisplayDetails(e); - }); div.appendChild(inputShow); var labelShow = document.createElement("label"); @@ -172,6 +167,7 @@ let DirectionsResultsDOM = { var canvasProfile = document.createElement("canvas"); canvasProfile.id = "directions-elevationline"; canvasProfile.className = "elevationLineCanvas"; + // FIXME: STYLE: passer par une classe et style CSS canvasProfile.style.width = "100%"; divList.appendChild(canvasProfile); } diff --git a/src/js/directions/directions-results.js b/src/js/directions/directions-results.js index c33ab233..593b2298 100644 --- a/src/js/directions/directions-results.js +++ b/src/js/directions/directions-results.js @@ -76,28 +76,6 @@ class DirectionsResults { Globals.menu.close("directionsResults"); } - /** - * listener issu du dom sur la visualisation des détails du parcours - * @param {*} e - * @fixme trouver une solution full css ! - */ - toggleDisplayDetails(e) { - // INFO - // l'affichage ne peut pas être realisé en CSS only - // (car ils ne sont pas issus du même parent) - // input[id="directionsShowDetail"]:checked + label + #directionsListDetails { - // display: block; - // } - var div = document.getElementById("directionsListDetails"); - if (e.target.checked) { - div.style.display = "flex"; - Globals.currentScrollIndex = 2; - Globals.menu.updateScrollAnchors(); - } else { - div.style.display = "none"; - } - } - updateDuration(newDuration) { const oldDuration = this.options.duration; this.options.duration = newDuration; diff --git a/src/js/elevation-line-control/elevation-line-control.js b/src/js/elevation-line-control/elevation-line-control.js index e34ace2d..25f1750d 100644 --- a/src/js/elevation-line-control/elevation-line-control.js +++ b/src/js/elevation-line-control/elevation-line-control.js @@ -65,6 +65,7 @@ class ElevationLineControl { this.chart = null; this.loadingDom = document.createElement("div"); // div de la patience + // FIXME: STYLE: passer par une classe et style CSS this.loadingDom.style.width = "100%"; this.loadingDom.style.aspectRatio = "2 / 1"; this.loadingDom.style.position = "sticky"; @@ -396,6 +397,7 @@ Distance du départ : ${distanceText} ${this.unit}`; this.target.after(this.loadingDom); this.loadingDomInDocument = true; } + // FIXME: STYLE: passer par une classe et style CSS this.loadingDom.style.removeProperty("display"); } diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js index 205970a6..b6947482 100644 --- a/src/js/event-listeners.js +++ b/src/js/event-listeners.js @@ -154,36 +154,11 @@ function addListeners() { Globals.currentScrollIndex = 2; } } - if (Globals.backButtonState === "routeDraw") { - DOM.$bottomButtons.style.removeProperty("bottom"); - DOM.$bottomButtons.style.removeProperty("left"); - DOM.$bottomButtons.style.removeProperty("width"); - if (!window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - if (!Globals.routeDraw.readonly) { - DOM.$bottomButtons.style.bottom = "calc(72px + 112px + var(--safe-area-inset-bottom))"; - } - } else { - DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))"; - DOM.$bottomButtons.style.width = "auto"; - if (!Globals.routeDraw.readonly) { - DOM.$bottomButtons.style.bottom = "calc(112px + var(--safe-area-inset-bottom))"; - } - } - } if (["selectOnMapDirections", "selectOnMapIsochrone", "selectOnMapLandmark", "compare"].includes(Globals.backButtonState)) { Globals.currentScrollIndex = 0; } - if (Globals.backButtonState === "compareLayers2") { - DOM.$sideBySideLeftLayer.style.removeProperty("left"); - if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$sideBySideLeftLayer.style.left = "calc(50% + 15px)"; - } - } + if (["compare", "compareLayers1", "compareLayers2"].includes(Globals.backButtonState)) { - DOM.$bottomButtons.style.removeProperty("width"); - if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$bottomButtons.style.width = "calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right))"; - } const slider = document.querySelector(".maplibregl-compare"); if (slider) { let sliderX; @@ -204,19 +179,6 @@ function addListeners() { }, 50); } } - if (["compareLayers1", "compareLayers2"].includes(Globals.backButtonState)) { - if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$sideBySideLeftLayer.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 15px)"; - DOM.$sideBySideFadeSlider.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 78px)"; - DOM.$sideBySideFadeSlider.style.transform = "unset"; - DOM.$sideBySideFadeSlider.style.width = "calc(100vw - 144px - var(--safe-area-inset-left) - var(--safe-area-inset-right) - min(50vw, 100vh + var(--safe-area-inset-left) + 42px) - 15px)"; - } else { - DOM.$sideBySideLeftLayer.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("width"); - DOM.$sideBySideFadeSlider.style.removeProperty("transform"); - } - } Globals.menu.updateScrollAnchors(); }; diff --git a/src/js/index.js b/src/js/index.js index 4dbc7e31..89c0381e 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -120,6 +120,7 @@ function app() { // Définition des icones Globals.myPositionIcon = document.createElement("div"); Globals.myPositionIcon.class = "myPositionIcon"; + // FIXME: STYLE: passer par une classe et style CSS Globals.myPositionIcon.style.width = "51px"; Globals.myPositionIcon.style.height = "51px"; Globals.myPositionIcon.style.backgroundSize = "contain"; @@ -127,6 +128,7 @@ function app() { Globals.myPositionIconGrey = document.createElement("div"); Globals.myPositionIconGrey.class = "myPositionIconGrey"; + // FIXME: STYLE: passer par une classe et style CSS Globals.myPositionIconGrey.style.width = "51px"; Globals.myPositionIconGrey.style.height = "51px"; Globals.myPositionIconGrey.style.backgroundSize = "contain"; @@ -134,6 +136,7 @@ function app() { Globals.searchResultIcon = document.createElement("div"); Globals.searchResultIcon.class = "searchResultIcon"; + // FIXME: STYLE: passer par une classe et style CSS Globals.searchResultIcon.style.width = "36px"; Globals.searchResultIcon.style.height = "36px"; Globals.searchResultIcon.style.backgroundSize = "contain"; diff --git a/src/js/isochrone/isochrone-dom.js b/src/js/isochrone/isochrone-dom.js index 1698f345..98ffdc3b 100644 --- a/src/js/isochrone/isochrone-dom.js +++ b/src/js/isochrone/isochrone-dom.js @@ -366,6 +366,7 @@ let IsochroneDOM = { __setComputeButtonLoading () { this.dom.isochroneCompute.value = ""; this.dom.isochroneCompute.disabled = true; + // FIXME: STYLE: passer par une classe et style CSS this.dom.isochroneCompute.style.backgroundImage = "url(" + LoadingWhite + ")"; document.querySelectorAll("#isochroneLocationContainer").forEach((el) => { el.classList.add("disabled"); diff --git a/src/js/map-interactivity/interactivity-indicator.js b/src/js/map-interactivity/interactivity-indicator.js index f6ce744e..b2398717 100644 --- a/src/js/map-interactivity/interactivity-indicator.js +++ b/src/js/map-interactivity/interactivity-indicator.js @@ -142,6 +142,7 @@ class InteractivityIndicator { active () { this.hardDisabled = false; DOM.$interactivityBtn.classList.remove("d-none"); + // FIXME: STYLE: passer par une classe et style CSS DOM.$interactivityBtn.style.removeProperty("opacity"); DOM.$interactivityBtn.style.removeProperty("color"); document.getElementById("interactivityBtnText").innerText = "La carte est interactive"; diff --git a/src/js/map-interactivity/map-interactivity.js b/src/js/map-interactivity/map-interactivity.js index 8f41e34b..5418abc8 100644 --- a/src/js/map-interactivity/map-interactivity.js +++ b/src/js/map-interactivity/map-interactivity.js @@ -191,6 +191,7 @@ class MapInteractivity { this.#multipleGFI(layersForGFI) .then(async (resp) => { this.loading = false; + // FIXME: STYLE: passer par une classe et style CSS DOM.$mapCenter.style.removeProperty("background-image"); DOM.$mapCenter.style.removeProperty("background-size"); DOM.$mapCenter.classList.add("d-none"); diff --git a/src/js/nav.js b/src/js/nav.js index b4906577..05a057c1 100644 --- a/src/js/nav.js +++ b/src/js/nav.js @@ -90,7 +90,7 @@ class MenuNavigation { */ hide() { this.container.classList.add("d-none"); - DOM.$tabContainer.style.removeProperty("height"); + DOM.$tabContainer.classList.remove("noHeight"); } /** @@ -98,7 +98,7 @@ class MenuNavigation { */ show() { this.container.classList.remove("d-none"); - DOM.$tabContainer.style.height = "0px"; + DOM.$tabContainer.classList.add("noHeight"); } /** @@ -137,7 +137,7 @@ class MenuNavigation { switch (id) { case "landmark": Globals.backButtonState = "landmark-" + previousBackState; - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$filterPoiBtn.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); Globals.interactivityIndicator.hardDisable(); @@ -153,7 +153,7 @@ class MenuNavigation { Globals.interactivityIndicator.hardDisable(); break; case "comparePoi": - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); DOM.$backTopLeftBtn.classList.remove("d-none"); @@ -170,51 +170,43 @@ class MenuNavigation { if (document.querySelector(".autocompresultselected")) { document.querySelector(".autocompresultselected").classList.remove("autocompresultselected"); } - DOM.$search.style.display = "none"; - document.body.style.removeProperty("overflow-y"); + DOM.$search.classList.add("d-none"); + document.body.classList.remove("searching"); DOM.$whiteScreen.classList.add("d-none"); - DOM.$backTopLeftBtn.style.removeProperty("box-shadow"); - DOM.$backTopLeftBtn.style.removeProperty("height"); - DOM.$backTopLeftBtn.style.removeProperty("width"); - DOM.$backTopLeftBtn.style.removeProperty("top"); - DOM.$backTopLeftBtn.style.removeProperty("left"); + DOM.$backTopLeftBtn.classList.remove("searching"); DOM.$altMenuContainer.classList.add("d-none"); DOM.$selectOnMap.classList.add("d-none"); Globals.currentScrollIndex = 0; this.updateScrollAnchors(); break; case "compareLayers1": - DOM.$tabContainer.style.removeProperty("top"); DOM.$compareLayers2Window.classList.add("d-none"); DOM.$compareLayers1Window.classList.remove("d-none"); - DOM.$bottomButtons.style.removeProperty("bottom"); + DOM.$tabContainer.classList.remove("compare"); + DOM.$bottomButtons.classList.remove("compare"); DOM.$sideBySideRightLayer.classList.add("inactive"); + DOM.$sideBySideLeftLayer.classList.add("compareLayers"); + DOM.$sideBySideFadeSlider.classList.add("compareLayers"); Globals.currentScrollIndex = 2; if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$sideBySideLeftLayer.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 15px)"; - DOM.$sideBySideFadeSlider.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 78px)"; - DOM.$sideBySideFadeSlider.style.transform = "unset"; - DOM.$sideBySideFadeSlider.style.width = "calc(100vw - 144px - var(--safe-area-inset-left) - var(--safe-area-inset-right) - min(50vw, 100vh + var(--safe-area-inset-left) + 42px) - 15px)"; Globals.currentScrollIndex = 1; } break; case "compareLayers2": - DOM.$tabContainer.style.removeProperty("top"); DOM.$compareLayers1Window.classList.add("d-none"); DOM.$compareLayers2Window.classList.remove("d-none"); - DOM.$bottomButtons.style.removeProperty("bottom"); + DOM.$tabContainer.classList.remove("compare"); + DOM.$bottomButtons.classList.remove("compare"); DOM.$sideBySideLeftLayer.classList.add("inactive"); + DOM.$sideBySideLeftLayer.classList.add("compareLayers"); + DOM.$sideBySideFadeSlider.classList.add("compareLayers"); + Globals.currentScrollIndex = 2; if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$sideBySideLeftLayer.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px) + 15px)"; - DOM.$sideBySideFadeSlider.style.left = "calc(min(50vw, 100vh + var(--safe-area-inset-left) + 42px)+ 56px)"; - DOM.$sideBySideFadeSlider.style.transform = "unset"; - DOM.$sideBySideFadeSlider.style.width = "calc(100vw - 144px - var(--safe-area-inset-left) - var(--safe-area-inset-right) - min(50vw, 100vh + var(--safe-area-inset-left) + 42px) - 15px)"; Globals.currentScrollIndex = 1; } - Globals.currentScrollIndex = 2; break; case "compare": - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$filterPoiBtn.classList.add("d-none"); DOM.$geolocateBtn.classList.add("d-none"); DOM.$layerManagerBtn.classList.add("d-none"); @@ -222,11 +214,9 @@ class MenuNavigation { DOM.$compareMode.classList.remove("d-none"); DOM.$sideBySideLeftLayer.classList.remove("d-none"); DOM.$sideBySideRightLayer.classList.remove("d-none"); - DOM.$tabContainer.style.top = "100vh"; - DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))"; - if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$bottomButtons.style.width = "calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right))"; - } + DOM.$tabContainer.classList.add("compare"); + DOM.$bottomButtons.classList.add("compare"); + DOM.$bottomButtons.classList.add("compareWidth"); DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-left").classList.add("d-none"); Globals.compare.show(); Globals.interactivityIndicator.hardDisable(); @@ -237,37 +227,29 @@ class MenuNavigation { DOM.$filterPoiBtn.classList.add("d-none"); Globals.routeDraw.dom.changeMode.classList.add("d-none"); DOM.$routeDrawEdit.classList.add("d-none"); - DOM.$bottomButtons.style.removeProperty("bottom"); - DOM.$bottomButtons.style.removeProperty("left"); - DOM.$bottomButtons.style.removeProperty("width"); + DOM.$bottomButtons.classList.remove("routeDraw"); Globals.currentScrollIndex = 1; break; case "routeDraw": // Disparition de la croix pour le tracé d'itinéraire (décision UI) DOM.$tabClose.classList.add("d-none"); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); DOM.$backTopLeftBtn.classList.remove("d-none"); if (!Globals.routeDraw.readonly) { DOM.$routeDrawEdit.classList.remove("d-none"); - if (!window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$bottomButtons.style.bottom = "calc(72px + 112px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 20px))"; - } else { - DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))"; - DOM.$bottomButtons.style.width = "auto"; - DOM.$bottomButtons.style.bottom = "calc(112px + var(--safe-area-inset-bottom))"; - } + DOM.$bottomButtons.classList.add("routeDraw"); Globals.routeDraw.activate(); } - DOM.$tabContainer.style.backgroundColor = "white"; + DOM.$tabContainer.classList.add("white"); Globals.interactivityIndicator.hardDisable(); Globals.currentScrollIndex = 1; break; case "poi": Globals.backButtonState = "poi-" + previousBackState; Globals.routeDraw.deactivate(); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); DOM.$backTopLeftBtn.classList.remove("d-none"); @@ -277,16 +259,14 @@ class MenuNavigation { case "layerManager": Globals.backButtonState = "layerManager-" + previousBackState; DOM.$layerManagerBtn.classList.add("active"); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); - DOM.$tabContainer.style.removeProperty("background-color"); + DOM.$tabContainer.classList.remove("white"); DOM.$backTopLeftBtn.classList.remove("d-none"); if (!Globals.routeDraw.readonly) { DOM.$routeDrawEdit.classList.add("d-none"); - DOM.$bottomButtons.style.removeProperty("bottom"); - DOM.$bottomButtons.style.removeProperty("left"); - DOM.$bottomButtons.style.removeProperty("width"); + DOM.$bottomButtons.classList.remove("routeDraw"); } Globals.currentScrollIndex = 1; break; @@ -298,7 +278,7 @@ class MenuNavigation { Globals.backButtonState = "position-" + previousBackState; } Globals.interactivityIndicator.enable(); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); DOM.$filterPoiBtn.classList.remove("d-none"); @@ -309,7 +289,7 @@ class MenuNavigation { // FIXME mettre en place une méthode sur la classe Search // ex. Globals.search.hide() Globals.backButtonState = "isochrone-" + previousBackState; - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$filterPoiBtn.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); Globals.interactivityIndicator.hardDisable(); @@ -317,27 +297,27 @@ class MenuNavigation { break; case "myaccount": case "informationsScreen": - DOM.$tabContainer.style.height = "0px"; - DOM.$whiteScreen.style.backgroundColor = getComputedStyle(document.body).getPropertyValue("--false-white"); - document.body.style.overflowY = "scroll"; + DOM.$tabContainer.classList.add("noHeight"); + DOM.$whiteScreen.classList.add("falseWhite"); + document.body.classList.add("scrollable"); DOM.$whiteScreen.classList.remove("d-none"); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); DOM.$altMenuContainer.classList.remove("d-none"); Globals.currentScrollIndex = 0; break; case "directionsResults": - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); - DOM.$tabContainer.style.backgroundColor = "white"; + DOM.$tabContainer.classList.add("white"); Globals.interactivityIndicator.enable(); - DOM.$tabContainer.style.removeProperty("height"); + DOM.$tabContainer.classList.remove("noHeight"); Globals.currentScrollIndex = 2; break; case "searchDirections": case "searchIsochrone": case "searchLandmark": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$selectOnMap.classList.remove("d-none"); // falls through case "search": @@ -352,7 +332,7 @@ class MenuNavigation { break; case "directions": Globals.backButtonState = "directions-" + previousBackState; - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher"); DOM.$filterPoiBtn.classList.add("higher"); DOM.$filterPoiBtn.classList.remove("d-none"); @@ -366,6 +346,9 @@ class MenuNavigation { target.value = "Ma position"; } Globals.currentScrollIndex = 2; + if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { + Globals.currentScrollIndex = 1; + } break; default: break; @@ -379,7 +362,7 @@ class MenuNavigation { this.hide(); if (!DOM.$whiteScreen.classList.contains("d-none")) { - DOM.$tabContainer.style.height = "0px"; + DOM.$tabContainer.classList.add("noHeight"); } // on procede à l'affichage du panneau @@ -404,7 +387,7 @@ class MenuNavigation { var isFinished = false; // hack pour search ! switch (id) { case "landmark": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$filterPoiBtn.classList.remove("d-none"); DOM.$backTopLeftBtn.classList.add("d-none"); Globals.landmark.clear(); @@ -422,7 +405,7 @@ class MenuNavigation { break; case "comparePoi": Globals.comparePoi.clearSources(); - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); DOM.$backTopLeftBtn.classList.add("d-none"); @@ -440,33 +423,31 @@ class MenuNavigation { isFinished = true; break; case "compareLayers1": - DOM.$tabContainer.style.top = "100vh"; - DOM.$sideBySideLeftLayer.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("width"); - DOM.$sideBySideFadeSlider.style.removeProperty("transform"); + DOM.$tabContainer.classList.add("compare"); + DOM.$sideBySideLeftLayer.classList.remove("compareLayers"); + DOM.$sideBySideFadeSlider.classList.remove("compareLayers"); DOM.$compareLayers1Window.classList.add("d-none"); - DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))"; + DOM.$tabContainer.classList.add("compare"); + DOM.$bottomButtons.classList.add("compare"); DOM.$sideBySideRightLayer.classList.remove("inactive"); Globals.currentScrollIndex = 0; isSpecific = true; isFinished = true; break; case "compareLayers2": - DOM.$tabContainer.style.top = "100vh"; - DOM.$sideBySideLeftLayer.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("left"); - DOM.$sideBySideFadeSlider.style.removeProperty("width"); - DOM.$sideBySideFadeSlider.style.removeProperty("transform"); + DOM.$tabContainer.classList.add("compare"); + DOM.$sideBySideLeftLayer.classList.remove("compareLayers"); + DOM.$sideBySideFadeSlider.classList.remove("compareLayers"); DOM.$compareLayers2Window.classList.add("d-none"); - DOM.$bottomButtons.style.bottom = "calc(42px + var(--safe-area-inset-bottom))"; + DOM.$tabContainer.classList.add("compare"); + DOM.$bottomButtons.classList.add("compare"); DOM.$sideBySideLeftLayer.classList.remove("inactive"); Globals.currentScrollIndex = 0; isSpecific = true; isFinished = true; break; case "compare": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$filterPoiBtn.classList.remove("d-none"); DOM.$geolocateBtn.classList.remove("d-none"); DOM.$layerManagerBtn.classList.remove("d-none"); @@ -474,9 +455,9 @@ class MenuNavigation { DOM.$compareMode.classList.add("d-none"); DOM.$sideBySideLeftLayer.classList.add("d-none"); DOM.$sideBySideRightLayer.classList.add("d-none"); - DOM.$tabContainer.style.removeProperty("top"); - DOM.$bottomButtons.style.removeProperty("bottom"); - DOM.$bottomButtons.style.removeProperty("width"); + DOM.$tabContainer.classList.remove("compare"); + DOM.$bottomButtons.classList.remove("compare"); + DOM.$bottomButtons.classList.add("compareWidth"); DOM.$bottomButtons.querySelector(".maplibregl-ctrl-bottom-left").classList.remove("d-none"); Globals.compare.hide(); Globals.interactivityIndicator.enable(); @@ -489,41 +470,33 @@ class MenuNavigation { DOM["$routeDrawWindow"].classList.remove("d-none"); Globals.routeDraw.dom.changeMode.classList.remove("d-none"); DOM.$routeDrawEdit.classList.remove("d-none"); - if (!window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) { - DOM.$bottomButtons.style.bottom = "calc(72px + 112px + var(--safe-area-inset-bottom))"; - } else { - DOM.$bottomButtons.style.left = "min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px))"; - DOM.$bottomButtons.style.width = "auto"; - DOM.$bottomButtons.style.bottom = "calc(112px + var(--safe-area-inset-bottom))"; - } + DOM.$bottomButtons.classList.add("routeDraw"); isSpecific = true; isFinished = true; break; case "routeDraw": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("d-none"); DOM.$backTopLeftBtn.classList.add("d-none"); if (!Globals.routeDraw.readonly) { DOM.$routeDrawEdit.classList.add("d-none"); - DOM.$bottomButtons.style.removeProperty("bottom"); - DOM.$bottomButtons.style.removeProperty("left"); - DOM.$bottomButtons.style.removeProperty("width"); + DOM.$bottomButtons.classList.remove("routeDraw"); } - DOM.$tabContainer.style.removeProperty("background-color"); + DOM.$tabContainer.classList.remove("white"); Globals.routeDraw.clear(); Globals.interactivityIndicator.enable(); break; case "poi": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); DOM.$backTopLeftBtn.classList.add("d-none"); DOM.$filterPoiBtn.classList.remove("d-none"); break; case "layerManager": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$layerManagerBtn.classList.remove("active"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); @@ -534,7 +507,7 @@ class MenuNavigation { isFinished = true; break; case "position": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); DOM.$backTopLeftBtn.classList.add("d-none"); @@ -542,7 +515,7 @@ class MenuNavigation { break; case "isochrone": // FIXME mettre en place une méthode sur la classe Searchs - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$filterPoiBtn.classList.remove("d-none"); DOM.$backTopLeftBtn.classList.add("d-none"); Globals.isochrone.clear(); @@ -574,26 +547,26 @@ class MenuNavigation { DOM.$backTopLeftBtn.classList.remove("searching"); DOM.$altMenuContainer.classList.add("d-none"); DOM.$selectOnMap.classList.add("d-none"); - DOM.$tabContainer.style.removeProperty("height"); + DOM.$tabContainer.classList.remove("noHeight"); Globals.currentScrollIndex = 1; // falls through case "directionsResults": - DOM.$tabContainer.style.removeProperty("background-color"); + DOM.$tabContainer.classList.remove("white"); Globals.interactivityIndicator.hardDisable(); isSpecific = true; isFinished = true; break; case "myaccount": case "informationsScreen": - DOM.$whiteScreen.style.removeProperty("background-color"); - document.body.style.removeProperty("overflow-y"); + DOM.$whiteScreen.classList.remove("falseWhite"); + document.body.classList.remove("scrollable"); DOM.$whiteScreen.classList.add("d-none"); - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$backTopLeftBtn.classList.add("d-none"); DOM.$altMenuContainer.classList.add("d-none"); break; case "directions": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("higher"); DOM.$filterPoiBtn.classList.remove("d-none"); @@ -623,7 +596,7 @@ class MenuNavigation { // on met à jour l'état du panneau : vers le menu de navigation Globals.backButtonState = "default"; - DOM.$tabContainer.style.removeProperty("height"); + DOM.$tabContainer.classList.remove("noHeight"); } /** @@ -666,7 +639,7 @@ class MenuNavigation { this.#midScroll(); break; case "search": - DOM.$search.style.display = "flex"; + DOM.$search.classList.remove("d-none"); DOM.$backTopLeftBtn.classList.add("d-none"); break; case "directionsResults": @@ -677,7 +650,7 @@ class MenuNavigation { case "searchLandmark": case "selectOnMapLandmark": DOM.$filterPoiBtn.classList.add("d-none"); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); DOM.$landmarkWindow.classList.remove("d-none"); Globals.backButtonState = "landmark"; // on revient sur le contrôle ! @@ -688,7 +661,7 @@ class MenuNavigation { case "searchIsochrone": case "selectOnMapIsochrone": DOM.$filterPoiBtn.classList.add("d-none"); - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); DOM.$isochroneWindow.classList.remove("d-none"); Globals.backButtonState = "isochrone"; // on revient sur le contrôle ! @@ -697,7 +670,7 @@ class MenuNavigation { break; case "searchDirections": case "selectOnMapDirections": - DOM.$search.style.display = "none"; + DOM.$search.classList.add("d-none"); DOM.$backTopLeftBtn.classList.remove("d-none"); DOM.$directionsWindow.classList.remove("d-none"); Globals.backButtonState = "directions"; // on revient sur le contrôle ! diff --git a/src/js/poi-accessibility.js b/src/js/poi-accessibility.js index 2f30adfd..62ae901d 100644 --- a/src/js/poi-accessibility.js +++ b/src/js/poi-accessibility.js @@ -47,6 +47,7 @@ class MapboxAccessibility { feature.marker = document.createElement("button"); feature.marker.setAttribute("title", label); feature.marker.setAttribute("tabindex", 0); + // FIXME: STYLE: passer par une classe et style CSS feature.marker.style.display = "block"; let position; @@ -75,4 +76,4 @@ class MapboxAccessibility { }; } -export default MapboxAccessibility; \ No newline at end of file +export default MapboxAccessibility; diff --git a/src/js/route-draw/route-draw-dom.js b/src/js/route-draw/route-draw-dom.js index 103361db..ad1a79dd 100644 --- a/src/js/route-draw/route-draw-dom.js +++ b/src/js/route-draw/route-draw-dom.js @@ -216,6 +216,7 @@ let RouteDrawDOM = { var canvasProfile = document.createElement("canvas"); canvasProfile.id = "routedraw-elevationline"; canvasProfile.className = "elevationLineCanvas"; + // FIXME: STYLE: passer par une classe et style CSS canvasProfile.style.width = "100%"; div.appendChild(canvasProfile); @@ -229,7 +230,7 @@ let RouteDrawDOM = { this.dom.detailsList.className = "routedrawDetails"; div.appendChild(this.dom.detailsList); - div.style.display = "none"; + div.classList.add("d-none"); return div; }, @@ -459,9 +460,9 @@ let RouteDrawDOM = { waypointDiv.appendChild(waypointTextDiv); this.dom.detailsList.appendChild(waypointDiv); } - this.dom.details.style.removeProperty("display"); + this.dom.details.classList.remove("d-none"); } else { - this.dom.details.style.display = "none"; + this.dom.details.classList.add("d-none"); } if (data.steps.length > 0) { diff --git a/src/js/services/location.js b/src/js/services/location.js index 84f7c617..0c4f2af4 100644 --- a/src/js/services/location.js +++ b/src/js/services/location.js @@ -230,6 +230,7 @@ const moveTo = (coords, zoom = Globals.map.getZoom(), panTo = true, gps = true) */ const watchPositionCallback = (position) => { if (firstLocation) { + // FIXME: STYLE: passer par une classe et style CSS DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationFixeImg + "\")"; Toast.show({ text: "Suivi de position activé", diff --git a/src/js/signalement-osm.js b/src/js/signalement-osm.js index cd244d5b..40237d32 100644 --- a/src/js/signalement-osm.js +++ b/src/js/signalement-osm.js @@ -89,6 +89,7 @@ class SignalementOSM { console.warn("Signalement sans lieu !"); return; } + // FIXME: STYLE: passer par une classe et style CSS this.dom.submitButton.style.pointerEvents = "none"; this.dom.submitButton.style.backgroundImage = "url(" + LoadingWhite + ")"; this.dom.submitButton.style.color = "#0000";