Feat/fullscreen control (#124)

src/css/alt-menu.css

@@ -113,7 +113,7 @@
 }
 
 /* mode paysage et écrans larges */
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #altMenuContainer {
     width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right));
     left: calc(var(--safe-area-inset-left))

src/css/directions-results.css

@@ -227,7 +227,7 @@
 
 
 
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #directionsListDetails {
     max-height: calc(100vh - 150px);
   }

src/css/map-buttons.css

@@ -165,16 +165,20 @@
   padding-left: 25px;
   background-position: 13px center;
   width: 5.385rem;
-  transition: top 0.15s, transform 0.5s;
+  transition: top 0.3s, transform 0.5s;
   font-size: 14px;
 }
 
+#filterPoiBtn.higher {
+  top: calc(10px + var(--safe-area-inset-top));
+}
+
 #interactivityBtn {
   z-index: 2997;
   position: fixed;
   left: 5px;
   top: calc(70px + var(--safe-area-inset-top));
-  transition: top 0.15s, width 0.5s ease-out, background-color 0.5s ease, opacity 0.5s ease;
+  transition: top 0.3s, width 0.5s ease-out, background-color 0.5s ease, opacity 0.5s ease;
   overflow: hidden;
   background-color: #fff0;
   border-radius: 31px;
@@ -320,7 +324,72 @@
   line-height: normal;
 }
 
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+.maplibregl-ctrl-top-right > .maplibregl-ctrl {
+  margin-top: calc(148px + var(--safe-area-inset-top));
+  margin-right: 15px;
+  box-shadow: unset;
+  background-color: unset;
+  transition: margin-top 0.3s;
+}
+
+.maplibregl-ctrl-top-right > .maplibregl-ctrl.higher {
+  margin-top: calc(78px + var(--safe-area-inset-top));
+}
+
+.maplibregl-ctrl-top-right > .maplibregl-ctrl:has(.maplibregl-ctrl-shrink) {
+  margin-top: calc(100vh - var(--safe-area-inset-bottom) - 20px - 48px);
+}
+
+button.maplibregl-ctrl-shrink,
+button.maplibregl-ctrl-fullscreen {
+  box-sizing: content-box;
+  color: var(--dark-grey);
+  width: 40px;
+  height: 40px;
+  border-radius: 60px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: white;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  z-index: 200;
+  border: 1px solid white;
+  padding: 3px;
+  background-size: 30px;
+}
+
+.maplibregl-ctrl button .maplibregl-ctrl-icon {
+  display: none;
+}
+
+button.maplibregl-ctrl-fullscreen {
+  background-image: url("assets/map-buttons/fullscreen.svg");
+}
+
+button.maplibregl-ctrl-shrink {
+  background-image: url("assets/map-buttons/shrink.svg");
+}
+
+.maplibregl-ctrl button:not(:disabled):hover {
+  background-color: white;
+}
+
+.maplibregl-ctrl-group button:focus:only-child {
+  border-radius: 60px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+}
+
+
+@media not (min-width: 400px), not (min-aspect-ratio: 1/1) {
+  #backTopLeftBtn.searching {
+    box-shadow: unset;
+    height: 44px;
+    width: 24px;
+    top: calc(12px + var(--safe-area-inset-top));
+    left: 15px;
+  }
+}
+
+@media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) {
   .button {
     right: calc(var(--safe-area-inset-right) + 15px);
   }
@@ -346,16 +415,18 @@
   }
 
   #interactivityBtn {
-    right: calc(var(--safe-area-inset-right) + 15px);
-    left: unset;
-
+    left: calc(85px + var(--safe-area-inset-left));
   }
 
   #filterPoiBtn {
     top: calc(10px + var(--safe-area-inset-top));
     position: fixed;
   }
 
+  .maplibregl-ctrl-top-right > .maplibregl-ctrl {
+    margin-top: calc(78px + var(--safe-area-inset-top));
+  }
+
   #routeDrawEdit {
     position: fixed;
     flex-direction: row;

src/css/map.css

@@ -16,7 +16,7 @@
   justify-content: flex-end;
 }
 
-.maplibregl-control-container > .maplibregl-ctrl-bottom-left {
+#bottomButtons > .maplibregl-ctrl-bottom-left {
   bottom: -3px;
 }
 
@@ -59,7 +59,7 @@
   flex-direction: column;
 }
 
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #map {
     height: 100vh;
     width: 100vw;

src/css/media-queries.css

@@ -1,5 +1,11 @@
+@media not (min-width: 400px), not (min-aspect-ratio: 1/1) {
+  body.searching {
+    overflow-y: scroll;
+  }
+}
+
 /* mode paysage et écrans larges */
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #tabContainer {
     width: min(50vw, calc(100vh + var(--safe-area-inset-left) + 42px));
     left: 0;

src/css/nav.css

@@ -207,7 +207,7 @@
   background-image: url(../html/img/tracer.svg);
 }
 
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #navContainer {
     flex-direction: column;
     width: calc(75px + var(--safe-area-inset-left));

src/css/search.css

@@ -174,7 +174,7 @@
   display: none;
 }
 
-@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #searchContainer {
     width: 40%;
     left: calc(85px + var(--safe-area-inset-left));

src/js/controls.js

@@ -93,6 +93,9 @@ const addControls = () => {
       unit: "metric"
     }), "bottom-left");
 
+    // contrôle fullscreen
+    map.addControl(new maplibregl.FullscreenControl(), "top-right");
+
     // contrôle d'intéractivité de la carte
     Globals.mapInteractivity = new MapInteractivity(map, {});
 

src/js/directions/directions.js

@@ -341,7 +341,7 @@ class Directions {
         });
         var padding;
         // gestion du mode paysage / écran large
-        if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
           var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-left").slice(0, -2)) +
                       Math.min(window.innerHeight, window.innerWidth/2) + 42;
           padding = {top: 20, right: 20, bottom: 20, left: paddingLeft};
@@ -565,7 +565,7 @@ class Directions {
 
       if (self.previewPoints.length > 1) {
         let padding;
-        if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
           var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-left").slice(0, -2)) +
                       Math.min(window.innerHeight, window.innerWidth/2) + 42;
           padding = {top: 20, right: 20, bottom: 20, left: paddingLeft};

src/js/event-listeners.js

@@ -149,27 +149,11 @@ function addListeners() {
         Globals.currentScrollIndex = 2;
       }
     }
-    if (["searchDirections", "searchIsochrone", "searchLandmark", "search"].includes(Globals.backButtonState)) {
-      document.body.style.removeProperty("overflow-y");
-      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) {
-        document.body.style.overflowY = "scroll";
-        DOM.$backTopLeftBtn.style.boxShadow = "unset";
-        DOM.$backTopLeftBtn.style.height = "44px";
-        DOM.$backTopLeftBtn.style.width = "24px";
-        DOM.$backTopLeftBtn.style.top = "calc(12px + var(--safe-area-inset-top))";
-        DOM.$backTopLeftBtn.style.left = "15px";
-      }
-    }
     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) {
+      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))";
         }
@@ -186,13 +170,13 @@ function addListeners() {
     }
     if (Globals.backButtonState === "compareLayers2") {
       DOM.$sideBySideLeftLayer.style.removeProperty("left");
-      if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      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("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      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");
@@ -202,7 +186,7 @@ function addListeners() {
           sliderX = window.innerHeight / 2;
         } else {
           if (["compareLayers1", "compareLayers2"].includes(Globals.backButtonState)
-            && window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches
+            && window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches
           ) {
             sliderX = 3 * window.innerWidth / 4;
           } else {
@@ -216,7 +200,7 @@ function addListeners() {
       }
     }
     if (["compareLayers1", "compareLayers2"].includes(Globals.backButtonState)) {
-      if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+      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";
@@ -282,7 +266,7 @@ function addListeners() {
   const handleScrollDown = () => {
     Globals.currentScrollIndex = 1;
     Globals.menu.updateScrollAnchors();
-    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches ) {
+    if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches ) {
       window.scroll({
         top: 0,
         left: 0,
@@ -296,7 +280,7 @@ function addListeners() {
     DOM.$routeDrawEdit.style.removeProperty("transform");
     DOM.$filterPoiBtn.style.removeProperty("transform");
     const thresh = window.innerHeight / 2;
-    if (!window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches && window.scrollY > thresh) {
+    if (!window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches && window.scrollY > thresh) {
       DOM.$bottomButtons.style.transform = "translateY(-100vh)";
       DOM.$routeDrawEdit.style.transform = "translateX(100vw)";
       DOM.$filterPoiBtn.style.transform = "translateY(-100vh)";

src/js/index.js

@@ -201,7 +201,7 @@ function app() {
   Controls.addControls();
 
   // HACK: déplacement de l'échelle hors de la div map pour qu'elle bouge librement
-  var mapLibreControls = document.querySelectorAll(".maplibregl-control-container")[2];
+  var mapLibreControls = document.querySelectorAll(".maplibregl-ctrl-bottom-left")[2];
   var parent = document.getElementById("bottomButtons");
   parent.appendChild(mapLibreControls);
 

src/js/isochrone/isochrone.js

@@ -296,7 +296,7 @@ class Isochrone {
     // deplacement de la carte sur l'emprise des résultats
     var padding;
     // gestion du mode paysage / écran large
-    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+    if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
       var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-left").slice(0, -2)) +
                   Math.min(window.innerHeight, window.innerWidth/2) + 42;
       padding = {top: 20, right: 20, bottom: 20, left: paddingLeft};
@@ -357,7 +357,7 @@ class Isochrone {
       .addTo(this.map);
 
     Globals.currentScrollIndex = 0;
-    if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+    if (window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
       Globals.currentScrollIndex = 1;
     }
     Globals.menu.updateScrollAnchors();

src/js/map-interactivity/map-interactivity.js

@@ -86,6 +86,10 @@ class MapInteractivity {
       this.map.once("click", this.handleInfoOnMap);
       return;
     }
+    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
+      this.map.once("click", this.handleInfoOnMap);
+      return;
+    }
     if (Globals.backButtonState.split("-")[0] === "position") {
       DOM.$backTopLeftBtn.click();
     }

src/js/my-account/my-account.js

@@ -134,6 +134,9 @@ class MyAccount {
       if (["routeDraw", "routeDrawSave"].includes(Globals.backButtonState)) {
         return;
       }
+      if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
+        return;
+      }
       const landmark = this.map.queryRenderedFeatures(e.point, {layers: [MyAccountLayers["landmark-casing"].id]})[0];
       const title = `<div id="landmarkPositionTitle" class="divLegendContainer landmarkPosition-${landmark.id}">
         <label class="landmarkSummaryIcon landmarkSummaryIcon${landmark.properties.icon}"
@@ -181,6 +184,9 @@ class MyAccount {
       if (this.map.queryRenderedFeatures(e.point, {layers: [MyAccountLayers["landmark-casing"].id]}).length > 0) {
         return;
       }
+      if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
+        return;
+      }
       const routeId = this.map.queryRenderedFeatures(e.point, {layers: [MyAccountLayers["line-casing"].id]})[0].properties.id;
       const route = this.routes.filter( route => route.id == routeId)[0];
       if (route.visible) {