🪄 Ajout de rendering conditionnel selon qu'on soit dans une iframe ou non (#1738)

* Fix fixtures installation

* ename and comment

* Rename

* Fix selector

* Fixtures

* Missing proposition services

* Disable test for now

* Click on svg explicitely

* Ignore file

* Test

* Add basic config

* redirect http to https locally

* wip

* Remove sidebar

* Add share / embed buttons

* Improve spacing

* Improve alignment on homepage

* Add icon to footer

* Missing produit

* Add comment

* Retours Delphine

* Update wordings

* WIP

* Add header

* WIP

* Improve patchwork spacing

* add contactez nous menu item

* Use main menu instead

* Use main menu

* Add loupe in header

* add conditionnal rendering

* missing querystring

* WIP

* Improve querystring navigation

* wip

* WIP

* Add iframe field to search form to customize links

* Rely on session storage instead

* Remove setting

* WIP

* Better persist querystring accross navigation

* Better persist querystring accross navigation

* cleanup

Author: fabienheureux

.secrets.baseline

@@ -90,10 +90,6 @@
     {
       "path": "detect_secrets.filters.allowlist.is_line_allowlisted"
     },
-    {
-      "path": "detect_secrets.filters.common.is_baseline_file",
-      "filename": ".secrets.baseline"
-    },
     {
       "path": "detect_secrets.filters.common.is_ignored_due_to_verification_policies",
       "min_level": 2
@@ -142,7 +138,7 @@
         "filename": "core/settings.py",
         "hashed_secret": "1ee34e26aeaf89c64ecc2c85efe6a961b75a50e9",
         "is_verified": false,
-        "line_number": 292
+        "line_number": 295
       }
     ],
     "dbt/package-lock.yml": [
@@ -191,5 +187,5 @@
       }
     ]
   },
-  "generated_at": "2025-06-25T12:33:12Z"
+  "generated_at": "2025-07-01T21:48:21Z"
 }

core/settings.py

@@ -256,6 +256,9 @@ def context_processors():
                 "sites_faciles.content_manager.context_processors.skiplinks",
                 "sites_faciles.content_manager.context_processors.mega_menus",
             ],
+            "builtins": [
+                "core.templatetags.iframe_tags",
+            ],
         },
     },
 ]

core/templatetags/iframe_tags.py

@@ -0,0 +1,38 @@
+from django import template
+from django.http.request import QueryDict
+
+register = template.Library()
+
+
+@register.filter
+def iframe(querydict: QueryDict, template_path: str):
+    """
+    Conditionally returns an iframe-specific template path based on query parameters.
+
+    This Django template filter checks whether the `"iframe"` parameter is present
+    in the provided query dictionary (typically `request.GET`). If it is, the function
+    returns a modified version of the `template_path` by replacing `.html` with
+    `.iframe.html`. Otherwise, it returns the original path.
+
+    :param querydict: The GET parameters from the request (e.g., ``request.GET``).
+    :type querydict: django.http.QueryDict
+    :param template_path: The path to the default
+    template (e.g., ``"components/header/base.html"``).
+    :type template_path: str
+    :return: The modified or original template path depending on the
+    presence of ``"iframe"`` in the query.
+    :rtype: str
+
+    **Example usage in a Django template**::
+
+        {% extends request.GET|iframe:"components/header/base.html" %}
+
+    This would extend either ``base.html`` or ``base.iframe.html`` depending on whether
+    ``?iframe`` is in the URL query string.
+    """
+    alternative_path = template_path.replace("html", "iframe.html")
+
+    if "iframe" in querydict:
+        return alternative_path
+
+    return template_path

qfdmd/forms.py

@@ -22,6 +22,12 @@ class SearchForm(DsfrBaseForm):
     input = forms.CharField(
         help_text="Entrez un objet ou un déchet", required=False, widget=SearchInput
     )
+    iframe = forms.BooleanField(
+        required=False,
+        help_text="Ce champ sert uniquement à faire persister le mode iframe d'une page"
+        "à une recherche",
+        widget=forms.HiddenInput,
+    )
 
     def search(self) -> dict[str, str]:
         search_query: str = self.cleaned_data.get("input")

static/to_compile/controllers/assistant/state.ts

@@ -6,6 +6,7 @@ import SearchFormController from "../carte/search_solution_form_controller"
 export default class extends Controller<HTMLElement> {
   static values = {
     location: Object,
+    iframe: Boolean,
   }
   static outlets = ["address-autocomplete", "search-solution-form"]
   declare addressAutocompleteOutlets: Array<AdresseAutocompleteController>
@@ -15,12 +16,34 @@ export default class extends Controller<HTMLElement> {
     latitude: string | null
     longitude: string | null
   }
+  declare iframeValue: boolean
 
   connect() {
-    document.addEventListener(
-      "turbo:frame-load",
-      this.fetchLocationFromSessionStorageOnFirstLoad.bind(this),
-    )
+    document.addEventListener("turbo:frame-load", this.#initRecurringEvents.bind(this))
+  }
+
+  #initRecurringEvents(event) {
+    /**
+    These methods must be called every time we add elements to the dom through a turbo-frame
+    so that all new DOM nodes get updated.
+    */
+    this.fetchLocationFromSessionStorageOnFirstLoad(event)
+    this.configureIframeSpecificUI()
+  }
+
+  configureIframeSpecificUI() {
+    if (sessionStorage.getItem("iframe") === "true") {
+      this.iframeValue = true
+    }
+
+    if (this.iframeValue) {
+      document.querySelectorAll<HTMLLinkElement>('a[href^="/"]').forEach((link) => {
+        const url = new URL(link.href, window.location.origin)
+        url.searchParams.set("iframe", "1")
+        link.href = url.toString()
+      })
+      sessionStorage.setItem("iframe", "true")
+    }
   }
 
   fetchLocationFromSessionStorageOnFirstLoad(event) {

templates/components/button.html

@@ -4,7 +4,7 @@
   data-testid="{{ testid }}"
   {% endif %}
   class="fr-btn fr-btn--secondary {{ class }}"
-  href="{{ href }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
+  href="{{ href }}"
 >
     {{ text }}
 </a>

templates/components/header/base.html

@@ -0,0 +1 @@
+{% extends "dsfr/header.html" %}

templates/components/header/base.iframe.html

@@ -0,0 +1,15 @@
+{% if not assistant.is_home %}
+<header role="banner" class="fr-container qf-filter-none fr-header max-md:qf-hidden">
+  <div class="fr-header__body">
+    <div class="fr-container">
+      <div class="fr-header__body-row">
+        {% block brand %}
+        {% endblock brand %}
+
+        {% block header_search %}
+        {% endblock header_search %}
+      </div>
+    </div>
+  </div>
+</header>
+{% endif %}

templates/components/header/header.html

@@ -1,4 +1,5 @@
-{% extends "dsfr/header.html" %}
+{% extends request.GET|iframe:"components/header/base.html" %}
+
 {% load menu_tags static %}
 
 {% block header_search %}

templates/qfdmd/base.html

@@ -48,6 +48,9 @@
         data-state-adresse-value=""
         data-state-longitude-value=""
         data-state-latitude-value=""
+        {% if "iframe" in request.GET %}
+        data-state-iframe-value="true"
+        {% endif %}
         data-state-map-outlet="[data-controller='map']"
         data-state-address-autocomplete-outlet="[data-controller='address-autocomplete']"
         data-state-search-solution-form-outlet="[data-controller='search-solution-form']"
@@ -70,11 +73,10 @@
         Vous êtes bien authentifié, vos statistiques PostHog seront ignorées pour cette session | <a href="{% url 'admin:index' %}">accéder à l'administration</a>
         </div>
         {% endif %}
-        {% if not assistant.is_iframe %}
-            {% block header %}
-            {% include "components/header/header.html" %}
-            {% endblock header %}
-        {% endif %}
+
+        {% block header %}
+        {% include "components/header/header.html" %}
+        {% endblock header %}
 
         {% block pre_main %}
         {% endblock pre_main %}