DefectDojo · paulOsinski · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026 · Jul 10, 2026
@@ -1,12 +1,27 @@
 // custom js
 
-
-// version toggler
+// Mobile navigation: the site sets doks.bootstrapJavascript = false, so no
+// Bootstrap plugins load and the header's offcanvas toggles are dead markup.
+// Importing the Offcanvas plugin evaluates its module, which registers the
+// data-bs-toggle="offcanvas" click handling; the window reference keeps the
+// import (and its side effects) from being tree-shaken.
+import { Offcanvas } from 'bootstrap';
+
+window.ddOffcanvas = Offcanvas;
+
+
+// Edition toggler (Open Source / Pro)
+//
+// The sidebar renders both edition menus (.version-opensource / .version-pro).
+// Which menu shows — and which segmented-control button reads as selected —
+// is pure CSS keyed off html[data-dd-version] (see _custom.scss). An inline
+// script in custom-head.html stamps that attribute from localStorage before
+// first paint, so every page load renders the stored edition immediately with
+// no hide-then-reveal flicker. This module only handles toggling: update the
+// attribute, persist the choice, sync aria-checked for assistive tech.
 (() => {
     "use strict";
 
-    console.log("[VersionToggle] custom.js loaded");
-
     // Asset-modelling landing pages per edition. The top nav is otherwise
     // static, so a single URL can't be correct for both editions: we keep the
     // "Model Your Assets" nav link in sync with the selected version, and —
@@ -28,30 +43,21 @@
     };
 
     const setVersion = (version) => {
-        console.log("[VersionToggle] Setting version to:", version);
+        // CSS shows the matching menu and highlights the matching button
+        document.documentElement.dataset.ddVersion = version;
 
-        document.querySelectorAll(".version-opensource, .version-pro").forEach(el => {
-            el.style.display = el.classList.contains(`version-${version}`) ? "block" : "none";
-        });
-
-        localStorage.setItem("version", version);
-        console.log("[VersionToggle] localStorage updated:", localStorage.getItem("version"));
+        try {
+            localStorage.setItem("version", version);
+        } catch (e) {
+            // Storage blocked (private browsing) — toggle still works this page
+        }
 
-        // Update dropdown
-        const selects = document.querySelectorAll("#version-select");
-        selects.forEach(sel => {
-            sel.value = version;
-            sel.dataset.version = version;
-            sel.style.visibility = "visible";
+        // aria-checked is for assistive tech only; visuals come from the
+        // html[data-dd-version] attribute above
+        document.querySelectorAll(".dd-version-seg button[data-version-value]").forEach(btn => {
+            btn.setAttribute("aria-checked", btn.dataset.versionValue === version ? "true" : "false");
         });
 
-        // unhide sidebar after version is applied
-        const sidebar = document.querySelector(".docs-sidebar");
-        if (sidebar) {
-            sidebar.style.visibility = "visible";
-            console.log("[VersionToggle] Sidebar revealed");
-        }
-
         // Edition-aware top nav: route "Model Your Assets" to the page that
         // matches the selected version (see assetNavUrls above).
         document.querySelectorAll("a.nav-link").forEach(link => {
@@ -62,19 +68,20 @@
     };
 
     const initVersionToggle = () => {
-        const storedVersion = localStorage.getItem("version") || "opensource";
-        console.log("[VersionToggle] Stored version:", storedVersion);
-        setVersion(storedVersion);
+        // custom-head.html already stamped the stored edition on <html> before
+        // paint; re-applying it here syncs aria-checked and the nav link on
+        // freshly parsed (or dynamically replaced) markup.
+        setVersion(document.documentElement.dataset.ddVersion || "opensource");
     };
 
-    // Delegated listener on body
-    document.body.addEventListener("change", (e) => {
-        if (e.target && e.target.id === "version-select") {
-            console.log("[VersionToggle] Dropdown changed to:", e.target.value);
-            setVersion(e.target.value);
+    // Delegated listener on body — catches every control instance
+    document.body.addEventListener("click", (e) => {
+        const btn = e.target.closest("button[data-version-value]");
+        if (btn) {
+            setVersion(btn.dataset.versionValue);
             // Only on an explicit user toggle (not on load) follow the page to
             // the matching edition when viewing an asset-modelling page.
-            switchAssetPageForVersion(e.target.value);
+            switchAssetPageForVersion(btn.dataset.versionValue);
         }
     });
 
@@ -91,6 +98,56 @@
 })();
 
 
+// Code block language labels — stamp the fence language onto each
+// expressive-code frame's (empty) title span so CSS can render it in the
+// header band via attr(data-lang). Frames whose fence "language" is really
+// an editor artifact (paths, line ranges) get a generic "code" label.
+(() => {
+    "use strict";
+
+    const CLEAN_LANG = /^[a-z0-9_+#.-]{1,16}$/i;
+
+    const init = () => {
+        document.querySelectorAll(".docs-content .expressive-code .frame").forEach(frame => {
+            const title = frame.querySelector(".header .title");
+            if (!title || title.textContent.trim() !== "" || title.dataset.lang) return;
+            const code = frame.querySelector("pre code[data-lang]");
+            let lang = code ? code.dataset.lang : "";
+            if (!lang || lang === "fallback" || !CLEAN_LANG.test(lang)) lang = "code";
+            title.dataset.lang = lang;
+            frame.classList.add("dd-has-lang");
+        });
+    };
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();
+
+
+// Homepage hero search field — forwards to the DocSearch modal
+(() => {
+    "use strict";
+
+    const init = () => {
+        const trigger = document.getElementById("ddHomeSearch");
+        if (!trigger) return;
+        trigger.addEventListener("click", () => {
+            const btn = document.getElementsByClassName("DocSearch-Button")[0];
+            if (btn) btn.click();
+        });
+    };
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();
+
+
 // Scroll progress bar — shows reading progress on doc pages
 (() => {
     "use strict";