api/gaufre: stop using an iframe

iframe was great because we controlled our page context to style things
easily, handle assets easily.

But since it's not on the same domain as the services consuming it, it
implied configuration here and there. Also some behaviors were annoying
to implement (for example, keyboard navigation). I'm sure everything we
do is possible via iframe but I feel like I'll go from barrier to
barrier at every new thing we want to do…

I feel like, at the cost of handling style-conflicts, just rendering
everything in the real page context is more future-proof.

website/public/api/v1/gaufre.js

@@ -4,76 +4,78 @@
 
   if ("requestIdleCallback" in window) {
     requestIdleCallback(() => {
-      appendIframe()
+      appendPopup()
     })
   }
 
   document.body.addEventListener("click", (event) => {
     if (!event.target.classList || !event.target.classList.contains(BUTTON_CLASS)) {
       const buttons = document.querySelectorAll(`.${BUTTON_CLASS}`)
-      buttons.forEach((b) => b.classList.remove("lasuite--opened"))
+      buttons.forEach((b) => b.classList.remove("lasuite--gaufre-opened"))
-      hideIframe()
+      hidePopup()
       return
     }
 
     const button = event.target
-    button.classList.toggle("lasuite--opened")
+    button.classList.toggle("lasuite--gaufre-opened")
-    if (button.classList.contains("lasuite--opened")) {
+    if (button.classList.contains("lasuite--gaufre-opened")) {
-      showIframe(button)
+      showPopup(button)
     } else {
-      hideIframe()
+      hidePopup()
     }
   })
 
   document.addEventListener("keyup", (event) => {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && document.activeElement.closest(".lagaufre")) {
-      hideIframe()
+      hidePopup()
-    }
-  })
-
-  window.addEventListener("message", (event) => {
-    if (event.data === "lasuite-close-services-iframe") {
-      hideIframe()
     }
   })
 
   window.addEventListener("resize", () => {
-    const iframe = document.querySelector(`#lasuite-gaufre-iframe.lasuite--opened`)
+    const popup = document.querySelector(`#lasuite-gaufre-popup.lasuite--gaufre-opened`)
-    if (!iframe) {
+    if (!popup) {
       return
     }
-    const button = document.querySelector(`.${BUTTON_CLASS}.lasuite--opened`)
+    const button = document.querySelector(`.${BUTTON_CLASS}.lasuite--gaufre-opened`)
     if (!button) {
       return
     }
-    iframe.style.cssText = getIframePositionStyle(button)
+    popup.style.cssText = getPopupPositionStyle(button)
   })
 
-  const appendIframe = () => {
+  const appendPopup = () => {
-    if (document.querySelector(`#lasuite-gaufre-iframe`)) {
+    if (document.querySelector(`#lasuite-gaufre-popup`)) {
       return
     }
     const scriptTag = document.querySelector(`#lasuite-gaufre-script`)
     if (!scriptTag) {
       console.log(
-        "La Suite numérique: Gaufre script tag not found, please check out the documentation",
+        "La Suite numérique: Gaufre script tag not found, make sure the script has id 'lasuite-gaufre-script'.",
       )
       return
     }
-    const iframe = document.createElement("iframe")
+    const popup = document.createElement("div")
-    iframe.title = "Services de La Suite numérique"
+    popup.id = "lasuite-gaufre-popup"
-    iframe.id = "lasuite-gaufre-iframe"
+    popup.width = "304"
-    iframe.width = "304"
+    popup.height = "360"
-    iframe.height = "360"
+    popup.style.cssText = "display: none !important"
-    iframe.style.cssText = "display: none !important"
+    const { host, protocol, searchParams, origin } = new URL(scriptTag.src)
-    const { host, protocol, searchParams } = new URL(scriptTag.src)
     const local = searchParams.get("type") === "local"
     const lang = ["en"].includes(searchParams.get("lang")) ? searchParams.get("lang") : null
-    iframe.src = `${protocol}//${host}/api/v1/${(!!lang && `${lang}/`) || ""}gaufre${(!!local && "/local") || ""}`
+    fetch(
-    document.body.appendChild(iframe)
+      `${protocol}//${host}/api/v1/${(!!lang && `${lang}/`) || ""}gaufre${(!!local && "/local") || ""}`,
+    )
+      .then((res) => res.text())
+      .then((html) => {
+        html = html.replace(/(src=|href=|url\()"\//g, `$1"${origin}/`)
+        const parser = new DOMParser()
+        const popupDocument = parser.parseFromString(html, "text/html")
+        popup.innerHTML = popupDocument.body.innerHTML
+        document.body.appendChild(popup)
+      })
   }
 
-  const getIframePositionStyle = (button) => {
+  const getPopupPositionStyle = (button) => {
     const buttonCoords = button.getBoundingClientRect()
     const isSmallScreen = window.innerWidth <= 400
     return `
@@ -95,27 +97,27 @@
     `
   }
 
-  const showIframe = (button) => {
+  const showPopup = (button) => {
-    const iframe = document.querySelector(`#lasuite-gaufre-iframe`)
+    const popup = document.querySelector(`#lasuite-gaufre-popup`)
-    if (!iframe) {
+    if (!popup) {
-      appendIframe()
+      appendPopup()
     }
-    iframe.style.cssText = getIframePositionStyle(button)
+    popup.style.cssText = getPopupPositionStyle(button)
-    iframe.classList.add("lasuite--opened")
+    popup.classList.add("lasuite--gaufre-opened")
     lastFocusedButton = button
     setTimeout(() => {
-      iframe.focus()
+      popup.querySelector(".js-lagaufre-keyboard-anchor").focus()
     }, 0)
   }
 
-  const hideIframe = () => {
+  const hidePopup = () => {
-    const iframe = document.querySelector(`#lasuite-gaufre-iframe`)
+    const popup = document.querySelector(`#lasuite-gaufre-popup`)
-    if (iframe) {
+    if (popup) {
-      iframe.style.cssText = "display: none !important"
+      popup.style.cssText = "display: none !important"
-      iframe.classList.remove("lasuite--opened")
+      popup.classList.remove("lasuite--gaufre-opened")
     }
     if (lastFocusedButton) {
-      lastFocusedButton.classList.remove("lasuite--opened")
+      lastFocusedButton.classList.remove("lasuite--gaufre-opened")
       lastFocusedButton.focus()
       lastFocusedButton = null
     }

website/src/components/GaufrePage.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * this page is meant to be directly included on a service page via the gaufre script tag
+ *
+ * This is not rendered in an iframe! it's included directly in the host page with a fetch request.
+ * Every css rule is scoped and marked as important to avoid style conflicts with the host page.
+ */
 import { Image } from "astro:assets"
 const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.{svg,png,jpg}")
 const { services } = Astro.props
@@ -9,177 +15,167 @@ const { services } = Astro.props
   <head>
     <meta charset="utf-8" />
     <title>Services de La Suite numérique</title>
-    <style is:inline>
-      @font-face {
-        font-family: Marianne;
-        src: url("/fonts/Marianne-Regular-subset.woff2") format("woff2");
-        font-weight: 400;
-        font-display: swap;
-      }
-
-      @font-face {
-        font-family: "Marianne fallback";
-        src: local("Arial");
-        ascent-override: 103.16%;
-        descent-override: 23.35%;
-        line-gap-override: 0%;
-        size-adjust: 109.64%;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      html,
-      body,
-      .lasuite-Services {
-        height: 100vh;
-        max-height: 22rem;
-      }
-
-      html {
-        font-size: 100%;
-        font-family: Marianne, "Marianne fallback", BlinkMacSystemFont, "Segoe UI", "Noto Sans",
-          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-      }
-
-      body {
-        margin: 0 0 0.5rem;
-        background: transparent;
-      }
-
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
-      .fr-sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap; /* added line */
-        border: 0;
-        display: block;
-      }
-
-      .fr-enlarge-link {
-        position: relative;
-      }
-
-      .fr-enlarge-link a {
-        background-image: none;
-        outline-width: 0;
-      }
-
-      .fr-enlarge-link a::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        outline-offset: 2px;
-        outline-style: inherit;
-        outline-color: inherit;
-        outline-width: 2px;
-        z-index: 1;
-      }
-
-      .lasuite-Services {
-        background-color: #01018fcc;
-        padding: 3px;
-        width: 19rem;
-        border-radius: 8px;
-        filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-        overflow: hidden;
-      }
-
-      .lasuite-Services-outer {
-        height: 100%;
-        border-radius: 6px;
-        overflow: hidden;
-      }
-
-      .lasuite-Services-inner {
-        border-radius: 2px;
-        background-color: white;
-        height: 100%;
-        overflow: auto;
-      }
-
-      .lasuite-Service {
-        display: flex;
-        align-items: center;
-        padding: 1rem 2rem;
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-      }
-
-      .lasuite-Service:hover,
-      .lasuite-Service:focus-within {
-        background-color: #f0f0fa;
-        border-top: 1px solid #8989cd;
-        border-bottom: 1px solid #8989cd;
-      }
-
-      .lasuite-Service-icon {
-        display: flex;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-      }
-
-      .lasuite-Service-name {
-        margin-left: 1.5rem;
-        text-decoration: none;
-        color: #161616;
-      }
-
-      .lasuite-Service-name:focus {
-        outline: 0;
-      }
-
-      .scrollbars {
-        scrollbar-width: thin;
-        scrollbar-color: #aaa transparent;
-      }
-      .scrollbars::-webkit-scrollbar {
-        width: 5px;
-        height: 5px;
-      }
-      .scrollbars::-webkit-scrollbar-track {
-        background: 0 0;
-      }
-      .scrollbars::-webkit-scrollbar-thumb {
-        background-color: #ddd;
-        border-radius: 6px;
-      }
-      .scrollbars:not(:hover, :focus) {
-        scrollbar-color: transparent transparent;
-      }
-      .scrollbars:not(:hover, :focus):-webkit-scrollbar-thumb {
-        background-color: transparent;
-      }
-
-      #lasuite-service-suite-numerique {
-        font-size: 0.85rem;
-        opacity: 0.75;
-      }
-    </style>
   </head>
   <body>
-    <div class="lasuite-Services">
+    <div id="lagaufre-popup" class="lagaufre">
-      <div class="lasuite-Services-outer">
+      <style is:inline>
-        <h1 class="fr-sr-only">Liste des services de La Suite numérique</h1>
+        @font-face {
-        <ul class="lasuite-Services-inner scrollbars">
+          font-family: "La Gaufre";
+          src: url("/fonts/Marianne-Regular-subset.woff2") format("woff2");
+          font-weight: 400;
+          font-display: swap;
+        }
+
+        @font-face {
+          font-family: "La Gaufre fallback";
+          src: local("Arial");
+          ascent-override: 103.16%;
+          descent-override: 23.35%;
+          line-gap-override: 0%;
+          size-adjust: 109.64%;
+        }
+
+        .lagaufre,
+        :where(.lagaufre) * {
+          all: revert !important;
+          box-sizing: border-box !important;
+        }
+
+        .lagaufre {
+          height: 22rem !important;
+          max-height: 22rem !important;
+          font-size: 100% !important;
+          font-family: "La Gaufre", "La Gaufre fallback", BlinkMacSystemFont, "Segoe UI",
+            "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
+          margin: 0 0 0.5rem !important;
+          background-color: #01018fcc !important;
+          padding: 3px !important;
+          width: 19rem !important;
+          border-radius: 8px !important;
+          filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important;
+          overflow: hidden !important;
+        }
+
+        .lagaufre-sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          padding: 0 !important;
+          margin: -1px !important;
+          overflow: hidden !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+          border: 0 !important;
+          display: block !important;
+        }
+
+        .lagaufre-border {
+          height: 100% !important;
+          border-radius: 6px !important;
+          overflow: hidden !important;
+        }
+
+        .lagaufre-list {
+          margin: 0 !important;
+          padding: 0 !important;
+          list-style: none !important;
+          border-radius: 2px !important;
+          background-color: white !important;
+          height: 100% !important;
+          overflow: auto !important;
+        }
+
+        .lagaufre-service {
+          position: relative !important;
+          display: flex !important;
+          align-items: center !important;
+          padding: 1rem 2rem !important;
+          border-top: 1px solid transparent !important;
+          border-bottom: 1px solid transparent !important;
+        }
+
+        .lagaufre-service a {
+          background-image: none !important;
+          outline-width: 0 !important;
+        }
+
+        .lagaufre-service a::before {
+          content: "" !important;
+          display: block !important;
+          position: absolute !important;
+          top: 0 !important;
+          right: 0 !important;
+          bottom: 0 !important;
+          left: 0 !important;
+          width: 100% !important;
+          height: 100% !important;
+          outline-offset: 2px !important;
+          outline-style: inherit !important;
+          outline-color: inherit !important;
+          outline-width: 2px !important;
+          z-index: 1 !important;
+        }
+
+        .lagaufre-service:hover,
+        .lagaufre-service:focus-within {
+          background-color: #f0f0fa !important;
+          border-top: 1px solid #8989cd !important;
+          border-bottom: 1px solid #8989cd !important;
+        }
+
+        .lagaufre-service__icon {
+          display: flex !important;
+          align-items: center !important;
+          width: 40px !important;
+          height: 40px !important;
+        }
+
+        .lagaufre-service__name {
+          margin-left: 1.5rem !important;
+          text-decoration: none !important;
+          color: #161616 !important;
+        }
+
+        .lagaufre-service__name:focus {
+          outline: 0 !important;
+        }
+
+        .lagaufre-scrollbars {
+          scrollbar-width: thin !important;
+          scrollbar-color: #aaa transparent !important;
+        }
+
+        .lagaufre-scrollbars::-webkit-scrollbar {
+          width: 5px !important;
+          height: 5px !important;
+        }
+
+        .lagaufre-scrollbars::-webkit-scrollbar-track {
+          background: 0 0 !important;
+        }
+
+        .lagaufre-scrollbars::-webkit-scrollbar-thumb {
+          background-color: #ddd !important;
+          border-radius: 6px !important;
+        }
+
+        .lagaufre-scrollbars:not(:hover, :focus) {
+          scrollbar-color: transparent transparent !important;
+        }
+
+        .lagaufre-scrollbars:not(:hover, :focus):-webkit-scrollbar-thumb {
+          background-color: transparent !important;
+        }
+      </style>
+      <div class="lagaufre-border">
+        <h1 id="lagaufre-title" class="lagaufre-sr-only">
+          Liste des services de La Suite numérique
+        </h1>
+        <ul
+          class="lagaufre-list lagaufre-scrollbars js-lagaufre-keyboard-anchor"
+          aria-labelledby="lagaufre-title"
+          tabindex="-1"
+        >
           {
             services
               .filter(({ enabled }) => !!enabled)
@@ -190,17 +186,17 @@ const { services } = Astro.props
                   logos[`/src/assets/logos/${id}.png`]
                 return (
                   <li>
-                    <div class="lasuite-Services-item lasuite-Service fr-enlarge-link">
+                    <div class="lagaufre-service lagaufre-enlarge-link">
-                      <div class="lasuite-Service-icon">
+                      <div class="lagaufre-service__icon">
                         {!!logo ? (
                           <Image src={logo()} width="40" height="40" alt="" loading="eager" />
                         ) : null}
                       </div>
                       <a
                         target="_parent"
-                        class="lasuite-Service-name"
+                        class="lagaufre-service__name"
                         href={url}
-                        id={`lasuite-service-${id}`}
+                        id={`lagaufre-service-${id}`}
                         {...((i === 0 && { autofocus: true }) || {})}
                       >
                         {name}
@@ -213,12 +209,5 @@ const { services } = Astro.props
         </ul>
       </div>
     </div>
-    <script>
-      document.addEventListener("keyup", (event) => {
-        if (event.key === "Escape") {
-          window.parent.postMessage("lasuite-close-services-iframe", "*")
-        }
-      })
-    </script>
   </body>
 </html>