/* ───────────────────────────────────────────────────────────────── NavVis KB — full custom JavaScript for Document360 Paste this ENTIRE file into: Settings → Knowledge base site → Site customization → Custom CSS & JavaScript → JavaScript tab. This replaces every earlier JS file you were given for this project — there's nothing else to paste alongside it. Covers: - Hero category chips + question panel (injected via JS directly into Document360's native hero container — no HTML tab needed) - Section-nav scroll-spy (static HTML from the Custom Code Section) - What's New carousel (static HTML from the Custom Code Section) - System status refresh spinner (static HTML) - Onboarding video bubble, bottom-left (injected via JS) - Document360's real Ivy widget: launcher restyled, panel tweaked, and the old hand-rolled static Ivy panel removed on sight ───────────────────────────────────────────────────────────────── */ (function () { function ready(fn) { if (document.readyState !== "loading") fn(); else document.addEventListener("DOMContentLoaded", fn); } /* Document360 is an Angular SPA: the Custom Code Section's static HTML is rendered into the page some time AFTER DOMContentLoaded. Every initializer that reaches for that markup and simply returns when it isn't there yet will therefore run exactly once, find nothing, and never run again — which is why the What's New carousel never autoplayed and the section-nav never lit up, despite both being perfectly good code. injectHeroChips() escaped this only because it happened to poll for its target. whenPresent() gives the others the same courtesy: retry on a short interval until the selector resolves, then run once. Callers stay idempotent (they set data-nv-bound), so a late `articleload` firing the same init again is harmless. */ /* Everything in here lives in the Custom Code Section's static HTML. Each function is idempotent — it stamps data-nv-bound on the node it binds — so calling this repeatedly is cheap and safe. */ function initStaticSections() { if (!document.getElementById("nv-news")) return; removeStaticIvyWidget(); // before anything binds to it reorderNewsBelowCommunity(); // before the nav caches its links initSectionNav(); initWhatsNew(); initSystemStatus(); initNeedHelpToNativeChat(); } /* Why an observer that never disconnects. Document360 is an Angular SPA, and it re-renders the Custom Code Section's markup *after* our first pass over it. Binding once was the bug: we attached listeners and stamped data-nv-bound onto #nv-news, then Angular replaced that whole subtree with fresh nodes. The new #nv-news carries no data-nv-bound, and every listener we added went to the garbage collector along with the node it was on — so the arrows did nothing, autoplay never ticked, and the dots never rendered, all while the markup sat there looking perfectly correct in the inspector. (navvisKB.diagnose() showed exactly that: the node present, four cards, and bound = false.) The hero chips were immune only because they live in Document360's native hero, which isn't re-rendered. So: watch the DOM for the lifetime of the page and re-run the initializers whenever something changes. The data-nv-bound guards make a repeat pass a no-op on nodes we've already wired up, and a real bind on any node that replaced them. Debounced, because a single Angular render fires many mutations. */ var staticObserver = null; function observeStaticSections() { if (staticObserver) return; var pending = false; staticObserver = new MutationObserver(function () { if (pending) return; // The carousel rebuilds its own dots every 4.5s, which is a // childList mutation we'd otherwise wake up for. If the nodes we // care about are still stamped as bound, there is nothing to do. var news = document.getElementById("nv-news"); var nav = document.getElementById("nv-section-nav"); if (news && news.dataset.nvBound === "1" && nav && nav.dataset.nvBound === "1") return; pending = true; setTimeout(function () { pending = false; initStaticSections(); }, 100); }); staticObserver.observe(document.body, { childList: true, subtree: true }); setTimeout(function () { if (!document.getElementById("nv-news")) { console.warn( "[NavVis] #nv-news never appeared. Run navvisKB.diagnose() " + "to see where the Custom Code Section's markup actually is." ); } }, 20000); } function initAll() { injectHeroChips(); injectIvyPanelOverrides(); injectIvyLauncherOverrides(); initOnboardingVideo(); initStaticSections(); // in case the markup is already there observeStaticSections(); // and again every time Angular replaces it } /* ══════════════════════════════════════════════════════════════ STATIC IVY — remove the leftover hand-rolled chat panel. An earlier revision of this project shipped its own floating Ivy panel as static markup in the Custom Code Section (the file header used to advertise it). We now drive Document360's real widget instead — see openNativeChatWidget() — so that markup is a second, dead Ivy sitting on the page. The proper fix is to delete it from the Custom Code Section's HTML tab; this is the belt-and-braces version, so the duplicate goes away immediately and stays away even if the HTML is repasted from an old copy. Matches on the nv-ivy* naming the old markup used, and deliberately spares #nv-open-ivy — that's the "Chat with Ivy" card in the Need Help section, which is a trigger, not a widget. If nothing is logged and you still see two Ivys, send me the stray element's outerHTML and I'll match it exactly. ══════════════════════════════════════════════════════════════ */ function removeStaticIvyWidget() { var strays = document.querySelectorAll( '[id^="nv-ivy"], [class^="nv-ivy"], [class*=" nv-ivy"]' ); Array.prototype.forEach.call(strays, function (el) { if (el.id === "nv-open-ivy") return; // the Need Help trigger card el.remove(); }); } /* ══════════════════════════════════════════════════════════════ IVY WIDGET — launcher button, reshaped from general JS. Confirmed real markup: inside #document360-widget-iframe's contentDocument. ══════════════════════════════════════════════════════════════ */ function injectIvyLauncherOverrides() { startIvyWidgetLoop(); } function applyIvyLauncher() { var iframe = document.getElementById("document360-widget-iframe"); if (!iframe) return; var doc; try { doc = iframe.contentDocument; } catch (e) { return; } if (!doc) return; // Tropical-1 fill + NavVis Blue border (CSS in the iframe head). A // light ground keeps Document360's own Ivy avatar legible whatever // colours they ship. if (doc.head && !doc.getElementById("nv-ivy-launcher-style")) { var style = doc.createElement("style"); style.id = "nv-ivy-launcher-style"; style.textContent = "#doc360-button {" + " background-color: #E8F2FD !important;" + " border: 2px solid #1979E4 !important;" + " transition: background-color .2s ease, border-color .2s ease;" + "}" + "#doc360-button:hover {" + " background-color: #BAD7F7 !important;" + " border-color: #134174 !important;" + "}"; doc.head.appendChild(style); } var btn = doc.getElementById("doc360-button"); if (!btn) return; // Re-assert the pill shape + label. Document360 rebuilds this button, // wiping our inline styles and the "Chat with Ivy" label — the poll // simply restores them, so the label no longer vanishes to an icon. btn.style.width = "auto"; btn.style.minWidth = "210px"; btn.style.height = "54px"; btn.style.borderRadius = "10px"; btn.style.display = "flex"; btn.style.alignItems = "center"; btn.style.justifyContent = "flex-start"; btn.style.gap = "10px"; btn.style.padding = "0 18px 0 13px"; btn.style.boxSizing = "border-box"; btn.style.position = "relative"; btn.style.overflow = "visible"; btn.style.clipPath = "none"; btn.style.webkitClipPath = "none"; var img = btn.querySelector("img"); if (img) { img.style.height = "32px"; img.style.width = "32px"; img.style.objectFit = "contain"; img.style.flexShrink = "0"; } if (!btn.querySelector(".nv-launcher-label")) { var label = doc.createElement("span"); label.className = "nv-launcher-label"; label.textContent = "Chat with Ivy"; label.style.fontSize = "16px"; label.style.fontWeight = "600"; label.style.color = "#134174"; label.style.whiteSpace = "nowrap"; btn.appendChild(label); } } /* ══════════════════════════════════════════════════════════════ IVY WIDGET — panel-iframe overrides, now done from general JS since the console test confirmed document360-body-iframe is same-origin (empty src, filled by script — not a real cross-origin embed). No need for the widget's own scoped CSS box anymore; this reaches straight into its contentDocument. ══════════════════════════════════════════════════════════════ */ // Both the launcher and the chat panel live inside Document360 iframes // that Angular mounts and re-renders on its own schedule — a parent-page // MutationObserver can't see inside them, and an in-iframe observer kept // missing the empty-state render. A small idempotent poll is dumb but // bulletproof: every 500ms it re-applies the launcher and (re)drops the // tips into the empty state. Guards keep it cheap and duplicate-free. var __nvIvyLoop = null; function startIvyWidgetLoop() { if (__nvIvyLoop) return; function tick() { applyIvyLauncher(); applyIvyPanel(); } tick(); __nvIvyLoop = setInterval(tick, 500); } function injectIvyPanelOverrides() { startIvyWidgetLoop(); watchForIvyPanel(); } /* ── the mascot must never be seen ── The octopus is Document360's, rendered inside the panel iframe, so the only thing that can hide it is a