Swap install card in-place on version change

The header dropdown's fetch handler now fires a custom
event after setting the cookie. A small listener flips
the card wrapper and updates the doc link so the swap
happens without a reload. Pure progressive enhancement.

Author: julioest

static/js/install-card-version-sync.js

@@ -0,0 +1,40 @@
+/**
+ * Install Card — In-place version sync
+ *
+ * Listens for the `boost:version-changed` CustomEvent dispatched by the header
+ * version-dropdown JS (see _header_v3.html) and swaps the install card between
+ * its "latest" and "older" variants without a page reload. When switching to
+ * the older variant, updates the "See Documentation" link to point at the
+ * selected version's docs.
+ *
+ * Progressive enhancement: with JS disabled, the dropdown's form submits
+ * normally and the server's POST + 302 + GET roundtrip swaps the card.
+ *
+ * Requires:
+ *   - Wrapper element [data-install-card-wrapper][data-active-variant]
+ *     around each install card render (see _install_card.html).
+ *   - data-doc-link-wrapper marker around the older-variant CTA link.
+ *   - The header JS to dispatch `boost:version-changed` with detail
+ *     { slug, label, isLatest, docUrl }.
+ */
+document.addEventListener("boost:version-changed", function (e) {
+  var detail = e.detail || {};
+  var isLatest = detail.isLatest === true;
+  var docUrl = detail.docUrl || "";
+
+  document
+    .querySelectorAll("[data-install-card-wrapper]")
+    .forEach(function (wrapper) {
+      wrapper.setAttribute(
+        "data-active-variant",
+        isLatest ? "latest" : "older"
+      );
+      if (!isLatest && docUrl) {
+        var linkWrapper = wrapper.querySelector(
+          "[data-install-card-doc-link-wrapper]"
+        );
+        var link = linkWrapper && linkWrapper.querySelector("a");
+        if (link) link.setAttribute("href", docUrl);
+      }
+    });
+});

templates/base.html

@@ -49,6 +49,7 @@
     <script src="{% static 'js/code-block.js' %}" defer></script>
     <script src="{% static 'js/boost-gecko/main.CsWsx5SC.js' %}" defer></script>
     <script src="{% static 'js/install-card.js' %}" defer></script>
+    <script src="{% static 'js/install-card-version-sync.js' %}" defer></script>
     {% else %}
     <script src="{% static 'js/boost-gecko/main.D1bdgn0u.js' %}" defer></script>
     {% endflag %}

templates/v3/includes/_header_v3.html

@@ -148,6 +148,10 @@
    * Progressive enhancement for the cookie-mode version dropdown: send the
    * POST via fetch and update the UI in place, avoiding a full page reload.
    * Falls back to a normal form submit on any error.
+   *
+   * After a successful fetch, dispatch a `boost:version-changed` CustomEvent
+   * on document so other components (e.g. the install card) can react without
+   * a page reload. Detail: { slug, label, isLatest, docUrl }.
    */
   document.addEventListener('submit', function (e) {
     var form = e.target;
@@ -161,6 +165,8 @@
 
     var selectedValue = submitter.value;
     var newLabel = submitter.textContent.trim();
+    var isLatest = submitter.dataset.isLatest === 'true';
+    var docUrl = submitter.dataset.docUrl || '';
     var formData = new FormData(form);
     formData.set('version', selectedValue);
 
@@ -189,6 +195,10 @@
         var toggle = menu.querySelector('.header__version-toggle');
         if (toggle) toggle.checked = false;
       });
+
+      document.dispatchEvent(new CustomEvent('boost:version-changed', {
+        detail: { slug: selectedValue, label: newLabel, isLatest: isLatest, docUrl: docUrl }
+      }));
     }).catch(function () {
       form.submit();
     });