console.log("[PAGE INIT] custom_code.js: script start"); $(window).on("pageLoad", function () { console.log("[PAGE INIT] pageLoad handler 1 fired: SuperHub scroll reset"); const hub = document.querySelector("#ssr-main > div > div[class^='SuperHub']"); if (hub) hub.scrollTop = 0; console.log("[PAGE INIT] SuperHub element found:", !!hub); }); console.log("[PAGE INIT] PageNotFound check:", !!document.querySelector("div[class^='PageNotFound'].rm-Container")); if (document.querySelector("div[class^='PageNotFound'].rm-Container")) { console.log("[PAGE INIT] PageNotFound detected — adding 'err' class to "); document.documentElement.classList.add("err"); } try { initialProps = JSON.parse(document.getElementById("ssr-props").innerHTML); initialPropsData = initialProps.context.variables; glossaryPropsData = initialProps.context.terms; console.log("[PAGE INIT] initialProps parsed OK — user email:", initialPropsData?.user?.email || "(none)", "| terms count:", Object.keys(glossaryPropsData || {}).length); } catch (e) { initialPropsData = {}; initialProps = {}; console.log("[PAGE INIT] initialProps parse failed — using empty defaults. Error:", e.message); } function languageSelectorAnalytics(isDefault = true, isRef = true) { const classSelector = isRef ? ".rm-LanguageButton_active" : "section[aria-hidden='false'] button[class*='TutorialEditor-Nav-Tab_active']"; let lang = $(classSelector).text(); if (!lang?.trim()) return ""; lang += isDefault ? " (Default)" : " (Clicked)"; return isRef ? `api:reference language:${lang}` : `recipes:recipe language:${lang}`; } function updateLoggedInDetailsOverride(duration = 200) { const isLoggedIn = document.documentElement.classList.contains("userLoggedIn"); const replaceLink = (element, loggedIn = false) => { if (!element) return; element.href = loggedIn ? element.href.replace("?redirect_uri=/home", "?redirect_uri=" + window.location.pathname) : element.href.replace("?redirect=/home", "?redirect=" + window.location.pathname); }; let ele; if (!privateProjects.includes(productSlugName)) { ele = document.querySelector("a.td-logout"); replaceLink(ele, true); ele = document.querySelector("div.td-logout a"); replaceLink(ele, true); } if (!isLoggedIn || !initialPropsData.user.email) { setTimeout(() => { ele = document.querySelector(".td-login"); replaceLink(ele); ele = document.querySelector(".td-mobile-login"); replaceLink(ele); }, duration); } if (isLoggedIn) { setTimeout(() => { let email = initialPropsData?.user?.email; if (!email) { try { email = JSON.parse(document.querySelector("#hub-me").dataset.json).user.email; } catch (e) { console.error("Error parsing user email", e.message); } } $(".td-user-icon").show(); $(".td-login .td-login-text").text(email).addClass("td-user"); $(".td-login").attr("data-tooltip", email); $(".td-mobile-login .td-login-text").text(email).addClass("td-user"); $(".td-login").attr("href", ""); $(".td-mobile-login").attr("href", ""); }, duration); } } function triggerLytics() { if (window.lyticsTagFunction == undefined || navigator.userAgent.includes("Sinequa")) return; // lyticsTagFunction is defined in GTM setNewSlug() && lyticsTagFunction(); } $(window).on("pageLoad", function () { console.log("[PAGE INIT] pageLoad handler 2 fired: logged-in details + analytics, path:", window.location.pathname); updateLoggedInDetailsOverride(); if (window.reWriteTags) { window.reWriteTags(); } if (perfCookieEnabled()) { if (!isMultipleSlug()) { _satellite.track("page_view", { url: window.location.href, adobeDataLayer }); } setTimeout(() => { if (window.location.pathname.includes("/reference/")) { const selectorValue = languageSelectorAnalytics(); const trigger = isMultipleRefLangClicked(selectorValue); if (!trigger) { _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); } } if (window.location.pathname.includes("/recipes/")) { const selectorValue = languageSelectorAnalytics(true, false); const trigger = isMultipleRefLangClicked(selectorValue); if (!trigger) { _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); } } }, 5); } try { triggerLytics(); } catch (e) { } }); $(window).on("click", ".rm-LanguageButton", function () { const selectorValue = languageSelectorAnalytics(false); if (!isMultipleRefLangClicked(selectorValue)) { _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); } }); $(window).on("click", ".postman-run-button", function () { const selectorValue = `api:${document.querySelector("title").innerText}:run in postman`; _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); }); $(window).on("click", "a.rm-Header-link.rm-Header-bottom-link", function (e) { const selectorValue = `navigation:${e.target.textContent}`; _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); }); $(document).on("click", ".rm-LanguagePicker div[class*='LanguagePicker-MenuItem']", function () { setTimeout(() => { const selectorValue = languageSelectorAnalytics(false); if (!isMultipleRefLangClicked(selectorValue)) { _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); } }, 5); }); $(window).on("click", ".TutorialEditor-Nav button", function () { const selectorValue = languageSelectorAnalytics(false, false); if (!isMultipleRecipeLang(selectorValue)) { _satellite.track("click_interaction", { linkValue: selectorValue, adobeDataLayer }); } }); $(document).on("keyup", ".docsearch-wrapper input", function (e) { if (e.keyCode === 13) { const searchInputs = document.querySelectorAll(".docsearch-wrapper input"); let searchTerm = searchInputs[1]?.value; if (searchTerm == undefined || searchTerm === "") searchTerm = searchInputs[0]?.value; if (!searchTerm?.trim()) return ""; _satellite.track("site_search", { "search term": searchTerm, "search type": "project search", url: window.location.href, adobeDataLayer, }); } }); function removeBetaAndPillClasses() { const tocBetas = [ "li.toc-children a", "span[class*='Sidebar-link-text'] span" ]; tocBetas.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { element.querySelectorAll("span.beta").forEach(span => span.classList.remove("beta")); element.querySelectorAll("span.toc-beta").forEach(span => span.classList.remove("toc-beta")); element.querySelectorAll("span.pill").forEach(span => span.classList.remove("pill")); }); }); } document.addEventListener("DOMContentLoaded", function () { console.log("[PAGE INIT] DOMContentLoaded handler 1: removeBetaAndPillClasses + mutation observer setup | isReference:", window.location.href.includes("reference")); if (window.location.href.includes("reference")) { setTimeout(removeBetaAndPillClasses, 100); } const ob_beta = new MutationObserver(function () { if (window.location.href.includes("reference")) { setTimeout(removeBetaAndPillClasses, 100); } }); const config = { childList: true, subtree: true, characterData: true }; ob_beta.observe(document.body, config); }); // DOCHUB 4302 (function () { console.log("[PAGE INIT] DOCHUB 4302 IIFE: starting — currentUrl:", location.href); let currentUrl = location.href; function isExactMatchLocal(element, txt) { return element.innerText.trim() === txt; } function upgradeApiStatusLabelsLocal(isParameterOption = true) { if (window.location.href.includes("/docs/")) { return; } const selector = isParameterOption ? ".param-type" : ""; document.querySelectorAll(`#content.rm-Article ${selector} strong`).forEach((strongElement) => { strongElement.classList.remove("deprecated", "beta", "la"); if (isExactMatchLocal(strongElement, "Deprecated")) { strongElement.classList.add("deprecated"); } if (isExactMatchLocal(strongElement, "Beta")) { strongElement.classList.add("beta"); } if (isExactMatchLocal(strongElement, "Limited availability")) { strongElement.classList.add("la"); } }); } function waitForApiResponseSchemaAndRun() { const targetClass = "APIResponseSchemaPicker-items2bs6Pzrheef_"; const observer = new MutationObserver((mutations, obs) => { const el = document.querySelector(`[class*="${targetClass}"]`); if (el) { obs.disconnect(); setTimeout(upgradeApiStatusLabelsLocal, 200); } }); observer.observe(document.body, { childList: true, subtree: true, }); } function hookHistoryChanges() { const originalPush = history.pushState; const originalReplace = history.replaceState; const onChange = () => { if (location.href !== currentUrl) { currentUrl = location.href; console.log("[Router] URL changed to", currentUrl); waitForApiResponseSchemaAndRun(); } }; history.pushState = function () { originalPush.apply(this, arguments); onChange(); }; history.replaceState = function () { originalReplace.apply(this, arguments); onChange(); }; window.addEventListener("popstate", onChange); } const cancelUpgradeApiStatusLabels = () => { if (typeof window.upgradeApiStatusLabelsInSchema === "function") { window.upgradeApiStatusLabelsInSchema = function () {}; } else { setTimeout(cancelUpgradeApiStatusLabels, 10); } }; cancelUpgradeApiStatusLabels(); hookHistoryChanges(); waitForApiResponseSchemaAndRun(); console.log("[PAGE INIT] DOCHUB 4302 IIFE: done — history hooks patched, schema observer active"); })(); $(window).on("pageLoad", function () { console.log("[PAGE INIT] pageLoad handler 3 fired: updateSearchBar check | hostname:", window.location.hostname); if (window.location.hostname.includes("techdocs.akamai.com")) { setTimeout(updateSearchBar, 200); } }); /* * init:migration: Only execute for refactored projects */ if (!window.location.pathname.includes("home") && !window.location.pathname.includes("home-old")) { console.log("[PAGE INIT] Non-home path — initializing full feature set | path:", window.location.pathname); window.updateSearchBar = function () {}; function addErrors() { $(".rm-Sidebar-link > span").each(function () { const parentCode = $(this).children().first().text(); let iconClass = /^5[0-9]{2}$/.test(parentCode) ? "server-type" : null; iconClass = /^4[0-9]{2}$/.test(parentCode) ? "error-type" : iconClass; if (iconClass) { const icon = $(``); $(this).prepend(icon); } }); } function isExternal(link) { if (!link || link.startsWith("/") || link.startsWith("#")) return false; const isSameSiteLink = link.startsWith(location.origin); const isPdfLink = link.endsWith(".pdf") || link.includes(".pdf#"); if (isSameSiteLink && isPdfLink) return true; return !isSameSiteLink; } function isPrivateLink(href, privateProjects = []) { return privateProjects.some(p => href.includes(p)); } window.openNewTab = function () { const list = document.querySelectorAll("a[href]:not(.external-link)"); list.forEach(function (a) { const href = a.getAttribute("href"); if (isExternal(href) && !isPrivateLink(href, privateProjects)) { a.setAttribute("target", "_blank"); a.classList.add("external-link"); } }); }; const isReferenceSection = () => window.location.pathname.includes("/reference/"); const isChangelogSection = () => window.location.pathname.includes("/changelog"); const onlyAuthHelpTxt = [ "aura-secret-mgmt", "aura-lcdn-services", "aura-network-policy", "aura-lcdn-mapping", "aura-log-streaming", "aura-infrastructure", "aura-lcdn-deployment", "aura-lcdn-content-delivery", "aura-lcdn-content-control", "linode-api", "cloudtest", "msl5-harmonic" ]; const projectsForMutualAuth = ["iot-edge-message-stream", "iot-edge-connect-msg-store"]; const projectsToSkipForCodeComment = ["mpulse", ...onlyAuthHelpTxt]; const authLink = new Set([ "mpulse", "cloudtest", "identity-cloud", "netstorage-usage", "iot-edge-message-stream", "iot-edge-connect-msg-store", ]); function debounce(func, wait) { let timeout; return function executedFunction(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } async function getData(url, isText = false) { const fetchOptions = { method: "GET", cache: "default", headers: { Accept: "application/json" }, redirect: "follow" }; const response = await fetch(url, fetchOptions); return isText ? await response.text() : await response.json(); } async function getDataFromEKV(groupId, itemId) { const url = `https://techdocs.akamai.com/api/ew?groupId=${groupId}&itemId=${itemId}`; return await getData(url, true); } function commentCodeLine(commentText = "") { return `

${commentText}

`; } function injectCodeComment() { if (!isReferenceSection()) return; const projName = location.pathname.split("/", 2)[1]; if (projectsToSkipForCodeComment?.includes(projName)) return; const codeHeaderExists = $(".CodeSnippet").text().includes("header"); const languageCommentSymbol = $(".rm-LanguageButton_active").text() === "Node" ? "//" : "#"; const authDiv = $("div.auth-code-comment"); if (authDiv.length) return; const commentText = projectsForMutualAuth?.includes(projName) ? "Use mutual auth or add JWT to this snippet" : "Add Authorization header to this snippet"; const commentLine = commentCodeLine(`${languageCommentSymbol} ${commentText}`); const codeLines = document.querySelectorAll(".CodeSnippet .CodeMirror-code > div"); for (let index = 0; index < codeLines.length; index++) { const codeElement = codeLines[index]; const txt = codeElement.textContent; const addElementBefore = txt.includes("options") || txt.includes("header") || txt.includes("sdk.") || txt.includes("sdk["); if (addElementBefore) { $(codeElement).before(commentLine); break; } if (!codeHeaderExists && txt.includes("url") && !txt.includes("curl")) { $(commentLine).insertAfter($(codeElement)); break; } } } $(document).on("focus", ".CodeSnippet, .rm-ParamInput, .ServerVars-form .ServerVars-input", function () { injectCodeComment(); }); $(document).on("change", ".CodeMirror-code", function () { injectCodeComment(); }); $(document).on("blur", ".CodeSnippet, .rm-ParamInput, .ServerVars-form .ServerVars-input", function () { injectCodeComment(); }); $(document).on("click", ".rm-PlaygroundRequest div[class*='APIRequest-menu-item'], div[class*='LanguagePicker-MenuItem']", function () { setTimeout(injectCodeComment, 200); }); $(document).on("click", ".rm-LanguagePicker .rm-LanguageButton", function () { setTimeout(injectCodeComment, 200); }); $(window).on("resize", debounce(function () { if (isReferenceSection() && !$("div.auth-code-comment").length) { injectCodeComment(); } }, 250)); function addPostmanButton(pmApiUrl, docsUrl, target) { const infoEle = `To run this code or try it in Postman, set up your authentication credentials.`; const auth = `

Not familiar with Postman? Learn how to use collections.

`; const button = `

`; const ele = $( `

AUTHENTICATE & TRY IT

${infoEle}${auth}${button}

` ); ele.insertAfter($("#ReferencePlayground > section:nth-child(1)")); } async function postmanAuth() { if (!isReferenceSection()) return false; const postmanSessionItem = "akam_pm_info"; const apiTitle = document.querySelector(".rm-Sidebar-section .rm-Sidebar-link:not([class*='Sidebar-link_hidden'])")?.innerText; console.log("[DEBUG] apiTitle", apiTitle); if (!apiTitle) return false; let pmInfo = sessionStorage.getItem(postmanSessionItem); pmInfo = pmInfo ? JSON.parse(pmInfo) : null; if (!pmInfo) { pmInfo = await getData("https://techdocs.akamai.com/assets/postman.json"); sessionStorage.setItem(postmanSessionItem, JSON.stringify(pmInfo)); } const { collections, collectionBaseUrl } = pmInfo; if (!collections?.hasOwnProperty(apiTitle)) return false; const groupId = apiTitle.replace(/ /g, "_"); await new Promise(r => setTimeout(r, 350)); const itemId = document.querySelector("title")?.innerText ?.replace(/ /g, "_") .replace(/'/g, "") .replace(/\//g, ""); if (!itemId) return false; const ssKey = `${groupId}-${itemId}`; let eId = sessionStorage.getItem(ssKey); if (!eId) { const endpointId = await getDataFromEKV(groupId, itemId); if (!endpointId || endpointId.includes("Error")) { $("section.PostmanSection").remove(); return false; } eId = endpointId.replace(/"/g, ""); sessionStorage.setItem(ssKey, eId); } $("span.auth-section-info").parent().remove(); const partialUrl = collections[apiTitle][0]; const pmApiUrlToUse = `${collectionBaseUrl}/${partialUrl}${eId}`; let target = "_blank"; let docsUrl = "https://techdocs.akamai.com/developer/docs/set-up-authentication-credentials"; if (!partialUrl.startsWith("akamai-apis/")) { document.querySelectorAll(".rm-Sidebar-section:first-child .rm-Sidebar-link").forEach(x => { if (x.textContent?.toLowerCase().includes("get started")) { docsUrl = x.href; target = "_self"; } }); } addPostmanButton(pmApiUrlToUse, docsUrl, target); return true; } async function authHelp() { if (!isReferenceSection()) return; const projName = location.pathname.split("/", 2)[1]; function credentialElementLink() { const isIncluded = authLink.has(projName) || onlyAuthHelpTxt.includes(projName); const target = isIncluded ? "_self" : "_blank"; let link = isIncluded ? `${projName}/reference/get-started` : "developer/docs/set-up-authentication-credentials"; let txt = onlyAuthHelpTxt.includes(projName) ? "authorization token" : "authentication credentials"; if (projName === "mpulse") { const category = $(".rm-Sidebar-section .subnav-expanded .rm-Sidebar-link.active") .first() .parents(".rm-Sidebar-section") .children() .first() .text(); if (["Beacons"].includes(category)) { link = "mpulse/reference/beacons#getting-started"; txt = "API key"; } else { txt = "authentication token"; } } return `${txt}`; } function addAuthSection() { const authHeaderText = onlyAuthHelpTxt.includes(projName) ? `Remember to get your ${credentialElementLink()} to run this code.` : `Remember to add your ${credentialElementLink()} to run this code.`; const infoEle = `${authHeaderText}`; const header = $(".APIAuth [class*='APISectionHeader3LN'] [class*='APISectionHeader']"); if (header.length > 0) { if (header.text() === "Authorization") { header.text("Authentication"); if (!header.parent().next().hasClass("auth-section-info")) { header.parent().after(infoEle); } } } else if (projName !== "linode-api") { if ($("span.auth-section-info").length === 0) { const authEleSection = `

Authentication

${infoEle}

`; $("#ReferencePlayground").children().eq(1).before(authEleSection); } } } if (!onlyAuthHelpTxt.includes(projName)) { $("section.InputGroup").hide(); } const hasPostman = await postmanAuth(); $("span.auth-section-info").show(); if (!hasPostman) { addAuthSection(); } if (!$("div.auth-code-comment").length) { injectCodeComment(); } } function readMore() { if (!isChangelogSection()) return; const hasTxt = document.querySelectorAll(".ch-release-note").length; if (hasTxt) return; document.querySelectorAll(".rm-Changelog article[class*='ChangelogPostExcerpt']").forEach(post => { const href = post.querySelectorAll("h2 a")[0]?.getAttribute("href"); if (!href) return; const span = document.createElement("span"); span.classList.add("ch-release-note"); span.innerText = "Read full release note"; post.querySelectorAll("section.markdown-body")[0]?.append(span); }); } $(window).on("click", "a.rm-Header-bottom-link, a[class*='Pagination-link']", function () { if (this.getAttribute("href")?.includes("changelog")) readMore(); }); $(document).on("click", ".ch-release-note", function () { $(this).parent().siblings("h2").children("a").trigger("click"); }); function releaseNotesBackButton() { if (!isChangelogSection()) return; const backBtnDiv = document.querySelector(".rm-Changelog article.rm-Changelog-post > div"); if (!backBtnDiv) return; const projContentName = document.querySelector("meta[property='og:site_name']").content; const btnText = projContentName + " release notes"; const span = backBtnDiv.querySelectorAll("button span")[1]; if (span) { span.innerText = btnText; } else { const firstLink = backBtnDiv.querySelectorAll("a")[0]; const spanIcon = firstLink.querySelectorAll("span")[0].outerHTML; firstLink.innerHTML = spanIcon + `${btnText}`; firstLink.style.display = "flex"; } const backToAllBtn = document.querySelector(".rm-Changelog a.to_all_notes"); if (!backToAllBtn) { const anchor = document.createElement("a"); anchor.className = "Button Button_sm Button Button_sm Button_text to_all_notes ChangelogPost_backVFYixWm1Jvy7 Button_primary"; anchor.type = "button"; anchor.href = "/release-notes/docs"; anchor.innerHTML = 'All release notes'; anchor.style.display = "flex"; backBtnDiv.appendChild(anchor); } const div = document.querySelector("article.rm-Changelog-post div[class*='ChangelogPage_back']"); if (div) div.style.display = "flex"; } function collapsibleTableRows() { const tables = document.querySelectorAll("table"); if (!tables.length) return; const expandableRows = document.querySelectorAll("tr.expand"); if (expandableRows.length) return; $("table").each(function () { const colLength = $(this).children().first().children().first().children().length; const tRows = $(this).children().find("tr"); tRows.each(function (j, tRow) { if (j === tRows.length - 1) return; const rowChilds = $(this).children(); let len = 0; rowChilds.length && rowChilds.each(function () { if ($(this).html() === "") len += 1; }); if (len === rowChilds.length - 1 && $(rowChilds[0]).html() !== "") { if ($(this).hasClass("expand")) return; $(this).addClass("expand"); rowChilds.first().siblings().remove().wrapInner(""); rowChilds .prepend('') .wrapInner(''); tRow.firstElementChild.setAttribute("colspan", colLength); tRow.firstElementChild.style.fontWeight = "600"; } }); }); console.log("Collapsible table rows initialized"); } $(document).on("click", ".clickable-triangle", function () { const triangleSpan = $(this).children().first(); triangleSpan.toggleClass("triangle-right"); triangleSpan.toggleClass("triangle-bottom"); $(this).parent().parent().nextUntil("tr.expand").toggle(); }); function waitForElement(selector) { return new Promise(resolve => { const existingElement = document.querySelector(selector); if (existingElement) { return resolve(existingElement); } const observer = new MutationObserver((mutations, obs) => { const element = document.querySelector(selector); if (element) { resolve(element); obs.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true, }); }); } function waitForAllElements(selector, callback, settleTime = 100, maxWait = 4000) { const initialElements = document.querySelectorAll(selector); if (initialElements.length > 0) { callback(); return; } let settleTimer; // Fail-safe: Give up after maxWait (e.g., 4 seconds) so it doesn't run forever on pages const failSafeTimer = setTimeout(() => { observer.disconnect(); }, maxWait); const observer = new MutationObserver((mutations, obs) => { const elements = document.querySelectorAll(selector); if (elements.length > 0) { clearTimeout(failSafeTimer); clearTimeout(settleTimer); settleTimer = setTimeout(() => { obs.disconnect(); callback(); }, settleTime); } }); observer.observe(document.body, { childList: true, subtree: true }); } function retryUntilReady(checkAndApply, { interval = 100, maxTries = 30 } = {}) { let tries = 0; const id = setInterval(() => { tries++; const done = checkAndApply(); if (done || tries >= maxTries) clearInterval(id); }, interval); } function tryReadMore() { if (!isChangelogSection()) return true; const articles = document.querySelectorAll(".rm-Changelog article[class*='ChangelogPostExcerpt']"); if (!articles.length) return false; readMore(); return true; } function tryReleaseNotesBackButton() { if (!isChangelogSection()) return true; const backBtnDiv = document.querySelector(".rm-Changelog article.rm-Changelog-post > div"); if (!backBtnDiv) return false; releaseNotesBackButton(); return true; } $(window).on("pageLoad", async () => { console.log("[PAGE INIT] pageLoad handler 4 fired (main async) | path:", window.location.pathname); console.log("pageLoad start"); setTimeout(() => { console.log("[PAGE INIT] pageLoad +100ms: updating search placeholders, logged-in details, openFirstResponse"); document .querySelectorAll(".rm-SearchToggle-placeholder") .forEach(x => (x.innerHTML = "Search this doc set")); updateLoggedInDetailsOverride(); // openFirstResponse(); }, 100); console.log("[PAGE INIT] pageLoad: isChangelog:", isChangelogSection(), "| isReference:", isReferenceSection()); console.log("[PAGE INIT] .td-search-flyout present:", !!document.querySelector(".td-search-flyout"), "| .docsearch-bar present:", !!document.querySelector(".docsearch-bar")); if (isChangelogSection()) { console.log("[PAGE INIT] pageLoad: changelog section — waiting for excerpt articles and back button"); waitForAllElements(".rm-Changelog article[class*='ChangelogPostExcerpt']", readMore, 150); waitForElement(".rm-Changelog article.rm-Changelog-post > div").then(releaseNotesBackButton); } if (isReferenceSection()) { console.log("[PAGE INIT] pageLoad: reference section — calling authHelp()"); await authHelp(); console.log("[PAGE INIT] pageLoad: authHelp() resolved — calling injectCodeComment()"); injectCodeComment(); } console.log("[PAGE INIT] pageLoad: calling addErrors() and setting up collapsible table row observer"); addErrors(); waitForAllElements("table", collapsibleTableRows, 100); console.log("pageLoad end"); }); $(window).on("click", "a.td-contact", function () { $("a.td-contact .td-icon-nav-up").toggleClass("td-icon-down"); $(".td-contact-dropdown-content").toggle(); $(".td-login-dropdown-content").hide(); }); $(window).on("click", ".td-login", function (e) { if (!$(".td-login").attr("href")) { e.preventDefault(); } $(".td-login-dropdown-content").toggle(); $(".td-contact-dropdown-content").hide(); $(".td-contact .td-icon").removeClass("td-icon-down"); }); $(window).on("click", ".td-mobile-nav-icons .td-icon-menu", function () { $(".td-mobile").toggle(); $(".td-search-flyout").hide(); $(".td-mobile-nav-icons .icon-search1").removeClass("td-active"); $(".td-icon-menu").toggleClass("td-icon-hover"); }); $(window).on("click", ".err .td-mobile-nav-icons-1 .td-icon-menu", function () { $(".td-mobile").toggle(); $(".err .td-search-flyout-1").hide(); $(".err .td-mobile-nav-icons-1 .icon-search1").removeClass("td-active"); $(".td-icon-menu").toggleClass("td-icon-hover"); }); $(window).on("blur", ".td-contact-dropdown", function (e) { if (!e.relatedTarget) { $(".td-contact-dropdown-content").hide(); $(".td-contact .td-icon").removeClass("td-icon-down"); } }); $(window).on("blur", ".td-login", function (e) { if (!e.relatedTarget) { $(".td-login-dropdown-content").hide(); } }); $(window).on("click", ".td-mobile-nav-icons .icon-search1", function () { $(".td-search-flyout").toggle(); $(".td-mobile").hide(); $(".td-icon-menu").removeClass("td-icon-hover"); $(".td-mobile-nav-icons .icon-search1").toggleClass("td-active"); }); $(window).on("click", ".err .td-mobile-nav-icons-1 .icon-search1", function () { $(".err .td-search-flyout-1").toggle(); $(".td-mobile").hide(); $(".td-icon-menu").removeClass("td-icon-hover"); $(".err .td-mobile-nav-icons-1 .icon-search1").toggleClass("td-active"); }); window.addEventListener("load", () => { console.log("[PAGE INIT] window.load fired: openFirstResponse + deferred collapsibleTableRows (1000ms) | isChangelog:", isChangelogSection()); // openFirstResponse(); setTimeout(() => { document.querySelectorAll(".rm-SearchToggle-placeholder")?.forEach(x => (x.innerHTML = "Search this doc set")); setTimeout(collapsibleTableRows, 1000); isChangelogSection() && readMore(); }, 1000); }); } // Beta pills upgrade for refactored $(document).on("click", ".Button_slate_text.Button_md.rm-Header-bottom-link", function () { setTimeout(function () { const spans = document.querySelectorAll('span[class^="VersionBadge"]'); spans.forEach((span) => { console.log(span); if (span.textContent.trim() === "Beta") { span.classList.add("beta"); } }); }, 100); }); // README-532 do not create beta pills in text content function isExactMatch(element, txt) { return element.innerText.trim() === txt; } function upgradeApiStatusLabels(isParameterOption = true) { if (window.location.href.includes("/docs/")) { return; } const selector = isParameterOption ? ".param-type" : ""; document.querySelectorAll(`#content.rm-Article ${selector} strong`).forEach((strongElement) => { strongElement.classList.remove("deprecated"); strongElement.classList.remove("beta"); strongElement.classList.remove("la"); if (isExactMatch(strongElement, "Deprecated")) { strongElement.classList.add("deprecated"); } if (isExactMatch(strongElement, "Beta")) { strongElement.classList.add("beta"); } if (isExactMatch(strongElement, "Limited availability")) { strongElement.classList.add("la"); } }); } function upgradeApiStatusLabelsInSchema() { const buttons = document.querySelectorAll('[class*="APIResponseSchemaPicker-option"]'); buttons.forEach(function (button) { button.addEventListener("click", () => { setTimeout(upgradeApiStatusLabels, 5); }); }); } function upgradeApiStatusLabelsInNav() { function replaceNavStatus(labelType, element, text) { const remainingText = text.substring(labelType.length); const strongTag = document.createElement("strong"); strongTag.textContent = labelType.charAt(0).toUpperCase() + labelType.slice(1); strongTag.className = labelType; element.innerHTML = ""; element.appendChild(strongTag); element.appendChild(document.createTextNode(`${remainingText}`)); } const swaggerTitlesNav = document.querySelectorAll(".rm-Sidebar h3"); swaggerTitlesNav.forEach((title) => { const text = title.textContent.trim(); if (text.startsWith("Beta")) { replaceNavStatus("beta", title, text); } if (text.startsWith("Deprecated")) { replaceNavStatus("deprecated", title, text); } if (text.startsWith("Limited availability")) { replaceNavStatus("la", title, text); } }); } // README-468 Beta labels nested in clickable properties in schemas function schemaNestedStatusLabels() { document.querySelectorAll("button[class*='Param-expand']").forEach(button => { button.addEventListener("click", function () { setTimeout(() => { const container = this.parentElement.querySelector("[class*='Param-children']"); if (container && container.style.display !== "none" && getComputedStyle(container).display !== "none") { container.querySelectorAll("p strong").forEach(strongElement => { if (isExactMatch(strongElement, "Deprecated")) { strongElement.classList.add("deprecated"); } if (isExactMatch(strongElement, "Beta")) { strongElement.classList.add("beta"); } if (isExactMatch(strongElement, "Limited availability")) { strongElement.classList.add("la"); } }); } }, 200); }); }); } // README-408 Beta labels in guides function handleBetaInHeadings(heading, size, isApi = false) { if (!isApi && window.location.href.includes("/docs/")) { const headingTextDivs = document.querySelectorAll(heading); headingTextDivs.forEach(div => { const betaRegex = /$Beta$/i; const laRegex = /$Limited availability$/i; const deprecatedRegex = /$Deprecated$/i; if (betaRegex.test(div.innerHTML)) { div.innerHTML = div.innerHTML.replace( betaRegex, `(Beta)` ); } if (laRegex.test(div.innerHTML)) { div.innerHTML = div.innerHTML.replace( laRegex, `(Limited availability)` ); } if (deprecatedRegex.test(div.innerHTML)) { div.innerHTML = div.innerHTML.replace( deprecatedRegex, `(Deprecated)` ); } }); } } function applyBetaChanges() { const bodyBetas = [ "h1.heading .heading-text", "h2.heading .heading-text", "h3.heading .heading-text", ".col-xs-9 h1" ]; const tocBetas = [ "li.toc-children a", "span[class*='Sidebar-link-text'] span" ]; bodyBetas.forEach(selector => { handleBetaInHeadings(selector, "super-text"); }); tocBetas.forEach(selector => { handleBetaInHeadings(selector, "toc-beta"); }); } function applyAllBetaChanges() { applyBetaChanges(); upgradeApiStatusLabels(false); setTimeout(() => upgradeApiStatusLabels(true), 50); upgradeApiStatusLabelsInNav(); setTimeout(upgradeApiStatusLabelsInSchema, 200); setTimeout(schemaNestedStatusLabels, 100); } document.addEventListener("DOMContentLoaded", function () { console.log("[PAGE INIT] DOMContentLoaded handler 2: applyAllBetaChanges + MutationObserver for beta/status labels"); applyAllBetaChanges(); let labelTimer = null; const config = { childList: true, subtree: true, characterData: true }; const observer = new MutationObserver(function () { observer.disconnect(); clearTimeout(labelTimer); labelTimer = setTimeout(() => { applyAllBetaChanges(); observer.observe(document.body, config); }, 50); }); observer.observe(document.body, config); }); $(window).on("pageLoad", function () { console.log("[PAGE INIT] pageLoad handler 5 fired: applyAllBetaChanges scheduled (+200ms)"); setTimeout(applyAllBetaChanges, 200); }); // ======================================== // SEARCH DEBUG + BEHAVIOR // ======================================== // GOALS // 1) Top/global search input opens modal and clears project filters // 2) Native header search button opens modal and auto-checks current project // 3) Invalid tabs remain visible, but are fully blocked when scoped to a project // 4) If current project is manually unchecked, tabs behave normally again // 5) Debug logging included // ======================================== (function () { console.log("[PAGE INIT] SEARCH IIFE: starting initialization | path:", window.location.pathname); const HEADER_SEARCH_BUTTON_SELECTOR = ".rm-Header-search .rm-SearchToggle"; const TOP_SEARCH_INPUT_SELECTOR = ".docsearch-bar input, .docsearch-wrapper input"; const SEARCH_MODAL_SELECTOR = ".rm-SearchModal, [class*='SearchModal']"; const PRIMARY_NAV_SELECTOR = 'nav[aria-label="Primary navigation"]'; const PROJECT_SLUG = window.location.pathname.split("/").filter(Boolean)[0] || ""; const LOCAL_PROJECT_PREFIX = PROJECT_SLUG ? `/${PROJECT_SLUG}/` : ""; const PROJECT_LABEL = ( document.querySelector('meta[property="og:site_name"]')?.getAttribute("content") || window.projContentName || "").trim(); if (!PROJECT_LABEL || !PROJECT_SLUG) { console.warn("[SEARCH DEBUG] Missing PROJECT_LABEL or PROJECT_SLUG", { PROJECT_LABEL, PROJECT_SLUG }); return; } let pendingProjectScope = false; let appliedForCurrentOpen = false; let pollTimer = null; let activeModal = null; let isProgrammaticOpen = false; function dbg(label, data) { try { console.log(`[SEARCH DEBUG] ${label}`, data || ""); } catch (e) {} } function normalizeText(value) { return (value || "").replace(/\s+/g, " ").trim().toLowerCase(); } function clearPoll() { if (pollTimer) { clearInterval(pollTimer); pollTimer = null; dbg("clearPoll()"); } } function getModal() { return document.querySelector(SEARCH_MODAL_SELECTOR); } function isModalVisible(modal) { return !!(modal && (modal.classList.contains("show-modal") || modal.offsetParent !== null)); } function getSearchProjectInputs(modal) { if (!modal) return []; return [...modal.querySelectorAll("label")] .map((label) => { const textEl = label.querySelector(".Toggle-label, .Toggle-label_md, [class*='Toggle-label']"); const input = label.querySelector('input[type="checkbox"]'); if (!textEl || !input) return null; return { label, input, text: normalizeText(textEl.textContent), rawText: textEl.textContent }; }) .filter(Boolean); } function getCurrentProjectInput(modal) { const target = normalizeText(PROJECT_LABEL); const options = getSearchProjectInputs(modal); dbg("getCurrentProjectInput() options", options.map(o => ({ rawText: o.rawText, normalized: o.text, checked: o.input.checked }))); const match = options.find((option) => option.text === target); dbg("getCurrentProjectInput() match", match ? { rawText: match.rawText, normalized: match.text, checked: match.input.checked } : null); return match?.input || null; } function getHubMeData() { try { const el = document.querySelector("#hub-me"); if (!el?.dataset?.json) return null; return JSON.parse(el.dataset.json); } catch (e) { dbg("getHubMeData() parse failed", e); return null; } } function getCurrentProjectMeta() { const hubMe = getHubMeData(); const meta = hubMe?.search?.metaData || []; if (!Array.isArray(meta)) return null; const found = meta.find((p) => normalizeText(p.subdomain) === normalizeText(PROJECT_SLUG)) || meta.find((p) => normalizeText(p.name) === normalizeText(PROJECT_LABEL)); dbg("getCurrentProjectMeta()", found ? { name: found.name, subdomain: found.subdomain, modules: found.modules, nav_names: found.nav_names } : null); return found || null; } function getCurrentProjectNavState() { const nav = document.querySelector(PRIMARY_NAV_SELECTOR); if (!nav) { dbg("getCurrentProjectNavState() no nav found"); return null; } const links = [...nav.querySelectorAll("a.rm-Header-bottom-link")]; const state = { enabled: new Set(), disabled: new Set() }; links.forEach((link) => { const href = link.getAttribute("href") || ""; const isLocalProjectLink = href.startsWith(LOCAL_PROJECT_PREFIX); if (!isLocalProjectLink) return; const text = normalizeText(link.textContent); if (!text) return; const isDisabled = link.classList.contains("NavItem_muted2-OqeulnYimX") || !!link.querySelector('[aria-label="Section Disabled"]') || !!link.querySelector('[class*="DisabledSectionBadge"]'); if (isDisabled) { state.disabled.add(text); } else { state.enabled.add(text); } }); dbg("getCurrentProjectNavState()", { enabled: [...state.enabled], disabled: [...state.disabled] }); return state; } function tryCheckProjectBox(modal) { if (!modal || !pendingProjectScope || appliedForCurrentOpen) { dbg("tryCheckProjectBox() skipped", { hasModal: !!modal, pendingProjectScope, appliedForCurrentOpen }); return false; } const matchedInput = getCurrentProjectInput(modal); if (!matchedInput) { dbg("tryCheckProjectBox() no matched input"); return false; } dbg("tryCheckProjectBox() before", { checked: matchedInput.checked, project: PROJECT_LABEL }); if (!matchedInput.checked) { matchedInput.click(); dbg("tryCheckProjectBox() clicked checkbox"); } appliedForCurrentOpen = true; pendingProjectScope = false; clearPoll(); return true; } function startProjectScopePolling(modal) { clearPoll(); let attempts = 0; const maxAttempts = 30; dbg("startProjectScopePolling()", { maxAttempts }); pollTimer = setInterval(() => { attempts += 1; dbg("poll tick", { attempts }); const worked = tryCheckProjectBox(modal); if (worked || attempts >= maxAttempts) { dbg("poll finished", { worked, attempts }); clearPoll(); } }, 100); } function clearAllProjectFilters(modal) { if (!modal) return; const inputs = getSearchProjectInputs(modal) .map(option => option.input) .filter(Boolean); dbg("clearAllProjectFilters()", { checkedCount: inputs.filter(input => input.checked).length }); inputs.forEach((input) => { if (input.checked) { input.click(); } }); } function clearAllProjectFiltersWhenReady() { let attempts = 0; const maxAttempts = 20; dbg("clearAllProjectFiltersWhenReady() start"); const interval = setInterval(() => { attempts += 1; const modal = getModal(); dbg("clearAllProjectFiltersWhenReady() tick", { attempts, modalVisible: isModalVisible(modal) }); if (!isModalVisible(modal)) { if (attempts >= maxAttempts) clearInterval(interval); return; } const inputs = getSearchProjectInputs(modal); if (inputs.length) { clearAllProjectFilters(modal); clearInterval(interval); dbg("clearAllProjectFiltersWhenReady() done"); return; } if (attempts >= maxAttempts) { clearInterval(interval); } }, 100); } function resetModalState() { dbg("resetModalState()"); appliedForCurrentOpen = false; pendingProjectScope = false; clearPoll(); activeModal = null; isProgrammaticOpen = false; } // Native header search button: SHOULD project-scope $(document).off("click.searchDebugHeader", HEADER_SEARCH_BUTTON_SELECTOR); $(document).on("click.searchDebugHeader", HEADER_SEARCH_BUTTON_SELECTOR, function (e) { dbg("HEADER SEARCH BUTTON click", { isProgrammaticOpen, target: e.target }); if (isProgrammaticOpen) { dbg("HEADER SEARCH BUTTON ignored because programmatic"); return; } pendingProjectScope = true; appliedForCurrentOpen = false; }); // Top/global search input: SHOULD open only, clear all project filters $(document).off("mousedown.searchDebugTop", TOP_SEARCH_INPUT_SELECTOR); $(document).on("mousedown.searchDebugTop", TOP_SEARCH_INPUT_SELECTOR, function (e) { dbg("TOP SEARCH mousedown", { selector: TOP_SEARCH_INPUT_SELECTOR, target: e.target }); e.preventDefault(); e.stopImmediatePropagation(); pendingProjectScope = false; appliedForCurrentOpen = false; if (typeof this.blur === "function") { this.blur(); } const btn = document.querySelector(HEADER_SEARCH_BUTTON_SELECTOR); dbg("TOP SEARCH forcing native button click", { foundButton: !!btn }); if (btn) { isProgrammaticOpen = true; btn.click(); setTimeout(() => { isProgrammaticOpen = false; dbg("TOP SEARCH cleared isProgrammaticOpen"); clearAllProjectFiltersWhenReady(); }, 0); } }); $(document).off("click.searchDebugTop", TOP_SEARCH_INPUT_SELECTOR); $(document).on("click.searchDebugTop", TOP_SEARCH_INPUT_SELECTOR, function (e) { dbg("TOP SEARCH click", { selector: TOP_SEARCH_INPUT_SELECTOR, target: e.target }); e.preventDefault(); e.stopImmediatePropagation(); }); // Observer const observer = new MutationObserver(() => { const modal = getModal(); if (!isModalVisible(modal)) { resetModalState(); return; } if (modal !== activeModal) { activeModal = modal; appliedForCurrentOpen = false; dbg("new modal detected", modal); } if (pendingProjectScope && !appliedForCurrentOpen) { dbg("observer starting project scope polling"); startProjectScopePolling(modal); } else { } }); observer.observe(document.body, { childList: true, subtree: true }); dbg("initialized", { PROJECT_LABEL, PROJECT_SLUG, LOCAL_PROJECT_PREFIX }); })(); function updateCSSRules () { let styleSheet let styleElement = document.querySelector('head style#dynamic-styles') if (!styleElement) { styleElement = document.createElement('style') styleElement.id = 'dynamic-styles' document.head.appendChild(styleElement) } styleSheet = styleElement.sheet const newRule = '.rm-PlaygroundResponse .APIResponse-action-button { display: none; }' styleSheet.insertRule(newRule, styleSheet.cssRules.length) // If you want to remove the old rule, we assume you have a method to handle cross-origin issues. // Since we can't reliably access cross-origin stylesheets, we won't attempt to remove the rule here. // However, you can manage it within your own styles if needed. } $(window).on('pageLoad', function (e, state) { /* ---------------------------------------------------- 1. For: /reference/api-summary Fix overflow only ---------------------------------------------------- */ if ( window.location.href === 'https://techdocs.akamai.com/property-mgr/reference/api-summary' ) { var tableInnerElements = document.querySelectorAll('.rdmd-table-inner'); tableInnerElements.forEach(function (el) { el.style.removeProperty('overflow'); el.style.cssText += 'overflow: unset !important;'; }); } /* ---------------------------------------------------- 2. For: /reference/validation-errors-copy Add word-break + class replacement ---------------------------------------------------- */ if ( window.location.href === 'https://techdocs.akamai.com/property-mgr/reference/validation-errors-copy' ) { // Add word-break to all tables const style = document.createElement("style"); style.textContent = ` table, table * { word-break: break-word !important; white-space: normal !important; } `; document.head.appendChild(style); // Replace .sticky-overflow → remove & add .sticky document.querySelectorAll('.rdmd-table-inner.sticky-overflow') .forEach(function (el) { el.classList.remove('sticky-overflow'); el.classList.add('sticky'); }); } }); /* PAPI builder */ // Released 27.04.2026 function initPapiBuilder () { function normalizeStr (s) { return (s || '') .replace(/\u200b/g, '') .replace(/\u00ad/g, '') .trim() } const table = document.querySelector('.rdmd-table-inner table') const href = window.location.href const isAllowedReferencePage = [ 'reference/latest-', 'reference/ga-', 'reference/deprecated-' ].some(segment => href.includes(segment)) if (!table || href.includes('/docs/') || !isAllowedReferencePage) return if (table.dataset.papiReady) return const ths = table.querySelectorAll('thead th') // =============== Move "Requires" into Description and hide the column =============== let reqIdx = -1 ths.forEach((th, i) => { if (th.textContent.trim().startsWith('Requires')) reqIdx = i }) table.querySelectorAll('tbody tr').forEach(tr => { const tds = tr.children if (reqIdx !== -1 && tds[reqIdx]) { const reqTd = tds[reqIdx] let requiresHtml = '' const tmp = document.createElement('div') tmp.innerHTML = reqTd.innerHTML.trim() tmp .querySelectorAll('button.rdmd-code-copy') .forEach(btn => btn.remove()) const cleaned = tmp.innerHTML.trim() if (cleaned) { requiresHtml = `

Requires: ${cleaned}

` } // Find description cell (prefer .description-col) let descTd = null for (let td of tds) { if (td.classList && td.classList.contains('description-col')) { descTd = td break } } if (!descTd) descTd = tds[2] || tds[1] if (descTd && requiresHtml) { const wrap = document.createElement('div') wrap.innerHTML = requiresHtml const metaDiv = wrap.firstElementChild const oldMeta = descTd.querySelector('.ps-metadata') if (oldMeta) oldMeta.remove() descTd.insertBefore(metaDiv, descTd.firstChild) descTd.insertBefore(document.createElement('br'), metaDiv.nextSibling) } } }) if (reqIdx !== -1) ths[reqIdx].style.display = 'none' table.querySelectorAll('tbody tr').forEach(tr => { const tds = tr.children if (reqIdx !== -1 && tds[reqIdx]) tds[reqIdx].style.display = 'none' }) // =============== Hide "Value" column if present =============== let optionIdx = -1 let valueIdx = -1 ths.forEach((th, i) => { if (th.textContent.trim().startsWith('Option')) optionIdx = i if (th.textContent.trim().startsWith('Value')) valueIdx = i }) if (valueIdx !== -1) ths[valueIdx].style.display = 'none' table.querySelectorAll('tbody tr').forEach(tr => { const tds = tr.children if (valueIdx !== -1 && tds[valueIdx]) tds[valueIdx].style.display = 'none' }) // =============== Helpers =============== function parsePre (row, cls) { const pre = row.querySelector('pre.' + cls) if (!pre) return null try { return JSON.parse(pre.textContent) } catch { return null } } // Symbol to indicate an external/unresolvable attribute reference const UNRESOLVABLE = Symbol('UNRESOLVABLE') function getAttrValue (attr, stateObj) { // Handle dot-notation like "policySet.region" if (attr && attr.includes('.')) { const parts = attr.split('.') let current = stateObj for (const part of parts) { if (current === undefined || current === null) { // Path doesn't exist - unresolvable return UNRESOLVABLE } if (typeof current !== 'object') { // Parent exists but is not an object (e.g., policySet is a string ID) // This is an external reference that can't be resolved from table data return UNRESOLVABLE } current = current[part] } return current } return stateObj[attr] } function evalVisible (visible, stateObj) { if (!visible) return true const v = visible.if if (!v) return true // Global-scope conditions reference external data (e.g. modulesOnContract) // not available in the table; assume fulfilled if (v.scope === 'global') return true // Supported ops: eq, neq, in, not, and, or, contains, type // "type" checks the runtime data-type of a value (e.g. ipv4_address); // we can't determine this from table data, so assume fulfilled. if (v.op === 'type') return true if (v.op === 'not') { const inner = v.expression || (v.params && v.params[0]) if (!inner) return true return !evalVisible({ if: inner }, stateObj) } if (v.op === 'eq') { const val = getAttrValue(v.attribute, stateObj) // If attribute is unresolvable (external reference), assume condition is fulfilled if (val === UNRESOLVABLE) return true return val == v.value } if (v.op === 'neq') { const val = getAttrValue(v.attribute, stateObj) if (val === UNRESOLVABLE) return true return val != v.value } if (v.op === 'in') { const val = getAttrValue(v.attribute, stateObj) if (val === UNRESOLVABLE) return true const arr = v.value || [] return arr.includes(val) } if (v.op === 'contains') { const val = getAttrValue(v.attribute, stateObj) // Contains typically checks if array contains value; if unresolvable, assume fulfilled if (val === UNRESOLVABLE) return true if (Array.isArray(val)) return val.includes(v.value) return false } if (v.op === 'or') return (v.params || []).some(p => evalVisible({ if: p }, stateObj)) if (v.op === 'and') return (v.params || []).every(p => evalVisible({ if: p }, stateObj)) return true // Fallback for unhandled ops } function parseValueByType (type, value) { if (type === 'integer' || type === 'number') { if (value === '' || value === undefined) return undefined const n = Number(value) return isNaN(n) ? value : n } if (type === 'boolean') return value === 'true' || value === true return value } function readTextArray (container) { const arr = [] container.querySelectorAll('input[type="text"]').forEach(inp => { const v = inp.value.trim() if (v !== '') arr.push(v) }) return arr.length ? arr : undefined } // =============== Collect rows =============== const optionRows = Array.from(table.querySelectorAll('tr.row_option, tr.preview_option')) const schemaRows = Array.from(table.querySelectorAll('tr.row_schema, tr.preview_schema')) const options = {} const objectSchemas = {} // single-object schemas const objectArrayPropDefs = {} // { parentArrayName: [{propName, inputDef, type, displayType}] } const optionsByName = {} const optionsById = {} const readOnlySchemaRows = [] // Track read-only schema rows for conditional hiding // Build map for options optionRows.forEach(row => { const id = row.id const inputDef = parsePre(row, 'input') const visibleDef = parsePre(row, 'visible') const code = row.querySelector('code') const rawName = code ? code.textContent.replace(/\u200b/g, '') : id // strip ZW chars const name = rawName const o = { row, inputDef, visibleDef, name, value: undefined, input: null } // Detect object-array property rows like: failoverOriginMap[].fromOriginId const arrMatch = name.match(/^([^.]+)\[\]\.(.+)$/) if (arrMatch) { o.isArrayProp = true o.parentArrayName = arrMatch[1] o.propName = arrMatch[2] if (!objectArrayPropDefs[o.parentArrayName]) objectArrayPropDefs[o.parentArrayName] = [] // Inspect type from the row's "Type" column - get FULL type text (e.g., "string array") const tds = row.querySelectorAll('td') let type = '' let displayType = '' if (tds[1]) { const fullTypeText = normalizeStr(tds[1].textContent) type = fullTypeText.split(' ')[0].toLowerCase() // first word for internal use displayType = fullTypeText // full text for display (e.g., "string array") } objectArrayPropDefs[o.parentArrayName].push({ propName: o.propName, inputDef, visibleDef, // Store visibility definition for filtering type, displayType // NEW: store full type for display }) // Hide this template row; we'll render inputs in entry blocks row.classList.add('hidden-row') } options[id] = o optionsById[id] = o optionsByName[name] = o // Detect parent object/object-array options if ( inputDef && (inputDef.displayType === 'object' || inputDef.displayType === 'object array') ) { if (inputDef.displayType === 'object') { objectSchemas[name] = [] o.isObject = true } else if (inputDef.displayType === 'object array') { o.isObject = true o.isObjectArray = true if (!objectArrayPropDefs[name]) objectArrayPropDefs[name] = [] // ensure bucket exists } } }) // Schema rows (for single object properties like cloudletPolicy.id) schemaRows.forEach(row => { const code = row.querySelector('code') if (!code) return const dotName = code.textContent.replace(/\u200b/g, '') const [objectName, propName] = dotName.split('.', 2) // Ignore if this is an object-array schema variant (we handle via row_option form) if (objectName.endsWith('[]')) return const tds = row.querySelectorAll('td') let type = '' if (tds[2]) type = (tds[1].textContent || '').trim().split(' ')[0].toLowerCase() const descTd = tds[2] || null const firstPara = descTd?.querySelector('p') const firstParaText = firstPara?.innerText.trim() || '' if (firstParaText.startsWith('Read-only')) { // Track read-only rows for conditional hiding (visible when empty, hidden when values exist) row._objectName = objectName row._propName = propName row._isReadOnly = true readOnlySchemaRows.push(row) return } const input = document.createElement('input') input.type = 'text' input.className = 'Input Input_sm' input.style.minWidth = '120px' input.style.display = 'block' input.style.marginTop = '4px' input.addEventListener('input', updateState) const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0] optionTd.appendChild(input) row._objectName = objectName row._propName = propName row._input = input row._type = type if (!objectSchemas[objectName]) objectSchemas[objectName] = [] objectSchemas[objectName].push(row) }) // =============== Handle row_option sub-properties of objects (dot-notation, no inputDef) =============== // Some tables use row_option (not row_schema) for object sub-properties like firewallConfiguration.configId. // These rows have no

, so we detect them by dot-notation name and build inputs manually.
    Object.values(options).forEach(opt => {
      if (opt.inputDef) return // already has an input definition, handled later
      if (opt.isArrayProp) return // array props handled separately
      const dotIdx = opt.name.indexOf('.')
      if (dotIdx === -1) return // not a sub-property
      const objectName = opt.name.substring(0, dotIdx)
      const propName = opt.name.substring(dotIdx + 1)
      // Only process if parent is a known object
      const parentOpt = optionsByName[objectName]
      if (!parentOpt || !parentOpt.isObject) return
      // Skip if parent is an object array (those use [] notation)
      if (parentOpt.isObjectArray) return

      const tds = opt.row.querySelectorAll('td')
      let type = ''
      if (tds[1]) type = (tds[1].textContent || '').trim().split(' ')[0].toLowerCase()
      const descTd = tds[2] || null
      const firstPara = descTd?.querySelector('p')
      const firstParaText = firstPara?.innerText.trim() || ''
      if (firstParaText.startsWith('Read-only')) {
        opt.row._objectName = objectName
        opt.row._propName = propName
        opt.row._isReadOnly = true
        readOnlySchemaRows.push(opt.row)
        return
      }

      const input = document.createElement('input')
      input.type = 'text'
      input.className = 'Input Input_sm'
      input.style.minWidth = '120px'
      input.style.display = 'block'
      input.style.marginTop = '4px'
      input.addEventListener('input', updateState)
      const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0]
      optionTd.appendChild(input)

      opt.row._objectName = objectName
      opt.row._propName = propName
      opt.row._input = input
      opt.row._type = type
      // Mark the option so the main input-building loop skips it
      opt._handledAsSchema = true

      if (!objectSchemas[objectName]) objectSchemas[objectName] = []
      objectSchemas[objectName].push(opt.row)
      // Also add to schemaRows so reset/listeners work
      schemaRows.push(opt.row)
    })

    // =============== Build inputs for option rows ===============
    Object.values(options).forEach(opt => {
      if (!opt.inputDef) return
      if (opt._handledAsSchema) return
      if (opt.isArrayProp) {
        opt.row.classList.add('hidden-row')
        return
      }

      const tds = opt.row.querySelectorAll('td')
      const optionTd = optionIdx !== -1 ? tds[optionIdx] : tds[0]
      let input

      if (opt.inputDef.displayType === 'string array') {
        const wrapper = document.createElement('div')
        wrapper.className = 'array-input-wrapper'
        wrapper.style.marginTop = '4px'
        function addField (val) {
          const div = document.createElement('div')
          div.style.display = 'flex'
          div.style.marginBottom = '2px'
          const inp = document.createElement('input')
          inp.type = 'text'
          inp.className = 'Input Input_sm'
          inp.style.minWidth = '120px'
          inp.value = val || ''
          inp.addEventListener('input', updateState)
          const btn = document.createElement('button')
          btn.type = 'button'
          btn.textContent = '−'
          btn.className = 'Button Button_xs'
          btn.style.marginLeft = '4px'
          btn.onclick = function () {
            const hadValue = inp.value.trim() !== ''
            wrapper.removeChild(div)
            if (hadValue) updateState()
          }
          div.appendChild(inp)
          div.appendChild(btn)
          const plusBtn = wrapper.querySelector('button.Button_xs:last-of-type')
          if (plusBtn && plusBtn.textContent === '+') {
            wrapper.insertBefore(div, plusBtn)
          } else {
            wrapper.appendChild(div)
          }
        }
        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+'
        addBtn.className = 'Button Button_xs'
        addBtn.style.marginTop = '2px'
        addBtn.onclick = function () {
          addField()
          // Don't call updateState() here - adding empty field doesn't change state
          // The input's own event listener will trigger updateState when user types
        }
        wrapper.appendChild(addBtn)
        addField()
        optionTd.appendChild(wrapper)
        opt.input = wrapper
        opt.isArray = true
      } else if (opt.inputDef.displayType === 'object array') {
        // Build object-array wrapper with + Add button; properties are hidden until clicked
        const wrapper = document.createElement('div')
        wrapper.className = 'object-array-wrapper'
        wrapper.style.marginTop = '4px'

        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+ Add ' + opt.name
        addBtn.className = 'Button Button_xs'
        addBtn.onclick = function () {
          addObjectArrayEntry(wrapper, opt.name)
          // IMPORTANT: do not call updateState() here; we DON'T want filtering yet
          // We only update state when a property inside the new entry is filled.
        }
        wrapper.appendChild(addBtn)

        optionTd.appendChild(wrapper)
        opt.input = wrapper
        opt.isObjectArray = true
        opt.isObject = true
      } else if (opt.inputDef.displayType === 'object') {
        opt.isObject = true // handled in schemaRows
      } else if (
        opt.inputDef.tag === 'input' &&
        opt.inputDef.type === 'checkbox'
      ) {
        // boolean -> select true/false (no default)
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '4px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose true/false'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;['false', 'true'].forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        optionTd.appendChild(sel)
        opt.input = sel
        opt.isBooleanSelect = true
      } else if (opt.inputDef.tag === 'select') {
        // enum -> select with placeholder
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '4px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose an option'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;(opt.inputDef.options || []).forEach(val => {
          const clean = normalizeStr(val)
          const o = document.createElement('option')
          o.value = clean
          o.textContent = clean
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        optionTd.appendChild(sel)
        opt.input = sel
      } else if (
        opt.inputDef.displayType === 'number' ||
        opt.inputDef.displayType === 'integer'
      ) {
        input = document.createElement('input')
        input.type = 'text'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.style.display = 'block'
        input.style.marginTop = '4px'
        input.addEventListener('input', updateState)
        optionTd.appendChild(input)
        opt.input = input
      } else if (
        opt.inputDef.type === 'text' ||
        opt.inputDef.type === 'datetime-local'
      ) {
        input = document.createElement('input')
        input.type = 'text'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.style.display = 'block'
        input.style.marginTop = '4px'
        input.addEventListener('input', updateState)
        optionTd.appendChild(input)
        opt.input = input
      }
    })

    // =============== Build one object-array entry (UI block with all props) ===============
    function buildArrayPropInput (def) {
      // Returns an element for one property inside object-array entry
      const wrap = document.createElement('div')
      wrap.className = 'object-array-prop'
      wrap.style.margin = '4px 0'
      wrap.dataset.prop = def.propName
      wrap.dataset.type = (def.type || '').toLowerCase()

      // NEW: Build label with type in parentheses
      const label = document.createElement('div')
      const typeDisplay = def.displayType || def.type || ''
      const typeStr = typeDisplay ? ` (${typeDisplay})` : ''
      label.textContent = def.propName + typeStr
      label.style.fontSize = '12px'
      label.style.opacity = '0.8'
      wrap.appendChild(label)

      const idf = def.inputDef || {}

      if (idf.displayType === 'string array') {
        // Nested array input (like toOriginIds)
        const arrWrap = document.createElement('div')
        arrWrap.className = 'array-input-wrapper'
        arrWrap.style.marginTop = '2px'

        function addField (val) {
          const row = document.createElement('div')
          row.style.display = 'flex'
          row.style.marginBottom = '2px'
          const inp = document.createElement('input')
          inp.type = 'text'
          inp.className = 'Input Input_sm'
          inp.style.minWidth = '120px'
          inp.value = val || ''
          inp.addEventListener('input', updateState)
          const btn = document.createElement('button')
          btn.type = 'button'
          btn.textContent = '−'
          btn.className = 'Button Button_xs'
          btn.style.marginLeft = '4px'
          btn.onclick = function () {
            const hadValue = inp.value.trim() !== ''
            arrWrap.removeChild(row)
            if (hadValue) updateState()
          }
          row.appendChild(inp)
          row.appendChild(btn)
          const plusBtn = arrWrap.querySelector('button.Button_xs:last-of-type')
          if (plusBtn && plusBtn.textContent === '+') {
            arrWrap.insertBefore(row, plusBtn)
          } else {
            arrWrap.appendChild(row)
          }
        }

        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+'
        addBtn.className = 'Button Button_xs'
        addBtn.style.marginTop = '2px'
        addBtn.onclick = function () {
          addField()
          // Don't call updateState() here - adding empty field doesn't change state
        }
        arrWrap.appendChild(addBtn)
        addField()

        wrap.appendChild(arrWrap)
        return wrap
      }

      if (idf.tag === 'select') {
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '2px'
        const placeholder = document.createElement('option')
        placeholder.value = ''
        placeholder.textContent = 'Choose an option'
        placeholder.disabled = true
        placeholder.hidden = true
        placeholder.selected = true
        sel.appendChild(placeholder)
        ;(idf.options || []).forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        wrap.appendChild(sel)
        return wrap
      }

      if (idf.tag === 'input' && idf.type === 'checkbox') {
        const sel = document.createElement('select')
        sel.className = 'Select Select_sm'
        sel.style.minWidth = '120px'
        sel.style.display = 'block'
        sel.style.marginTop = '2px'
        const ph = document.createElement('option')
        ph.value = ''
        ph.textContent = 'Choose true/false'
        ph.disabled = true
        ph.hidden = true
        ph.selected = true
        sel.appendChild(ph)
        ;['false', 'true'].forEach(v => {
          const o = document.createElement('option')
          o.value = v
          o.textContent = v
          sel.appendChild(o)
        })
        sel.addEventListener('change', updateState)
        wrap.appendChild(sel)
        wrap.dataset.booleanSelect = '1'
        return wrap
      }

      // Numbers/integers default text with validation
      const inp = document.createElement('input')
      inp.type = 'text'
      inp.className = 'Input Input_sm'
      inp.style.minWidth = '120px'
      inp.style.display = 'block'
      inp.style.marginTop = '2px'
      inp.addEventListener('input', updateState)
      wrap.appendChild(inp)
      return wrap
    }

    // =============== Entry-level visibility for object array properties ===============
    function getEntryLocalState (entry, props) {
      // Build a local state object from values within this entry
      const localState = {}
      props.forEach(def => {
        const propWrap = entry.querySelector(`.object-array-prop[data-prop="${def.propName}"]`)
        if (!propWrap) return
        const type = (propWrap.dataset.type || '').toLowerCase()
        
        // Check for nested array
        const nestedArrWrap = propWrap.querySelector('.array-input-wrapper')
        if (nestedArrWrap) {
          const arrVal = readTextArray(nestedArrWrap)
          if (arrVal !== undefined) localState[def.propName] = arrVal
          return
        }
        
        // Check for select
        const sel = propWrap.querySelector('select')
        if (sel && sel.value !== '') {
          if (propWrap.dataset.booleanSelect === '1') {
            localState[def.propName] = sel.value === 'true'
          } else {
            localState[def.propName] = sel.value
          }
          return
        }
        
        // Check for text input
        const inp = propWrap.querySelector('input[type="text"]')
        if (inp && inp.value.trim() !== '') {
          const parsed = parseValueByType(type, inp.value.trim())
          if (parsed !== undefined && parsed !== '') {
            localState[def.propName] = parsed
          }
        }
      })
      return localState
    }
    
    function updateEntryPropVisibility (entry, props, initial) {
      // Get the current values within this entry to evaluate visibility conditions
      const localState = getEntryLocalState(entry, props)
      
      props.forEach(def => {
        const propWrap = entry.querySelector(`.object-array-prop[data-prop="${def.propName}"]`)
        if (!propWrap) return
        
        // Evaluate visibility based on local state within the entry
        let show = true
        if (!initial && def.visibleDef && def.visibleDef.if) {
          show = evalVisible(def.visibleDef, localState)
        }
        
        propWrap.style.display = show ? '' : 'none'
      })
    }

    function addObjectArrayEntry (wrapper, parentName) {
      const defs = objectArrayPropDefs[parentName] || []
      const container = document.createElement('div')
      container.className = 'object-array-entry'
      container.style.border = '1px solid #ccc'
      container.style.padding = '6px'
      container.style.margin = '6px 0'

      // Build inputs for each prop
      defs.forEach(def => {
        const el = buildArrayPropInput(def)
        container.appendChild(el)
      })

      const removeBtn = document.createElement('button')
      removeBtn.type = 'button'
      removeBtn.textContent = '− Remove'
      removeBtn.className = 'Button Button_xs'
      removeBtn.style.marginTop = '6px'
      removeBtn.onclick = function () {
        wrapper.removeChild(container)
        updateState() // removing can change state -> filtering allowed
      }
      container.appendChild(removeBtn)

      // Insert before the + Add button (which is the last child)
      wrapper.insertBefore(container, wrapper.lastChild)

      // Apply initial visibility for the new entry (show all properties initially)
      updateEntryPropVisibility(container, defs, true)
    }

    // =============== State + back-propagation (original) ===============
    let state = {}
    function findOption (attr) {
      return optionsByName[attr] || optionsById[attr] || null
    }
    function firstAllowedEnumValue (opt, forbidden) {
      const opts = (opt?.inputDef?.options || []).filter(v => v !== forbidden)
      return opts.length ? opts[0] : undefined
    }
    function getDeterministicAssignments (visibleDef) {
      // Returns array of { attribute, value|notValue, type: 'eq'|'in'|'neq' }
      const res = []
      if (!visibleDef || !visibleDef.if) return res
      const v = visibleDef.if
      function handleClause (clause) {
        if (!clause) return
        if (clause.op === 'eq')
          res.push({
            attribute: clause.attribute,
            value: clause.value,
            type: 'eq'
          })
        else if (clause.op === 'in')
          res.push({
            attribute: clause.attribute,
            value: Array.isArray(clause.value)
              ? clause.value.slice()
              : clause.value,
            type: 'in'
          })
        else if (clause.op === 'neq')
          res.push({
            attribute: clause.attribute,
            notValue: clause.value,
            type: 'neq'
          })
        else if (clause.op === 'and')
          (clause.params || []).forEach(handleClause)
        else if (clause.op === 'or') {
          const params = clause.params || []
          const alreadySatisfied = params.some(p =>
            evalVisible({ if: p }, state)
          )
          if (alreadySatisfied) return
          if (params.length > 0) handleClause(params[0])
        }
      }
      handleClause(v)
      return res
    }
    function setInputForAttribute (attr, value) {
      const opt = findOption(attr)
      if (!opt || !opt.input) {
        state[attr] = value
        return
      }
      if (opt.isBooleanSelect) opt.input.value = String(value)
      else if (opt.input.tagName === 'SELECT') opt.input.value = String(value)
      else if (opt.input.type === 'checkbox') opt.input.checked = !!value
      else opt.input.value = value == null ? '' : String(value)
      // Mirror into cached value/state immediately
      if (opt.isBooleanSelect) opt.value = opt.input.value === 'true'
      else if (opt.input.tagName === 'SELECT') opt.value = opt.input.value
      else if (opt.input.type === 'checkbox') opt.value = opt.input.checked
      else opt.value = opt.input.value
      state[opt.name] = opt.value
    }
    function chooseValueForIn (attribute, allowed) {
      const current = state[attribute]
      if (Array.isArray(allowed) && allowed.includes(current)) return current
      return Array.isArray(allowed) && allowed.length ? allowed[0] : undefined
    }
    function backPropagateFromElement (target) {
      if (!target) return
      const schemaRow = target.closest && target.closest('tr.row_schema')
      let startOpt = null
      if (schemaRow && schemaRow._objectName)
        startOpt = findOption(schemaRow._objectName)
      else {
        const optionRow = target.closest && target.closest('tr.row_option')
        if (optionRow) startOpt = options[optionRow.id]
      }
      const visited = new Set()
      let stack = startOpt ? [startOpt] : []
      while (stack.length) {
        const currentOpt = stack.pop()
        if (!currentOpt || visited.has(currentOpt.name)) continue
        visited.add(currentOpt.name)

        const assigns = getDeterministicAssignments(currentOpt.visibleDef)
        for (const a of assigns) {
          if (a.type === 'eq') {
            setInputForAttribute(a.attribute, a.value)
          } else if (a.type === 'in') {
            const picked = chooseValueForIn(a.attribute, a.value)
            if (picked !== undefined) setInputForAttribute(a.attribute, picked)
          } else if (a.type === 'neq') {
            const parentOpt = findOption(a.attribute)
            if (
              parentOpt &&
              parentOpt.input &&
              parentOpt.input.tagName === 'SELECT'
            ) {
              // Set a value if current equals forbidden OR is undefined (not set)
              const currentVal = state[a.attribute]
              if (currentVal === a.notValue || currentVal === undefined) {
                const fallback = firstAllowedEnumValue(parentOpt, a.notValue)
                if (fallback !== undefined)
                  setInputForAttribute(a.attribute, fallback)
              }
            }
          }
          const parentOpt = findOption(a.attribute)
          if (parentOpt) stack.push(parentOpt)
        }
      }
    }

    // =============== UI update ===============
    
    // FIXED: Transitive visibility check - a field is only visible if all its dependencies are also visible
    function isFullyVisible (opt, visited = new Set()) {
      if (!opt) return true
      
      // Prevent infinite recursion
      if (visited.has(opt.name)) return true
      visited.add(opt.name)
      
      // If no visibility condition, it's always visible
      if (!opt.visibleDef || !opt.visibleDef.if) return true
      
      // First check if this option's direct visibility condition is met
      if (!evalVisible(opt.visibleDef, state)) return false
      
      // Then check if all parent dependencies are also visible (transitive check)
      const v = opt.visibleDef.if
      
      function checkDependencyVisible (clause) {
        if (!clause) return true
        
        // If this clause references an attribute, check if that attribute's option is visible
        if (clause.attribute) {
          const parentOpt = findOption(clause.attribute)
          if (parentOpt && !isFullyVisible(parentOpt, visited)) {
            return false // Parent is hidden, so this should be hidden too
          }
        }
        
        // For compound conditions, check all referenced attributes
        if (clause.op === 'and') {
          return (clause.params || []).every(p => checkDependencyVisible(p))
        }
        if (clause.op === 'or') {
          // For OR, we need at least one branch's dependencies to be visible
          // But if all branches have hidden dependencies, hide this option
          const params = clause.params || []
          if (params.length === 0) return true
          
          // Check if any branch has visible dependencies AND passes its condition
          return params.some(p => {
            const depVisible = checkDependencyVisible(p)
            const condPasses = evalVisible({ if: p }, state)
            return depVisible && condPasses
          })
        }
        
        return true
      }
      
      return checkDependencyVisible(v)
    }
    
    function updateState (ev) {
      // Back-prop first based on changed element
      backPropagateFromElement(ev && ev.target)
      updateUI()
    }
    function updateUI (initial = false) {
      // 1) read values from option inputs (primitives, enums, standalone string arrays)
      Object.values(options).forEach(opt => {
        if (!opt.input || opt.isObjectArray) return // arrays handled later
        if (opt.isArray) {
          const arrVal = readTextArray(opt.input)
          opt.value = arrVal
          if (arrVal !== undefined) state[opt.name] = arrVal
          else delete state[opt.name]
        } else if (opt.isBooleanSelect) {
          opt.value =
            opt.input.value === '' ? undefined : opt.input.value === 'true'
          if (opt.value === undefined) delete state[opt.name]
          else state[opt.name] = opt.value
        } else if (opt.input.type === 'checkbox') {
          opt.value = opt.input.checked
          state[opt.name] = opt.value
        } else if (
          opt.inputDef &&
          (opt.inputDef.displayType === 'number' ||
            opt.inputDef.displayType === 'integer')
        ) {
          // original behavior: keep raw invalid + highlight
          if (opt.input.value !== '' && isNaN(Number(opt.input.value))) {
            opt.input.classList.add('invalid-input')
            opt.value = opt.input.value // keep raw
          } else {
            opt.input.classList.remove('invalid-input')
            opt.value =
              opt.input.value === '' ? undefined : Number(opt.input.value)
          }
          if (opt.value === undefined) delete state[opt.name]
          else state[opt.name] = opt.value
        } else {
          opt.value = normalizeStr(opt.input.value)
          if (opt.value === '') delete state[opt.name]
          else state[opt.name] = opt.value
        }
      })

      // 2) validate schema numeric inputs + attach into single objects
      schemaRows.forEach(row => {
        if (!row._input) return
        if (row._type === 'number' || row._type === 'integer') {
          if (row._input.value !== '' && isNaN(Number(row._input.value))) {
            row._input.classList.add('invalid-input')
          } else {
            row._input.classList.remove('invalid-input')
          }
        }
      })
      Object.keys(objectSchemas).forEach(objectName => {
        const parentOpt = optionsByName[objectName]
        if (parentOpt && parentOpt.isObjectArray) return // skip, handled below
        let anyFilled = false
        const obj = {}
        ;(objectSchemas[objectName] || []).forEach(row => {
          if (!row._input) return
          const val = row._input.value
          const parsed = parseValueByType(row._type, val)
          if (parsed !== undefined && parsed !== '') {
            obj[row._propName] = parsed
            anyFilled = true
          }
        })
        if (anyFilled) state[objectName] = obj
        else delete state[objectName]
      })

      // 3) Object arrays: only include filled entries. (+ Add does NOT filter)
      Object.values(options).forEach(opt => {
        if (!opt.isObjectArray || !opt.input) return
        const arr = []
        const entries = opt.input.querySelectorAll('.object-array-entry')
        entries.forEach(entry => {
          const obj = {}
          let any = false
          const props = objectArrayPropDefs[opt.name] || []
          props.forEach(def => {
            const propWrap = entry.querySelector(
              `.object-array-prop[data-prop="${def.propName}"]`
            )
            if (!propWrap) return
            const type = (propWrap.dataset.type || '').toLowerCase()
            // nested array?
            const nestedArrWrap = propWrap.querySelector('.array-input-wrapper')
            if (nestedArrWrap) {
              const arrVal = readTextArray(nestedArrWrap)
              if (arrVal !== undefined) {
                obj[def.propName] = arrVal
                any = true
              }
              return
            }
            const sel = propWrap.querySelector('select')
            if (sel) {
              if (sel.value !== '') {
                obj[def.propName] =
                  sel.dataset.booleanSelect === '1'
                    ? sel.value === 'true'
                    : sel.value
                any = true
              }
              return
            }
            const inp = propWrap.querySelector('input[type="text"]')
            if (inp) {
              if (
                (type === 'number' || type === 'integer') &&
                inp.value !== '' &&
                isNaN(Number(inp.value))
              ) {
                inp.classList.add('invalid-input')
                obj[def.propName] = inp.value // keep raw invalid
                any = true
              } else {
                inp.classList.remove('invalid-input')
                const parsed = parseValueByType(type, inp.value)
                if (parsed !== undefined && parsed !== '') {
                  obj[def.propName] = parsed
                  any = true
                }
              }
            }
          })
          if (any) arr.push(obj)
        })
        if (arr.length) {
          state[opt.name] = arr
          opt.value = arr
        } else {
          delete state[opt.name]
          opt.value = undefined
        }
      })

      // 4) show/hide option rows according to visibility (with transitive check)
      Object.values(options).forEach(opt => {
        // Sub-property rows handled as schema are controlled by their parent object
        if (opt._handledAsSchema) return

        const show = initial ? true : isFullyVisible(opt)
        // Array-prop template rows remain hidden regardless
        if (opt.isArrayProp) {
          opt.row.classList.add('hidden-row')
        } else {
          opt.row.classList.toggle('hidden-row', !show)
        }

        // For single-object schemas, follow parent visibility
        if (opt.isObject && objectSchemas[opt.name]) {
          objectSchemas[opt.name].forEach(row => {
            row.classList.toggle('hidden-row', !show)
          })
        }

        // For object arrays, show/hide the wrapper UI with parent visibility
        if (opt.isObjectArray && opt.input) {
          opt.input.style.display = show ? '' : 'none'
          // Also update property visibility within each entry
          const props = objectArrayPropDefs[opt.name] || []
          const entries = opt.input.querySelectorAll('.object-array-entry')
          entries.forEach(entry => {
            updateEntryPropVisibility(entry, props, initial)
          })
        }
      })

      // 5) show/hide enum/list rows based on their owning option
      Array.from(table.querySelectorAll('tr.row_enum, tr.row_list, tr.preview_enum, tr.preview_list')).forEach(
        row => {
          let prev = row.previousElementSibling
          while (prev && !prev.classList.contains('row_option'))
            prev = prev.previousElementSibling
          if (!prev) return
          row.classList.toggle(
            'hidden-row',
            prev.classList.contains('hidden-row')
          )
        }
      )

      // 6) show/hide read-only schema rows: visible when empty, hidden when values exist
      const formHasValues = Object.keys(state).length > 0
      readOnlySchemaRows.forEach(row => {
        // Check if parent object option is visible too
        const parentOpt = optionsByName[row._objectName]
        const parentVisible = parentOpt ? !parentOpt.row.classList.contains('hidden-row') : true
        // Hide read-only rows if form has values OR parent is hidden
        row.classList.toggle('hidden-row', formHasValues || !parentVisible)
      })

      // 7) update JSON snippet
      updateJsonSnippet()
    }

    // =============== JSON snippet UI (copy/reset) ===============
    function updateJsonSnippet () {
      let name = ''
      const header = document.querySelector('#content-head h1')
      if (header) name = header.textContent.trim()
      const optionsObj = {}
      Object.values(options).forEach(opt => {
        // Include object arrays even if parent row hidden (so entries reflect)
        const parentVisible = !opt.row.classList.contains('hidden-row')
        const include = parentVisible || opt.isObjectArray
        if (!include) return

        if (opt.isObject || opt.isObjectArray) {
          if (state[opt.name] !== undefined)
            optionsObj[opt.name] = state[opt.name]
        } else if (typeof opt.value === 'boolean') {
          optionsObj[opt.name] = opt.value
        } else if (opt.value !== undefined && opt.value !== '') {
          optionsObj[opt.name] = opt.value
        }
      })
      const snippet = { name, options: optionsObj }
      const jsonPre = document.getElementById('json-snippet-pre')
      const jsonBox = document.getElementById('json-snippet-box')
      if (jsonPre) {
        jsonPre.textContent = JSON.stringify(snippet, null, 2)
      } else if (jsonBox) {
        jsonBox.textContent = JSON.stringify(snippet, null, 2)
      }
    }

    // Build snippet container (with Copy + Reset) once — ORIGINAL BUTTONS + TOOLTIPS preserved
    let jsonDiv = document.getElementById('json-snippet-box')
    if (!jsonDiv) {
      jsonDiv = document.createElement('div')
      jsonDiv.id = 'json-snippet-box'
      jsonDiv.style.position = 'relative'
      jsonDiv.style.paddingTop = '2.5em'
      const jsonPre = document.createElement('pre')
      jsonPre.id = 'json-snippet-pre'
      jsonPre.style.margin = '0'
      jsonPre.style.fontFamily = 'monospace'
      jsonDiv.appendChild(jsonPre)

      // Override iOS Safari's UA stylesheet which forces -webkit-text-fill-color: blue on

200The response lists activations of all hostnames in the property's hostname bucket.

400Bad request.

401Unauthorized.

403Forbidden.

404Not found.

405Method not allowed.

406Not acceptable.

429Too many requests.

500Internal server error.