feat(GetFeatureInfo): améliore l’ouverture des accordéons

Author: iamvdo

DRAFT_CHANGELOG.md

@@ -20,6 +20,7 @@ __DATE__
   - Tooltips : les tooltips au survol des boutons ne peuvent pas être survolées (#571)
   - LayerImport : le bouton retour est inclut dans le panel header (#575)
   - GFI : activation du GFI au clic gauche et selon panels incompatibles (#1167)
+  - GFI : suppression des animations à l’ouverture des accordéons (#580)
   - ContextMenu : modification des paramètres par défaut (#1167)
   - SearchBar : option selectGeometry : permet de sélectionner uniquement l'extent plutot que le point si existant (besoin extraction)
   - LayerImport : alternative UI pour importer avec un drag and drop de fichier (#576)
@@ -31,6 +32,7 @@ __DATE__
 * 🐛 [Fixed]
 
   - LayerImport : fixe la hauteur du contenu dans certains cas (#575)
+  - GFI : empêche que l’ouverture de l’accordéon déplace le site en entier (#580)
 
 * 🔒 [Security]
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.13-575",
-  "date": "26/08/2026",
+  "version": "1.0.0-beta.13-580",
+  "date": "31/08/2026",
   "module": "src/index.js",
   "main": "src/index.js",
   "types": "src/index.d.ts",

src/packages/CSS/Controls/GetFeatureInfo/GPFgetFeatureInfo.css

@@ -5,13 +5,12 @@ div[id^=GPgetFeatureInfo-] {
 
 div[id^=GPgetFeatureInfoAccordionGroup-] {
   user-select: text;
-  max-height: 300px;
 }
 
 /* Showing/hiding */
 
 dialog:has(button.GPcloseGetFeatureInfo[aria-pressed="true"]) {
-  display: block;
+  display: flex;
   visibility: visible;
   opacity: 100%;
   width: 350px;
@@ -32,14 +31,17 @@ dialog[id^="GPgetFeatureInfoPanel-"] {
     overflow-x: hidden;
 }
 
-.GPgetFeatureInfoAccordionGroup {
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
 
 .GPgetFeatureInfoAccordionContent {
-  overflow-x: scroll;
+  overflow-x: auto;
   scrollbar-width: thin;
+  padding-inline: 1rem;
+  /* désactive l'animation du fr-collapse car on ne connait pas la hauteur du contenu */
+  transition: none !important;
+}
+
+.GPgetFeatureInfoAccordionContent::before {
+  transition: none !important;
 }
 
 .waiting-div-container {

src/packages/Controls/GetFeatureInfo/GetFeatureInfo.js

@@ -510,7 +510,7 @@ class GetFeatureInfo extends Control {
             var layername = this.getLayerTitle(gfiLayer);
 
             var content = null;
-            var accordeon = this._createGetFeatureInfoLayerAccordion(layername);
+            var accordeon = this._createGetFeatureInfoLayerAccordion(layername, this.getFeatureInfoPanelDiv);
             // on affiche pas l'entrée avant d'être confirmation qu'elle aura du contenu renvoyé
             accordeon.style.display = "none";
             var pending = true;

src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js

@@ -169,10 +169,10 @@ var GetFeatureInfoDOM = {
      * Create accordeon
      * see evenement !
      * @param { String } layername nom du layer
-     * @param { String } content contenu du gfi
+     * @param { HTMLElement } scrollableContainer conteneur scrollable de l'accordeon
      * @returns {HTMLElement} DOM element
      */
-    _createGetFeatureInfoLayerAccordion : function (layername) {
+    _createGetFeatureInfoLayerAccordion : function (layername, scrollableContainer) {
         var dsfrTemplate = this.stringToHTML(`
             <section class="fr-accordion">
                 <h3 class="fr-accordion__title">
@@ -194,14 +194,19 @@ 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"
-                    });
-                });
+                // on déplace la section dans le panel
+                setTimeout(() => {
+                    const elementRect = button.parentNode.parentNode.getBoundingClientRect();
+                    const containerRect = scrollableContainer.getBoundingClientRect();
+
+                    // si le bas n'est pas visible, on aligne le haut de la section
+                    if (elementRect.bottom > containerRect.bottom) {
+                        scrollableContainer.scrollTo({
+                            top : scrollableContainer.scrollTop - (containerRect.top - elementRect.top),
+                            behavior : "smooth"
+                        });
+                    }
+                }, 50); // ajoute un délai
             } else {
                 collapse.classList.remove("fr-collapse--expanded");
                 collapse.classList.add("GPelementHidden");