Feat/address info msg (#119)

IGNF · Aug 26, 2024 · c0dd218 · c0dd218
1 parent 2862df2
commit c0dd218
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 134 deletions.
diff --git a/src/css/assets/help-darkergreen.svg b/src/css/assets/help-darkergreen.svg
diff --git a/src/css/position.css b/src/css/position.css
@@ -31,6 +31,20 @@
   font-size: 12px;
 }
 
+/*
+ * info géocodage
+ */
+.divPositionAdressOriginInfo {
+  color: var(--darker-green);
+  background-color: var(--light-green);
+  padding: 14px 48px 14px 10px;
+  border-radius: 6px;
+  background-image: url("assets/help-darkergreen.svg");
+  background-position: center right 6px;
+  background-size: 32px;
+  background-repeat: no-repeat;
+}
+
 /*
  * addresse
  */
@@ -182,27 +196,18 @@
  * popup
  */
 
-#interactivityPopup,
-#editoPopup,
-#onlinePopup,
-#locationPopup {
+.maplibregl-popup-content > div {
   position: relative;
   padding: 24px;
   font-family: "Open Sans";
   font-size: 13px;
 }
 
-#interactivityPopup .divPositionTitle,
-#editoPopup .divPositionTitle,
-#onlinePopup .divPositionTitle,
-#locationPopup .divPositionTitle {
+.maplibregl-popup-content > div > .divPositionTitle {
   margin-right: 30px;
 }
 
-.interactivityPopup,
-.editoPopup,
-.onlinePopup,
-.locationPopup {
+.maplibregl-popup {
   position: fixed;
   z-index: 9999;
 }
@@ -217,19 +222,17 @@
   top: 20px;
 }
 
-.editoPopup>.maplibregl-popup-content,
-.interactivityPopup>.maplibregl-popup-content,
-.onlinePopup>.maplibregl-popup-content,
-.locationPopup>.maplibregl-popup-content {
+.maplibregl-popup-content {
   color: var(--dark-grey);
   border-radius: 15px;
   padding: 0;
 }
 
-.editoPopup>.maplibregl-popup-tip,
-.onlinePopup>.maplibregl-popup-tip,
-.interactivityPopup>.maplibregl-popup-tip,
-.locationPopup>.maplibregl-popup-tip {
+.maplibregl-popup-content > div > div:nth-child(2).divPopupContent {
+  margin-top: 25px;
+}
+
+.maplibregl-popup-tip {
   display: none;
 }
 

diff --git a/src/js/map-interactivity/interactivity-indicator.js b/src/js/map-interactivity/interactivity-indicator.js
@@ -7,7 +7,7 @@
 import Globals from "../globals";
 import DOM from "../dom";
 
-import MapLibreGL from "maplibre-gl";
+import PopupUtils from "../utils/popup-utils";
 
 /**
  * Indicateur d'activité du Plan IGN interactif et des couches thématiques sur la carte
@@ -41,7 +41,9 @@ class InteractivityIndicator {
 
     this.piiMinZoom = 15; // zoom mini pour l'interactivité
 
-    this.popup = null;
+    this.popup = {
+      popup: null
+    };
 
     // Timeouts pour l'animation
     this.timeoutID1 = null;
@@ -218,47 +220,21 @@ class InteractivityIndicator {
       return;
     }
     // on supprime la popup
-    if (this.popup) {
-      this.popup.remove();
-      this.popup = null;
-    }
-
-    // template litteral
-    const popupContent = `
+    PopupUtils.showPopup(
+      `
       <div id="interactivityPopup">
           <div class="divPositionTitle">La carte est interactive</div>
           <div class="divPopupClose" onclick="onCloseinteractivityPopup(event)"></div>
           <div class="divPopupContent">
           Cliquez sur le plan IGN ou sur une donnée thématique pour afficher la légende ou des informations détaillées (ex : les caractéristiques d’un bâtiment, la culture d’un champ).
           </div>
       </div>
-      `;
-    var self = this;
-    window.onCloseinteractivityPopup = () => {
-      self.popup.remove();
-    };
-
-    // centre de la carte
-    var center = this.map.getCenter();
-    // position de la popup
-    var popupOffsets = {
-      "bottom": [0, 100],
-    };
-    // ouverture d'une popup
-    this.popup = new MapLibreGL.Popup({
-      offset: popupOffsets,
-      className: "interactivityPopup",
-      closeOnClick: true,
-      closeOnMove: true,
-      closeButton: false
-    })
-      .setLngLat(center)
-      .setHTML(popupContent)
-      .setMaxWidth("300px")
-      .addTo(this.map);
-    // HACK: déplacement de la popup à la racine du body pour qu'elle puisse d'afficher au dessus de tout
-    var popupEl = document.querySelectorAll(".interactivityPopup")[0];
-    document.body.appendChild(popupEl);
+      `,
+      this.map,
+      "interactivityPopup",
+      "onCloseinteractivityPopup",
+      this.addressInfoPopup
+    );
   }
 
 }

diff --git a/src/js/position.js b/src/js/position.js
@@ -13,6 +13,8 @@ import DomUtils from "./utils/dom-utils";
 import { Share } from "@capacitor/share";
 import { Toast } from "@capacitor/toast";
 
+import PopupUtils from "./utils/popup-utils";
+
 import LoadingDark from "../css/assets/loading-darkgrey.svg";
 
 /**
@@ -75,6 +77,10 @@ class Position {
     // fonction à exécuter à la fermeture du volet
     this.hideCallback = null;
 
+    this.addressInfoPopup = {
+      popup: null
+    };
+
     return this;
   }
 
@@ -162,6 +168,7 @@ class Position {
     var strContainer = `
       <div id="${id.main}">
           <div class="divPositionTitleWrapper"><div class="divPositionTitle">${this.header}</div>${htmlAdvanced}</div>
+          <div class="divPositionAdressOriginInfo">Adresse la plus proche du point sélectionné</div>
           <div class="divPositionAddress">
               <label class="lblPositionImgAddress"></label>
               <div class="divPositionSectionAddress fontLight">
@@ -349,6 +356,7 @@ class Position {
         }
       });
     }
+    shadowContainer.querySelector(".divPositionAdressOriginInfo").addEventListener("click", this.#showAdressInfoPopup.bind(this));
 
     shadowContainer.getElementById("divPositionButtonsAfter").addEventListener("click", DomUtils.horizontalParentScroll);
     shadowContainer.getElementById("divPositionButtonsAfter").parentElement.addEventListener("scroll", DomUtils.horizontalParentScrollend);
@@ -480,6 +488,24 @@ https://cartes-ign.ign.fr?lng=${longitude}&lat=${latitude}&z=${zoom}`;
     return trueHeader;
   }
 
+  #showAdressInfoPopup() {
+    PopupUtils.showPopup(
+      `
+      <div id="addressInfoPopup">
+          <div class="divPositionTitle">Adresse la plus proche du point sélectionné</div>
+          <div class="divPopupClose" onclick="onCloseaddressInfoPopup(event)"></div>
+          <div class="divPopupContent">
+          L'adresse affichée est obtenue grâce au service de géocodage inverse. Ce service retourne, à partir d'un point sur la carte, l'adresse correspondante la plus proche. Selon ce principe, une adresse retournée peut différer de l'adresse postale d'un lieu.
+          </div>
+      </div>
+      `,
+      this.map,
+      "addressInfoPopup",
+      "onCloseaddressInfoPopup",
+      this.addressInfoPopup
+    );
+  }
+
   /**
    * affiche le menu
    * @public

diff --git a/src/js/services/location.js b/src/js/services/location.js
@@ -61,14 +61,13 @@ import { Capacitor } from "@capacitor/core";
 
 import Buffer from "@turf/buffer";
 
-import MapLibreGL from "maplibre-gl";
-
 // fichiers SVG
 import LocationImg from "../../css/assets/map-buttons/localisation.svg";
 import LocationFollowImg from "../../css/assets/map-buttons/location-follow.svg";
 import LocationFixeImg from "../../css/assets/map-buttons/location-fixed.svg";
 import LocationLoading from "../../css/assets/loading-green.svg";
 import LocationDisabled from "../../css/assets/map-buttons/location-disabled.svg";
+import PopupUtils from "../utils/popup-utils";
 
 /* Géolocalisation */
 // Positionnement du mobile
@@ -88,7 +87,9 @@ let positionBearing = 0;
 
 let positionIsGrey = false;
 
-let popup = null;
+let popup = {
+  popup: null
+};
 
 let lastAccuracy;
 let firstLocation;
@@ -329,8 +330,8 @@ const trackLocation = () => {
 const enablePosition = async() => {
   DOM.$geolocateBtn.style.backgroundImage = "url(\"" + LocationLoading + "\")";
   let permissionStatus;
-  if (popup) {
-    popup.remove();
+  if (popup.popup) {
+    popup.popup.remove();
   }
   try {
     permissionStatus = await Geolocation.checkPermissions();
@@ -564,43 +565,7 @@ const showLocationDeniedPopup = () => {
  * Affiche une popup en finction de son contenu
  */
 const showPopup = (content) => {
-  // on supprime la popup
-  if (popup) {
-    popup.remove();
-  }
-
-  // template litteral
-  const popupContent = content;
-  window.onCloselocationPopup = () => {
-    popup.remove();
-  };
-
-  // centre de la carte
-  var center = Globals.map.getCenter();
-  // position de la popup
-  var popupOffsets = {
-    "bottom": [0, 100],
-  };
-  if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches && Capacitor.getPlatform() === "ios") {
-    popupOffsets = {
-      "bottom": [200, 100],
-    };
-  }
-  // ouverture d'une popup
-  popup = new MapLibreGL.Popup({
-    offset: popupOffsets,
-    className: "locationPopup",
-    closeOnClick: true,
-    closeOnMove: true,
-    closeButton: false
-  })
-    .setLngLat(center)
-    .setHTML(popupContent)
-    .setMaxWidth("300px")
-    .addTo(Globals.map);
-  // HACK: déplacement de la popup à la racine du body pour qu'elle puisse d'afficher au dessus de tout
-  var popupEl = document.querySelectorAll(".locationPopup")[0];
-  document.body.appendChild(popupEl);
+  PopupUtils.showPopup(content, Globals.map, "locationPopup", "onCloselocationPopup", popup);
 };
 
 const isLocationActive = () => {

diff --git a/src/js/utils/popup-utils.js b/src/js/utils/popup-utils.js
@@ -7,16 +7,22 @@
 import MapLibreGL from "maplibre-gl";
 
 // Mode offline
-let popup = null;
-function showOnlinePopup(content, map) {
+let popup = {
+  popup: null
+};
+let editoPopup = {
+  popup: null
+};
+
+function showPopup(content, map, className, closeMethodName, object) {
   // on supprime la popup
-  if (popup) {
-    popup.remove();
-    popup = null;
+  if (object.popup) {
+    object.popup.remove();
+    object.popup = null;
   }
 
-  window.onCloseonlinePopup = () => {
-    popup.remove();
+  window[closeMethodName] = () => {
+    object.popup.remove();
   };
 
   // centre de la carte
@@ -26,9 +32,9 @@ function showOnlinePopup(content, map) {
     "bottom": [0, 100],
   };
   // ouverture d'une popup
-  popup = new MapLibreGL.Popup({
+  object.popup = new MapLibreGL.Popup({
     offset: popupOffsets,
-    className: "onlinePopup",
+    className: className,
     closeOnClick: true,
     closeOnMove: true,
     closeButton: false
@@ -38,40 +44,21 @@ function showOnlinePopup(content, map) {
     .setMaxWidth("300px")
     .addTo(map);
   // HACK: déplacement de la popup à la racine du body pour qu'elle puisse d'afficher au dessus de tout
-  var popupEl = document.querySelectorAll(".onlinePopup")[0];
+  var popupEl = document.querySelectorAll(`.${className}`)[0];
   document.body.appendChild(popupEl);
 }
 
-function showEditoPopup(content, map) {
-  let editoPopup;
-  window.onCloseeditoPopup = () => {
-    editoPopup.remove();
-  };
+function showOnlinePopup(content, map) {
+  showPopup(content, map, "onlinePopup", "onCloseonlinePopup", popup);
+}
 
-  // centre de la carte
-  var center = map.getCenter();
-  // position de la popup
-  var popupOffsets = {
-    "bottom": [0, 100],
-  };
-  // ouverture d'une popup
-  editoPopup = new MapLibreGL.Popup({
-    offset: popupOffsets,
-    className: "editoPopup",
-    closeOnClick: true,
-    closeOnMove: true,
-    closeButton: false
-  })
-    .setLngLat(center)
-    .setHTML(content)
-    .setMaxWidth("300px")
-    .addTo(map);
-  // HACK: déplacement de la popup à la racine du body pour qu'elle puisse d'afficher au dessus de tout
-  var popupEl = document.querySelectorAll(".editoPopup")[0];
-  document.body.appendChild(popupEl);
+
+function showEditoPopup(content, map) {
+  showPopup(content, map, "editoPopup", "onCloseeditoPopup", editoPopup);
 }
 
 export default {
   showOnlinePopup,
   showEditoPopup,
+  showPopup,
 };