Feature: Pop-up éditoriale (#85)

.github/workflows/web-deploy.yml

@@ -13,4 +13,4 @@ jobs:
       - name: Send curl to trigger build
         run: |
           curl -X POST --fail -F token=${{ secrets.CI_token }} -F "ref=main" -F "variables[RUN_NIGHTLY_BUILD]=true" https://gitlab.gpf-tech.ign.fr/api/v4/projects/1292/trigger/pipeline
-
+          

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "fr.ign.geoportail"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 30002
-        versionName "3.0.2"
+        versionCode 30003
+        versionName "3.0.3"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

ios/App/App.xcodeproj/project.pbxproj

@@ -346,11 +346,11 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3.0.2;
+				CURRENT_PROJECT_VERSION = 3.0.3;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.0.2;
+				MARKETING_VERSION = 3.0.3;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = fr.ign.geoportail;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -366,11 +366,11 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3.0.2;
+				CURRENT_PROJECT_VERSION = 3.0.3;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 3.0.2;
+				MARKETING_VERSION = 3.0.3;
 				PRODUCT_BUNDLE_IDENTIFIER = fr.ign.geoportail;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geoportail-app",
   "displayName": "Géoportail",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Application Géoportail",
   "main": "index.js",
   "engines": {

src/css/position.css

@@ -183,6 +183,7 @@
  */
 
 #interactivityPopup,
+#editoPopup,
 #onlinePopup,
 #locationPopup,
 #routeDrawHelpPopup {
@@ -191,15 +192,17 @@
   font-family: "Open Sans";
   font-size: 13px;
 }
+
 #interactivityPopup .divPositionTitle,
+#editoPopup .divPositionTitle,
 #onlinePopup .divPositionTitle,
 #locationPopup .divPositionTitle,
 #routeDrawHelpPopup .divPositionTitle {
   margin-right: 30px;
 }
 
-
 .interactivityPopup,
+.editoPopup,
 .onlinePopup,
 .locationPopup,
 .routeDrawHelpPopup {
@@ -218,6 +221,7 @@
 }
 
 .routeDrawHelpPopup>.maplibregl-popup-content,
+.editoPopup>.maplibregl-popup-content,
 .interactivityPopup>.maplibregl-popup-content,
 .onlinePopup>.maplibregl-popup-content,
 .locationPopup>.maplibregl-popup-content {
@@ -227,6 +231,7 @@
 }
 
 .routeDrawHelpPopup>.maplibregl-popup-tip,
+.editoPopup>.maplibregl-popup-tip,
 .onlinePopup>.maplibregl-popup-tip,
 .interactivityPopup>.maplibregl-popup-tip,
 .locationPopup>.maplibregl-popup-tip {

src/js/index.js

@@ -17,15 +17,14 @@ import Controls from "./controls";
 import RecentSearch from "./search-recent";
 import MenuNavigation from "./nav";
 import InteractivityIndicator from "./map-interactivity/interactivity-indicator";
-import PopupUtils from "./utils/popup-utils";
+import StatusPopups from "./status-popups";
 
 import { Capacitor } from "@capacitor/core";
 import { ScreenOrientation } from "@capacitor/screen-orientation";
 import { SplashScreen } from "@capacitor/splash-screen";
 import { StatusBar, Style } from "@capacitor/status-bar";
 import { SafeArea, SafeAreaController } from "@aashu-dubey/capacitor-statusbar-safe-area";
 import { TextZoom } from "@capacitor/text-zoom";
-import { Network } from "@capacitor/network";
 import { Device } from "@capacitor/device";
 
 // import CSS
@@ -219,19 +218,8 @@ function app() {
     map.setCenter([localStorage.getItem("lastMapLng"), localStorage.getItem("lastMapLat")]);
     map.setZoom(localStorage.getItem("lastMapZoom") || map.getZoom());
     map.once("moveend", () => {
-      Network.getStatus().then((status) => {
-        if (!status.connected) {
-          PopupUtils.showOnlinePopup(`
-          <div id="onlinePopup">
-          <div class="divPositionTitle">Vous êtes hors ligne</div>
-          <div class="divPopupClose" onclick="onCloseonlinePopup(event)"></div>
-          <div class="divPopupContent">
-          La plupart des fonctionnalités de l'application sont indisponibles. Vous pouvez consulter les cartes et données déjà chargées, ainsi que les données enregistrées, et visualiser votre position sur la carte.
-          </div>
-          </div>
-          `, map);
-        }
-      });
+      StatusPopups.getNetworkPopup(map);
+      StatusPopups.getEditoPopup(map);
     });
   }
 
@@ -256,21 +244,15 @@ function app() {
     if (!Globals.mapLoaded) {
       map.flyTo(map.getCenter());
       map.once("moveend", () => {
-        Network.getStatus().then((status) => {
-          if (!status.connected) {
-            PopupUtils.showOnlinePopup(`
-            <div id="onlinePopup">
-            <div class="divPositionTitle">Vous êtes hors ligne</div>
-            <div class="divPopupClose" onclick="onCloseonlinePopup(event)"></div>
-            <div class="divPopupContent">
-            La plupart des fonctionnalités de l'application sont indisponibles. Vous pouvez consulter les cartes et données déjà chargées, ainsi que les données enregistrées, et visualiser votre position sur la carte.
-            </div>
-            </div>
-            `, map);
-          }
-        });
+        StatusPopups.getNetworkPopup(map);
       });
     }
+    setTimeout(() => {
+      if (!Globals.mapLoaded) {
+        SplashScreen.hide();
+        StatusPopups.getEditoPopup(map);
+      }
+    }, 2000);
   }, 4000);
 }
 

src/js/status-popups.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Institut national de l'information géographique et forestière
+ *
+ * This program and the accompanying materials are made available under the terms of the GPL License, Version 3.0.
+ */
+
+import { Network } from "@capacitor/network";
+
+import PopupUtils from "./utils/popup-utils";
+
+function getNetworkPopup(map) {
+  Network.getStatus().then((status) => {
+    if (!status.connected) {
+      PopupUtils.showOnlinePopup(`
+      <div id="onlinePopup">
+      <div class="divPositionTitle">Vous êtes hors ligne</div>
+      <div class="divPopupClose" onclick="onCloseonlinePopup(event)"></div>
+      <div class="divPopupContent">
+      La plupart des fonctionnalités de l'application sont indisponibles. Vous pouvez consulter les cartes et données déjà chargées, ainsi que les données enregistrées, et visualiser votre position sur la carte.
+      </div>
+      </div>
+      `, map);
+    }
+  });
+}
+
+function getEditoPopup (map) {
+  fetch("https://ignf.github.io/cartes-ign-services-uptime/edito.json?v=0").then(res => res.json()).then( (res) => {
+    if (
+      localStorage.getItem("lastEditoPopupId") !== null && localStorage.getItem("lastEditoPopupId") === `${res.id}`
+      && localStorage.getItem("dontShowEditoAgain") === "true"
+      && !res.force
+    ) {
+      return;
+    }
+    if (res.message === "") {
+      return;
+    }
+    let dontShowCheckBox = "";
+    if (!res.force) {
+      window.onChkEditoChange = (event) => {
+        if (event.target.checked) {
+          localStorage.setItem("dontShowEditoAgain", "true");
+        } else {
+          localStorage.setItem("dontShowEditoAgain", "false");
+        }
+      };
+      dontShowCheckBox = `
+      <p style="margin-bottom: 0px"><label class="chkContainer" for="dontShowEditoAgain" title="Ne plus afficher ce message">
+      Ne plus afficher ce message
+      <input id="dontShowEditoAgain"
+          class="checkbox"
+          type="checkbox"
+          onchange="onChkEditoChange(event)"
+      >
+      <span class="checkmark"></span>
+      </label></p>
+      `;
+
+    }
+    PopupUtils.showEditoPopup(`
+    <div id="editoPopup">
+      <div class="divPopupClose" onclick="onCloseeditoPopup(event)"></div>
+      ${res.message}
+      ${dontShowCheckBox}
+    </div>
+    `
+    , map);
+    localStorage.setItem("lastEditoPopupId", res.id);
+  }).catch((err) => {
+    console.warn("Could not load edito message");
+    console.warn(err);
+  });
+}
+
+export default {
+  getNetworkPopup,
+  getEditoPopup,
+};

src/js/utils/popup-utils.js

@@ -42,6 +42,36 @@ function showOnlinePopup(content, map) {
   document.body.appendChild(popupEl);
 }
 
+function showEditoPopup(content, map) {
+  let editoPopup;
+  window.onCloseeditoPopup = () => {
+    editoPopup.remove();
+  };
+
+  // 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);
+}
+
 export default {
   showOnlinePopup,
+  showEditoPopup,
 };