text: some sites use "404", // others use "Page not found". Match on URL path or the native section. const is404 = () => /(^|\/)404(\/|$)/.test(location.pathname) || document.title.startsWith('404') || [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].some(h => /browse similar/i.test(h.textContent)); // --- Levenshtein distance (two-row implementation) --- const levenshtein = (a, b) => { if (a === b) return 0; if (!a.length) return b.length; if (!b.length) return a.length; let prev = [...Array(b.length + 1).keys()]; let cur = new Array(b.length + 1); for (let i = 0; i < a.length; i++) { cur[0] = i + 1; for (let j = 0; j < b.length; j++) { const cost = a[i] === b[j] ? 0 : 1; cur[j + 1] = Math.min(cur[j] + 1, prev[j + 1] + 1, prev[j] + cost); } [prev, cur] = [cur, prev]; } return prev[b.length]; }; // --- Tiny localStorage cache helpers (TTL-based, fail-safe) --- const cacheGet = (key) => { try { const raw = localStorage.getItem(key); if (!raw) return null; const { v, exp } = JSON.parse(raw); if (Date.now() > exp) { localStorage.removeItem(key); return null; } return v; } catch (e) { return null; } }; const cacheSet = (key, value, ttl = CACHE_TTL) => { try { localStorage.setItem(key, JSON.stringify({ v: value, exp: Date.now() + ttl })); } catch (e) { /* quota or disabled storage — ignore */ } }; const pathOf = (u) => { try { return new URL(u).pathname; } catch { return u; } }; const esc = (s) => s.replace(/[&<>"]/g, ch => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[ch])); let building = false; // guard against concurrent builds let debounce; // observer debounce timer const schedule = () => { clearTimeout(debounce); debounce = setTimeout(render, 80); }; // --- Core render: idempotent, safe to call any number of times --- async function render() { if (!is404()) return; if (document.getElementById(BLOCK_ID)) return; // already present -> no-op if (building) return; // Insertion point: native "Browse similar pages" section, with fallbacks const heads = [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]; const browse = heads.find(h => /browse similar/i.test(h.textContent)); const section = document.querySelector('section.recommendations') || (browse && browse.parentElement) || document.querySelector('main'); if (!section) return; // section not rendered yet — observer/poll will retry building = true; try { // Copy the native link styling so suggestions look identical const refLink = [...document.querySelectorAll('a')] .find(a => /documentation homepage/i.test(a.textContent)); const rcs = refLink ? getComputedStyle(refLink) : null; const linkStyle = rcs ? `color:${rcs.color};text-decoration:underline;text-decoration-color:${rcs.textDecorationColor};font-weight:${rcs.fontWeight};` : 'color:#06bcd4;text-decoration:underline;font-weight:500;'; // Load and parse the sitemap (cached) let locs = cacheGet(SITEMAP_KEY); if (!locs) { const res = await fetch(`${location.origin}/sitemap.xml`); if (!res.ok) return; const doc = new DOMParser().parseFromString(await res.text(), 'application/xml'); locs = [...doc.querySelectorAll('loc')].map(n => n.textContent.trim()).filter(Boolean); cacheSet(SITEMAP_KEY, locs); } if (!locs || !locs.length) return; // Compare by path (not full URL) and apply a distance threshold const currentPath = pathOf(location.href); const closest = locs .filter(u => pathOf(u) !== currentPath) .map(u => ({ url: u, distance: levenshtein(currentPath, pathOf(u)) })) .filter(c => c.distance <= MAX_DISTANCE) .sort((a, b) => a.distance - b.distance) .slice(0, MAX_RESULTS); if (!closest.length) return; // Resolve a human-readable title per candidate (cached, with fallback) const siteSuffix = / [|\-–—] [^|\-–—]+$/; // strip trailing " — Site Name" const titleCaseFromPath = (p) => { const slug = p.split('/').filter(Boolean).pop() || p; return slug.replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); }; await Promise.all(closest.map(async (c) => { const path = pathOf(c.url); const cached = cacheGet(TITLE_PREFIX + path); if (cached) { c.title = cached; return; } try { const r = await fetch(c.url); if (!r.ok) throw 0; const d = new DOMParser().parseFromString(await r.text(), 'text/html'); const t = ( d.querySelector('meta[property="og:title"]')?.getAttribute('content') || d.title || d.querySelector('h1')?.textContent || '' ).trim().replace(siteSuffix, '').trim(); c.title = t && t.length > 1 ? t : titleCaseFromPath(path); } catch (e) { c.title = titleCaseFromPath(path); } cacheSet(TITLE_PREFIX + path, c.title); })); // Re-check: the SPA may have re-rendered while we awaited the fetches if (document.getElementById(BLOCK_ID)) return; const liveSection = document.querySelector('section.recommendations') || section; if (!liveSection || !liveSection.isConnected) return; // stale node -> retry in finally // Render the block (list only, no "Did you mean:" heading) const box = document.createElement('div'); box.id = BLOCK_ID; box.style.cssText = 'margin-top:0.5rem;'; box.innerHTML = ` <ul style="margin:.5rem 0 0;padding-left:1.25rem;list-style:disc;"> ${closest.map(c => `<li style="margin:.25rem 0;"><a href="${esc(c.url)}" style="${linkStyle}">${esc(c.title)}</a></li>` ).join('')} </ul>`; liveSection.appendChild(box); } catch (e) { /* fail silently — this is a progressive enhancement */ } finally { building = false; // KEY FIX: if the block still isn't present (section replaced mid-build, or // a fetch failed), schedule another attempt. if (is404() && !document.getElementById(BLOCK_ID)) schedule(); } } // --- Self-healing: re-render on any DOM change (debounced) --- const startObserver = () => { const root = document.getElementById('ssr-main') || document.querySelector('.App') || document.querySelector('main') || document.body; new MutationObserver(schedule).observe(root, { childList: true, subtree: true }); }; // --- Cold-start fallback: poll briefly until the block appears --- const startPolling = () => { let tries = 0; const id = setInterval(() => { tries++; if (document.getElementById(BLOCK_ID) || tries > POLL_MAX_TRIES) { clearInterval(id); return; } render(); }, POLL_INTERVAL); }; // --- Hook SPA route changes (pushState/replaceState/popstate) --- const hookHistory = (method) => { const orig = history[method]; history[method] = function (...args) { const r = orig.apply(this, args); schedule(); return r; }; }; hookHistory('pushState'); hookHistory('replaceState'); window.addEventListener('popstate', schedule); // --- Boot --- const boot = () => { startObserver(); startPolling(); render(); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } })(); /* ============================================================ BLOOMREACH DOCUMENTATION - CONSOLIDATED JS (Hydration-Safe) VERSION: Refactored-HydrationSafe-JS ============================================================ Compatible with: Refactored renderer (React SSR + hydration) Also works on: Legacy renderer (jQuery/Owl) Location: Readme.io > Project Settings > Custom JavaScript ============================================================ KEY LEARNINGS & ARCHITECTURE NOTES ============================================================ 1. REACT HYDRATION CONFLICT (Critical) ---------------------------------------- The Refactored Readme renderer uses React Server-Side Rendering (SSR). The page arrives as fully-rendered HTML, then React "hydrates" it by attaching event handlers to the existing DOM. PROBLEM: Readme.io has pre-existing hydration bugs - React Error #418 (hydration mismatch) and #423 (fatal fallback). These cause React to ABANDON hydration and do a FULL CLIENT-SIDE RE-RENDER. This means: - React tears down the server-rendered DOM - React builds a brand-new DOM from scratch - All event handlers are attached to the NEW elements If our custom JS modifies the DOM BEFORE or DURING this process: - Our modifications get wiped by the re-render - React's event handler tree gets corrupted - Native features break (search, navigation, Tabs component) - DOMContentLoaded already fired, so our code never re-runs SOLUTION: This version uses a 3-phase initialization: Phase 1 (Immediate): Features that append to <body> (outside React's tree) Phase 2 (After React): Poll for React-rendered elements, then modify DOM Phase 3 (Ongoing): Repair loop re-applies modifications if React wipes them 2. HOW CUSTOM CODE IS DELIVERED -------------------------------- On Legacy renderer: Code is injected as raw <script>/<style> tags. On Refactored renderer: Code is embedded as JSON strings in the server-rendered HTML payload (fields `stylesheet_hub2` for CSS, `javascript_hub2` for JS). React's rendering pipeline processes this data and injects the code. This means: - The code IS in the page source (confirmed via fetch()) - But it's NOT in raw <script> tags - it's in a JSON data blob - React controls when/how the code actually executes 3. STABLE SELECTORS -------------------- Both Legacy and Refactored renderers use the SAME stable `rm-` prefixed CSS classes. These are safe to target: .rm-Header, .rm-Header-top, .rm-Header-top-link, .rm-Header-left, .rm-Header-right, .rm-SearchToggle, .rm-Header-bottom, .rm-Header-bottom-link, .rm-Sidebar, .rm-Article, .rm-Container, .rm-SearchModal, .rm-AskAi-button, .rm-MobileFlyout-item, .rm-Logo The Refactored renderer ALSO has CSS-module hashed classes (e.g., NavItem-item1gDDTqaXGhm1) but these are unstable and should NOT be targeted. Stick to `rm-` prefixed classes. 4. LEFT vs RIGHT NAV --------------------- Readme.io projects can configure nav links in either rm-Header-left or rm-Header-right. This is set in the CMS (LEFT SIDE NAV vs RIGHT SIDE NAV in project settings). The dropdown positioning auto-detects which side is used. Some projects (e.g., Engagement) also have a "Home" link as the first item - the fallback logic excludes it. 5. GROUP-LEVEL CODE -------------------- Readme group settings (dash.readme.com/group/bloomreach/) contain global CSS, JS, and HTML that applies to ALL projects. The Group JS already injects a "Get a Demo" button targeting #ssr-main .navbar (Bootstrap secondary nav). Our project-level code targets .rm-Header-top (primary nav). On production, BOTH may run. The demo button injection is guarded to prevent duplicates. 6. ADMIN IFRAME ---------------- When logged in as admin on the Refactored renderer, the actual page content is inside an iframe (title="Hub Preview", ?isFramePreview=true). The admin toolbar is outside this iframe. When debugging via browser DevTools, make sure to select the iframe context. 7. CDN PROPAGATION ------------------- After saving JS in the CMS editor, changes take several minutes to propagate via CDN. CSS propagates faster. Don't panic if changes don't appear immediately - wait 3-5 minutes and hard-refresh. 8. SEARCH APPROACH ------------------- This version uses the native Readme search (OOTB Algolia-based). We do NOT replace it with a custom Bloomreach Discovery search. Our JS only enhances the native search by: - Applying Bloomreach Sans font to the search modal - Auto-selecting the product filter based on the current URL slug Last updated: 2026-03-30 ============================================================ */ (function () { "use strict"; /* ========================================================== SECTION 1: READING PROGRESS BAR ========================================================== Shows a thin colored bar at the top of the page indicating scroll progress through the article. Two scroll modes: - Window scroll: Used on Legacy renderer (page scrolls natively) - Container scroll: Used on Refactored renderer where content scrolls inside a container div, not the window itself. The container is auto-detected by walking up from .rm-Article and finding the first ancestor with overflow:auto/scroll. The progress bar element is appended to <body> (outside React's tree), so it survives re-renders. The container detection uses setInterval polling because the container may not exist yet when initProgressBar() runs (React hasn't rendered it yet). ========================================================== */ var progressBar = null; var containerScrollActive = false; var _scrollContainerAttached = false; function initProgressBar() { if (progressBar) return; progressBar = document.createElement("div"); progressBar.className = "br-progress-bar"; document.body.appendChild(progressBar); // Shared scroll handler for both window and container modes function onScroll(scrollTop, scrollHeight) { if (scrollHeight <= 0) { progressBar.style.width = "0%"; return; } var progress = (scrollTop / scrollHeight) * 100; progressBar.style.width = (scrollTop > 50) ? progress + "%" : "0%"; } // Window scroll - works on Legacy and platforms using native page scroll window.addEventListener("scroll", function () { if (containerScrollActive) return; // Container mode takes priority var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; onScroll(scrollTop, docHeight); }); // Find the scrollable container ancestor of the article. // On Refactored renderer, Readme scrolls inside a container div. function findScrollContainer() { var article = document.querySelector(".rm-Article"); if (!article) return null; var el = article.parentElement; while (el && el !== document.body) { var style = window.getComputedStyle(el); var overflow = style.overflow + style.overflowY; if ((overflow.indexOf("auto") > -1 || overflow.indexOf("scroll") > -1) && el.scrollHeight > el.clientHeight) { return el; } el = el.parentElement; } return null; } // Poll for scrollable container (re-runs after SPA navigation resets flags) setInterval(function () { if (_scrollContainerAttached) return; var container = findScrollContainer(); if (container && !container._brProgressAttached) { container._brProgressAttached = true; _scrollContainerAttached = true; containerScrollActive = true; container.addEventListener("scroll", function () { onScroll(container.scrollTop, container.scrollHeight - container.clientHeight); }); } }, 500); } // Reset progress bar on SPA navigation. // Also resets container detection so it re-finds the container // after React re-renders the page content. function resetProgressBar() { if (progressBar) { progressBar.style.width = "0%"; } containerScrollActive = false; _scrollContainerAttached = false; } // TEMP NAME CHANGE BANNER (function () { // Flag: skip banner on homepage URLs like https://example.com/ or https://example.com var SKIP_BANNER_ON_HOMEPAGE = true; // Prevent re-inserting after the user closes it var bannerDismissed = false; function isHomepage() { return window.location.pathname === '/' || window.location.pathname === ''; } // --- Styles (inject once) --- if (!document.getElementById('legal-naming-banner-style')) { var style = document.createElement('style'); style.id = 'legal-naming-banner-style'; style.textContent = ` .legal-naming-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 52px 11px 20px; background: #FFEB85; color: #000000; font-family: 'Bloomreach Sans', sans-serif !important; font-size: 14px; line-height: 1.4; text-align: center; } .legal-naming-banner a { color: #fff; text-decoration: underline; font-weight: 600; } .legal-naming-banner .lnb-icon { font-size: 16px; } .legal-naming-banner .lnb-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #000000; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; } .legal-naming-banner .lnb-close:hover, .legal-naming-banner .lnb-close:focus { opacity: 0.8; } `; document.head.appendChild(style); } function insertBanner() { var existingBanner = document.getElementById('legal-naming-banner'); // Do not show on homepage if the flag is enabled if (SKIP_BANNER_ON_HOMEPAGE && isHomepage()) { if (existingBanner) existingBanner.remove(); return; } // Do not re-add after the user closes it if (bannerDismissed) return; // Already present and still attached? do nothing if (existingBanner) return; var header = document.querySelector('header[class*="Header"]') || document.querySelector('header'); if (!header) return; var banner = document.createElement('div'); banner.id = 'legal-naming-banner'; banner.className = 'legal-naming-banner'; banner.innerHTML = '<span class="lnb-icon">📢</span>' + '<span><strong>Important:</strong> ' + "We're updating product naming across our documentation (\"Engagement\" is now \"Marketing\"). These changes do not alter the services, their functionality, or any terms of your agreement. Where you see a new name, it refers to the same product previously known by its former name." + '</span>' + '<button type="button" class="lnb-close" aria-label="Close banner">×</button>'; banner.querySelector('.lnb-close').addEventListener('click', function () { bannerDismissed = true; banner.remove(); }); header.insertAdjacentElement('afterend', banner); } // Try immediately... insertBanner(); // ...and keep re-inserting whenever React re-renders / user navigates in the SPA. var observer = new MutationObserver(function () { insertBanner(); }); observer.observe(document.body, { childList: true, subtree: true }); })(); /* ========================================================== SECTION 2: HEADER NAVIGATION DROPDOWNS ========================================================== Adds dropdown menus to header nav links (Products & Resources). Desktop only (hidden on mobile via CSS). How links are matched: 1. First tries text content matching against known labels (sandbox, products, engagement, etc.) 2. Falls back to positional matching: filters out "Home", "Demo", "Search", "Ask AI" links, then takes first two remaining as product/resources links. Dropdown positioning auto-detects whether the nav links are in rm-Header-left or rm-Header-right and positions accordingly. This handles the difference between projects that use LEFT SIDE NAV (like Engagement) vs RIGHT SIDE NAV (like Sandbox). All functions are RE-ENTRANT (safe to call multiple times): - createDropdown() checks if dropdown already exists on the link - Global close listeners are added only once - The repair loop calls initDropdowns() periodically ========================================================== */ /* ---------------------------------------------------------- Move Nav Links to Right CMS nav buttons are configured in the Left section (for consistency across all projects) but should appear visually on the right. This moves .rm-Header-top-link elements from rm-Header-left to rm-Header-right at runtime. Idempotent: skips if links are already in right. COMPANION CSS (Section 9B): [class*="Header-left"]:not([class*="mobile"]) > .rm-Header-top-link { display: none !important; } This hides links while in Header-left (FOUC prevention). Once moved to Header-right, the selector no longer matches -> visible. Do NOT modify one without the other. KNOWN BEHAVIOUR: ~1s pop-in delay on initial page load. This function runs in Phase 2 (after React hydration), not Phase 1, because moving DOM nodes before React hydrates would cause a hydration mismatch -> React re-renders -> links reset to Header-left. The CSS keeps them hidden during this wait, so the trade-off is a brief delay rather than a visible left->right flash. Moving it to Phase 1 was considered but rejected: React would undo the move during re-render, and the repair loop (2s interval) would re-move them - causing a second pop-in. ---------------------------------------------------------- */ function moveNavToRight() { var headerLeft = document.querySelector('.rm-Header-top [class*="Header-left"]:not([class*="mobile"])'); var headerRight = document.querySelector('.rm-Header-top [class*="Header-right"]'); if (!headerLeft || !headerRight) return; var leftLinks = headerLeft.querySelectorAll('.rm-Header-top-link'); var rightLinks = headerRight.querySelectorAll('.rm-Header-top-link'); // Only move if links are in left and not already in right if (leftLinks.length === 0 || rightLinks.length > 0) return; // Insert before Search/ThemeToggle to maintain correct visual order var insertRef = headerRight.querySelector('[class*="Header-search"], [class*="ThemeToggle"]'); Array.prototype.slice.call(leftLinks).forEach(function(link) { if (insertRef) { headerRight.insertBefore(link, insertRef); } else { headerRight.appendChild(link); } }); console.log("[BR] Nav links moved from Header-left to Header-right"); } var DROPDOWN_PRODUCTS = [ { label: "Marketing", href: "https://documentation.bloomreach.com/engagement/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-engagement.svg" }, { label: "Search", href: "https://documentation.bloomreach.com/discovery/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-discovery.svg" }, { label: "Conversational agent", href: "https://documentation.bloomreach.com/clarity/", icon: "https://files.readme.io/86f2117f3d000ce5757a79cb62c95c431430559e3e93bc99e3ad124a38893379-image_195.svg" }, { label: "Data hub", href: "https://documentation.bloomreach.com/data-hub/", icon: "https://files.readme.io/9c2182532f9a19070ca979e1cba270d6e4fabea769deeeee33c2fe6d29a747a9-image_196.svg" }, { divider: true }, { label: "Content management", href: "https://xmdocumentation.bloomreach.com/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg", external: true }, { label: "Content SaaS", href: "https://documentation.bloomreach.com/content", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg" } ]; var DROPDOWN_RESOURCES = [ { label: "Academy", href: "https://academy.bloomreach.com/" }, { label: "Resource Library", href: "https://www.bloomreach.com/en/library" }, { label: "Content Community", href: "https://community.bloomreach.com/" }, { label: "Support", href: "https://support.bloomreach.com/" }, { divider: true }, { label: "Bloomreach", href: "https://www.bloomreach.com/en" } ]; // Global listeners are added once and survive React re-renders // (they're on `document`, not on React-managed elements). var _globalDropdownListenersAdded = false; function initDropdowns() { if (window.innerWidth <= 768) return; // Desktop only var headerLinks = document.querySelectorAll(".rm-Header-top-link"); if (headerLinks.length === 0) return; // If both dropdowns already exist, nothing to do if (document.querySelectorAll(".br-header-dropdown").length >= 2) return; var productLink = null; var resourcesLink = null; // Step 1: Match by known text patterns headerLinks.forEach(function (link) { var text = link.textContent.trim().toLowerCase(); if (!productLink && (text === "sandbox" || text === "products" || text === "(product dropdown?)" || text === "engagement" || text === "marketing" || text === "discovery" || text === "content" || text === "clarity" || text === "data hub" || text === "data-hub")) { productLink = link; } if (!resourcesLink && (text.indexOf("resource") !== -1 || text === "(other resources dropdown?)")) { resourcesLink = link; } }); // Step 2: Fallback - positional matching (skip "Home" and utility links) if (!productLink || !resourcesLink) { var candidates = Array.prototype.slice.call(headerLinks).filter(function (l) { var t = l.textContent.trim().toLowerCase(); return t !== "" && t !== "home" && t.indexOf("demo") === -1 && t.indexOf("search") === -1 && t.indexOf("ask ai") === -1; }); if (!productLink && candidates.length >= 1) productLink = candidates[0]; if (!resourcesLink && candidates.length >= 2) resourcesLink = candidates[1]; } if (productLink) createDropdown(productLink, DROPDOWN_PRODUCTS); if (resourcesLink) createDropdown(resourcesLink, DROPDOWN_RESOURCES); // Global close listeners - added only once (on document, not React elements) if (!_globalDropdownListenersAdded) { _globalDropdownListenersAdded = true; document.addEventListener("click", function (e) { if (!e.target.closest(".br-header-dropdown") && !e.target.closest(".rm-Header-top-link")) { closeAllDropdowns(); } }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") { closeAllDropdowns(); } }); } console.log("[BRDropdowns] Header dropdowns initialized"); } function createDropdown(parentLink, items) { // Guard: don't duplicate if this link already has a dropdown if (parentLink.querySelector(".br-header-dropdown")) return; // Mark for CSS: suppress Engagement's :hover:after underline parentLink.classList.add("br-has-dropdown"); // Prevent default navigation on the trigger link parentLink.addEventListener("click", function (e) { if (e.target.closest(".br-header-dropdown")) return; // Let dropdown item clicks through e.preventDefault(); e.stopPropagation(); toggleDropdown(parentLink); }); // Add chevron indicator var chevron = document.createElement("span"); chevron.className = "br-dropdown-chevron"; parentLink.appendChild(chevron); // Build dropdown element var dropdown = document.createElement("div"); dropdown.className = "br-header-dropdown"; items.forEach(function (item) { if (item.divider) { var div = document.createElement("div"); div.className = "br-header-dropdown__divider"; dropdown.appendChild(div); return; } var a = document.createElement("a"); a.className = "br-header-dropdown__item"; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement("img"); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var span = document.createElement("span"); span.textContent = item.label; a.appendChild(span); if (item.external) { var ext = document.createElement("span"); ext.className = "br-header-dropdown__external"; ext.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:4px;vertical-align:middle;opacity:0.5"><path d="M3.5 1.5H10.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'; a.appendChild(ext); } dropdown.appendChild(a); }); // Position: set relative on parent for absolute dropdown positioning parentLink.style.position = "relative"; // Auto-detect left vs right nav for dropdown alignment // RIGHT SIDE NAV (sandbox): dropdown aligns right (CSS default) // LEFT SIDE NAV (engagement): dropdown aligns left var isRightNav = !!parentLink.closest('[class*="Header-right"]'); if (!isRightNav) { dropdown.style.left = "0"; dropdown.style.right = "auto"; } parentLink.appendChild(dropdown); // Highlight active product based on current URL slug var currentSlug = window.location.pathname.split("/")[1] || ""; if (currentSlug) { var allItems = dropdown.querySelectorAll(".br-header-dropdown__item"); allItems.forEach(function (el) { var href = el.getAttribute("href") || ""; var hrefPath = href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); var hrefSlug = hrefPath.split("/")[1] || ""; if (hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { el.classList.add("br-header-dropdown__item--active"); } }); } } function toggleDropdown(link) { var dropdown = link.querySelector(".br-header-dropdown"); var chevron = link.querySelector(".br-dropdown-chevron"); if (!dropdown) return; var wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); if (chevron) chevron.classList.add("is-open"); } } function closeAllDropdowns() { document.querySelectorAll(".br-header-dropdown.is-open").forEach(function (el) { el.classList.remove("is-open"); }); document.querySelectorAll(".br-dropdown-chevron.is-open").forEach(function (el) { el.classList.remove("is-open"); }); } /* ========================================================== SECTION 2B: MOBILE FLYOUT ENHANCEMENT ========================================================== Transforms Readme's native mobile flyout (hamburger menu) into grouped submenus with product icons, dividers, and active states. Replaces "Sandbox" ‚Üí "Products" heading and "Other resources" ‚Üí "Resources" heading. Uses the same DROPDOWN_PRODUCTS and DROPDOWN_RESOURCES arrays as the desktop dropdowns (Section 2). Guarded by `data-br-mobile-enhanced` attribute to prevent duplicate processing. Called from: - Hamburger click handler (Section 3, 300ms delay) - Repair loop (Phase 3, every 2s) - SPA navigation handler (resets and re-applies) ========================================================== */ function enhanceMobileFlyout() { if (window.innerWidth > 768) return; var flyout = document.querySelector('[class*="MobileFlyout"]'); if (!flyout) return; // Prevent duplicate processing if (flyout.getAttribute('data-br-mobile-enhanced') === 'true') return; var mobileItems = flyout.querySelectorAll('.rm-MobileFlyout-item'); if (!mobileItems.length) return; var currentSlug = window.location.pathname.split("/")[1] || ""; function getSlugFromHref(href) { if (!href) return ""; var hrefPath = href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); return hrefPath.split("/")[1] || ""; } function buildSubmenu(items) { var wrapper = document.createElement('div'); wrapper.className = 'br-mobile-submenu'; items.forEach(function (item) { if (item.divider) { var divider = document.createElement('div'); divider.className = 'br-mobile-submenu__divider'; wrapper.appendChild(divider); return; } var a = document.createElement('a'); a.className = 'br-mobile-submenu__item'; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement('img'); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var label = document.createElement('span'); label.className = 'br-mobile-submenu__label'; label.textContent = item.label; a.appendChild(label); if (item.external) { var ext = document.createElement('span'); ext.className = 'br-mobile-submenu__external'; ext.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:4px;vertical-align:middle;opacity:0.5"><path d="M3.5 1.5H10.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'; a.appendChild(ext); } var hrefSlug = getSlugFromHref(item.href); if (currentSlug && hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { a.classList.add('br-mobile-submenu__item--active'); } wrapper.appendChild(a); }); return wrapper; } var lowerHome = null; var sandboxLink = null; var resourcesLink = null; Array.prototype.forEach.call(mobileItems, function (item) { var text = (item.textContent || "").trim().toLowerCase(); var href = item.getAttribute('href') || ""; if (!lowerHome && text === "home" && href.indexOf("documentation.bloomreach.com") > -1) { lowerHome = item; } if (!sandboxLink && text === "sandbox") { sandboxLink = item; } if (!resourcesLink && text === "other resources") { resourcesLink = item; } }); // Replace Sandbox ‚Üí Products if (sandboxLink && !flyout.querySelector('.br-mobile-submenu--products')) { sandboxLink.textContent = 'Products'; sandboxLink.classList.add('br-mobile-flyout-heading'); sandboxLink.removeAttribute('href'); sandboxLink.removeAttribute('target'); sandboxLink.removeAttribute('to'); var productsMenu = buildSubmenu(DROPDOWN_PRODUCTS); productsMenu.classList.add('br-mobile-submenu--products'); sandboxLink.insertAdjacentElement('afterend', productsMenu); } // Replace Other resources ‚Üí Resources if (resourcesLink && !flyout.querySelector('.br-mobile-submenu--resources')) { resourcesLink.textContent = 'Resources'; resourcesLink.classList.add('br-mobile-flyout-heading'); resourcesLink.removeAttribute('href'); resourcesLink.removeAttribute('target'); resourcesLink.removeAttribute('to'); var resourcesMenu = buildSubmenu(DROPDOWN_RESOURCES); resourcesMenu.classList.add('br-mobile-submenu--resources'); resourcesLink.insertAdjacentElement('afterend', resourcesMenu); } flyout.setAttribute('data-br-mobile-enhanced', 'true'); console.log("[BR] Mobile flyout enhanced"); } /* ========================================================== SECTION 3: "GET A DEMO" BUTTON ========================================================== Injects a yellow "Get a demo" button into the header nav. Targets whichever container (rm-Header-left or rm-Header-right) actually holds the nav links. On mobile: hidden via CSS on the main nav, but injected into the flyout menu when the hamburger is clicked. NOTE: Readme's Group-level JS also injects a demo button, but it targets #ssr-main .navbar (Bootstrap secondary nav). Our button targets rm-Header-top (primary nav). Both have duplicate-prevention guards (!querySelector('.navbar-demo-button')). ========================================================== */ function initDemoButton() { var demoHtml = '<div class="navbar-demo-button">' + '<a href="https://www.bloomreach.com/en/request-demo" role="button" ' + 'class="btn btn-nav" target="_blank">' + '<span>Get a demo</span>' + '</a>' + '</div>'; // Find the container that holds nav links var headerLeft = document.querySelector('.rm-Header-top [class*="Header-left"]:not([class*="mobile"])'); var headerRight = document.querySelector('.rm-Header-top [class*="Header-right"]'); var target = null; if (headerLeft && headerLeft.querySelector('.rm-Header-top-link')) target = headerLeft; else if (headerRight && headerRight.querySelector('.rm-Header-top-link')) target = headerRight; // Inject only if container exists and button isn't already there. // Insert BEFORE the ThemeToggle (dark mode) so the order is: // [nav links] [Get a demo] [toggle] // The toggle should stay at the far right for visual consistency. if (target && !target.querySelector('.navbar-demo-button')) { var themeToggle = target.querySelector('[class*="ThemeToggle"]'); if (themeToggle) { themeToggle.insertAdjacentHTML('beforebegin', demoHtml); } else { target.insertAdjacentHTML('beforeend', demoHtml); } } // Hide any CMS-configured "Get a Demo" nav link to prevent duplication. // Some projects have a demo link added via CMS navigation settings. // Our styled yellow button replaces it visually. if (target) { var navLinks = target.querySelectorAll('.rm-Header-top-link'); navLinks.forEach(function (link) { var text = link.textContent.trim().toLowerCase(); var href = (link.getAttribute('href') || '').toLowerCase(); if ((text.indexOf('demo') > -1 || href.indexOf('demo') > -1) && !link.classList.contains('br-has-dropdown')) { link.style.display = 'none'; } }); } // Mobile: inject into flyout when hamburger is clicked // Broader selector covers multiple Readme button variations var hamburger = document.querySelector( '.rm-Header button[class*="menu"], .rm-Header button[aria-label*="menu"], .rm-Header button[aria-expanded]' ); if (hamburger && !hamburger._brDemoAttached) { hamburger.addEventListener('click', function () { setTimeout(function () { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (!flyout) return; if (!flyout.querySelector('.navbar-demo-button')) { flyout.insertAdjacentHTML('beforeend', demoHtml); } enhanceMobileFlyout(); }, 300); }); hamburger._brDemoAttached = true; } } /* ========================================================== SECTION 4: NATIVE SEARCH ENHANCEMENTS ========================================================== We use Readme's native (OOTB) search modal. This section applies the Bloomreach Sans font when the modal opens. Search filter pre-selection and "Hide Sandbox Project" are handled by Enterprise Group JS (applies to all projects). Uses a MutationObserver to detect when the search modal appears in the DOM, then applies font enhancement. ========================================================== */ var _searchObserverActive = false; function initSearchEnhancements() { if (_searchObserverActive) return; _searchObserverActive = true; // Watch for the native search modal appearing var observer = new MutationObserver(function (mutations) { for (var i = 0; i < mutations.length; i++) { var m = mutations[i]; if (!m.addedNodes) continue; for (var j = 0; j < m.addedNodes.length; j++) { var node = m.addedNodes[j]; if (node.nodeType !== 1) continue; var modal = null; if (node.classList && node.classList.contains("rm-SearchModal")) { modal = node; } else if (node.querySelector) { modal = node.querySelector(".rm-SearchModal"); } if (modal) { applySearchFont(modal); } } } }); observer.observe(document.body, { childList: true, subtree: true }); // Also check if modal already exists (e.g. after SPA navigation) var existing = document.querySelector(".rm-SearchModal"); if (existing) { applySearchFont(existing); } } function applySearchFont(modal) { // The font is applied via CSS (.rm-SearchModal and descendants). // This JS function is a safety net: if CSS hasn't loaded yet, // force the font inline. In practice, CSS handles this. modal.style.fontFamily = "'Bloomreach Sans', sans-serif"; } /* ========================================================== SECTION 5: HYDRATION-SAFE INITIALIZATION ========================================================== This section orchestrates the 3-phase initialization that prevents corrupting React's event handler tree. WHY THIS EXISTS: On the Refactored renderer, React SSR hydration fails with 38 pre-existing Error #418 mismatches. React falls back to full client-side re-rendering (Error #423). During this process, React tears down the server-rendered DOM and builds a fresh DOM tree. If our JS modifies elements during this window, React's re-render wipes our changes AND corrupts its own event handlers, breaking native features. HOW IT WORKS: Phase 1 runs immediately - but only does things that are safe (appending to <body>, global listeners). Phase 2 polls for .rm-Header-top-link elements. These are rendered by React, so their presence means React has finished its render cycle. An extra 500ms buffer ensures event handlers are bound. Then we apply our DOM modifications. Phase 3 runs a repair loop every 2 seconds. React's SPA navigation re-renders portions of the DOM, wiping our custom elements. The repair loop detects missing elements and re-applies them. ========================================================== */ var _brPhase2Complete = false; var _spaDetectionActive = false; var _repairLoopActive = false; /* ---------------------------------------------------------- Phase 1: Safe initialization Runs on DOMContentLoaded. Only does things that don't modify React-managed DOM: - Creates progress bar element (appended to <body>) - Sets up search modal observer (watches DOM, doesn't modify React) - Starts polling for React to finish ---------------------------------------------------------- */ function safeInit() { console.log("[BR] Phase 1: Safe initialization"); // 1a. Progress bar (element appended to <body>) initProgressBar(); // 1b. Native search enhancements (MutationObserver on <body>) initSearchEnhancements(); // 1c. Begin Phase 2: poll for React pollForReact(); } /* ---------------------------------------------------------- Phase 2: Wait for React to complete rendering Polls every 500ms for .rm-Header-top-link elements. These are rendered by React - their presence indicates the render cycle is complete. Waits up to 60 seconds. ---------------------------------------------------------- */ function pollForReact() { var attempts = 0; var maxAttempts = 120; // 500ms * 120 = 60 seconds max wait var checker = setInterval(function () { attempts++; var links = document.querySelectorAll(".rm-Header-top-link"); if (links.length > 0) { clearInterval(checker); console.log("[BR] Phase 2: React DOM detected (" + links.length + " header links, attempt " + attempts + ")"); // Extra 500ms: React may still be binding event handlers // after DOM elements appear. This buffer prevents us from // modifying elements that React is about to attach handlers to. setTimeout(applyDOMFeatures, 500); return; } if (attempts >= maxAttempts) { clearInterval(checker); console.warn("[BR] Phase 2: Timeout waiting for React render. Attempting init anyway."); applyDOMFeatures(); } }, 500); } /* ---------------------------------------------------------- Phase 2 execution: Apply features that modify React DOM Called once after React settles. Sets up: - Header dropdowns (modify .rm-Header-top-link) - Demo button (inject into header container) - Move nav links from left to right - 404 active link fix ---------------------------------------------------------- */ function applyDOMFeatures() { if (_brPhase2Complete) return; _brPhase2Complete = true; console.log("[BR] Phase 2: Applying DOM features"); moveNavToRight(); initDropdowns(); initDemoButton(); // 404 fix: on error pages, the active header link has // pointer-events: none which prevents clicking. Re-enable it. if (document.title.toLowerCase().indexOf("404") > -1) { var activeLink = document.querySelector(".rm-Header-bottom-link.active"); if (activeLink) activeLink.style.pointerEvents = "auto"; } // Start Phase 3 startRepairLoop(); initSPADetection(); console.log("[BR] All features initialized (hydration-safe)"); } /* ---------------------------------------------------------- Phase 3: Repair Loop Runs every 2 seconds. Checks if React re-rendered the header (wiping our dropdowns, demo button, etc.) and re-applies them if missing. This is essential because React's SPA navigation re-renders portions of the DOM. Our custom elements (which are children of React-managed elements like .rm-Header-top-link) get destroyed during these re-renders. Elements appended to <body> (progress bar) are NOT affected because they're outside React's tree. ---------------------------------------------------------- */ function startRepairLoop() { if (_repairLoopActive) return; _repairLoopActive = true; setInterval(function () { // Only repair if header links exist (page is fully rendered) var links = document.querySelectorAll(".rm-Header-top-link"); if (links.length === 0) return; // Page may be transitioning // Ensure nav links are in the right container moveNavToRight(); // Repair dropdowns var hasDropdowns = document.querySelectorAll(".br-header-dropdown").length > 0; if (!hasDropdowns) { initDropdowns(); } // Repair demo button if (!document.querySelector(".navbar-demo-button")) { initDemoButton(); } // Repair mobile flyout enhancement if (window.innerWidth <= 768) { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (flyout && flyout.getAttribute('data-br-mobile-enhanced') !== 'true') { enhanceMobileFlyout(); } } }, 2000); } /* ---------------------------------------------------------- SPA Navigation Detection Detects client-side page changes via two methods: 1. MutationObserver on <body> watching for URL changes (React Router uses history.pushState, not full reloads) 2. jQuery $(window).on("pageLoad") for Legacy renderer When navigation is detected, resets progress bar and re-applies features after a short delay (React needs time to render the new page content). ---------------------------------------------------------- */ function initSPADetection() { if (_spaDetectionActive) return; _spaDetectionActive = true; // Method 1: URL change detection via MutationObserver var lastUrl = window.location.href; var urlObserver = new MutationObserver(function () { if (window.location.href !== lastUrl) { lastUrl = window.location.href; onPageNavigate(); } }); urlObserver.observe(document.body, { childList: true, subtree: true }); // Method 2: jQuery pageLoad (Legacy platform only) if (typeof window.$ !== "undefined") { try { window.$(window).on("pageLoad", function () { onPageNavigate(); }); } catch (e) { /* jQuery not available */ } } } function onPageNavigate() { console.log("[BR] SPA navigation detected"); // Reset progress bar and scroll container detection resetProgressBar(); // Re-apply features after React finishes rendering new page // (delays give React time to complete its render cycle) setTimeout(function () { moveNavToRight(); initDemoButton(); // Reset and re-apply mobile flyout enhancement if (window.innerWidth <= 768) { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (flyout) { flyout.removeAttribute('data-br-mobile-enhanced'); enhanceMobileFlyout(); } } }, 500); setTimeout(function () { var existingDropdowns = document.querySelectorAll(".br-header-dropdown"); if (existingDropdowns.length === 0) { initDropdowns(); } }, 500); } /* ---------------------------------------------------------- ENTRY POINT Starts Phase 1 when DOM is ready (or immediately if already loaded). Phase 2 and 3 are triggered automatically. ---------------------------------------------------------- */ if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", safeInit); } else { safeInit(); } })(); /* ============================================================ LANDING PAGE JS ‚Äî Standalone Version (Refactored sandbox) Last updated: 2026-03-30 ============================================================ WHERE THIS GOES: Appearance > Custom JavaScript (append at end of existing JS) Pairs with: landing-page-v2.html (Custom Page body) GUARD: Only runs when body has class "hub-is-home" (landing page). REQUIRES: jQuery (loaded by Readme framework, polled via waitForJQuery) DO NOT USE ON ENTERPRISE: Enterprise Group Custom JS has a "jQuery is not defined" error that kills all subsequent code. Enterprise landing page uses inline onclick handlers instead (see landing-page-enterprise.html). ============================================================ */ (function() { if (!document.body.classList.contains('hub-is-home')) return; // Wait for jQuery (loaded by Readme framework) var jqAttempts = 0; function waitForJQuery(callback) { if (typeof jQuery !== 'undefined') { if (typeof $ === 'undefined') window.$ = jQuery; callback(); } else if (typeof $ !== 'undefined') { callback(); } else if (jqAttempts < 50) { jqAttempts++; setTimeout(function() { waitForJQuery(callback); }, 100); } } waitForJQuery(function() { // ===================== // MAIN INIT (after short delay for DOM to settle) // ===================== setTimeout(function() { $('.owl-carousel').css('visibility', 'visible'); $('.hero-section').css('visibility', 'visible'); $('.docs-bg-img-1, .docs-bg-img-2').css('visibility', 'visible'); $('#content-container').css({maxWidth: 'unset', margin: '0'}); $('#content-head').css('display', 'none'); $('.rm-LandingPageHeader').css('display', 'none'); $('.progress-bar').css('opacity', '0'); $('footer:not(.footer)').css('display', 'none'); $('.current-year').text(new Date().getFullYear()); // Add search button to hero that triggers Readme's native Cmd+K search // We create our own button instead of moving/cloning React elements, // so it survives React re-renders (e.g. theme switches) var searchDiv = $('.search'); if (searchDiv.length > 0 && searchDiv.find('.landing-search-btn').length === 0) { var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; var shortcutText = isMac ? '\u2318\u2013K' : 'Ctrl\u2013K'; var searchBtn = $( '<button class="landing-search-btn" type="button">' + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + '<circle cx="11" cy="11" r="8"></circle>' + '<line x1="21" y1="21" x2="16.65" y2="16.65"></line>' + '</svg>' + '<span class="landing-search-text">Search</span>' + '<span class="landing-search-shortcut">' + shortcutText + '</span>' + '</button>' ); searchBtn.on('click', function() { document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', code: 'KeyK', metaKey: isMac, ctrlKey: !isMac, bubbles: true })); }); searchDiv.append(searchBtn); } }, 500); // ===================== // CUSTOM NAVBAR ‚Äî click handlers // ===================== $('.navbar-toggler-icon').click(function() { $('#menuToggle, .menu-overlay').addClass('show'); $('body').addClass('overflow-hidden'); }); $('.hide-nav').click(function() { $('#menuToggle, .menu-overlay').removeClass('show'); $('body').removeClass('overflow-hidden'); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 100) $('.navbar').addClass('navbar-shadow'); else $('.navbar').removeClass('navbar-shadow'); }); $('.nav-item-dropdown').click(function(e) { e.stopPropagation(); $('.dropdown-menu-link-show').not($(this).find('.dropdown-menu-link')).removeClass('dropdown-menu-link-show'); $('.dropdown-img-show').not($(this).find('.dropdown-img')).removeClass('dropdown-img-show'); $(this).find('.dropdown-menu-link').toggleClass('dropdown-menu-link-show'); $(this).find('.dropdown-img').toggleClass('dropdown-img-show'); }); // NOTE: "Hide Sandbox Project" from search filters is now // handled by Enterprise Group JS (applies to all projects). // ===================== // DARK MODE // ===================== var setDarkMode = function() { setTimeout(function() { localStorage.setItem('color-scheme', 'dark'); $('html').attr('data-color-mode', 'dark'); }, 100); $('.dark-mode-btn').prop('checked', true); $('.rm-Logo .rm-Logo-img').attr('src', 'https://files.readme.io/0e23000-small-br_docs-secondary.png'); $('.footer .logo-footer-dark').removeClass('d-none'); $('.footer .logo-footer-white').addClass('d-none'); $('.dark-mode .dark-mode-span').html('Switch to light mode'); }; var setLightMode = function() { setTimeout(function() { localStorage.setItem('color-scheme', 'light'); $('html').attr('data-color-mode', 'light'); }, 100); $('.dark-mode-btn').prop('checked', false); $('.rm-Logo .rm-Logo-img').attr('src', 'https://files.readme.io/3bec36a-small-br_docs-primary.png'); $('.footer .logo-footer-white').removeClass('d-none'); $('.footer .logo-footer-dark').addClass('d-none'); $('.dark-mode .dark-mode-span').html('Switch to dark mode'); }; setTimeout(function() { var darkModeHTML = '<div class="dark-mode">' + '<input class="dark-mode-btn" type="checkbox" id="toggle-mode"/>' + '<svg class="light-mode-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#637288" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + '<circle cx="12" cy="12" r="5"></circle>' + '<line x1="12" y1="1" x2="12" y2="3"></line>' + '<line x1="12" y1="21" x2="12" y2="23"></line>' + '<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>' + '<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>' + '<line x1="1" y1="12" x2="3" y2="12"></line>' + '<line x1="21" y1="12" x2="23" y2="12"></line>' + '<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>' + '<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>' + '</svg>' + '<svg class="dark-mode-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="17" viewBox="0 0 15 17" fill="none">' + '<path d="M6.01727 2.21456C5.74516 3.37662 5.70818 4.58136 5.90851 5.75791C6.10884 6.93447 6.54243 8.05909 7.18378 9.06561C7.82512 10.0721 8.66127 10.9402 9.64305 11.6189C10.6248 12.2975 11.7324 12.773 12.9006 13.0173C12.2864 13.6528 11.5507 14.1585 10.7373 14.5042C9.92389 14.85 9.0493 15.0288 8.16545 15.0301C8.08352 15.0301 8.00039 15.033 7.91727 15.0301C6.37849 14.9759 4.90732 14.3843 3.75935 13.3582C2.61138 12.332 1.85915 10.9362 1.63334 9.41311C1.40753 7.89003 1.72242 6.33596 2.52329 5.02091C3.32416 3.70585 4.56041 2.7129 6.01727 2.21456ZM6.89424 0.78125C6.85939 0.781368 6.82462 0.784546 6.79033 0.79075C4.9002 1.12712 3.20132 2.15084 2.02079 3.66481C0.840265 5.17878 0.261553 7.07596 0.396077 8.99107C0.530602 10.9062 1.36885 12.7038 2.74944 14.0379C4.13002 15.372 5.95533 16.1481 7.87392 16.217C7.9713 16.2205 8.06867 16.217 8.16486 16.217C9.41111 16.2178 10.6392 15.9185 11.7454 15.3444C12.8515 14.7703 13.8031 13.9383 14.5198 12.9187C14.5778 12.8308 14.6117 12.7292 14.618 12.6241C14.6243 12.5189 14.6029 12.414 14.5557 12.3198C14.5086 12.2256 14.4375 12.1455 14.3496 12.0875C14.2616 12.0295 14.16 11.9957 14.0549 11.9895C12.8687 11.8854 11.7224 11.5099 10.7044 10.8921C9.68653 10.2743 8.8243 9.43077 8.1844 8.42661C7.5445 7.42245 7.14406 6.2846 7.01404 5.101C6.88402 3.9174 7.02789 2.71975 7.43455 1.60063C7.46914 1.51105 7.48183 1.4145 7.47156 1.31902C7.46128 1.22355 7.42834 1.13191 7.37548 1.05174C7.32261 0.971578 7.25136 0.905204 7.16765 0.858153C7.08394 0.811102 6.9902 0.784736 6.89424 0.78125Z" fill="#C3C7C8"/>' + '</svg>' + '<span class="dark-mode-span">Switch to dark mode</span>' + '</div>'; if ($('nav.navbar .dark-mode').length === 0) { $('nav.navbar').prepend(darkModeHTML); } $('.dark-mode').off('click').on('click', function() { if ($('.dark-mode-btn')[0].checked) { localStorage.removeItem('dark-mode'); setLightMode(); } else { localStorage.setItem('dark-mode', 'true'); setDarkMode(); } }); if (!!localStorage.getItem('dark-mode')) setDarkMode(); else setLightMode(); }, 500); // ===================== // DEMO BUTTON // ===================== setTimeout(function() { var navDemoButton = '<div class="navbar-demo-button">' + '<a href="https://www.bloomreach.com/en/request-demo" role="button" class="btn btn-nav" target="_blank">' + '<span>Get a Demo</span></a></div>'; if ($('#ssr-main .navbar .navbar-collapse .navbar-nav .navbar-demo-button').length === 0) { $('#ssr-main .navbar .navbar-collapse .navbar-nav').append(navDemoButton); } $('#ssr-main .navbar .navbar-toggler.collapsed').off('click').on('click', function() { setTimeout(function() { if ($('#ssr-main .navbar #menu .navbar-demo-button').length === 0) { $('#ssr-main .navbar #menu').append(navDemoButton); } }, 200); }); }, 600); }); // end waitForJQuery })();</article></body></html>

/* ============================================================ ENTERPRISE GROUP - CUSTOM JAVASCRIPT (Cleaned) ============================================================ This JS loads on ALL child projects AND the landing page BEFORE project-level JS. Contains: - External links ‚Üí new tab (Cash.js, guarded) - (Disabled: search filter pre-selection ‚Äî buggy, kept for reference) - Hide "Sandbox Project" from search filters - Temporary product-naming banner (homepage only, dismissible) - Header navigation dropdowns (vanilla JS) - "Get a Demo" button injection - Mobile flyout enhancement (headings + product/resource submenus) - "Did you mean" suggestions on 404 pages STYLING: this file only BUILDS the header elements. Their appearance (.br-header-dropdown, .br-dropdown-chevron, .navbar-demo-button, .btn-nav, .br-mobile-submenu*) is defined in Group Custom CSS, which also carries the header chrome for the new documentation layout. The two exceptions are the mobile flyout heading and demo-button rules, still injected inline below because they have to land at the same moment the flyout is enhanced. The global landing page ships its own hero/search wiring in its page HTML; nothing landing-page-specific belongs in this file. Dependencies: Cash.js (provided by Readme Refactored as $) NOTE: $ may NOT be available on the Enterprise landing page. All Cash.js code is guarded with typeof $ check. Dropdown/demo/flyout code is pure vanilla JS ‚Äî no $ needed. On project pages, project-level JS also runs dropdown code. All functions are idempotent (guards prevent duplicates). Last updated: 2026-09-03 ============================================================ */ // ============================================================ // OPENING EXTERNAL LINKS IN NEW TAB // Guarded: $ (Cash.js) may not exist on the landing page. // ============================================================ if (typeof $ !== 'undefined') { $(window).on('pageLoad', function () { setTimeout(function () { $('a[href^="http://"], a[href^="https://"]') .not('a[href*="god.gw.postman.com"]') .not('a[href*="' + location.hostname + '"]') .attr('target', '_blank'); }, 500); }); } // ============================================================ // SEARCH FILTER PRE-SELECTION ‚Äî DISABLED // // What it did: Auto-selected the current product filter in the search modal // (e.g. on Clarity pages, the "Clarity" filter would be pre-checked). // // Why it's disabled: This worked with our old Discovery-powered search which // had different DOM timing. With Readme's native search (Refactored renderer), // the polling interval (200ms) fires while the user is typing, causing the // filter to jump around and steal focus ‚Äî preventing users from typing queries. // // To fix: Would need to detect when the user is actively typing and pause // the filter pre-selection, or hook into Readme's search modal open event // instead of polling. // // Kept here for reference in case we want to revisit. // ============================================================ /* (function () { var PRODUCT_SLUG_MAP = { "engagement": "Engagement", "discovery": "Discovery", "content": "Content", "data-hub": "Data hub", "clarity": "Clarity" }; var filterPollId = null; var filterLastClickTime = 0; function startFilterPreselection(productName) { if (filterPollId) clearInterval(filterPollId); var idleCount = 0; filterPollId = setInterval(function () { var modal = document.querySelector('.rm-SearchModal'); if (!modal) { idleCount++; cleanup(); return; } var labels = modal.querySelectorAll('.Toggle-label.Toggle-label_md'); if (labels.length === 0) { idleCount++; cleanup(); return; } idleCount = 0; if (Date.now() - filterLastClickTime < 3000) return; for (var i = 0; i < labels.length; i++) { if (labels[i].textContent.trim().toLowerCase() === productName.toLowerCase()) { var checkbox = labels[i].closest('[class*="RefinementList-Item"]'); var input = checkbox ? checkbox.querySelector('input[type="checkbox"]') : null; if (input && input.checked) return; labels[i].click(); filterLastClickTime = Date.now(); return; } } function cleanup() { if (idleCount > 75) { clearInterval(filterPollId); filterPollId = null; } } }, 200); } var currentSlug = (window.location.pathname.split("/")[1] || "").toLowerCase(); var currentProduct = PRODUCT_SLUG_MAP[currentSlug] || null; if (currentProduct) startFilterPreselection(currentProduct); var lastUrl = window.location.href; var navObserver = new MutationObserver(function () { if (window.location.href !== lastUrl) { lastUrl = window.location.href; var newSlug = (window.location.pathname.split("/")[1] || "").toLowerCase(); var newProduct = PRODUCT_SLUG_MAP[newSlug] || null; if (newProduct) startFilterPreselection(newProduct); else if (filterPollId) { clearInterval(filterPollId); filterPollId = null; } } }); navObserver.observe(document.body, { childList: true, subtree: true }); })(); */ // ============================================================ // HIDE "SANDBOX PROJECT" FROM SEARCH FILTERS // ============================================================ (function () { var hidePollId = null; function hideSandboxFilter() { if (hidePollId) clearInterval(hidePollId); var idleCount = 0; hidePollId = setInterval(function () { var modal = document.querySelector('.rm-SearchModal'); if (!modal) { idleCount++; if (idleCount > 75) clearInterval(hidePollId); return; } var labels = modal.querySelectorAll('.Toggle-label.Toggle-label_md'); if (labels.length === 0) { idleCount++; if (idleCount > 75) clearInterval(hidePollId); return; } idleCount = 0; for (var i = 0; i < labels.length; i++) { if (labels[i].textContent.trim() === 'Sandbox Project') { var item = labels[i].closest('[class*="RefinementList-Item"]'); if (item && item.style.display !== 'none') item.style.display = 'none'; } } }, 200); } hideSandboxFilter(); var lastUrl = window.location.href; var navObs = new MutationObserver(function () { if (window.location.href !== lastUrl) { lastUrl = window.location.href; hideSandboxFilter(); } }); navObs.observe(document.body, { childList: true, subtree: true }); })(); // TEMP NAME CHANGE BANNER - HOMEPAGE ONLY // Safe to add globally. Uses unique IDs/classes to avoid conflicts with sub-project snippets. (function () { var HOMEPAGE_BANNER_ID = 'homepage-legal-naming-banner'; var HOMEPAGE_BANNER_STYLE_ID = 'homepage-legal-naming-banner-style'; var HOMEPAGE_BANNER_DISMISSED = false; function homepageBannerIsHomepageUrl() { return window.location.pathname === '/' || window.location.pathname === ''; } function homepageBannerRemoveExisting() { var existingBanner = document.getElementById(HOMEPAGE_BANNER_ID); if (existingBanner) existingBanner.remove(); } function homepageBannerInjectStyles() { if (document.getElementById(HOMEPAGE_BANNER_STYLE_ID)) return; var style = document.createElement('style'); style.id = HOMEPAGE_BANNER_STYLE_ID; style.textContent = ` .homepage-legal-naming-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 52px 11px 20px; background: #FFEB85; color: #000000; font-family: 'Bloomreach Sans', sans-serif !important; font-size: 14px; line-height: 1.4; text-align: center; } .homepage-legal-naming-banner a { color: #fff; text-decoration: underline; font-weight: 600; } .homepage-legal-naming-banner .homepage-lnb-icon { font-size: 16px; } .homepage-legal-naming-banner .homepage-lnb-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #000000; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; } .homepage-legal-naming-banner .homepage-lnb-close:hover, .homepage-legal-naming-banner .homepage-lnb-close:focus { opacity: 0.8; } `; document.head.appendChild(style); } function homepageBannerInsertIfNeeded() { var existingBanner = document.getElementById(HOMEPAGE_BANNER_ID); // This snippet is global, but the banner should only appear on the homepage. if (!homepageBannerIsHomepageUrl()) { if (existingBanner) existingBanner.remove(); return; } // Do not re-add after user closes it during this page session. if (HOMEPAGE_BANNER_DISMISSED) return; // Already present. if (existingBanner) return; var header = document.querySelector('header[class*="Header"]') || document.querySelector('header'); if (!header) return; homepageBannerInjectStyles(); var banner = document.createElement('div'); banner.id = HOMEPAGE_BANNER_ID; banner.className = 'homepage-legal-naming-banner'; banner.innerHTML = '📢' + 'Important: ' + 'We\'re updating product naming across our documentation. These changes do not alter the services, their functionality, or any terms of your agreement. Where you see a new name, it refers to the same product previously known by its former name.' + '' + ''; banner .querySelector('.homepage-lnb-close') .addEventListener('click', function () { HOMEPAGE_BANNER_DISMISSED = true; banner.remove(); }); header.insertAdjacentElement('afterend', banner); } function homepageBannerStart() { homepageBannerInsertIfNeeded(); var observer = new MutationObserver(function () { homepageBannerInsertIfNeeded(); }); observer.observe(document.body, { childList: true, subtree: true }); // Handle SPA navigation. var originalPushState = history.pushState; var originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(history, arguments); setTimeout(homepageBannerInsertIfNeeded, 0); }; history.replaceState = function () { originalReplaceState.apply(history, arguments); setTimeout(homepageBannerInsertIfNeeded, 0); }; window.addEventListener('popstate', function () { setTimeout(homepageBannerInsertIfNeeded, 0); }); } if (document.body) { homepageBannerStart(); } else { document.addEventListener('DOMContentLoaded', homepageBannerStart); } })(); // ============================================================ // HEADER NAVIGATION: DROPDOWNS, DEMO BUTTON, MOBILE FLYOUT // ============================================================ // Pure vanilla JS ‚Äî no Cash.js/jQuery dependency. // Runs on ALL pages including the landing page. // // All functions are idempotent: safe to call multiple times, // guards prevent duplicate dropdowns/buttons/flyout enhancements. // Project-level JS also contains this code ‚Äî guards ensure // whichever runs first creates the elements, the other skips. // // On the landing page: only Group JS runs ‚Üí creates dropdowns. // On project pages: Group JS runs first ‚Üí creates dropdowns, // then Project JS runs ‚Üí finds they exist ‚Üí skips. // ============================================================ (function () { "use strict"; var DROPDOWN_PRODUCTS = [ { label: "Loomi Connect", href: "https://documentation.bloomreach.com/loomi-connect/" //icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-engagement.svg" }, { label: "Marketing", href: "https://documentation.bloomreach.com/engagement/" //icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-engagement.svg" }, { label: "Search", href: "https://documentation.bloomreach.com/discovery" //icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-discovery.svg" }, { label: "Conversational agent", href: "https://documentation.bloomreach.com/clarity/" //icon: "https://files.readme.io/86f2117f3d000ce5757a79cb62c95c431430559e3e93bc99e3ad124a38893379-image_195.svg" }, { label: "Data hub", href: "https://documentation.bloomreach.com/data-hub" //icon: "https://files.readme.io/9c2182532f9a19070ca979e1cba270d6e4fabea769deeeee33c2fe6d29a747a9-image_196.svg" }, { label: "Content", href: "https://docs.content.bloomreach.com/", //icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg", external: true }, { label: "Content SaaS", href: "https://documentation.bloomreach.com/content" //icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg" } ]; var DROPDOWN_RESOURCES = [ // Support and Academy are swapped relative to the original order, // matching the card order at the foot of the landing page. { label: "Support", href: "https://support.bloomreach.com/hc/en-us" }, { label: "Resource Library", href: "https://www.bloomreach.com/en/library" }, { label: "Content Community", href: "https://community.bloomreach.com/" }, { label: "Academy", href: "https://academy.bloomreach.com/" }, { label: "Bloomreach", href: "https://www.bloomreach.com/en" } ]; var _globalDropdownListenersAdded = false; // ---------------------------------------------------------- // Move Nav Links to Right ‚Äî DISABLED // Nav links are now configured as Right Side Nav in Readme CMS settings, // so no JS move is needed. Removing this eliminates the "pop" on page load. function moveNavToRight() { /* no-op */ } // ---------------------------------------------------------- // Dropdown creation // ---------------------------------------------------------- // Where the top-bar links live. Readme nests them differently between // the classic and collapsible headers, so try the row that actually // holds a link first and fall back outwards. function navContainer() { // Prefer the row that already holds a REAL nav link, so injected // items sit exactly where Readme's own nav sits. // // Auth controls are skipped when choosing. On the landing page the // account dropdown / "Log In" button is the only .rm-Header-top-link // Readme renders, and it comes wrapped in its own single-item // container. Picking its parent put our injected nav inside that // wrapper — which the landing page then hides along with the auth // control, so both dropdowns disappeared. var links = document.querySelectorAll(".rm-Header-top .rm-Header-top-link"); for (var i = 0; i < links.length; i++) { var link = links[i]; if (link.classList.contains("Dropdown-toggle")) continue; if (link.classList.contains("rm-Header-top-link_login")) continue; if (link.parentNode) return link.parentNode; } // Otherwise use Readme's own header rows, never the auth wrapper. return document.querySelector('.rm-Header-top [class*="Header-right"]') || document.querySelector('.rm-Header-top [class*="Header-left"]') || document.querySelector(".rm-Header-top"); } // Returns a link to hang a dropdown on, creating one if Readme has not // rendered a suitable nav item. // // Previously this file only ever DECORATED links Readme already had, // and guessed when it could not find them by name. On the landing page // there are no product/resource nav items at all, so the guess either // grabbed the wrong link (it once relabelled a dropdown with the // signed-in user's email) or nothing appeared. Injecting the trigger // makes both dropdowns deterministic and independent of whatever nav // happens to be configured in Readme. function ensureNavLink(label) { var existing = document.querySelector('.br-injected-nav[data-br-nav="' + label + '"]'); if (existing && existing.isConnected) return existing; var container = navContainer(); if (!container) return null; var link = document.createElement("a"); link.className = "rm-Header-top-link br-injected-nav"; link.setAttribute("data-br-nav", label); link.setAttribute("role", "button"); link.setAttribute("tabindex", "0"); link.href = "#"; link.textContent = label; // Sit to the left of the demo pill and the theme toggle, matching the // Figma header order: nav links, "Get a Demo", theme. var demo = container.querySelector(".navbar-demo-button"); var theme = container.querySelector('[class*="ThemeToggle"]'); if (demo) container.insertBefore(link, demo); else if (theme) container.insertBefore(link, theme); else container.appendChild(link); return link; } function initDropdowns() { if (window.innerWidth <= 768) return; var headerLinks = document.querySelectorAll(".rm-Header-top-link"); // No length check: the landing page can legitimately have zero nav // links, and we inject our own below. A missing container means the // header has not rendered yet, which is the real reason to wait. if (!navContainer()) return; if (document.querySelectorAll(".br-header-dropdown").length >= 2) return; var productLink = null; var resourcesLink = null; headerLinks.forEach(function (link) { // Readme's own dropdowns (the account menu, the project switcher) // also carry .rm-Header-top-link. They are never ours to take // over, and the account one is what previously ended up labelled // with the signed-in user's email. if (link.classList.contains("Dropdown-toggle")) return; var text = link.textContent.trim().toLowerCase(); if (!productLink && ( text === "sandbox" || text === "products" || text === "(product dropdown?)" || text === "engagement" || text === "marketing" || text === "discovery" || text === "search" || text === "content" || text === "content brxm" || text === "content saas" || text === "clarity" || text === "conversational agent" || text === "data hub" || text === "data-hub" )) { productLink = link; } if (!resourcesLink && (text.indexOf("resource") !== -1 || text === "(other resources dropdown?)")) { resourcesLink = link; } }); // Nothing suitable in the header? Create the triggers ourselves. // This replaced a fallback that picked "whatever else is in the row", // which is how the account link (the user's email) once became the // "Other resources" dropdown. if (!productLink) productLink = ensureNavLink("Products"); if (!resourcesLink) resourcesLink = ensureNavLink("Other resources"); if (productLink) createDropdown(productLink, DROPDOWN_PRODUCTS); if (resourcesLink) createDropdown(resourcesLink, DROPDOWN_RESOURCES); if (!_globalDropdownListenersAdded) { _globalDropdownListenersAdded = true; document.addEventListener("click", function (e) { if (!e.target.closest(".br-header-dropdown") && !e.target.closest(".rm-Header-top-link")) { closeAllDropdowns(); } }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeAllDropdowns(); }); } } function createDropdown(parentLink, items) { if (parentLink.querySelector(".br-header-dropdown")) return; parentLink.classList.add("br-has-dropdown"); parentLink.addEventListener("click", function (e) { if (e.target.closest(".br-header-dropdown")) return; e.preventDefault(); e.stopPropagation(); toggleDropdown(parentLink); }); var chevron = document.createElement("span"); chevron.className = "br-dropdown-chevron"; parentLink.appendChild(chevron); var dropdown = document.createElement("div"); dropdown.className = "br-header-dropdown"; items.forEach(function (item) { var a = document.createElement("a"); a.className = "br-header-dropdown__item"; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement("img"); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var span = document.createElement("span"); span.textContent = item.label; a.appendChild(span); if (item.external) { var ext = document.createElement("span"); ext.className = "br-header-dropdown__external"; ext.innerHTML = ''; a.appendChild(ext); } dropdown.appendChild(a); }); parentLink.style.position = "relative"; var isRightNav = !!parentLink.closest('[class*="Header-right"]'); if (!isRightNav) { dropdown.style.left = "0"; dropdown.style.right = "auto"; } parentLink.appendChild(dropdown); var currentSlug = window.location.pathname.split("/")[1] || ""; if (currentSlug) { var allItems = dropdown.querySelectorAll(".br-header-dropdown__item"); allItems.forEach(function (el) { var href = el.getAttribute("href") || ""; var hrefPath = href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); var hrefSlug = hrefPath.split("/")[1] || ""; if (hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { el.classList.add("br-header-dropdown__item--active"); } }); } } function toggleDropdown(link) { var dropdown = link.querySelector(".br-header-dropdown"); var chevron = link.querySelector(".br-dropdown-chevron"); if (!dropdown) return; var wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); if (chevron) chevron.classList.add("is-open"); } } function closeAllDropdowns() { document.querySelectorAll(".br-header-dropdown.is-open").forEach(function (el) { el.classList.remove("is-open"); }); document.querySelectorAll(".br-dropdown-chevron.is-open").forEach(function (el) { el.classList.remove("is-open"); }); } // ---------------------------------------------------------- // Mobile Flyout Enhancement // ---------------------------------------------------------- // Readme's flyout markup is // .Flyout_overlay > .rm-Flyout > .MobileFlyout.rm-MobileFlyout // Only rm-MobileFlyout / rm-Flyout are stable; the rest are build // hashed. Try the semantic names first, then dig through the overlay. function findMobileFlyout() { var el = document.querySelector('.rm-MobileFlyout') || document.querySelector('[class*="MobileFlyout"]'); if (el) return el; var overlay = document.querySelector('[class*="Flyout_overlay"], .rm-Flyout'); if (!overlay) return null; return overlay.querySelector('[class*="MobileFlyout"]') || overlay.querySelector('.rm-Flyout') || overlay; } var _brFlyoutBusy = false; function enhanceMobileFlyout() { if (window.innerWidth > 768) return; if (_brFlyoutBusy) return; var flyout = findMobileFlyout(); if (!flyout) return; if (flyout.getAttribute('data-br-mobile-enhanced') === 'true') return; _brFlyoutBusy = true; try { buildMobileFlyout(flyout); } finally { _brFlyoutBusy = false; } } function buildMobileFlyout(flyout) { // Inject heading + demo button styles once if (!document.getElementById('br-mobile-flyout-styles')) { var style = document.createElement('style'); style.id = 'br-mobile-flyout-styles'; style.textContent = '.br-mobile-flyout-heading {' + ' pointer-events: none; cursor: default;' + ' font-weight: 600 !important; font-size: 16px !important;' + ' letter-spacing: normal; text-transform: none;' + ' padding: 12px 0 4px 10px !important;' + ' font-family: "BloomreachSans", "Bloomreach Sans", sans-serif !important;' + '}' + '[data-color-mode="dark"] .br-mobile-flyout-heading { color: #9ca3af !important; }' + '@media (prefers-color-scheme: dark) {' + ' [data-color-mode="system"] .br-mobile-flyout-heading { color: #9ca3af !important; }' + '}' + // Submenu styling. These also live in Group CSS for project // pages, but Group CSS does not reach the global landing page, // where the flyout would otherwise render as bare blue links. // Duplicated here so the menu is styled wherever it is built. '.br-mobile-submenu {' + ' display: flex; flex-direction: column;' + ' padding: 2px 0 10px 10px;' + '}' + '.br-mobile-submenu__item {' + ' display: flex; align-items: center; gap: 10px;' + ' padding: 10px 12px; border-radius: 10px;' + ' color: inherit !important; text-decoration: none !important;' + ' font-family: "BloomreachSans", "Bloomreach Sans", sans-serif;' + ' font-size: 15px; font-weight: 400;' + '}' + '.br-mobile-submenu__item:hover,' + '.br-mobile-submenu__item--active {' + ' background: rgba(127, 127, 127, .14);' + '}' + '.br-mobile-submenu__item--active { font-weight: 500; }' + '.br-mobile-submenu__item img { width: 18px; height: 18px; flex: none; }' + '.br-mobile-submenu__external {' + ' display: inline-flex; align-items: center; margin-left: auto;' + '}' + '[class*="MobileFlyout"] .navbar-demo-button {' + ' padding: 16px 20px 8px 20px;' + '}' + '[class*="MobileFlyout"] .navbar-demo-button .btn-nav {' + ' display: block; text-align: center;' + ' padding: 14px 32px !important;' + ' border-radius: 50px !important;' + ' font-size: 15px; font-weight: 600;' + ' font-family: "BloomreachSans", "Bloomreach Sans", sans-serif;' + ' background: #ffd500; color: #002840; border: none;' + ' text-decoration: none !important;' + '}' + '[class*="MobileFlyout"] .navbar-demo-button .btn-nav:hover {' + ' background: #f0c800;' + '}' + '[data-color-mode="dark"] [class*="MobileFlyout"] .navbar-demo-button .btn-nav {' + ' background: #ffd500; color: #002840;' + '}' + '@media (prefers-color-scheme: dark) {' + ' [data-color-mode="system"] [class*="MobileFlyout"] .navbar-demo-button .btn-nav {' + ' background: #ffd500; color: #002840;' + ' }' + '}'; document.head.appendChild(style); } var mobileItems = flyout.querySelectorAll('.rm-MobileFlyout-item'); // No length check. Project pages have nav items here and we convert // them in place; the global landing page has NONE, because Readme // renders no nav links for it — the same reason initDropdowns has to // inject its own triggers. Returning early here is what left the // landing page's hamburger without Products / Other resources. // The branches below already handle "not found" by injecting. // Live site order is: Products, Resources, logo, demo button. Readme // renders the logo inside the flyout, so anything we add goes above // it rather than being appended after it. function flyoutAppend(el) { var logo = flyout.querySelector('.rm-Logo'); var demo = flyout.querySelector('.navbar-demo-button'); var before = logo || demo; if (before) flyout.insertBefore(el, before); else flyout.appendChild(el); } var currentSlug = window.location.pathname.split("/")[1] || ""; function getSlugFromHref(href) { if (!href) return ""; return href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, "").split("/")[1] || ""; } function buildSubmenu(items) { var wrapper = document.createElement('div'); wrapper.className = 'br-mobile-submenu'; items.forEach(function (item) { var a = document.createElement('a'); a.className = 'br-mobile-submenu__item'; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement('img'); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var label = document.createElement('span'); label.className = 'br-mobile-submenu__label'; label.textContent = item.label; a.appendChild(label); if (item.external) { var ext = document.createElement('span'); ext.className = 'br-mobile-submenu__external'; ext.innerHTML = ''; a.appendChild(ext); } var hrefSlug = getSlugFromHref(item.href); if (currentSlug && hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { a.classList.add('br-mobile-submenu__item--active'); } wrapper.appendChild(a); }); return wrapper; } // Collect known product slugs from DROPDOWN_PRODUCTS var productSlugs = DROPDOWN_PRODUCTS.filter(function(p) { return p.href; }).map(function(p) { return p.href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, "").split("/")[1] || ""; }).filter(Boolean); var sandboxLink = null; var resourcesLink = null; Array.prototype.forEach.call(mobileItems, function (item) { var text = (item.textContent || "").trim().toLowerCase(); if (!sandboxLink && (text === "sandbox" || text === "products" || text.indexOf("product") !== -1)) sandboxLink = item; if (!resourcesLink && (text === "other resources" || text.indexOf("resource") !== -1)) resourcesLink = item; // Hide flyout items that duplicate products in the submenu (e.g. "Engagement", "Discovery") // Only hide root product links (/{slug} or /{slug}/), NOT subpages (/{slug}/docs/api-reference) var itemHref = (item.getAttribute('href') || ""); var itemPath = itemHref.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); var itemSegments = itemPath.split("/").filter(Boolean); var itemSlug = itemSegments[0] || ""; if (itemSlug && itemSegments.length <= 1 && productSlugs.indexOf(itemSlug.toLowerCase()) !== -1) { item.style.display = 'none'; } }); if (!flyout.querySelector('.br-mobile-submenu--products')) { if (sandboxLink) { sandboxLink.textContent = 'Products'; sandboxLink.classList.add('br-mobile-flyout-heading'); sandboxLink.removeAttribute('href'); sandboxLink.removeAttribute('target'); sandboxLink.removeAttribute('to'); var productsMenu = buildSubmenu(DROPDOWN_PRODUCTS); productsMenu.classList.add('br-mobile-submenu--products'); sandboxLink.insertAdjacentElement('afterend', productsMenu); } else { // Products item not found in flyout ‚Äî inject it var productsHeading = document.createElement('div'); productsHeading.className = 'rm-MobileFlyout-item br-mobile-flyout-heading'; productsHeading.textContent = 'Products'; var productsMenu = buildSubmenu(DROPDOWN_PRODUCTS); productsMenu.classList.add('br-mobile-submenu--products'); // Insert before Resources if it exists, otherwise at the end if (resourcesLink) { resourcesLink.parentNode.insertBefore(productsHeading, resourcesLink); resourcesLink.parentNode.insertBefore(productsMenu, resourcesLink); } else { flyoutAppend(productsHeading); flyoutAppend(productsMenu); } } } if (!flyout.querySelector('.br-mobile-submenu--resources')) { if (resourcesLink) { resourcesLink.textContent = 'Resources'; resourcesLink.classList.add('br-mobile-flyout-heading'); resourcesLink.removeAttribute('href'); resourcesLink.removeAttribute('target'); resourcesLink.removeAttribute('to'); var resourcesMenu = buildSubmenu(DROPDOWN_RESOURCES); resourcesMenu.classList.add('br-mobile-submenu--resources'); resourcesLink.insertAdjacentElement('afterend', resourcesMenu); } else { // Resources item not found ‚Äî inject it var resourcesHeading = document.createElement('div'); resourcesHeading.className = 'rm-MobileFlyout-item br-mobile-flyout-heading'; resourcesHeading.textContent = 'Resources'; var resourcesMenu = buildSubmenu(DROPDOWN_RESOURCES); resourcesMenu.classList.add('br-mobile-submenu--resources'); flyoutAppend(resourcesHeading); flyoutAppend(resourcesMenu); } } // Add "Get a Demo" button to flyout if not already present if (!flyout.querySelector('.navbar-demo-button')) { var demoDiv = document.createElement('div'); demoDiv.className = 'navbar-demo-button'; demoDiv.innerHTML = 'Get a demo'; flyout.appendChild(demoDiv); } flyout.setAttribute('data-br-mobile-enhanced', 'true'); } // ---------------------------------------------------------- // "Get a Demo" Button // ---------------------------------------------------------- function initDemoButton() { var demoHtml = ''; var headerLeft = document.querySelector('.rm-Header-top [class*="Header-left"]:not([class*="mobile"])'); var headerRight = document.querySelector('.rm-Header-top [class*="Header-right"]'); var target = null; if (headerLeft && headerLeft.querySelector('.rm-Header-top-link')) target = headerLeft; else if (headerRight && headerRight.querySelector('.rm-Header-top-link')) target = headerRight; if (target && !target.querySelector('.navbar-demo-button')) { var themeToggle = target.querySelector('[class*="ThemeToggle"]'); if (themeToggle) themeToggle.insertAdjacentHTML('beforebegin', demoHtml); else target.insertAdjacentHTML('beforeend', demoHtml); } if (target) { var navLinks = target.querySelectorAll('.rm-Header-top-link'); navLinks.forEach(function (link) { var text = link.textContent.trim().toLowerCase(); var href = (link.getAttribute('href') || '').toLowerCase(); if ((text.indexOf('demo') > -1 || href.indexOf('demo') > -1) && !link.classList.contains('br-has-dropdown')) { link.style.display = 'none'; } }); } // Hamburger click ‚Üí enhance flyout (demo button now handled inside enhanceMobileFlyout) var hamburger = document.querySelector( '.rm-Header button[class*="menu"], .rm-Header button[aria-label*="menu"], .rm-Header button[aria-expanded]' ); if (hamburger && !hamburger._brDemoAttached) { hamburger.addEventListener('click', function () { setTimeout(function () { enhanceMobileFlyout(); }, 300); }); hamburger._brDemoAttached = true; } } // ---------------------------------------------------------- // Initialization: poll for React, apply features, repair loop // Lighter than project JS (no progress bar, no search font). // Project JS has its own init with the same guards. // ---------------------------------------------------------- var _groupInitDone = false; function initGroupFeatures() { if (_groupInitDone) return; _groupInitDone = true; moveNavToRight(); initDropdowns(); initDemoButton(); enhanceMobileFlyout(); // Readme mounts the flyout only when the hamburger is pressed, and // the element is replaced on each open. Relying on catching that // click (and a fixed 300ms delay afterwards) meant the landing page's // flyout could open before we ever filled it — it just showed empty. // Watching the tree instead fires the moment the flyout appears, no // matter what opened it. _brFlyoutBusy stops our own insertions from // re-entering, and the data-br-mobile-enhanced flag stops repeats. if (window.MutationObserver && document.body) { var flyoutPending = null; new MutationObserver(function () { if (window.innerWidth > 768) return; if (flyoutPending) return; flyoutPending = setTimeout(function () { flyoutPending = null; var f = findMobileFlyout(); if (f && f.getAttribute('data-br-mobile-enhanced') !== 'true') { enhanceMobileFlyout(); } }, 60); }).observe(document.body, { childList: true, subtree: true }); } // Repair loop ‚Äî re-applies if React wipes our elements setInterval(function () { // Gate on the header being present, not on Readme having links — // the landing page has none of its own and relies on injection. if (!navContainer()) return; moveNavToRight(); if (document.querySelectorAll(".br-header-dropdown").length === 0) { initDropdowns(); } if (!document.querySelector(".navbar-demo-button")) { initDemoButton(); } if (window.innerWidth <= 768) { var flyout = findMobileFlyout(); if (flyout && flyout.getAttribute('data-br-mobile-enhanced') !== 'true') { enhanceMobileFlyout(); } } }, 2000); // SPA navigation detection var lastUrl = window.location.href; var urlObserver = new MutationObserver(function () { if (window.location.href !== lastUrl) { lastUrl = window.location.href; setTimeout(function () { moveNavToRight(); initDemoButton(); if (window.innerWidth <= 768) { var flyout = findMobileFlyout(); if (flyout) { flyout.removeAttribute('data-br-mobile-enhanced'); enhanceMobileFlyout(); } } }, 500); setTimeout(function () { if (document.querySelectorAll(".br-header-dropdown").length === 0) { initDropdowns(); } }, 500); } }); urlObserver.observe(document.body, { childList: true, subtree: true }); } // ---------------------------------------------------------- // Keep the header in step with the viewport // ---------------------------------------------------------- // initDropdowns() bails below 768px, so after a reload at phone width // the injected triggers are never created — correct. But RESIZING from // desktop leaves the ones already in the DOM behind, and hiding them // was left entirely to a Group CSS media query. Group CSS is documented // as loading on child projects, and the landing page is not one, which // is why they lingered there until a refresh. // // Doing it here makes the behaviour independent of which stylesheet // loaded: crossing the breakpoint removes them, crossing back rebuilds // them. Only acts on an actual crossing, so dragging a window does not // thrash the DOM. var _brWasMobile = window.innerWidth <= 768; function syncHeaderForViewport() { var isMobile = window.innerWidth <= 768; if (isMobile === _brWasMobile) return; _brWasMobile = isMobile; if (isMobile) { closeAllDropdowns(); var injected = document.querySelectorAll(".br-injected-nav"); Array.prototype.forEach.call(injected, function (el) { if (el.parentNode) el.parentNode.removeChild(el); }); // The flyout carries the same two menus at this width; let it // rebuild against the current viewport next time it opens. var flyout = findMobileFlyout(); if (flyout) flyout.removeAttribute('data-br-mobile-enhanced'); } else { initDropdowns(); initDemoButton(); } } var _brResizeTimer = null; window.addEventListener("resize", function () { if (_brResizeTimer) clearTimeout(_brResizeTimer); _brResizeTimer = setTimeout(syncHeaderForViewport, 150); }); window.addEventListener("orientationchange", syncHeaderForViewport); // Poll for the React-rendered header. Waiting on .rm-Header-top-link // stalled the landing page for the full 60s timeout, because that page // has no nav links of its own — the container is the right signal. var attempts = 0; var checker = setInterval(function () { attempts++; if (navContainer()) { clearInterval(checker); setTimeout(initGroupFeatures, 500); return; } if (attempts >= 120) { // 60s timeout clearInterval(checker); initGroupFeatures(); } }, 500); })(); // Whats next on the 404 pages (() => { // --- Config --- const MAX_RESULTS = 3; // how many suggestions to show const MAX_DISTANCE = 12; // drop matches that are too far (tune per site) const CACHE_TTL = 6 * 60 * 60 * 1000; // 6h cache lifetime for sitemap + titles const SITEMAP_KEY = 'dym:sitemap'; const TITLE_PREFIX = 'dym:title:'; const BLOCK_ID = 'dym-suggestions'; const POLL_INTERVAL = 250; // cold-start fallback poll const POLL_MAX_TRIES = 40; // ~10s of polling before giving up // --- Robust 404 detection --- // Don't depend on the exact text: some sites use "404", // others use "Page not found". Match on URL path or the native section. const is404 = () => /(^|\/)404(\/|$)/.test(location.pathname) || document.title.startsWith('404') || [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].some(h => /browse similar/i.test(h.textContent)); // --- Levenshtein distance (two-row implementation) --- const levenshtein = (a, b) => { if (a === b) return 0; if (!a.length) return b.length; if (!b.length) return a.length; let prev = [...Array(b.length + 1).keys()]; let cur = new Array(b.length + 1); for (let i = 0; i < a.length; i++) { cur[0] = i + 1; for (let j = 0; j < b.length; j++) { const cost = a[i] === b[j] ? 0 : 1; cur[j + 1] = Math.min(cur[j] + 1, prev[j + 1] + 1, prev[j] + cost); } [prev, cur] = [cur, prev]; } return prev[b.length]; }; // --- Tiny localStorage cache helpers (TTL-based, fail-safe) --- const cacheGet = (key) => { try { const raw = localStorage.getItem(key); if (!raw) return null; const { v, exp } = JSON.parse(raw); if (Date.now() > exp) { localStorage.removeItem(key); return null; } return v; } catch (e) { return null; } }; const cacheSet = (key, value, ttl = CACHE_TTL) => { try { localStorage.setItem(key, JSON.stringify({ v: value, exp: Date.now() + ttl })); } catch (e) { /* quota or disabled storage — ignore */ } }; const pathOf = (u) => { try { return new URL(u).pathname; } catch { return u; } }; const esc = (s) => s.replace(/[&<>"]/g, ch => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[ch])); let building = false; // guard against concurrent builds let debounce; // observer debounce timer const schedule = () => { clearTimeout(debounce); debounce = setTimeout(render, 80); }; // --- Core render: idempotent, safe to call any number of times --- async function render() { if (!is404()) return; if (document.getElementById(BLOCK_ID)) return; // already present -> no-op if (building) return; // Insertion point: native "Browse similar pages" section, with fallbacks const heads = [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]; const browse = heads.find(h => /browse similar/i.test(h.textContent)); const section = document.querySelector('section.recommendations') || (browse && browse.parentElement) || document.querySelector('main'); if (!section) return; // section not rendered yet — observer/poll will retry building = true; try { // Copy the native link styling so suggestions look identical const refLink = [...document.querySelectorAll('a')] .find(a => /documentation homepage/i.test(a.textContent)); const rcs = refLink ? getComputedStyle(refLink) : null; const linkStyle = rcs ? `color:${rcs.color};text-decoration:underline;text-decoration-color:${rcs.textDecorationColor};font-weight:${rcs.fontWeight};` : 'color:#06bcd4;text-decoration:underline;font-weight:500;'; // Load and parse the sitemap (cached) let locs = cacheGet(SITEMAP_KEY); if (!locs) { const res = await fetch(`${location.origin}/sitemap.xml`); if (!res.ok) return; const doc = new DOMParser().parseFromString(await res.text(), 'application/xml'); locs = [...doc.querySelectorAll('loc')].map(n => n.textContent.trim()).filter(Boolean); cacheSet(SITEMAP_KEY, locs); } if (!locs || !locs.length) return; // Compare by path (not full URL) and apply a distance threshold const currentPath = pathOf(location.href); const closest = locs .filter(u => pathOf(u) !== currentPath) .map(u => ({ url: u, distance: levenshtein(currentPath, pathOf(u)) })) .filter(c => c.distance <= MAX_DISTANCE) .sort((a, b) => a.distance - b.distance) .slice(0, MAX_RESULTS); if (!closest.length) return; // Resolve a human-readable title per candidate (cached, with fallback) const siteSuffix = / [|\-–—] [^|\-–—]+$/; // strip trailing " — Site Name" const titleCaseFromPath = (p) => { const slug = p.split('/').filter(Boolean).pop() || p; return slug.replace(/[-_]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); }; await Promise.all(closest.map(async (c) => { const path = pathOf(c.url); const cached = cacheGet(TITLE_PREFIX + path); if (cached) { c.title = cached; return; } try { const r = await fetch(c.url); if (!r.ok) throw 0; const d = new DOMParser().parseFromString(await r.text(), 'text/html'); const t = ( d.querySelector('meta[property="og:title"]')?.getAttribute('content') || d.title || d.querySelector('h1')?.textContent || '' ).trim().replace(siteSuffix, '').trim(); c.title = t && t.length > 1 ? t : titleCaseFromPath(path); } catch (e) { c.title = titleCaseFromPath(path); } cacheSet(TITLE_PREFIX + path, c.title); })); // Re-check: the SPA may have re-rendered while we awaited the fetches if (document.getElementById(BLOCK_ID)) return; const liveSection = document.querySelector('section.recommendations') || section; if (!liveSection || !liveSection.isConnected) return; // stale node -> retry in finally // Render the block (list only, no "Did you mean:" heading) const box = document.createElement('div'); box.id = BLOCK_ID; box.style.cssText = 'margin-top:0.5rem;'; box.innerHTML = ` <ul style="margin:.5rem 0 0;padding-left:1.25rem;list-style:disc;"> ${closest.map(c => `<li style="margin:.25rem 0;"><a href="${esc(c.url)}" style="${linkStyle}">${esc(c.title)}</a></li>` ).join('')} </ul>`; liveSection.appendChild(box); } catch (e) { /* fail silently — this is a progressive enhancement */ } finally { building = false; // KEY FIX: if the block still isn't present (section replaced mid-build, or // a fetch failed), schedule another attempt. if (is404() && !document.getElementById(BLOCK_ID)) schedule(); } } // --- Self-healing: re-render on any DOM change (debounced) --- const startObserver = () => { const root = document.getElementById('ssr-main') || document.querySelector('.App') || document.querySelector('main') || document.body; new MutationObserver(schedule).observe(root, { childList: true, subtree: true }); }; // --- Cold-start fallback: poll briefly until the block appears --- const startPolling = () => { let tries = 0; const id = setInterval(() => { tries++; if (document.getElementById(BLOCK_ID) || tries > POLL_MAX_TRIES) { clearInterval(id); return; } render(); }, POLL_INTERVAL); }; // --- Hook SPA route changes (pushState/replaceState/popstate) --- const hookHistory = (method) => { const orig = history[method]; history[method] = function (...args) { const r = orig.apply(this, args); schedule(); return r; }; }; hookHistory('pushState'); hookHistory('replaceState'); window.addEventListener('popstate', schedule); // --- Boot --- const boot = () => { startObserver(); startPolling(); render(); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } })(); /* ============================================================ BLOOMREACH DOCUMENTATION - CONSOLIDATED JS (Hydration-Safe) VERSION: Refactored-HydrationSafe-JS ============================================================ Compatible with: Refactored renderer (React SSR + hydration) Also works on: Legacy renderer (jQuery/Owl) Location: Readme.io > Project Settings > Custom JavaScript ============================================================ KEY LEARNINGS & ARCHITECTURE NOTES ============================================================ 1. REACT HYDRATION CONFLICT (Critical) ---------------------------------------- The Refactored Readme renderer uses React Server-Side Rendering (SSR). The page arrives as fully-rendered HTML, then React "hydrates" it by attaching event handlers to the existing DOM. PROBLEM: Readme.io has pre-existing hydration bugs - React Error #418 (hydration mismatch) and #423 (fatal fallback). These cause React to ABANDON hydration and do a FULL CLIENT-SIDE RE-RENDER. This means: - React tears down the server-rendered DOM - React builds a brand-new DOM from scratch - All event handlers are attached to the NEW elements If our custom JS modifies the DOM BEFORE or DURING this process: - Our modifications get wiped by the re-render - React's event handler tree gets corrupted - Native features break (search, navigation, Tabs component) - DOMContentLoaded already fired, so our code never re-runs SOLUTION: This version uses a 3-phase initialization: Phase 1 (Immediate): Features that append to <body> (outside React's tree) Phase 2 (After React): Poll for React-rendered elements, then modify DOM Phase 3 (Ongoing): Repair loop re-applies modifications if React wipes them 2. HOW CUSTOM CODE IS DELIVERED -------------------------------- On Legacy renderer: Code is injected as raw <script>/<style> tags. On Refactored renderer: Code is embedded as JSON strings in the server-rendered HTML payload (fields `stylesheet_hub2` for CSS, `javascript_hub2` for JS). React's rendering pipeline processes this data and injects the code. This means: - The code IS in the page source (confirmed via fetch()) - But it's NOT in raw <script> tags - it's in a JSON data blob - React controls when/how the code actually executes 3. STABLE SELECTORS -------------------- Both Legacy and Refactored renderers use the SAME stable `rm-` prefixed CSS classes. These are safe to target: .rm-Header, .rm-Header-top, .rm-Header-top-link, .rm-Header-left, .rm-Header-right, .rm-SearchToggle, .rm-Header-bottom, .rm-Header-bottom-link, .rm-Sidebar, .rm-Article, .rm-Container, .rm-SearchModal, .rm-AskAi-button, .rm-MobileFlyout-item, .rm-Logo The Refactored renderer ALSO has CSS-module hashed classes (e.g., NavItem-item1gDDTqaXGhm1) but these are unstable and should NOT be targeted. Stick to `rm-` prefixed classes. 4. LEFT vs RIGHT NAV --------------------- Readme.io projects can configure nav links in either rm-Header-left or rm-Header-right. This is set in the CMS (LEFT SIDE NAV vs RIGHT SIDE NAV in project settings). The dropdown positioning auto-detects which side is used. Some projects (e.g., Engagement) also have a "Home" link as the first item - the fallback logic excludes it. 5. GROUP-LEVEL CODE -------------------- Readme group settings (dash.readme.com/group/bloomreach/) contain global CSS, JS, and HTML that applies to ALL projects. The Group JS already injects a "Get a Demo" button targeting #ssr-main .navbar (Bootstrap secondary nav). Our project-level code targets .rm-Header-top (primary nav). On production, BOTH may run. The demo button injection is guarded to prevent duplicates. 6. ADMIN IFRAME ---------------- When logged in as admin on the Refactored renderer, the actual page content is inside an iframe (title="Hub Preview", ?isFramePreview=true). The admin toolbar is outside this iframe. When debugging via browser DevTools, make sure to select the iframe context. 7. CDN PROPAGATION ------------------- After saving JS in the CMS editor, changes take several minutes to propagate via CDN. CSS propagates faster. Don't panic if changes don't appear immediately - wait 3-5 minutes and hard-refresh. 8. SEARCH APPROACH ------------------- This version uses the native Readme search (OOTB Algolia-based). We do NOT replace it with a custom Bloomreach Discovery search. Our JS only enhances the native search by: - Applying Bloomreach Sans font to the search modal - Auto-selecting the product filter based on the current URL slug Last updated: 2026-03-30 ============================================================ */ (function () { "use strict"; /* ========================================================== SECTION 1: READING PROGRESS BAR ========================================================== Shows a thin colored bar at the top of the page indicating scroll progress through the article. Two scroll modes: - Window scroll: Used on Legacy renderer (page scrolls natively) - Container scroll: Used on Refactored renderer where content scrolls inside a container div, not the window itself. The container is auto-detected by walking up from .rm-Article and finding the first ancestor with overflow:auto/scroll. The progress bar element is appended to <body> (outside React's tree), so it survives re-renders. The container detection uses setInterval polling because the container may not exist yet when initProgressBar() runs (React hasn't rendered it yet). ========================================================== */ var progressBar = null; var containerScrollActive = false; var _scrollContainerAttached = false; function initProgressBar() { if (progressBar) return; progressBar = document.createElement("div"); progressBar.className = "br-progress-bar"; document.body.appendChild(progressBar); // Shared scroll handler for both window and container modes function onScroll(scrollTop, scrollHeight) { if (scrollHeight <= 0) { progressBar.style.width = "0%"; return; } var progress = (scrollTop / scrollHeight) * 100; progressBar.style.width = (scrollTop > 50) ? progress + "%" : "0%"; } // Window scroll - works on Legacy and platforms using native page scroll window.addEventListener("scroll", function () { if (containerScrollActive) return; // Container mode takes priority var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; onScroll(scrollTop, docHeight); }); // Find the scrollable container ancestor of the article. // On Refactored renderer, Readme scrolls inside a container div. function findScrollContainer() { var article = document.querySelector(".rm-Article"); if (!article) return null; var el = article.parentElement; while (el && el !== document.body) { var style = window.getComputedStyle(el); var overflow = style.overflow + style.overflowY; if ((overflow.indexOf("auto") > -1 || overflow.indexOf("scroll") > -1) && el.scrollHeight > el.clientHeight) { return el; } el = el.parentElement; } return null; } // Poll for scrollable container (re-runs after SPA navigation resets flags) setInterval(function () { if (_scrollContainerAttached) return; var container = findScrollContainer(); if (container && !container._brProgressAttached) { container._brProgressAttached = true; _scrollContainerAttached = true; containerScrollActive = true; container.addEventListener("scroll", function () { onScroll(container.scrollTop, container.scrollHeight - container.clientHeight); }); } }, 500); } // Reset progress bar on SPA navigation. // Also resets container detection so it re-finds the container // after React re-renders the page content. function resetProgressBar() { if (progressBar) { progressBar.style.width = "0%"; } containerScrollActive = false; _scrollContainerAttached = false; } // TEMP NAME CHANGE BANNER (function () { // Flag: skip banner on homepage URLs like https://example.com/ or https://example.com var SKIP_BANNER_ON_HOMEPAGE = true; // Prevent re-inserting after the user closes it var bannerDismissed = false; function isHomepage() { return window.location.pathname === '/' || window.location.pathname === ''; } // --- Styles (inject once) --- if (!document.getElementById('legal-naming-banner-style')) { var style = document.createElement('style'); style.id = 'legal-naming-banner-style'; style.textContent = ` .legal-naming-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 52px 11px 20px; background: #FFEB85; color: #000000; font-family: 'Bloomreach Sans', sans-serif !important; font-size: 14px; line-height: 1.4; text-align: center; } .legal-naming-banner a { color: #fff; text-decoration: underline; font-weight: 600; } .legal-naming-banner .lnb-icon { font-size: 16px; } .legal-naming-banner .lnb-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #000000; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; } .legal-naming-banner .lnb-close:hover, .legal-naming-banner .lnb-close:focus { opacity: 0.8; } `; document.head.appendChild(style); } function insertBanner() { var existingBanner = document.getElementById('legal-naming-banner'); // Do not show on homepage if the flag is enabled if (SKIP_BANNER_ON_HOMEPAGE && isHomepage()) { if (existingBanner) existingBanner.remove(); return; } // Do not re-add after the user closes it if (bannerDismissed) return; // Already present and still attached? do nothing if (existingBanner) return; var header = document.querySelector('header[class*="Header"]') || document.querySelector('header'); if (!header) return; var banner = document.createElement('div'); banner.id = 'legal-naming-banner'; banner.className = 'legal-naming-banner'; banner.innerHTML = '<span class="lnb-icon">📢</span>' + '<span><strong>Important:</strong> ' + "We're updating product naming across our documentation (\"Engagement\" is now \"Marketing\"). These changes do not alter the services, their functionality, or any terms of your agreement. Where you see a new name, it refers to the same product previously known by its former name." + '</span>' + '<button type="button" class="lnb-close" aria-label="Close banner">×</button>'; banner.querySelector('.lnb-close').addEventListener('click', function () { bannerDismissed = true; banner.remove(); }); header.insertAdjacentElement('afterend', banner); } // Try immediately... insertBanner(); // ...and keep re-inserting whenever React re-renders / user navigates in the SPA. var observer = new MutationObserver(function () { insertBanner(); }); observer.observe(document.body, { childList: true, subtree: true }); })(); /* ========================================================== SECTION 2: HEADER NAVIGATION DROPDOWNS ========================================================== Adds dropdown menus to header nav links (Products & Resources). Desktop only (hidden on mobile via CSS). How links are matched: 1. First tries text content matching against known labels (sandbox, products, engagement, etc.) 2. Falls back to positional matching: filters out "Home", "Demo", "Search", "Ask AI" links, then takes first two remaining as product/resources links. Dropdown positioning auto-detects whether the nav links are in rm-Header-left or rm-Header-right and positions accordingly. This handles the difference between projects that use LEFT SIDE NAV (like Engagement) vs RIGHT SIDE NAV (like Sandbox). All functions are RE-ENTRANT (safe to call multiple times): - createDropdown() checks if dropdown already exists on the link - Global close listeners are added only once - The repair loop calls initDropdowns() periodically ========================================================== */ /* ---------------------------------------------------------- Move Nav Links to Right CMS nav buttons are configured in the Left section (for consistency across all projects) but should appear visually on the right. This moves .rm-Header-top-link elements from rm-Header-left to rm-Header-right at runtime. Idempotent: skips if links are already in right. COMPANION CSS (Section 9B): [class*="Header-left"]:not([class*="mobile"]) > .rm-Header-top-link { display: none !important; } This hides links while in Header-left (FOUC prevention). Once moved to Header-right, the selector no longer matches -> visible. Do NOT modify one without the other. KNOWN BEHAVIOUR: ~1s pop-in delay on initial page load. This function runs in Phase 2 (after React hydration), not Phase 1, because moving DOM nodes before React hydrates would cause a hydration mismatch -> React re-renders -> links reset to Header-left. The CSS keeps them hidden during this wait, so the trade-off is a brief delay rather than a visible left->right flash. Moving it to Phase 1 was considered but rejected: React would undo the move during re-render, and the repair loop (2s interval) would re-move them - causing a second pop-in. ---------------------------------------------------------- */ function moveNavToRight() { var headerLeft = document.querySelector('.rm-Header-top [class*="Header-left"]:not([class*="mobile"])'); var headerRight = document.querySelector('.rm-Header-top [class*="Header-right"]'); if (!headerLeft || !headerRight) return; var leftLinks = headerLeft.querySelectorAll('.rm-Header-top-link'); var rightLinks = headerRight.querySelectorAll('.rm-Header-top-link'); // Only move if links are in left and not already in right if (leftLinks.length === 0 || rightLinks.length > 0) return; // Insert before Search/ThemeToggle to maintain correct visual order var insertRef = headerRight.querySelector('[class*="Header-search"], [class*="ThemeToggle"]'); Array.prototype.slice.call(leftLinks).forEach(function(link) { if (insertRef) { headerRight.insertBefore(link, insertRef); } else { headerRight.appendChild(link); } }); console.log("[BR] Nav links moved from Header-left to Header-right"); } var DROPDOWN_PRODUCTS = [ { label: "Marketing", href: "https://documentation.bloomreach.com/engagement/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-engagement.svg" }, { label: "Search", href: "https://documentation.bloomreach.com/discovery/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-discovery.svg" }, { label: "Conversational agent", href: "https://documentation.bloomreach.com/clarity/", icon: "https://files.readme.io/86f2117f3d000ce5757a79cb62c95c431430559e3e93bc99e3ad124a38893379-image_195.svg" }, { label: "Data hub", href: "https://documentation.bloomreach.com/data-hub/", icon: "https://files.readme.io/9c2182532f9a19070ca979e1cba270d6e4fabea769deeeee33c2fe6d29a747a9-image_196.svg" }, { divider: true }, { label: "Content management", href: "https://xmdocumentation.bloomreach.com/", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg", external: true }, { label: "Content SaaS", href: "https://documentation.bloomreach.com/content", icon: "https://br-cms.bloomreach.com/site/binaries/content/gallery/newbloomreach/assets/br-experience-content.svg" } ]; var DROPDOWN_RESOURCES = [ { label: "Academy", href: "https://academy.bloomreach.com/" }, { label: "Resource Library", href: "https://www.bloomreach.com/en/library" }, { label: "Content Community", href: "https://community.bloomreach.com/" }, { label: "Support", href: "https://support.bloomreach.com/" }, { divider: true }, { label: "Bloomreach", href: "https://www.bloomreach.com/en" } ]; // Global listeners are added once and survive React re-renders // (they're on `document`, not on React-managed elements). var _globalDropdownListenersAdded = false; function initDropdowns() { if (window.innerWidth <= 768) return; // Desktop only var headerLinks = document.querySelectorAll(".rm-Header-top-link"); if (headerLinks.length === 0) return; // If both dropdowns already exist, nothing to do if (document.querySelectorAll(".br-header-dropdown").length >= 2) return; var productLink = null; var resourcesLink = null; // Step 1: Match by known text patterns headerLinks.forEach(function (link) { var text = link.textContent.trim().toLowerCase(); if (!productLink && (text === "sandbox" || text === "products" || text === "(product dropdown?)" || text === "engagement" || text === "marketing" || text === "discovery" || text === "content" || text === "clarity" || text === "data hub" || text === "data-hub")) { productLink = link; } if (!resourcesLink && (text.indexOf("resource") !== -1 || text === "(other resources dropdown?)")) { resourcesLink = link; } }); // Step 2: Fallback - positional matching (skip "Home" and utility links) if (!productLink || !resourcesLink) { var candidates = Array.prototype.slice.call(headerLinks).filter(function (l) { var t = l.textContent.trim().toLowerCase(); return t !== "" && t !== "home" && t.indexOf("demo") === -1 && t.indexOf("search") === -1 && t.indexOf("ask ai") === -1; }); if (!productLink && candidates.length >= 1) productLink = candidates[0]; if (!resourcesLink && candidates.length >= 2) resourcesLink = candidates[1]; } if (productLink) createDropdown(productLink, DROPDOWN_PRODUCTS); if (resourcesLink) createDropdown(resourcesLink, DROPDOWN_RESOURCES); // Global close listeners - added only once (on document, not React elements) if (!_globalDropdownListenersAdded) { _globalDropdownListenersAdded = true; document.addEventListener("click", function (e) { if (!e.target.closest(".br-header-dropdown") && !e.target.closest(".rm-Header-top-link")) { closeAllDropdowns(); } }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") { closeAllDropdowns(); } }); } console.log("[BRDropdowns] Header dropdowns initialized"); } function createDropdown(parentLink, items) { // Guard: don't duplicate if this link already has a dropdown if (parentLink.querySelector(".br-header-dropdown")) return; // Mark for CSS: suppress Engagement's :hover:after underline parentLink.classList.add("br-has-dropdown"); // Prevent default navigation on the trigger link parentLink.addEventListener("click", function (e) { if (e.target.closest(".br-header-dropdown")) return; // Let dropdown item clicks through e.preventDefault(); e.stopPropagation(); toggleDropdown(parentLink); }); // Add chevron indicator var chevron = document.createElement("span"); chevron.className = "br-dropdown-chevron"; parentLink.appendChild(chevron); // Build dropdown element var dropdown = document.createElement("div"); dropdown.className = "br-header-dropdown"; items.forEach(function (item) { if (item.divider) { var div = document.createElement("div"); div.className = "br-header-dropdown__divider"; dropdown.appendChild(div); return; } var a = document.createElement("a"); a.className = "br-header-dropdown__item"; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement("img"); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var span = document.createElement("span"); span.textContent = item.label; a.appendChild(span); if (item.external) { var ext = document.createElement("span"); ext.className = "br-header-dropdown__external"; ext.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:4px;vertical-align:middle;opacity:0.5"><path d="M3.5 1.5H10.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'; a.appendChild(ext); } dropdown.appendChild(a); }); // Position: set relative on parent for absolute dropdown positioning parentLink.style.position = "relative"; // Auto-detect left vs right nav for dropdown alignment // RIGHT SIDE NAV (sandbox): dropdown aligns right (CSS default) // LEFT SIDE NAV (engagement): dropdown aligns left var isRightNav = !!parentLink.closest('[class*="Header-right"]'); if (!isRightNav) { dropdown.style.left = "0"; dropdown.style.right = "auto"; } parentLink.appendChild(dropdown); // Highlight active product based on current URL slug var currentSlug = window.location.pathname.split("/")[1] || ""; if (currentSlug) { var allItems = dropdown.querySelectorAll(".br-header-dropdown__item"); allItems.forEach(function (el) { var href = el.getAttribute("href") || ""; var hrefPath = href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); var hrefSlug = hrefPath.split("/")[1] || ""; if (hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { el.classList.add("br-header-dropdown__item--active"); } }); } } function toggleDropdown(link) { var dropdown = link.querySelector(".br-header-dropdown"); var chevron = link.querySelector(".br-dropdown-chevron"); if (!dropdown) return; var wasOpen = dropdown.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) { dropdown.classList.add("is-open"); if (chevron) chevron.classList.add("is-open"); } } function closeAllDropdowns() { document.querySelectorAll(".br-header-dropdown.is-open").forEach(function (el) { el.classList.remove("is-open"); }); document.querySelectorAll(".br-dropdown-chevron.is-open").forEach(function (el) { el.classList.remove("is-open"); }); } /* ========================================================== SECTION 2B: MOBILE FLYOUT ENHANCEMENT ========================================================== Transforms Readme's native mobile flyout (hamburger menu) into grouped submenus with product icons, dividers, and active states. Replaces "Sandbox" ‚Üí "Products" heading and "Other resources" ‚Üí "Resources" heading. Uses the same DROPDOWN_PRODUCTS and DROPDOWN_RESOURCES arrays as the desktop dropdowns (Section 2). Guarded by `data-br-mobile-enhanced` attribute to prevent duplicate processing. Called from: - Hamburger click handler (Section 3, 300ms delay) - Repair loop (Phase 3, every 2s) - SPA navigation handler (resets and re-applies) ========================================================== */ function enhanceMobileFlyout() { if (window.innerWidth > 768) return; var flyout = document.querySelector('[class*="MobileFlyout"]'); if (!flyout) return; // Prevent duplicate processing if (flyout.getAttribute('data-br-mobile-enhanced') === 'true') return; var mobileItems = flyout.querySelectorAll('.rm-MobileFlyout-item'); if (!mobileItems.length) return; var currentSlug = window.location.pathname.split("/")[1] || ""; function getSlugFromHref(href) { if (!href) return ""; var hrefPath = href.replace(/^https?:\/\/[^\/]+/, "").replace(/\/+$/, ""); return hrefPath.split("/")[1] || ""; } function buildSubmenu(items) { var wrapper = document.createElement('div'); wrapper.className = 'br-mobile-submenu'; items.forEach(function (item) { if (item.divider) { var divider = document.createElement('div'); divider.className = 'br-mobile-submenu__divider'; wrapper.appendChild(divider); return; } var a = document.createElement('a'); a.className = 'br-mobile-submenu__item'; a.href = item.href; if (item.external) { a.target = "_blank"; a.rel = "noopener"; } if (item.icon) { var img = document.createElement('img'); img.src = item.icon; img.alt = ""; img.loading = "lazy"; a.appendChild(img); } var label = document.createElement('span'); label.className = 'br-mobile-submenu__label'; label.textContent = item.label; a.appendChild(label); if (item.external) { var ext = document.createElement('span'); ext.className = 'br-mobile-submenu__external'; ext.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:4px;vertical-align:middle;opacity:0.5"><path d="M3.5 1.5H10.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'; a.appendChild(ext); } var hrefSlug = getSlugFromHref(item.href); if (currentSlug && hrefSlug && currentSlug.toLowerCase() === hrefSlug.toLowerCase()) { a.classList.add('br-mobile-submenu__item--active'); } wrapper.appendChild(a); }); return wrapper; } var lowerHome = null; var sandboxLink = null; var resourcesLink = null; Array.prototype.forEach.call(mobileItems, function (item) { var text = (item.textContent || "").trim().toLowerCase(); var href = item.getAttribute('href') || ""; if (!lowerHome && text === "home" && href.indexOf("documentation.bloomreach.com") > -1) { lowerHome = item; } if (!sandboxLink && text === "sandbox") { sandboxLink = item; } if (!resourcesLink && text === "other resources") { resourcesLink = item; } }); // Replace Sandbox ‚Üí Products if (sandboxLink && !flyout.querySelector('.br-mobile-submenu--products')) { sandboxLink.textContent = 'Products'; sandboxLink.classList.add('br-mobile-flyout-heading'); sandboxLink.removeAttribute('href'); sandboxLink.removeAttribute('target'); sandboxLink.removeAttribute('to'); var productsMenu = buildSubmenu(DROPDOWN_PRODUCTS); productsMenu.classList.add('br-mobile-submenu--products'); sandboxLink.insertAdjacentElement('afterend', productsMenu); } // Replace Other resources ‚Üí Resources if (resourcesLink && !flyout.querySelector('.br-mobile-submenu--resources')) { resourcesLink.textContent = 'Resources'; resourcesLink.classList.add('br-mobile-flyout-heading'); resourcesLink.removeAttribute('href'); resourcesLink.removeAttribute('target'); resourcesLink.removeAttribute('to'); var resourcesMenu = buildSubmenu(DROPDOWN_RESOURCES); resourcesMenu.classList.add('br-mobile-submenu--resources'); resourcesLink.insertAdjacentElement('afterend', resourcesMenu); } flyout.setAttribute('data-br-mobile-enhanced', 'true'); console.log("[BR] Mobile flyout enhanced"); } /* ========================================================== SECTION 3: "GET A DEMO" BUTTON ========================================================== Injects a yellow "Get a demo" button into the header nav. Targets whichever container (rm-Header-left or rm-Header-right) actually holds the nav links. On mobile: hidden via CSS on the main nav, but injected into the flyout menu when the hamburger is clicked. NOTE: Readme's Group-level JS also injects a demo button, but it targets #ssr-main .navbar (Bootstrap secondary nav). Our button targets rm-Header-top (primary nav). Both have duplicate-prevention guards (!querySelector('.navbar-demo-button')). ========================================================== */ function initDemoButton() { var demoHtml = '<div class="navbar-demo-button">' + '<a href="https://www.bloomreach.com/en/request-demo" role="button" ' + 'class="btn btn-nav" target="_blank">' + '<span>Get a demo</span>' + '</a>' + '</div>'; // Find the container that holds nav links var headerLeft = document.querySelector('.rm-Header-top [class*="Header-left"]:not([class*="mobile"])'); var headerRight = document.querySelector('.rm-Header-top [class*="Header-right"]'); var target = null; if (headerLeft && headerLeft.querySelector('.rm-Header-top-link')) target = headerLeft; else if (headerRight && headerRight.querySelector('.rm-Header-top-link')) target = headerRight; // Inject only if container exists and button isn't already there. // Insert BEFORE the ThemeToggle (dark mode) so the order is: // [nav links] [Get a demo] [toggle] // The toggle should stay at the far right for visual consistency. if (target && !target.querySelector('.navbar-demo-button')) { var themeToggle = target.querySelector('[class*="ThemeToggle"]'); if (themeToggle) { themeToggle.insertAdjacentHTML('beforebegin', demoHtml); } else { target.insertAdjacentHTML('beforeend', demoHtml); } } // Hide any CMS-configured "Get a Demo" nav link to prevent duplication. // Some projects have a demo link added via CMS navigation settings. // Our styled yellow button replaces it visually. if (target) { var navLinks = target.querySelectorAll('.rm-Header-top-link'); navLinks.forEach(function (link) { var text = link.textContent.trim().toLowerCase(); var href = (link.getAttribute('href') || '').toLowerCase(); if ((text.indexOf('demo') > -1 || href.indexOf('demo') > -1) && !link.classList.contains('br-has-dropdown')) { link.style.display = 'none'; } }); } // Mobile: inject into flyout when hamburger is clicked // Broader selector covers multiple Readme button variations var hamburger = document.querySelector( '.rm-Header button[class*="menu"], .rm-Header button[aria-label*="menu"], .rm-Header button[aria-expanded]' ); if (hamburger && !hamburger._brDemoAttached) { hamburger.addEventListener('click', function () { setTimeout(function () { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (!flyout) return; if (!flyout.querySelector('.navbar-demo-button')) { flyout.insertAdjacentHTML('beforeend', demoHtml); } enhanceMobileFlyout(); }, 300); }); hamburger._brDemoAttached = true; } } /* ========================================================== SECTION 4: NATIVE SEARCH ENHANCEMENTS ========================================================== We use Readme's native (OOTB) search modal. This section applies the Bloomreach Sans font when the modal opens. Search filter pre-selection and "Hide Sandbox Project" are handled by Enterprise Group JS (applies to all projects). Uses a MutationObserver to detect when the search modal appears in the DOM, then applies font enhancement. ========================================================== */ var _searchObserverActive = false; function initSearchEnhancements() { if (_searchObserverActive) return; _searchObserverActive = true; // Watch for the native search modal appearing var observer = new MutationObserver(function (mutations) { for (var i = 0; i < mutations.length; i++) { var m = mutations[i]; if (!m.addedNodes) continue; for (var j = 0; j < m.addedNodes.length; j++) { var node = m.addedNodes[j]; if (node.nodeType !== 1) continue; var modal = null; if (node.classList && node.classList.contains("rm-SearchModal")) { modal = node; } else if (node.querySelector) { modal = node.querySelector(".rm-SearchModal"); } if (modal) { applySearchFont(modal); } } } }); observer.observe(document.body, { childList: true, subtree: true }); // Also check if modal already exists (e.g. after SPA navigation) var existing = document.querySelector(".rm-SearchModal"); if (existing) { applySearchFont(existing); } } function applySearchFont(modal) { // The font is applied via CSS (.rm-SearchModal and descendants). // This JS function is a safety net: if CSS hasn't loaded yet, // force the font inline. In practice, CSS handles this. modal.style.fontFamily = "'Bloomreach Sans', sans-serif"; } /* ========================================================== SECTION 5: HYDRATION-SAFE INITIALIZATION ========================================================== This section orchestrates the 3-phase initialization that prevents corrupting React's event handler tree. WHY THIS EXISTS: On the Refactored renderer, React SSR hydration fails with 38 pre-existing Error #418 mismatches. React falls back to full client-side re-rendering (Error #423). During this process, React tears down the server-rendered DOM and builds a fresh DOM tree. If our JS modifies elements during this window, React's re-render wipes our changes AND corrupts its own event handlers, breaking native features. HOW IT WORKS: Phase 1 runs immediately - but only does things that are safe (appending to <body>, global listeners). Phase 2 polls for .rm-Header-top-link elements. These are rendered by React, so their presence means React has finished its render cycle. An extra 500ms buffer ensures event handlers are bound. Then we apply our DOM modifications. Phase 3 runs a repair loop every 2 seconds. React's SPA navigation re-renders portions of the DOM, wiping our custom elements. The repair loop detects missing elements and re-applies them. ========================================================== */ var _brPhase2Complete = false; var _spaDetectionActive = false; var _repairLoopActive = false; /* ---------------------------------------------------------- Phase 1: Safe initialization Runs on DOMContentLoaded. Only does things that don't modify React-managed DOM: - Creates progress bar element (appended to <body>) - Sets up search modal observer (watches DOM, doesn't modify React) - Starts polling for React to finish ---------------------------------------------------------- */ function safeInit() { console.log("[BR] Phase 1: Safe initialization"); // 1a. Progress bar (element appended to <body>) initProgressBar(); // 1b. Native search enhancements (MutationObserver on <body>) initSearchEnhancements(); // 1c. Begin Phase 2: poll for React pollForReact(); } /* ---------------------------------------------------------- Phase 2: Wait for React to complete rendering Polls every 500ms for .rm-Header-top-link elements. These are rendered by React - their presence indicates the render cycle is complete. Waits up to 60 seconds. ---------------------------------------------------------- */ function pollForReact() { var attempts = 0; var maxAttempts = 120; // 500ms * 120 = 60 seconds max wait var checker = setInterval(function () { attempts++; var links = document.querySelectorAll(".rm-Header-top-link"); if (links.length > 0) { clearInterval(checker); console.log("[BR] Phase 2: React DOM detected (" + links.length + " header links, attempt " + attempts + ")"); // Extra 500ms: React may still be binding event handlers // after DOM elements appear. This buffer prevents us from // modifying elements that React is about to attach handlers to. setTimeout(applyDOMFeatures, 500); return; } if (attempts >= maxAttempts) { clearInterval(checker); console.warn("[BR] Phase 2: Timeout waiting for React render. Attempting init anyway."); applyDOMFeatures(); } }, 500); } /* ---------------------------------------------------------- Phase 2 execution: Apply features that modify React DOM Called once after React settles. Sets up: - Header dropdowns (modify .rm-Header-top-link) - Demo button (inject into header container) - Move nav links from left to right - 404 active link fix ---------------------------------------------------------- */ function applyDOMFeatures() { if (_brPhase2Complete) return; _brPhase2Complete = true; console.log("[BR] Phase 2: Applying DOM features"); moveNavToRight(); initDropdowns(); initDemoButton(); // 404 fix: on error pages, the active header link has // pointer-events: none which prevents clicking. Re-enable it. if (document.title.toLowerCase().indexOf("404") > -1) { var activeLink = document.querySelector(".rm-Header-bottom-link.active"); if (activeLink) activeLink.style.pointerEvents = "auto"; } // Start Phase 3 startRepairLoop(); initSPADetection(); console.log("[BR] All features initialized (hydration-safe)"); } /* ---------------------------------------------------------- Phase 3: Repair Loop Runs every 2 seconds. Checks if React re-rendered the header (wiping our dropdowns, demo button, etc.) and re-applies them if missing. This is essential because React's SPA navigation re-renders portions of the DOM. Our custom elements (which are children of React-managed elements like .rm-Header-top-link) get destroyed during these re-renders. Elements appended to <body> (progress bar) are NOT affected because they're outside React's tree. ---------------------------------------------------------- */ function startRepairLoop() { if (_repairLoopActive) return; _repairLoopActive = true; setInterval(function () { // Only repair if header links exist (page is fully rendered) var links = document.querySelectorAll(".rm-Header-top-link"); if (links.length === 0) return; // Page may be transitioning // Ensure nav links are in the right container moveNavToRight(); // Repair dropdowns var hasDropdowns = document.querySelectorAll(".br-header-dropdown").length > 0; if (!hasDropdowns) { initDropdowns(); } // Repair demo button if (!document.querySelector(".navbar-demo-button")) { initDemoButton(); } // Repair mobile flyout enhancement if (window.innerWidth <= 768) { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (flyout && flyout.getAttribute('data-br-mobile-enhanced') !== 'true') { enhanceMobileFlyout(); } } }, 2000); } /* ---------------------------------------------------------- SPA Navigation Detection Detects client-side page changes via two methods: 1. MutationObserver on <body> watching for URL changes (React Router uses history.pushState, not full reloads) 2. jQuery $(window).on("pageLoad") for Legacy renderer When navigation is detected, resets progress bar and re-applies features after a short delay (React needs time to render the new page content). ---------------------------------------------------------- */ function initSPADetection() { if (_spaDetectionActive) return; _spaDetectionActive = true; // Method 1: URL change detection via MutationObserver var lastUrl = window.location.href; var urlObserver = new MutationObserver(function () { if (window.location.href !== lastUrl) { lastUrl = window.location.href; onPageNavigate(); } }); urlObserver.observe(document.body, { childList: true, subtree: true }); // Method 2: jQuery pageLoad (Legacy platform only) if (typeof window.$ !== "undefined") { try { window.$(window).on("pageLoad", function () { onPageNavigate(); }); } catch (e) { /* jQuery not available */ } } } function onPageNavigate() { console.log("[BR] SPA navigation detected"); // Reset progress bar and scroll container detection resetProgressBar(); // Re-apply features after React finishes rendering new page // (delays give React time to complete its render cycle) setTimeout(function () { moveNavToRight(); initDemoButton(); // Reset and re-apply mobile flyout enhancement if (window.innerWidth <= 768) { var flyout = document.querySelector('[class*="MobileFlyout"]'); if (flyout) { flyout.removeAttribute('data-br-mobile-enhanced'); enhanceMobileFlyout(); } } }, 500); setTimeout(function () { var existingDropdowns = document.querySelectorAll(".br-header-dropdown"); if (existingDropdowns.length === 0) { initDropdowns(); } }, 500); } /* ---------------------------------------------------------- ENTRY POINT Starts Phase 1 when DOM is ready (or immediately if already loaded). Phase 2 and 3 are triggered automatically. ---------------------------------------------------------- */ if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", safeInit); } else { safeInit(); } })(); /* ============================================================ LANDING PAGE JS ‚Äî Standalone Version (Refactored sandbox) Last updated: 2026-03-30 ============================================================ WHERE THIS GOES: Appearance > Custom JavaScript (append at end of existing JS) Pairs with: landing-page-v2.html (Custom Page body) GUARD: Only runs when body has class "hub-is-home" (landing page). REQUIRES: jQuery (loaded by Readme framework, polled via waitForJQuery) DO NOT USE ON ENTERPRISE: Enterprise Group Custom JS has a "jQuery is not defined" error that kills all subsequent code. Enterprise landing page uses inline onclick handlers instead (see landing-page-enterprise.html). ============================================================ */ (function() { if (!document.body.classList.contains('hub-is-home')) return; // Wait for jQuery (loaded by Readme framework) var jqAttempts = 0; function waitForJQuery(callback) { if (typeof jQuery !== 'undefined') { if (typeof $ === 'undefined') window.$ = jQuery; callback(); } else if (typeof $ !== 'undefined') { callback(); } else if (jqAttempts < 50) { jqAttempts++; setTimeout(function() { waitForJQuery(callback); }, 100); } } waitForJQuery(function() { // ===================== // MAIN INIT (after short delay for DOM to settle) // ===================== setTimeout(function() { $('.owl-carousel').css('visibility', 'visible'); $('.hero-section').css('visibility', 'visible'); $('.docs-bg-img-1, .docs-bg-img-2').css('visibility', 'visible'); $('#content-container').css({maxWidth: 'unset', margin: '0'}); $('#content-head').css('display', 'none'); $('.rm-LandingPageHeader').css('display', 'none'); $('.progress-bar').css('opacity', '0'); $('footer:not(.footer)').css('display', 'none'); $('.current-year').text(new Date().getFullYear()); // Add search button to hero that triggers Readme's native Cmd+K search // We create our own button instead of moving/cloning React elements, // so it survives React re-renders (e.g. theme switches) var searchDiv = $('.search'); if (searchDiv.length > 0 && searchDiv.find('.landing-search-btn').length === 0) { var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; var shortcutText = isMac ? '\u2318\u2013K' : 'Ctrl\u2013K'; var searchBtn = $( '<button class="landing-search-btn" type="button">' + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + '<circle cx="11" cy="11" r="8"></circle>' + '<line x1="21" y1="21" x2="16.65" y2="16.65"></line>' + '</svg>' + '<span class="landing-search-text">Search</span>' + '<span class="landing-search-shortcut">' + shortcutText + '</span>' + '</button>' ); searchBtn.on('click', function() { document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', code: 'KeyK', metaKey: isMac, ctrlKey: !isMac, bubbles: true })); }); searchDiv.append(searchBtn); } }, 500); // ===================== // CUSTOM NAVBAR ‚Äî click handlers // ===================== $('.navbar-toggler-icon').click(function() { $('#menuToggle, .menu-overlay').addClass('show'); $('body').addClass('overflow-hidden'); }); $('.hide-nav').click(function() { $('#menuToggle, .menu-overlay').removeClass('show'); $('body').removeClass('overflow-hidden'); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 100) $('.navbar').addClass('navbar-shadow'); else $('.navbar').removeClass('navbar-shadow'); }); $('.nav-item-dropdown').click(function(e) { e.stopPropagation(); $('.dropdown-menu-link-show').not($(this).find('.dropdown-menu-link')).removeClass('dropdown-menu-link-show'); $('.dropdown-img-show').not($(this).find('.dropdown-img')).removeClass('dropdown-img-show'); $(this).find('.dropdown-menu-link').toggleClass('dropdown-menu-link-show'); $(this).find('.dropdown-img').toggleClass('dropdown-img-show'); }); // NOTE: "Hide Sandbox Project" from search filters is now // handled by Enterprise Group JS (applies to all projects). // ===================== // DARK MODE // ===================== var setDarkMode = function() { setTimeout(function() { localStorage.setItem('color-scheme', 'dark'); $('html').attr('data-color-mode', 'dark'); }, 100); $('.dark-mode-btn').prop('checked', true); $('.rm-Logo .rm-Logo-img').attr('src', 'https://files.readme.io/0e23000-small-br_docs-secondary.png'); $('.footer .logo-footer-dark').removeClass('d-none'); $('.footer .logo-footer-white').addClass('d-none'); $('.dark-mode .dark-mode-span').html('Switch to light mode'); }; var setLightMode = function() { setTimeout(function() { localStorage.setItem('color-scheme', 'light'); $('html').attr('data-color-mode', 'light'); }, 100); $('.dark-mode-btn').prop('checked', false); $('.rm-Logo .rm-Logo-img').attr('src', 'https://files.readme.io/3bec36a-small-br_docs-primary.png'); $('.footer .logo-footer-white').removeClass('d-none'); $('.footer .logo-footer-dark').addClass('d-none'); $('.dark-mode .dark-mode-span').html('Switch to dark mode'); }; setTimeout(function() { var darkModeHTML = '<div class="dark-mode">' + '<input class="dark-mode-btn" type="checkbox" id="toggle-mode"/>' + '<svg class="light-mode-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#637288" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + '<circle cx="12" cy="12" r="5"></circle>' + '<line x1="12" y1="1" x2="12" y2="3"></line>' + '<line x1="12" y1="21" x2="12" y2="23"></line>' + '<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>' + '<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>' + '<line x1="1" y1="12" x2="3" y2="12"></line>' + '<line x1="21" y1="12" x2="23" y2="12"></line>' + '<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>' + '<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>' + '</svg>' + '<svg class="dark-mode-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="17" viewBox="0 0 15 17" fill="none">' + '<path d="M6.01727 2.21456C5.74516 3.37662 5.70818 4.58136 5.90851 5.75791C6.10884 6.93447 6.54243 8.05909 7.18378 9.06561C7.82512 10.0721 8.66127 10.9402 9.64305 11.6189C10.6248 12.2975 11.7324 12.773 12.9006 13.0173C12.2864 13.6528 11.5507 14.1585 10.7373 14.5042C9.92389 14.85 9.0493 15.0288 8.16545 15.0301C8.08352 15.0301 8.00039 15.033 7.91727 15.0301C6.37849 14.9759 4.90732 14.3843 3.75935 13.3582C2.61138 12.332 1.85915 10.9362 1.63334 9.41311C1.40753 7.89003 1.72242 6.33596 2.52329 5.02091C3.32416 3.70585 4.56041 2.7129 6.01727 2.21456ZM6.89424 0.78125C6.85939 0.781368 6.82462 0.784546 6.79033 0.79075C4.9002 1.12712 3.20132 2.15084 2.02079 3.66481C0.840265 5.17878 0.261553 7.07596 0.396077 8.99107C0.530602 10.9062 1.36885 12.7038 2.74944 14.0379C4.13002 15.372 5.95533 16.1481 7.87392 16.217C7.9713 16.2205 8.06867 16.217 8.16486 16.217C9.41111 16.2178 10.6392 15.9185 11.7454 15.3444C12.8515 14.7703 13.8031 13.9383 14.5198 12.9187C14.5778 12.8308 14.6117 12.7292 14.618 12.6241C14.6243 12.5189 14.6029 12.414 14.5557 12.3198C14.5086 12.2256 14.4375 12.1455 14.3496 12.0875C14.2616 12.0295 14.16 11.9957 14.0549 11.9895C12.8687 11.8854 11.7224 11.5099 10.7044 10.8921C9.68653 10.2743 8.8243 9.43077 8.1844 8.42661C7.5445 7.42245 7.14406 6.2846 7.01404 5.101C6.88402 3.9174 7.02789 2.71975 7.43455 1.60063C7.46914 1.51105 7.48183 1.4145 7.47156 1.31902C7.46128 1.22355 7.42834 1.13191 7.37548 1.05174C7.32261 0.971578 7.25136 0.905204 7.16765 0.858153C7.08394 0.811102 6.9902 0.784736 6.89424 0.78125Z" fill="#C3C7C8"/>' + '</svg>' + '<span class="dark-mode-span">Switch to dark mode</span>' + '</div>'; if ($('nav.navbar .dark-mode').length === 0) { $('nav.navbar').prepend(darkModeHTML); } $('.dark-mode').off('click').on('click', function() { if ($('.dark-mode-btn')[0].checked) { localStorage.removeItem('dark-mode'); setLightMode(); } else { localStorage.setItem('dark-mode', 'true'); setDarkMode(); } }); if (!!localStorage.getItem('dark-mode')) setDarkMode(); else setLightMode(); }, 500); // ===================== // DEMO BUTTON // ===================== setTimeout(function() { var navDemoButton = '<div class="navbar-demo-button">' + '<a href="https://www.bloomreach.com/en/request-demo" role="button" class="btn btn-nav" target="_blank">' + '<span>Get a Demo</span></a></div>'; if ($('#ssr-main .navbar .navbar-collapse .navbar-nav .navbar-demo-button').length === 0) { $('#ssr-main .navbar .navbar-collapse .navbar-nav').append(navDemoButton); } $('#ssr-main .navbar .navbar-toggler.collapsed').off('click').on('click', function() { setTimeout(function() { if ($('#ssr-main .navbar #menu .navbar-demo-button').length === 0) { $('#ssr-main .navbar #menu').append(navDemoButton); } }, 200); }); }, 600); }); // end waitForJQuery })();</article></body></html>