Merge branch 'main' into feature/catalog-optimise

elias75015 · web-flow · commit 97a664c56a40 · 2025-10-23T17:42:57.000+02:00
diff --git a/DRAFT_CHANGELOG.md b/DRAFT_CHANGELOG.md
@@ -22,6 +22,7 @@ __DATE__
   - Catalog : refonte et optimisation du widget (#423)
   - LayerSwitcher : refonte complète de l'outil (#434)
   - Contextual Menu : Changement nom de l'entrée isochrone (3d228a692c8d51155bbdf8c8c32bb51629b6a03f)
+  - GetFeatureInfo : corrections diverse sur l'UI du panel de résultats (#448)
 
 * 🔥 [Deprecated]
 
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
   "version": "1.0.0-beta.6-423",
-  "date": "15/09/2025",
+  "date": "23/10/2025",
   "module": "src/index.js",
   "directories": {},
   "engines": {
diff --git a/samples-src/pages/tests/GetFeatureInfo/pages-ol-getfeatureinfo-modules-options-dsfr.html b/samples-src/pages/tests/GetFeatureInfo/pages-ol-getfeatureinfo-modules-options-dsfr.html
@@ -89,7 +89,8 @@ <h2>Ajout du widget du GetFeatureInfo, avec les options par défaut</h2>
             map.addLayer(gpHydro);
             // 3. Ajout du GetFeatureInfo
             var getFeatureInfo = new ol.control.GetFeatureInfo({
-                position: "bottom-left"
+                position: "bottom-left",
+                noDataMessage : "<h6 style='text-align: center;'> Pas d'infos disponibles </h6> <p style='text-align: center;'> Il n'y a pas de données interrogeables ici </p>"
             });
             map.addControl(getFeatureInfo);
 
@@ -195,7 +196,8 @@ <h2>Ajout du widget du GetFeatureInfo, avec les options par défaut</h2>
             // 5. Ajout du contrôle de gestion de l'empilement des couches (layerSwitcher)
             var layerSwitcher = new ol.control.LayerSwitcher({
                 options : {
-                    collapsed: false
+                    collapsed: false,
+                    panel: true
                 }
             });
             map.addControl(layerSwitcher);
diff --git a/src/packages/CSS/Controls/GetFeatureInfo/DSFRgetFeatureInfoStyle.css b/src/packages/CSS/Controls/GetFeatureInfo/DSFRgetFeatureInfoStyle.css
@@ -1,4 +1,42 @@
 /* GET FEATURE INFO */
+.gpf-btn-header_gfi {
+    z-index: 2;
+    position: absolute;
+}
+
+.gpf-btn-icon-header_gfi {
+    color: var(--text-action-high-blue-france); /* ou inherit */
+    background-color: currentColor;
+    mask: url('img/GFI.svg') no-repeat center / contain;
+    -webkit-mask: url('img/GFI.svg') no-repeat center / contain;
+    margin-left: 8px;
+    width: 16px;
+    height: 16px;
+}
+
+.gpf-panel__body_gfi {
+    overflow: auto;
+    max-height: 300px !important;
+}
+
+.gpf-panel__title_gfi {
+    color: #101092;
+    padding: 12px 15px;
+    position: relative;
+    font-size: 1rem;
+    font-weight: normal;
+    margin: 0;
+    right: -16px;
+}
+.gpf-panel__header_gfi {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    background: #E3E3FD;
+    height: 48px;
+}
+
 .gpf-btn-icon-getfeatureinfo::after {
     -webkit-mask: url("img/NoGFI.svg") center no-repeat;
     mask: url("img/NoGFI.svg") center no-repeat;
diff --git a/src/packages/CSS/Controls/GetFeatureInfo/GPFgetFeatureInfo.css b/src/packages/CSS/Controls/GetFeatureInfo/GPFgetFeatureInfo.css
@@ -34,7 +34,6 @@ dialog[id^="GPgetFeatureInfoPanel-"] {
 .GPgetFeatureInfoAccordionGroup {
   overflow-y: scroll;
   scrollbar-width: thin;
-  max-height: calc(52vh - 92px);
 }
 
 .GPgetFeatureInfoAccordionContent {
diff --git a/src/packages/CSS/Controls/GetFeatureInfo/GPFgetFeatureInfoStyle.css b/src/packages/CSS/Controls/GetFeatureInfo/GPFgetFeatureInfoStyle.css
@@ -36,4 +36,8 @@ button[aria-expanded="true"].GPgfiLayerButton span.GPshowGfiLayerFeature {
     vertical-align: middle;
     background-image: url("img/GPgfiDetails.png");
     background-position: -26px 0;
+}
+
+.GPgetFeatureInfoAccordionGroup {
+  max-height: calc(52vh - 92px);
 }
diff --git a/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js b/src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js
@@ -156,6 +156,11 @@ class GetFeatureInfo extends Control {
          * specify if control is draggable (true) or not (false) */
         this.draggable = this.options.draggable;
 
+        /** 
+         * @type {String} 
+         * if specified, the given html string will be displayed if no data are returned by the gfi */
+        this.noDataMessage = this.options.noDataMessage;
+
         /** 
          * @type {Boolean} 
          * specify if control add some stuff auto */
@@ -175,6 +180,8 @@ class GetFeatureInfo extends Control {
         this.getFeatureInfoAccordionGroup = null;
         /** @private */
         this.panelGetFeatureInfoEntriesContainer = null;
+        /** @private */
+        this.noDataMessageDiv = null;
 
         /** {Array} specify some events listeners */
         this.eventsListeners = [];
@@ -210,8 +217,8 @@ class GetFeatureInfo extends Control {
         // header
         var getFeatureInfoPanelHeader = this.panelGetFeatureInfoHeaderContainer = this._createGetFeatureInfoPanelHeaderElement();
         // icone
-        // var getFeatureInfoPanelIcon = this._createGetFeatureInfoPanelIconElement();
-        // getFeatureInfoPanelHeader.appendChild(getFeatureInfoPanelIcon);
+        var getFeatureInfoPanelIcon = this._createGetFeatureInfoPanelIconElement();
+        getFeatureInfoPanelHeader.appendChild(getFeatureInfoPanelIcon);
         // title
         var getFeatureInfoPanelTitle = this._createGetFeatureInfoPanelTitleElement();
         getFeatureInfoPanelHeader.appendChild(getFeatureInfoPanelTitle);
@@ -224,7 +231,9 @@ class GetFeatureInfo extends Control {
         // container for the custom code
         var accordionGroup = this.getFeatureInfoAccordionGroup = this._createGetFeatureInfoAccordionGroup();
         getFeatureInfoPanelDiv.appendChild(accordionGroup);
-
+        if (this.noDataMessage) {
+            this.noDataMessageDiv = this._createGetFeatureInfoNoData(this.noDataMessage);
+        }
         container.appendChild(getFeatureInfoPanel);
 
         logger.log(container);
@@ -276,6 +285,10 @@ class GetFeatureInfo extends Control {
     onMapClick (e) {
         if (this.getFeatureInfoIsActive() === "true") {
             this.getFeatureInfoAccordionGroup.remove();
+            if (this.noDataMessage) {
+                this.noDataMessageDiv.remove();
+            }
+            this.buttonGetFeatureInfoClose.setAttribute("aria-pressed", true);
             this.layers = e.map.getLayers().getArray().filter((l) => {
                 // On ne passe au GFI que les layers visibles
                 if (l.isVisible(e.map.getView()) && l.getOpacity() > 0){
@@ -294,6 +307,10 @@ class GetFeatureInfo extends Control {
             }
             // Aucun layer visible sur la carte
             else {
+                if (this.noDataMessage) {
+                    // affichage du message no Data donné en option
+                    this.getFeatureInfoPanelDiv.append(this.noDataMessageDiv);
+                }
                 // rien à afficher car pas de couches visibles sur la carte, on s'arrête là.
                 return;
             }
@@ -492,8 +509,13 @@ class GetFeatureInfo extends Control {
                     // s'il n'y a aucun contenu renvoyé par le GFI
                     if (gfiContent.filter(gfi => gfi.get("pending") === true).length == 0
                         && gfiContent.filter(gfi => gfi.get("content")).length == 0) {
-                        // on n'affiche pas la pop-up car pas de données
-                        this.buttonGetFeatureInfoClose.setAttribute("aria-pressed", false);
+                        if (this.noDataMessage) {
+                            // on affiche le message noData donné en option
+                            this.getFeatureInfoPanelDiv.append(this.noDataMessageDiv);
+                        } else {
+                            // on n'affiche pas la pop-up car pas de données
+                            this.buttonGetFeatureInfoClose.setAttribute("aria-pressed", false);
+                        }
                     }
                 }
             });
diff --git a/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js b/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js
@@ -114,7 +114,7 @@ var GetFeatureInfoDOM = {
 
     _createGetFeatureInfoPanelDivElement : function () {
         var div = document.createElement("div");
-        div.className = "GPpanelBody gpf-panel__body fr-modal__body";
+        div.className = "GPpanelBody gpf-panel__body_gfi fr-modal__body";
         return div;
     },
 
@@ -125,20 +125,26 @@ var GetFeatureInfoDOM = {
      */
     _createGetFeatureInfoPanelHeaderElement : function () {
         var container = document.createElement("div");
-        container.className = "GPpanelHeader gpf-panel__header fr-modal__header";
+        container.className = "GPpanelHeader gpf-panel__header_gfi";
         return container;
     },
+    _createGetFeatureInfoPanelIconElement : function () {
+        var label = document.createElement("label");
+        label.className = "GPpanelIcon gpf-btn-header_gfi gpf-btn-icon-header_gfi";
+        label.title = "Get Feature Info";
+        return label;
+    },
     _createGetFeatureInfoPanelTitleElement : function () {
         var div = document.createElement("div");
-        div.className = "GPpanelTitle gpf-panel__title fr-modal__title fr-pt-4w";
-        div.innerHTML = "GetFeatureInfo";
+        div.className = "GPpanelTitle gpf-panel__title_gfi fr-modal__title";
+        div.innerHTML = "Infos sur les couches";
         return div;
     },
     _createGetFeatureInfoPanelCloseElement : function () {
         var self = this;
 
         var btnClose = document.createElement("button");
-        btnClose.className = "GPpanelClose GPcloseGetFeatureInfo gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline fr-m-1w";
+        btnClose.className = "GPpanelClose GPcloseGetFeatureInfo gpf-btn gpf-btn-icon-close fr-btn--close fr-btn fr-btn--tertiary-no-outline";
         btnClose.title = "Fermer le panneau";
 
         // Link panel close / visibility checkbox
@@ -174,6 +180,21 @@ var GetFeatureInfoDOM = {
         return waitingDivString;
     },
 
+    /**
+     * String to html
+     * @param {String} noDataMessage - string à afficher en message de noData du GFI
+     * @returns {DOMElement} DOM element
+     */
+    _createGetFeatureInfoNoData : function (noDataMessage) {
+        // contexte d'execution
+        // var self = this;
+        var div = document.createElement("div");
+        div.className = "GPgetFeatureInfoNoData fr-py-2w fr-px-2w";
+        console.log(this.stringToHTML(noDataMessage));
+        div.insertAdjacentHTML("beforeend", noDataMessage);
+        return div;
+    },
+
     // ################################################################### //
     // ####################### Methods for Layer GFI ####################### //
     // ################################################################### //
@@ -222,6 +243,14 @@ var GetFeatureInfoDOM = {
             if (e.currentTarget.ariaExpanded === "true") {
                 collapse.classList.add("fr-collapse--expanded");
                 collapse.classList.remove("GPelementHidden");
+                // on centre la vue dans le dialog sur le bouton cliqué
+                requestAnimationFrame(() => {
+                    button.scrollIntoView({
+                        behavior : "smooth",
+                        block : "start",
+                        inline : "nearest"
+                    });
+                });
             } else {
                 collapse.classList.remove("fr-collapse--expanded");
                 collapse.classList.add("GPelementHidden");

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,6 @@ dialog[id^="GPgetFeatureInfoPanel-"] {`
`34`	`34`	`.GPgetFeatureInfoAccordionGroup {`
`35`	`35`	`overflow-y: scroll;`
`36`	`36`	`scrollbar-width: thin;`
`37`		`- max-height: calc(52vh - 92px);`
`38`	`37`	`}`
`39`	`38`
`40`	`39`	`.GPgetFeatureInfoAccordionContent {`
Original file line number	Diff line number	Diff line change
`@@ -36,4 +36,8 @@ button[aria-expanded="true"].GPgfiLayerButton span.GPshowGfiLayerFeature {`
`36`	`36`	`vertical-align: middle;`
`37`	`37`	`background-image: url("img/GPgfiDetails.png");`
`38`	`38`	`background-position: -26px 0;`
	`39`	`+}`
	`40`	`+`
	`41`	`+.GPgetFeatureInfoAccordionGroup {`
	`42`	`+ max-height: calc(52vh - 92px);`
`39`	`43`	`}`