feat(fullscreen): keep scale, interactivity animation

IGNF · Oct 14, 2024 · a121882 · a121882
1 parent 048e2a3
commit a121882
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 1 deletion.
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -198,6 +198,10 @@
   white-space: nowrap;
 }
 
+:fullscreen > #interactivityBtn {
+  top: calc(10px + var(--safe-area-inset-top));
+}
+
 #interactivityInside {
   margin: 6px;
   background-color: var(--dark-green);

diff --git a/src/js/controls.js b/src/js/controls.js
@@ -96,7 +96,6 @@ const addControls = () => {
 
     // contrôle fullscreen
     map.addControl(new maplibregl.FullscreenControl(), "top-right");
-
     DOM.$fullScreenBtn = document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl");
 
     // contrôle d'intéractivité de la carte

diff --git a/src/js/dom.js b/src/js/dom.js
@@ -13,6 +13,8 @@ const $searchResults = document.getElementById("searchResults");
 const $resultsRechRecent = document.getElementById("resultsRechRecent");
 const $searchImage = document.getElementById("searchImage");
 
+const $map = document.getElementById("map");
+
 const $myGeoLocation = document.getElementById("myGeoLocation");
 const $selectOnMap = document.getElementById("selectOnMap");
 
@@ -35,6 +37,7 @@ const $routeDrawRestore = document.getElementById("routeDrawRestore");
 const $routeDrawDelete = document.getElementById("routeDrawDelete");
 const $routeDrawSave = document.getElementById("routeDrawSave");
 const $fullScreenBtn = null;
+const $mapScale = null;
 
 const $mapCenter = document.getElementById("mapCenter");
 const $mapCenterMenu = document.getElementById("mapCenterMenu");
@@ -127,4 +130,6 @@ export default {
   $tabClose,
   $sideBySideFadeSlider,
   $fullScreenBtn,
+  $mapScale,
+  $map,
 };
diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -301,6 +301,18 @@ function addListeners() {
       }
     });
   });
+
+  DOM.$map.addEventListener("fullscreenchange", () => {
+    if (document.fullscreenElement) {
+      DOM.$map.appendChild(DOM.$interactivityBtn);
+      DOM.$map.appendChild(DOM.$mapScale);
+      Globals.interactivityIndicator.disable();
+    } else {
+      DOM.$map.parentNode.parentNode.appendChild(DOM.$interactivityBtn);
+      DOM.$bottomButtons.appendChild(DOM.$mapScale);
+      Globals.interactivityIndicator.enable();
+    }
+  });
 }
 
 export default {

diff --git a/src/js/index.js b/src/js/index.js
@@ -18,6 +18,7 @@ import RecentSearch from "./search-recent";
 import MenuNavigation from "./nav";
 import InteractivityIndicator from "./map-interactivity/interactivity-indicator";
 import StatusPopups from "./status-popups";
+import DOM from "./dom";
 
 import { Capacitor } from "@capacitor/core";
 import { ScreenOrientation } from "@capacitor/screen-orientation";
@@ -186,6 +187,7 @@ function app() {
   // HACK: déplacement de l'échelle hors de la div map pour qu'elle bouge librement
   var mapLibreControls = document.querySelectorAll(".maplibregl-ctrl-bottom-left")[2];
   var parent = document.getElementById("bottomButtons");
+  DOM.$mapScale = mapLibreControls;
   parent.appendChild(mapLibreControls);
 
   // Ajout des ecouteurs des boutons de la carte