Merge pull request #316 from IGNF/fix/return-buttons

Fix : correction du comportement et du style des boutons de retours

DRAFT_CHANGELOG.md

@@ -33,6 +33,7 @@ __DATE__
   - Ajout d'un titre par défaut à la couche vectorielle du drawing (#296)
   - Positionnement de la fenêtre de résultats d'autocomplétion du searchEngine (#307)
   - Mauvais rendu du profil altimétrique (#303) 
+  - Correction du rendu et du comportement du bouton "retour" du layerImport et du geocodage inverse (#316)
 
 * 🔒 [Security]
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.1-313",
-  "date": "24/12/2024",
+  "version": "1.0.0-beta.1-316",
+  "date": "31/12/2024",
   "module": "src/index.js",
   "directories": {},
   "engines": {

src/packages/CSS/Controls/LayerImport/DSFRlayerImportStyle.css

@@ -3,12 +3,6 @@
   mask: url("img/layerimport.svg") center no-repeat;
 }
 
-.gpf-btn-icon-return::after {
-  /* INFO : utiliser l'icone DSFR "fr-icon-arrow-go-back-fill fr-btn--sm fr-btn--icon" */
-  -webkit-mask: url("img/GPimportReturn.png") center no-repeat;
-  mask: url("img/GPimportReturn.png") center no-repeat;
-}
-
 .gpf-panel__items_layerimport {
   color: var(--text-action-high-blue-france);
   border-bottom: 1px solid var(--grey-900-175);

src/packages/CSS/Controls/LayerImport/GPFlayerImportStyle.css

@@ -34,7 +34,7 @@ div[id^="GPimportChoice-"] {
 
 .GPimportPanelReturnPicto {
   background-color: #366291;
-  background-image: url("img/GPimportReturn.png");
+  background-image: url("../../img/GPreturn.png");
   /* background-position: 3px center; */
 }
 

src/packages/CSS/Controls/ReverseGeocoding/GPFreverseGeocodingStyle.css

@@ -14,7 +14,7 @@
 }
 
 .GPreverseGeocodingReturnPicto {
-  background-image: url("img/GPreverseGeocodingReturn.png");
+  background-image: url("../../img/GPreturn.png");
   background-repeat: no-repeat;
   background-position: 0 center;
 }

src/packages/CSS/DSFRgeneralWidget.css

@@ -251,6 +251,19 @@
   right: 0.5rem;
 }
 
+.gpf-btn-icon-return {
+  float: left;
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+}
+
+.gpf-btn-icon-return::after {
+  /* INFO : utiliser l'icone DSFR "fr-icon-arrow-go-back-fill fr-btn--sm fr-btn--icon" */
+  -webkit-mask: url("img/GPreturnDSFR.png") center no-repeat;
+  mask: url("img/GPreturnDSFR.png") center no-repeat;
+}
+
 .gpf-btn-icon {
   width: inherit;
   caret-color: transparent;

src/packages/CSS/GPFgeneralWidget.css

@@ -144,6 +144,11 @@
   background-position: -27px 0;
 }
 
+.GPreturnPicto {
+  top: 3px;
+  left: 3px;
+}
+
 .GPpanelInfo {
   top: 3px;
   left: 3px;

src/packages/Controls/LayerImport/LayerImport.js

@@ -936,8 +936,8 @@ var LayerImport = class LayerImport extends Control {
      */
     _onReturnPictoClick (e) {
         // on bascule sur l'icone d'ouverture du composant
-        this._mapBoxPanel.classList.replace("GPelementVisible", "GPelementHidden");
-        this._mapBoxPanel.classList.replace("gpf-visible", "gpf-hidden");
+        this._onGetCapPanelClose();
+        this._onMapBoxPanelClose();
         this._loadingContainer.className = "";
     }
 

src/packages/Controls/LayerImport/LayerImportDOM.js

@@ -1,4 +1,5 @@
 import SelectorID from "../../Utils/SelectorID";
+import checkDsfr from "../Utils/CheckDsfr";
 
 var LayerImportDOM = {
 
@@ -124,16 +125,28 @@ var LayerImportDOM = {
         var returnDiv = document.createElement("button");
         returnDiv.id = this._addUID("GPimportPanelReturnPicto");
         returnDiv.title = "Masquer le panneau";
-        returnDiv.className = "GPreturnPicto GPimportPanelReturnPicto GPelementHidden gpf-hidden gpf-btn gpf-btn-icon-return fr-btn fr-btn--secondary gpf-btn--secondary";
+        returnDiv.className = "GPreturnPicto GPimportPanelReturnPicto GPelementHidden gpf-hidden gpf-btn gpf-btn-icon-return fr-btn fr-btn--close fr-btn--tertiary-no-outline";
+
+        if (checkDsfr()) {
+            var returnSpan = document.createElement("span");
+            returnSpan.className = "GPelementHidden";
+            returnSpan.innerHTML = "Retour";
+            returnDiv.appendChild(returnSpan);
+        }
         if (returnDiv.addEventListener) {
             returnDiv.addEventListener("click", function (e) {
+                // on ferme le panneau
                 document.getElementById(self._addUID("GPshowImportPicto")).click();
+                // on nettoie la fenêtre de résultats
                 self._onReturnPictoClick(e);
+                // on rouvre le panneau vierge
+                document.getElementById(self._addUID("GPshowImportPicto")).click();
             });
         } else if (returnDiv.attachEvent) {
             returnDiv.attachEvent("onclick", function (e) {
                 document.getElementById(self._addUID("GPshowImportPicto")).click();
                 self._onReturnPictoClick(e);
+                document.getElementById(self._addUID("GPshowImportPicto")).click();
             });
         }
         return returnDiv;
@@ -163,21 +176,17 @@ var LayerImportDOM = {
 
         var divClose = document.createElement("button");
         divClose.id = this._addUID("GPimportPanelClose");
-        divClose.className = "GPpanelClose GPimportPanelClose gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline fr-m-1w";
+        divClose.className = "GPpanelClose GPimportPanelClose gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline";
         divClose.title = "Fermer le panneau";
 
         // Link panel close / visibility checkbox
         if (divClose.addEventListener) {
             divClose.addEventListener("click", function () {
                 document.getElementById(self._addUID("GPshowImportPicto")).click();
-                self._onGetCapPanelClose();
-                self._onMapBoxPanelClose();
             }, false);
         } else if (divClose.attachEvent) {
             divClose.attachEvent("onclick", function () {
                 document.getElementById(self._addUID("GPshowImportPicto")).click();
-                self._onGetCapPanelClose();
-                self._onMapBoxPanelClose();
             });
         }
 
@@ -792,7 +801,7 @@ var LayerImportDOM = {
         // return picto
         var returnDiv = document.createElement("button");
         returnDiv.id = this._addUID("GPimportMapBoxPanelReturnPicto");
-        returnDiv.title = "Masquer le panneau";
+        returnDiv.title = "Nouvel import";
         returnDiv.className = "GPreturnPicto GPimportMapBoxPanelReturnPicto gpf-btn gpf-btn-icon-return fr-btn fr-btn--secondary gpf-btn--secondary";
         if (returnDiv.addEventListener) {
             returnDiv.addEventListener("click", function (e) {

src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js

@@ -1,3 +1,5 @@
+import checkDsfr from "../Utils/CheckDsfr";
+
 var ReverseGeocodeDOM = {
 
     /**
@@ -212,9 +214,18 @@ var ReverseGeocodeDOM = {
         var buttonNew = document.createElement("button");
         buttonNew.id = this._addUID("GPreverseGeocodingReturnPicto");
         buttonNew.title = "Nouvelle recherche";
-        buttonNew.className = "GPreturnPicto GPreverseGeocodingReturnPicto gpf-btn gpf-btn-icon-return fr-btn fr-btn--secondary gpf-btn--secondary";
+        buttonNew.className = "GPreturnPicto GPimportPanelReturnPicto gpf-btn gpf-btn-icon-return fr-btn fr-btn--close fr-btn--tertiary-no-outline fr-m-1w";
+
         buttonNew.classList.add("GPelementHidden");
         buttonNew.classList.add("gpf-hidden");
+
+        if (checkDsfr()) {
+            var returnSpan = document.createElement("span");
+            returnSpan.className = "GPelementHidden gpf-visible";
+            returnSpan.innerHTML = "Retour";
+            buttonNew.appendChild(returnSpan);
+        }
+
         if (buttonNew.addEventListener) {
             buttonNew.addEventListener("click", function (e) {
                 document.getElementById(self._addUID("GPreverseGeocodingResultsPanel")).className = "GPelementHidden gpf-panel--hidden";
@@ -418,7 +429,7 @@ var ReverseGeocodeDOM = {
 
         var select = document.createElement("select");
         select.setAttribute("aria-labelledby", "label-delimitation");
-        select.className ="GPselect gpf-select fr-select";
+        select.className = "GPselect gpf-select fr-select";
         // gestionnaire d'evenement : on stocke la valeur du type de délimitation,
         // et on modifie l'événement de pointage sur la carte en fonction
         if (select.addEventListener) {