fix(landscape): landscape navigation

IGNF · Dec 13, 2023 · 80406e0 · 80406e0
1 parent 7887c18
commit 80406e0
Show file tree

Hide file tree

Showing 19 changed files with 204 additions and 154 deletions.
diff --git a/src/css/alt-menu.css b/src/css/alt-menu.css
@@ -122,3 +122,11 @@
 #gppLogo {
   margin-top: 23px;
 }
+
+/* mode paysage et écrans larges */
+@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+  #altMenuContainer {
+    width: calc(100vw - 75px - env(safe-area-inset-left));
+    left: calc(75px + env(safe-area-inset-left))
+  }
+}
diff --git a/src/css/index.css b/src/css/index.css
@@ -20,6 +20,14 @@
   display: none !important;
 }
 
+/* to make safe are insets in JS */
+:root {
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+}
+
 @-webkit-keyframes fadeIn {
   from { opacity: 0; }
     to { opacity: 1; }

diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -226,4 +226,30 @@
     width: calc(100vw - 75px - env(safe-area-inset-left));
     right: 0;
   }
+
+  #interactivityBtn {
+    left: calc(90px + env(safe-area-inset-left));
+  }
+
+  #filterPoiBtn {
+    top: calc(10px + env(safe-area-inset-top));
+  }
+
+  #routeDrawEdit {
+    flex-direction: column;
+    bottom: calc(93px + env(safe-area-inset-bottom));
+    width: unset;
+    height: calc(100vh - 84px - 30px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+    left: calc(100vh + env(safe-area-inset-left) + 57px);
+    transform: unset;
+  }
+
+  #routeDrawEdit > .button {
+    margin-bottom: 12px;
+  }
+
+  #routeDrawEdit > .button > span {
+    position: relative;
+    bottom: -40px;
+  }
 }
diff --git a/src/css/media-queries.css b/src/css/media-queries.css
@@ -1,9 +1,32 @@
 /* mode paysage et écrans larges */
 @media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #tabContainer {
-    width: 50%;
-    height: fit-content;
+    width: calc(100vh + env(safe-area-inset-left) + 42px);
+    height: 100vh;
     top: 100%;
-    left: calc(75px + env(safe-area-inset-left));
+    left: 0;
+    overflow-y: scroll;
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+    z-index: 300;
+    padding: 0 15px 15px calc(env(safe-area-inset-left) + 42px);
+    transition: top 0.3s;
+}
+
+  #infoWindow,
+  #legendWindow,
+  #informationsWindow,
+  #isochroneWindow,
+  #directionsWindow,
+  #directionsResultsWindow,
+  #mypositionWindow,
+  #layerManagerWindow,
+  #poiWindow,
+  #routeDrawWindow {
+    margin-top: 20px;
+  }
+
+  body {
+    overflow-y: hidden;
   }
 }
diff --git a/src/js/controls.js b/src/js/controls.js
@@ -82,15 +82,6 @@ const addControls = () => {
   });
 }
 
-/**
- * ???
- * @fixme ???
- */
-const startDrawRoute = () => {
-  Globals.mapState = "drawRoute";
-}
-
 export default {
   addControls,
-  startDrawRoute,
 }
diff --git a/src/js/directions/directions-dom.js b/src/js/directions/directions-dom.js
@@ -320,19 +320,6 @@ let DirectionsDOM = {
 
         divContainer.appendChild(divInput);
 
-        var labelRemoveDeparture = document.createElement("label");
-        labelRemoveDeparture.id = "directionsLocationRemoveImg_first";
-        labelRemoveDeparture.className = "lblDirectionsLocations lblDirectionsLocationsRemoveImg";
-        labelRemoveDeparture.addEventListener("click", function (e) {
-            e.target.parentNode.classList.add("hidden");
-            var div = document.getElementById( "directionsLocation_start");
-            if (div) {
-                div.value = "";
-                div.dataset.coordinates = "";
-            }
-        });
-        divContainer.appendChild(labelRemoveDeparture);
-
         divDefault.appendChild(divContainer);
 
         // on pre ajoute 5 étapes max
@@ -422,19 +409,6 @@ let DirectionsDOM = {
         divInput.appendChild(labelCross);
         divContainer.appendChild(divInput);
 
-        var labelRemoveArrival = document.createElement("label");
-        labelRemoveArrival.id = "directionsLocationRemoveImg_last";
-        labelRemoveArrival.className = "lblDirectionsLocations lblDirectionsLocationsRemoveImg";
-        labelRemoveArrival.addEventListener("click", function (e) {
-            e.target.parentNode.classList.add("hidden");
-            var div = document.getElementById( "directionsLocation_end");
-            if (div) {
-                div.value = "";
-                div.dataset.coordinates = "";
-            }
-        });
-        divContainer.appendChild(labelRemoveArrival);
-
         divDefault.appendChild(divContainer);
 
         // INFO : fonctionnalité desactivée sur la nouvelle maquette ?
@@ -475,4 +449,4 @@ let DirectionsDOM = {
     }
 };
 
-export default DirectionsDOM;
+export default DirectionsDOM;
diff --git a/src/js/directions/directions.js b/src/js/directions/directions.js
@@ -185,21 +185,26 @@ class Directions {
         if (settings.locations && settings.locations.length) {
             try {
                 // les coordonnées sont en lon / lat en WGS84G
-                var start = null;
-                var end = null;
+                var points = []
                 var point = null;
                 for (let index = 0; index < settings.locations.length; index++) {
                     if (settings.locations[index]) {
-                        point = (point === null) ?
-                            start = JSON.parse(settings.locations[index]) : JSON.parse(settings.locations[index]);
+                        point = JSON.parse(settings.locations[index]);
+                        points.push(point);
                         this.obj.addWaypoint(point);
                     }
                 }
 
-                var end = point;
-                if (start && end) {
-                    this.map.fitBounds([start, end], {
-                        padding : 20
+                var padding = 20;
+                // gestion du mode paysage / écran large
+                if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+                    var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sal").slice(0, -2)) +
+                      window.innerHeight + 42;
+                    padding = {top: 20, right: 20, bottom: 20, left: paddingLeft}
+                }
+                if (points.length > 1) {
+                    this.map.fitBounds(points, {
+                        padding: padding,
                     });
                 }
             } catch (e) {

diff --git a/src/js/elevation-line-control.js b/src/js/elevation-line-control.js
@@ -120,8 +120,12 @@ class ElevationLineControl {
     this.elevationData = [];
     this.dplus = 0;
     this.dminus = 0;
-
-    const responseElevation = await ElevationLine.compute(this.coordinates);
+    let responseElevation;
+    try {
+      responseElevation = await ElevationLine.compute(this.coordinates);
+    } catch(err) {
+      responseElevation = {elevations: []}
+    }
     let lastLngLat = null;
     let lastZ = null;
     let currentDistance = 0;

diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -75,28 +75,37 @@ function addListeners() {
 
   // Screen dimentions change
   window.addEventListener("resize", () => {
-    Globals.menu.updateScrollAnchors();
-  });
-
-  document.onscroll = scrollEndCallback;
-
-  function scrollEndCallback() {
-    if (window.scrollY === 0) {
-      Globals.currentScrollIndex = 0;
-    } else if (window.scrollY === Globals.maxScroll) {
-      Globals.currentScrollIndex = 2;
+    if (Globals.backButtonState !== 'default') {
+      Globals.currentScrollIndex = 1;
     }
-
-    if (Globals.currentScrollIndex > 0 && Globals.backButtonState == 'default') {
-      Globals.backButtonState = 'mainMenu';
+    if (["searchDirections", "searchIsochrone", "search"].includes(Globals.backButtonState)) {
+      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");
+      if (!window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        DOM.$backTopLeftBtn.style.boxShadow = "unset";
+        DOM.$backTopLeftBtn.style.height = "44px";
+        DOM.$backTopLeftBtn.style.width = "24px";
+        DOM.$backTopLeftBtn.style.top = "12px";
+        DOM.$backTopLeftBtn.style.left = "15px";
+      }
     }
-    if (Globals.currentScrollIndex == 0 && Globals.backButtonState == 'mainMenu') {
-      Globals.backButtonState = 'default';
+    if (Globals.backButtonState === "routeDraw") {
+      DOM.$bottomButtons.style.removeProperty('bottom');
+      DOM.$bottomButtons.style.removeProperty('left');
+      DOM.$bottomButtons.style.removeProperty('width');
+      if (!window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        DOM.$bottomButtons.style.bottom = "calc(220px + env(safe-area-inset-bottom))";
+      } else {
+        DOM.$bottomButtons.style.left = "calc(100vh + env(safe-area-inset-left) + 42px)";
+        DOM.$bottomButtons.style.width = "auto";
+      }
     }
-  }
+    Globals.menu.updateScrollAnchors();
+  });
 
-  // FIXME à deplacer ?
-  // document.getElementById("drawroute").addEventListener("click", Controls.startDrawRoute);
 }
 
 export default {

diff --git a/src/js/globals.js b/src/js/globals.js
@@ -11,7 +11,7 @@ let dataLayerDisplayed = localStorage.getItem("lastDataLayerDisplayed") || '';
 
 /**
  * global: back button state
- * is one of: 'default' 'search' 'mainMenu' 'params' 'legal' 'privacy' 'infos' 'legend' 'layerManagerWindow' 'route' ...
+ * is one of: 'default' 'search' 'params' 'legal' 'privacy' 'infos' 'legend' 'layerManagerWindow' 'route' ...
  */
 let backButtonState = 'default';
 
@@ -27,9 +27,6 @@ let lastTextInSearch = '';
 /** global: flag to check if map move fired by code */
 let movedFromCode = false;
 
-/** global: flag to check if scoll fired by code */
-let ignoreNextScrollEvent = false;
-
 let myPositionMarker = null;
 let searchResultMarker;
 
@@ -91,7 +88,6 @@ export default {
   controller,
   signal,
   movedFromCode,
-  ignoreNextScrollEvent,
   currentScrollIndex,
   maxScroll,
   anchors,

diff --git a/src/js/index.js b/src/js/index.js
@@ -73,7 +73,6 @@ function app() {
   // DEBUG
   window.mapGlobal = map;
 
-  Globals.ignoreNextScrollEvent = true;
   window.scroll({
     top: 0,
     left: 0,

diff --git a/src/js/map-listeners.js b/src/js/map-listeners.js
@@ -11,6 +11,19 @@ import Layers from './layer-config';
 const addListeners = () => {
   const map = Globals.map;
 
+  // TODO pour des zooms à niveaux entiers uniquement (utilie si POI toujouts limités à zoom 16)
+  // map.on('zoom', function() {
+  //   var currentZoom = map.getZoom();
+  //   var roundedZoom = Math.round(currentZoom); // Round the zoom level to the nearest whole number
+
+  //   if (currentZoom !== roundedZoom) {
+  //       // Set the map's zoom level to the rounded value
+  //       map.once('moveend', function() {
+  //           map.setZoom(roundedZoom);
+  //       });
+  //   }
+  // });
+
   // Rotation de la carte avec le mutlitouch
   map.on('rotate', () => {
     console.log(map.getBearing());

diff --git a/src/js/my-position.js b/src/js/my-position.js
@@ -79,26 +79,24 @@ class Position {
     var latitude = this.coordinates.lat;
     var longitude = this.coordinates.lon;
     var altitude = this.elevation;
+    var templateAddress;
 
     // adresse disponible
-    var templateAddress = `
-      <span class="lblPositionAddress">${address.number} ${address.street}</span><br />
-      <span class="lblPositionCity">${address.postcode} ${address.city}</span>
-      `
-    // pas d'adresse
-    if (!address.street) {
+    if (address.city && address.street) {
       templateAddress = `
-      <span class="lblPositionAddress">${address.city} ${address.postcode}</span>
-      `
-    }
-    // Ni adress ni poi
-    if (!address.city) {
+        <span class="lblPositionAddress">${address.number} ${address.street}</span><br />
+        <span class="lblPositionCity">${address.postcode} ${address.city}</span>
+        `
+    } else if (address.city && !address.street) {
+      templateAddress = `
+        <span class="lblPositionAddress">${address.city} ${address.postcode}</span>
+        `
+    } else {
       templateAddress = `
-      <span class="lblPositionAddress">${latitude}, ${longitude}</span>
-      `
+        <span class="lblPositionAddress">${latitude}, ${longitude}</span>
+        `
     }
 
-
     // template litteral
     this.contentPopup = `
         <div id="${id.popup}">
@@ -311,14 +309,22 @@ class Position {
     this.coordinates = Reverse.getCoordinates();
     this.address = Reverse.getAddress();
 
-    const responseElevation = await Elevation.compute({
-      lat: position.coordinates.lat,
-      lon: position.coordinates.lon
-    });
+    if (!Reverse.getAddress()) {
+      this.address = {
+        number: "",
+        street: "",
+        postcode: "",
+        city: ""
+      };
+    }
 
-    // FIXME le service fournit il toujours une reponse ?
-    if (!responseElevation) {
-      throw new Error("Elevation response is empty !");
+    try {
+      await Elevation.compute({
+        lat: position.coordinates.lat,
+        lon: position.coordinates.lon
+      });
+    } catch(err) {
+      console.warn(`Error when fetching elevation: ${err}`);
     }
 
     this.elevation = Elevation.getElevation();