Refactor/use css class style (#128)

IGNF · Oct 7, 2024 · 26eeb76 · 26eeb76
1 parent d2667b0
commit 26eeb76
Show file tree

Hide file tree

Showing 19 changed files with 152 additions and 179 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -33,7 +33,7 @@
           <!-- Toutes les informations sont affichées dans un onglet resizable
             et ancré en bas de l'écran.
           -->
-          <div id="tabContainer" style="height: 0px;">
+          <div id="tabContainer" class="noHeight">
             <div id="tabHeader"><div id="tabHandle"></div><div id="tabClose" tabindex="0" title="Fermer le volet"></div></div>
               <%= 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
@@ -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
@@ -121,18 +121,13 @@ let DirectionsResultsDOM = {
      */
   __addResultsDetailsContainerDOMElement () {
     // contexte de la classse
-    var self = this;
-
     var div = document.createElement("div");
     div.id = "directionsDetails";
     div.className = "";
 
     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
@@ -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
@@ -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
@@ -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
@@ -120,20 +120,23 @@ 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";
   Globals.myPositionIcon.style.backgroundImage = "url(" + PositionImg + ")";
 
   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";
   Globals.myPositionIconGrey.style.backgroundImage = "url(" + PositionImgGrey + ")";
 
   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
@@ -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
@@ -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
@@ -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");