/*** WOW SITES - SCRIPTS START ***/ window.addEventListener("load", function() { //Banner Image const elBannerButton = document.querySelector(".default site-home-page site-hero-section h1"); const elBannerImage = document.createElement("figure"); elBannerImage.innerHTML =``; elBannerButton?.before(elBannerImage); }); /*** WOW SITES - SCRIPTS END ***/ // * SANITIZE OLD DOC HUB URLS*/ /** * Sanitizes a URL by removing parameters and fragments after .htm or .html. * @param {string} url - The URL to sanitize. * @returns {string} The sanitized URL. */ function sanitizeUrl(url) { const regex = /(\.htm(l)?)[^/]*$/i; const sanitized = url.replace(regex, '$1'); return sanitized; } // Get the current URL const currentUrl = window.location.href; // Sanitize the URL const sanitizedUrl = sanitizeUrl(currentUrl); // Redirect if the URL is different if (currentUrl !== sanitizedUrl) { window.location.replace(sanitizedUrl); } // * SANITIZE OLD DOC HUB URLS End*/ /*migration script for opening links in new tab*/ window.onload = function() { document.querySelectorAll('article h3 a').forEach(link => { link.setAttribute('target', '_blank'); }); }; /**/ /** HIGHLIGHT TO CREATE LINK SCRIPT START **/ /** * This script adds a "highlight to copy link" feature to any webpage. * It uses a URL query: ?tab=...&block=...&highlight=... * It shows a "Copied!" toast notification. * It appears at the cursor and hides on mouse move. * It uses index-based, aggressive polling for tabs/content. * It is scoped to run only within the #main-content div. * It automatically disables itself on the homepage. * NEW: Highlights across multiple nodes are now seamless (no inner borders). */ document.addEventListener('DOMContentLoaded', () => { // --- Part 1: Create and Style Dynamic Elements --- const copyButton = document.createElement('button'); copyButton.id = 'dynamic-copy-highlight-btn'; copyButton.textContent = 'Create Link'; Object.assign(copyButton.style, { display: 'none', position: 'absolute', backgroundColor: '#33768E', color: 'white', border: 'none', borderRadius: '5px', padding: '8px 12px', fontSize: '14px', fontWeight: 'bold', cursor: 'pointer', zIndex: '2147483647', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transform: 'scale(1)', transition: 'transform 0.1s ease-out' }); copyButton.onmouseenter = () => { copyButton.style.transform = 'scale(1.05)'; }; copyButton.onmouseleave = () => { copyButton.style.transform = 'scale(1)'; }; copyButton.onmousedown = () => { copyButton.style.transform = 'scale(0.95)'; }; copyButton.onmouseup = () => { copyButton.style.transform = 'scale(1.05)'; }; document.body.appendChild(copyButton); const copyToast = document.createElement('div'); copyToast.id = 'dynamic-copy-toast'; copyToast.textContent = 'Link copied to clipboard!'; Object.assign(copyToast.style, { visibility: 'hidden', opacity: '0', position: 'fixed', bottom: '30px', left: '50%', transform: 'translateX(-50%)', backgroundColor: '#333', color: 'white', padding: '12px 20px', borderRadius: '25px', fontSize: '15px', fontWeight: '500', zIndex: '2147483647', boxShadow: '0 4px 10px rgba(0,0,0,0.3)', transition: 'opacity 0.3s ease, visibility 0.3s ease' }); document.body.appendChild(copyToast); // --- Part 2: Functions for Highlighting and Copying --- let currentSelectedText = ''; let currentBlockId = null; let currentTabId = null; let toastTimer = null; function checkButtonDistance(event) { if (copyButton.style.display !== 'block') return; const cursorX = event.pageX; const cursorY = event.pageY; const btnRect = copyButton.getBoundingClientRect(); const btnX = btnRect.left + window.scrollX; const btnY = btnRect.top + window.scrollY; const padding = 75; const isOutside = ( cursorX < btnX - padding || cursorX > btnX + btnRect.width + padding || cursorY < btnY - padding || cursorY > btnY + btnRect.height + padding ); if (isOutside) { hideCopyButton(); } } function showCopyButton(event) { if (window.location.pathname === '/') return; if (!event.target.closest('#main-content')) { hideCopyButton(); return; } if (event.target === copyButton) return; document.removeEventListener('mousemove', checkButtonDistance); const selection = window.getSelection(); const selectedString = selection.toString().trim(); currentSelectedText = ''; currentBlockId = null; currentTabId = null; if (selectedString) { const range = selection.getRangeAt(0); currentSelectedText = selectedString; const startNode = (range.startContainer.nodeType === Node.TEXT_NODE) ? range.startContainer.parentElement : range.startContainer; const block = startNode.closest('[data-block-id]'); if (block) { currentBlockId = block.getAttribute('data-block-id'); } const parentPanel = startNode.closest('div.content'); if (parentPanel) { const contentContainer = parentPanel.closest('.tab-content'); if (contentContainer) { const allPanels = Array.from(contentContainer.querySelectorAll('div.content')); const panelIndex = allPanels.indexOf(parentPanel); if (panelIndex !== -1) { const tabsContainer = contentContainer.closest('.tabs'); if (tabsContainer) { const allControls = tabsContainer.querySelectorAll('.tab[data-tab-id]'); if (allControls.length > panelIndex) { currentTabId = allControls[panelIndex].getAttribute('data-tab-id'); } } } } } copyButton.style.top = `${event.pageY + 10}px`; copyButton.style.left = `${event.pageX + 10}px`; copyButton.style.display = 'block'; document.addEventListener('mousemove', checkButtonDistance); } else { hideCopyButton(); } } function hideCopyButton(event) { if (event && event.target === copyButton) return; copyButton.style.display = 'none'; copyButton.style.transform = 'scale(1)'; document.removeEventListener('mousemove', checkButtonDistance); } function showToast() { if (toastTimer) clearTimeout(toastTimer); copyToast.style.visibility = 'visible'; copyToast.style.opacity = '1'; toastTimer = setTimeout(() => { copyToast.style.opacity = '0'; copyToast.style.visibility = 'hidden'; toastTimer = null; }, 2500); } async function copyHighlightLink() { if (!currentSelectedText) return; const baseUrl = window.location.origin + window.location.pathname; const currentParams = new URLSearchParams(window.location.search); currentParams.set('highlight', currentSelectedText); if (currentBlockId) currentParams.set('block', currentBlockId); else currentParams.delete('block'); if (currentTabId) currentParams.set('tab', currentTabId); else currentParams.delete('tab'); const linkToCopy = `${baseUrl}?${currentParams.toString()}`; try { await navigator.clipboard.writeText(linkToCopy); showToast(); } catch (err) { console.error('Failed to copy link: ', err); alert('Could not copy link to clipboard.'); } finally { hideCopyButton(); window.getSelection().removeAllRanges(); currentSelectedText = ''; currentBlockId = null; currentTabId = null; } } // --- Part 3: Function to Handle Incoming Link --- function activateTabById(tabId) { if (!tabId) return null; const mainContent = document.getElementById('main-content'); if (!mainContent) return null; const targetControl = mainContent.querySelector(`div.tab[data-tab-id="${tabId}"]`); if (!targetControl) return null; const controlContainer = targetControl.closest('.tab-header'); if (!controlContainer) return null; const allControls = Array.from(controlContainer.querySelectorAll('.tab[data-tab-id]')); const targetIndex = allControls.indexOf(targetControl); if (targetIndex === -1) return null; const tabsContainer = targetControl.closest('.tabs'); if (!tabsContainer) return null; const contentContainer = tabsContainer.querySelector('.tab-content'); if (!contentContainer) return null; const allPanels = contentContainer.querySelectorAll('div.content'); const targetPanel = allPanels[targetIndex]; if (!targetPanel) return null; otherActiveControls = controlContainer.querySelectorAll('.tab.active'); otherActiveControls.forEach(control => { if (control !== targetControl) control.classList.remove('active'); }); otherActivePanels = contentContainer.querySelectorAll('.content.active'); otherActivePanels.forEach(panel => { if (panel !== targetPanel) panel.classList.remove('active'); }); targetControl.classList.add('active'); targetPanel.classList.add('active'); return targetPanel; } /** * Global Offset - Scan First, Then Paint. * UPDATED: Conditional styling for seamless borders. */ function performHighlight(searchRoot, targetText) { try { const containerText = searchRoot.textContent; const startIndex = containerText.indexOf(targetText); if (startIndex === -1) { console.warn(`Highlight-to-link: Could not find the text "${targetText}" in the container.`); return; } const endIndex = startIndex + targetText.length; // 1. SCAN PHASE const walker = document.createTreeWalker(searchRoot, NodeFilter.SHOW_TEXT, null, false); const matches = []; let currentNode; let currentGlobalOffset = 0; while (currentNode = walker.nextNode()) { const nodeText = currentNode.nodeValue; const nodeLength = nodeText.length; const nodeStart = currentGlobalOffset; const nodeEnd = currentGlobalOffset + nodeLength; if (nodeEnd > startIndex && nodeStart < endIndex) { const relativeStart = Math.max(0, startIndex - nodeStart); const relativeEnd = Math.min(nodeLength, endIndex - nodeStart); matches.push({ node: currentNode, start: relativeStart, end: relativeEnd }); } currentGlobalOffset += nodeLength; if (currentGlobalOffset > endIndex) break; } // 2. PAINT PHASE let hasScrolled = false; matches.forEach((match, index) => { const node = match.node; const start = match.start; const end = match.end; const nodeLength = node.nodeValue.length; // --- NEW: Determine Position --- const isFirst = index === 0; const isLast = index === matches.length - 1; let highlightNode = node; if (end < nodeLength) { highlightNode.splitText(end); } if (start > 0) { highlightNode = highlightNode.splitText(start); } const mark = document.createElement('mark'); mark.textContent = highlightNode.nodeValue; // --- NEW: Seamless Borders Logic --- // Only apply side borders/padding to the very start and very end // of the sequence. Inner nodes get flush connections. // 1. Border Radius: Rounded corners only on outer edges let borderRadiusVal = '0'; if (isFirst && isLast) borderRadiusVal = '3px'; // Single node else if (isFirst) borderRadiusVal = '3px 0 0 3px'; else if (isLast) borderRadiusVal = '0 3px 3px 0'; Object.assign(mark.style, { // Common styles backgroundColor: '#FFEEB4', boxShadow: '1px 2px rgba(204, 204, 204, 0.3)', paddingTop: '4px', paddingBottom: '4px', scrollMarginTop: !hasScrolled ? '100px' : '0', // Conditional styles borderLeft: isFirst ? '2.5px solid rgb(154, 105, 25)' : 'none', borderRight: isLast ? '2.5px solid rgb(154, 105, 25)' : 'none', paddingLeft: isFirst ? '3px' : '0', paddingRight: isLast ? '3px' : '0', borderRadius: borderRadiusVal }); // --- END Seamless Logic --- highlightNode.parentNode.replaceChild(mark, highlightNode); if (!hasScrolled) { setTimeout(() => { mark.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); hasScrolled = true; } }); } catch (e) { console.error("Error finding or highlighting text:", e); } } /** * Single, aggressive polling function. */ function pollForContent(retriesLeft) { if (window.location.pathname === '/') return; const mainContent = document.getElementById('main-content'); if (!mainContent) { if (retriesLeft > 0) setTimeout(() => pollForContent(retriesLeft - 1), 250); return; } const params = new URLSearchParams(window.location.search); const targetText = params.get('highlight'); const targetBlockId = params.get('block'); const targetTabId = params.get('tab'); if (!targetText) return; let searchRoot = mainContent; let tabIsFound = false; let blockIsFound = false; if (targetTabId) { const activatedTabContent = activateTabById(targetTabId); if (activatedTabContent) { searchRoot = activatedTabContent; tabIsFound = true; } } else { tabIsFound = true; } if (targetBlockId) { if (tabIsFound) { const targetBlock = searchRoot.querySelector(`[data-block-id="${targetBlockId}"]`); if (targetBlock) { searchRoot = targetBlock; blockIsFound = true; } } } else { blockIsFound = true; } if (tabIsFound && blockIsFound) { setTimeout(() => { activateTabById(targetTabId); performHighlight(searchRoot, targetText); }, 100); } else if (retriesLeft > 0) { setTimeout(() => { pollForContent(retriesLeft - 1); }, 250); } else { performHighlight(searchRoot, targetText); } } // --- Main Execution --- document.addEventListener('mouseup', showCopyButton); document.addEventListener('mousedown', hideCopyButton); copyButton.addEventListener('click', copyHighlightLink); window.addEventListener('load', () => { pollForContent(20); }); const originalPushState = history.pushState; history.pushState = function() { originalPushState.apply(this, arguments); setTimeout(() => pollForContent(20), 100); }; const originalReplaceState = history.replaceState; history.replaceState = function() { originalReplaceState.apply(this, arguments); setTimeout(() => pollForContent(20), 100); }; window.addEventListener('popstate', () => { setTimeout(() => pollForContent(20), 100); }); }); /** END HIGHLIGHT TO CREATE LINK SCRIPT **/ /** START HIDE INFO-BAR SCRIPT **/ /* This script enables readers to temporarily close out Info bars for 30 days. /* Info bars are a Doc360 tool that creates a header and adds text. */ (function() { 'use strict'; // --- All our helper functions go here --- const expiryDuration = 30 * 24 * 60 * 60 * 1000; // 30 days const customButtonClass = 'info-bar-custom-close-btn'; // We need this to find our button /** * Simple hash function to create a unique ID from the bar's text. */ function hashCode(str) { if (str.length === 0) return 0; let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; // Convert to 32bit integer } return Math.abs(hash); } /** * This is our main logic to process a single info-bar. * It is now "idempotent" - safe to run multiple times. */ function processInfoBar(bar) { // 1. Create the fingerprint (hash) const barText = bar.textContent.trim(); if (!barText) return; // Skip empty bars const barId = hashCode(barText); const storageKey = 'hidden-bar-' + barId; const hiddenData = localStorage.getItem(storageKey); // 2. Check localStorage if (hiddenData) { const { expiry } = JSON.parse(hiddenData); if (new Date().getTime() < expiry) { bar.style.display = 'none'; return; // Hide and stop } else { localStorage.removeItem(storageKey); // It's expired } } // 3. (FIX #1) Check if our button *already exists*. // If it does, it means the bar is fine and we can stop. if (bar.querySelector('.' + customButtonClass)) { return; } // 4. Find the inner content wrapper const contentWrapper = bar.firstElementChild; if (!contentWrapper) return; // Can't add a button contentWrapper.style.position = 'relative'; // 5. Create and add the close button const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.className = customButtonClass; // <-- Add our custom class closeButton.setAttribute('aria-label', 'Close info bar'); Object.assign(closeButton.style, { position: 'absolute', bottom: '0px', right: '0px', background: 'none', border: 'none', fontSize: '26px', lineHeight: '1', color: 'inherit', cursor: 'pointer', padding: '0 5px', zIndex: '99' }); closeButton.addEventListener('click', function(e) { e.stopPropagation(); bar.style.display = 'none'; const now = new Date(); const expiryTime = now.getTime() + expiryDuration; localStorage.setItem(storageKey, JSON.stringify({ expiry: expiryTime })); }); contentWrapper.prepend(closeButton); } // --- This is the updated MutationObserver logic --- // 1. Define what to do when a change is detected const observerCallback = (mutationsList, observer) => { // Use a Set to avoid processing the same bar multiple times const barsToReCheck = new Set(); for (const mutation of mutationsList) { if (mutation.type === 'childList') { // A) Check if a new .info-bar was *added* mutation.addedNodes.forEach(node => { if (node.nodeType !== 1) return; if (node.classList.contains('info-bar')) { barsToReCheck.add(node); } // Also check for bars *inside* the new node node.querySelectorAll('.info-bar').forEach(b => barsToReCheck.add(b)); }); // B) (FIX #2) Check if the *parent* of the change was an info-bar. // This catches when Angular re-renders *inside* the bar. if (mutation.target && mutation.target.nodeType === 1) { const parentBar = mutation.target.closest('.info-bar'); if (parentBar) { barsToReCheck.add(parentBar); } } } } // Now process all unique bars that were affected barsToReCheck.forEach(processInfoBar); }; // 2. Create an observer instance const observer = new MutationObserver(observerCallback); // 3. Start observing the entire document body for changes // We MUST observe 'body' or a high-level container. observer.observe(document.body, { childList: true, subtree: true }); // 4. Finally, run the function on any info-bars // that *already* exist on the page right now. document.querySelectorAll('.info-bar').forEach(processInfoBar); })(); // _____ ___ _ ___ _____ // |_ _/ _ \ /_\ / __|_ _| // | || (_) / _ \\__ \ | | // |_| \___/_/ \_\___/ |_| // (function() { // --- CONFIGURATION --- // 1. VERSIONING: Change this string (e.g., 'v2', 'spring2026') to reset the popup for all users. const POPUP_VERSION = 'v1'; // 2. CONTENT SOURCE: Where to pull the HTML from const SOURCE_URL = '/v1/pages/en/quick-links'; const TARGET_SELECTOR = 'article#articleContent'; // Internal storage key construction const STORAGE_KEY = `unqork_popup_seen_${POPUP_VERSION}`; // --- LOGIC --- // Check if user has already seen THIS version of the popup if (localStorage.getItem(STORAGE_KEY) === 'true') { return; // Exit silently } // Mark as seen immediately so it doesn't show on the next page load localStorage.setItem(STORAGE_KEY, 'true'); // Fetch and Render fetch(SOURCE_URL) .then(response => { if (!response.ok) throw new Error(`Status: ${response.status}`); return response.text(); }) .then(htmlString => { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); const content = doc.querySelector(TARGET_SELECTOR); if (content) { createPopup(content.innerHTML); } else { console.warn('Popup content selector not found on source page.'); } }) .catch(error => { console.error('Unqork Popup Error:', error); }); function createPopup(htmlContent) { const popup = document.createElement('div'); popup.id = 'unqork-quick-links-popup'; // Header const header = document.createElement('div'); header.className = 'uql-header'; const title = document.createElement('h3'); title.className = 'uql-title'; title.innerText = 'Quick Links'; // Update this title manually if needed const closeBtn = document.createElement('button'); closeBtn.className = 'uql-close-btn'; closeBtn.innerHTML = '×'; closeBtn.ariaLabel = 'Close'; // Body const body = document.createElement('div'); body.className = 'uql-content'; body.innerHTML = htmlContent; // Inject header.appendChild(title); header.appendChild(closeBtn); popup.appendChild(header); popup.appendChild(body); document.body.appendChild(popup); // Animate In setTimeout(() => popup.classList.add('is-visible'), 100); // Close Handler closeBtn.addEventListener('click', () => { popup.classList.remove('is-visible'); setTimeout(() => popup.remove(), 300); }); } })(); /** * _____ ___ ___ _ ___ * |_ _/ _ \ / __| /_\ |_ _| * | || (_) | (__ / _ \ | | * |_| \___/ \___| /_/ \_\___| * */ (function () { const B64 = 'PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiByb2xlPSJpbWciIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICA8cGF0aCBkPSJNMjAgMTBMMTguMjM1IDkuNjUzOEMxNC4yNDUyIDguODcwNiAxMS4xMjM3IDUuNzU0ODIgMTAuMzQ2MiAxLjc2NTA0TDkuOTk5OTkgNC4xOTYxN2UtMDdMOS42MDI3MyAxLjg4OTlDOC43ODU0NyA1Ljc2MDUgNS43NjA1MSA4Ljc3OTggMS44ODk5MSA5LjYwMjcyTDAgMTBMMS44ODQyMyAxMC4zOTE2QzUuODExNTggMTEuMjE0NSA4Ljg2NDkyIDE0LjI5NjMgOS42NDgxMiAxOC4yMzVMOS45OTk5OSAyMEwxMC4zNTE5IDE4LjIzNUMxMS4xMzUxIDE0LjMwMTkgMTQuMTg4NCAxMS4yMTQ1IDE4LjExNTggMTAuMzkxNkwyMCAxMFoiIGZpbGw9InVybCgjdW5xb3JrYWlfc3BhcmtsZV9hKSIvPgogIDxwYXRoIGQ9Ik0yMCAzLjZMMTkuMzY0NiAzLjQ3NTM3QzE3LjkyODMgMy4xOTM0MiAxNi44MDQ1IDIuMDcxNzQgMTYuNTI0NiAwLjYzNTQxNEwxNi40IDBMMTYuMjU3IDAuNjgwMzY0QzE1Ljk2MjggMi4wNzM3OCAxNC44NzM4IDMuMTYwNzMgMTMuNDgwNCAzLjQ1Njk4TDEyLjggMy42TDEzLjQ3ODMgMy43NDA5OEMxNC44OTIyIDQuMDM3MjMgMTUuOTkxNCA1LjE0NjY1IDE2LjI3MzMgNi41NjQ1OUwxNi40IDcuMkwxNi41MjY3IDYuNTY0NTlDMTYuODA4NiA1LjE0ODY5IDE3LjkwNzggNC4wMzcyMyAxOS4zMjE3IDMuNzQwOThMMjAgMy42WiIgZmlsbD0idXJsKCN1bnFvcmthaV9zcGFya2xlX2EpIi8+CiAgPHBhdGggZD0iTTE4LjQgMTUuNkwxOC4wNDcgMTUuNTMwOEMxNy4yNDkgMTUuMzc0MSAxNi42MjQ3IDE0Ljc1MSAxNi40NjkyIDEzLjk1M0wxNi40IDEzLjZMMTYuMzIwNSAxMy45NzhDMTYuMTU3MSAxNC43NTIxIDE1LjU1MjEgMTUuMzU2IDE0Ljc3OCAxNS41MjA1TDE0LjQgMTUuNkwxNC43NzY4IDE1LjY3ODNDMTUuNTYyMyAxNS44NDI5IDE2LjE3MyAxNi40NTkzIDE2LjMyOTYgMTcuMjQ3TDE2LjQgMTcuNkwxNi40NzA0IDE3LjI0N0MxNi42MjcgMTYuNDYwNCAxNy4yMzc3IDE1Ljg0MjkgMTguMDIzMiAxNS42NzgzTDE4LjQgMTUuNloiIGZpbGw9InVybCgjdW5xb3JrYWlfc3BhcmtsZV9hKSIvPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJ1bnFvcmthaV9zcGFya2xlX2EiIHgxPSItNiIgeTE9IjEuNzY0MjdlLTA4IiB4Mj0iMTkuMDA2NiIgeTI9IjE4LjQ5MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzAyMjEzIiBzdG9wLWNvbG9yPSIjMDBFRUZGIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC41OTg0MSIgc3RvcC1jb2xvcj0iIzMwOTVFOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwQzIzNDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; const TOOLTIP = 'UnqorkAI feature — requires an active AI capabilities agreement. Contact your Unqork representative to activate.'; const SPARKLE_RIGHT = ''; const SPARKLE_LEFT = ''; const SPARKLE_LEAD = ''; const SEPARATOR_OPEN = '

UnqorkAI

'; const SEPARATOR_CLOSE = '

'; const TOGGLE_HTML = '

'; const AI_NAMES = ['Build Agent', 'Smart Components', 'Agentic AI Component']; const AI_SLUGS = [ 'unqorkai-overview', 'build-agent', 'unqorkai-build-agent-unqorkai', 'build-agent-reference', 'build-agent-overview', 'getting-started-with-the-build-agent', 'using-the-build-agent-effectively', 'tasks-and-plans', 'smart-components-overview', 'smart-component-hub', 'smart-component-editor', 'smart-component-library', 'smart-component-settings', 'smart-component-logic-view', 'building-a-smart-component', 'example-smart-components', 'smart-component-output-type-compatibility', 'output-types-reference', 'promoting-smart-components', 'query-smart-components', 'using-smart-components-in-a-module', 'themes', 'theme-editor', 'chatbot', 'chat-agent-smart-component', 'ai-summarizer-component', 'llm-credentials', 'llm-configs', 'understanding-ai-model-settings', ]; // Exact Doc360 category node IDs to show in filter mode const AI_NODE_IDS = new Set([ 'node-1eff444c-b965-4920-b8ac-c2bf8a638d3e', // Build Agent 'node-974ff605-072b-4a9d-905f-5358183faf74', // Smart Components 'node-66196e3a-e9f4-4dc0-ad4a-00d15f601709', // Administration 'node-7e35758f-87d2-4e9a-8e8a-7e348df4cfb0', // Module Builder Components 'node-551c03d0-5889-4d96-9f86-3c15aadb3226', // Agentic AI Component 'node-eef4c540-e30e-46f3-8cc8-1cb716be4f86', // Reference Guides 'node-1ace0aca-a323-411b-90eb-89e080c0c0cf', // Output Types Reference subcategory ]); // UnqorkAI Overview article node — move before Build Agent to lead the AI section const UNQORKAI_OVERVIEW_ID = 'node-de7c0d22-1048-41bc-b290-753a3d567949'; const BUILD_AGENT_ID = 'node-1eff444c-b965-4920-b8ac-c2bf8a638d3e'; let filterActive = sessionStorage.getItem('aiFilterActive') === '1'; const expandedByFilter = new Set(); // tracks category IDs we expanded so we can collapse them on filter-off function slugInHref(href, slug) { return href.split(/[/?#]/).some(seg => seg === slug); } function isExactName(el) { const t = (el.textContent||'').trim(); return AI_NAMES.some(n => t === n); } function isPrefixOrSlug(el) { const h = el.getAttribute('href')||''; return AI_SLUGS.some(s => slugInHref(h, s)); } function isSlug(el) { const h = el.getAttribute('href')||''; return AI_SLUGS.some(s => slugInHref(h, s)); } function injectRight(el) { if (el.dataset.aiSparkle || !(el.textContent||'').trim()) return; el.dataset.aiSparkle='1'; el.insertAdjacentHTML('beforeend', SPARKLE_RIGHT); } function injectLeft(el) { if (el.dataset.aiSparkle || !(el.textContent||'').trim()) return; el.dataset.aiSparkle='1'; el.insertAdjacentHTML('afterbegin', SPARKLE_LEFT); } function getRowContainer(link) { return link.closest('[id^="node-"]') || link.closest('.article-title-container') || link.parentElement; } // Move UnqorkAI Overview before Build Agent so it leads the separator section function ensureUnqorkAIOverviewFirst() { const overview = document.getElementById(UNQORKAI_OVERVIEW_ID); const buildAgent = document.getElementById(BUILD_AGENT_ID); if (!overview || !buildAgent || !buildAgent.parentElement) return; if (overview.parentElement !== buildAgent.parentElement) return; // not siblings — skip to avoid cross-parent move const nodes = Array.from(buildAgent.parentElement.children); if (nodes.indexOf(overview) > nodes.indexOf(buildAgent)) { buildAgent.parentElement.insertBefore(overview, buildAgent); } } function expandAICategories() { AI_NODE_IDS.forEach(id => { const node = document.getElementById(id); if (!node) return; const treeItem = node.querySelector('[role="treeitem"]'); if (treeItem?.getAttribute('aria-expanded') === 'true') return; // already expanded — don't track it const arrow = node.querySelector('.tree-arrow'); if (arrow) { expandedByFilter.add(id); arrow.click(); } }); } function collapseFilterExpanded() { expandedByFilter.forEach(id => { const node = document.getElementById(id); if (node) { const treeItem = node.querySelector('[role="treeitem"]'); if (treeItem?.getAttribute('aria-expanded') === 'true') node.querySelector('.tree-arrow')?.click(); } expandedByFilter.delete(id); }); } function applyFilter(sidebar) { const btn = document.querySelector('[data-ai-filter-btn]'); if (btn) { if (filterActive) { btn.style.background='#77ACD7'; btn.style.color='#fff'; btn.textContent='✦ Show All'; } else { btn.style.background='none'; btn.style.color='#77ACD7'; btn.textContent='✦ UnqorkAI Only'; } } // Toggle ai-filter-mode on #left-panel — the CSS rule hides non-AI nodes without touching Angular's inline state const panel = document.getElementById('left-panel') || sidebar; if (panel) panel.classList.toggle('ai-filter-mode', filterActive); } function updateClosingSeparator(sidebar) { const existing = sidebar.querySelector('[data-ai-separator-close]'); if (filterActive) { // Filter ON: anchor after the last AI section node in the DOM const lastAI = [...sidebar.querySelectorAll('[data-ai-section]')].pop(); if (!lastAI) { existing?.remove(); return; } if (lastAI.nextElementSibling?.hasAttribute('data-ai-separator-close')) return; existing?.remove(); lastAI.insertAdjacentHTML('afterend', SEPARATOR_CLOSE); return; } // Filter OFF: place before the first non-AI node that immediately follows an AI node const allNodes = [...sidebar.querySelectorAll('[id^="node-"]')]; let lastAINode = null, firstNonAI = null; for (const node of allNodes) { if (node.dataset.aiSection === '1') { lastAINode = node; firstNonAI = null; } else if (lastAINode && !firstNonAI) { firstNonAI = node; break; } } if (!firstNonAI) { existing?.remove(); return; } if (firstNonAI.previousElementSibling?.hasAttribute('data-ai-separator-close')) return; existing?.remove(); firstNonAI.insertAdjacentHTML('beforebegin', SEPARATOR_CLOSE); } function getSidebar() { const candidates = [ document.querySelector('d360-category-tree'), document.querySelector('[class*="toc-tree"]'), document.querySelector('.side-nav'), document.querySelector('aside'), ]; return candidates.find(el => el && el.querySelector('[id^="node-"]')) || null; } let timer; function scan() { clearTimeout(timer); timer = setTimeout(() => { const sidebar = getSidebar(); const article = document.getElementById('articleContent'); // ensureUnqorkAIOverviewFirst(); — disabled: DOM moves confuse Angular virtual scroll node tracking if (sidebar) { sidebar.querySelectorAll('a[href]').forEach(el => { if (isExactName(el) || isSlug(el)) { injectRight(el); const row = getRowContainer(el); if (row && row.id && row.id.startsWith('node-') && !row.dataset.aiRow) { row.dataset.aiRow = '1'; } } }); // Remove stale AI decorations from recycled virtual-scroll nodes whose content changed sidebar.querySelectorAll('[data-ai-row]').forEach(row => { const link = row.querySelector('a[href]'); if (!link || (!isExactName(link) && !isSlug(link))) { row.removeAttribute('data-ai-row'); } }); sidebar.querySelectorAll('a[data-ai-sparkle]').forEach(el => { if (!isExactName(el) && !isSlug(el)) { delete el.dataset.aiSparkle; el.querySelectorAll('span[data-ai-tooltip]').forEach(s => s.remove()); } }); // Tag all nodes that should be visible in filter mode (drives CSS ai-filter-mode rule). // AI_NODE_IDS category nodes are NEVER reset — once tagged they keep data-ai-section // so CDK virtual-scroll recycling can't cause them to flicker hidden. The tag is only // cleared when CDK reuses the DOM node for a different (non-AI) category, at which // point its id no longer matches AI_NODE_IDS and the reset correctly removes it. sidebar.querySelectorAll('[data-ai-section]').forEach(el => { if (!AI_NODE_IDS.has(el.id)) el.removeAttribute('data-ai-section'); }); AI_NODE_IDS.forEach(id => { const el = document.getElementById(id); if (el) el.dataset.aiSection = '1'; }); sidebar.querySelectorAll('a[href]').forEach(el => { if (isExactName(el) || isSlug(el)) { const row = getRowContainer(el); if (row?.id?.startsWith('node-')) row.dataset.aiSection = '1'; } }); } // Inject toggle + opening separator once, as siblings of site-category-list-tree-view // (outside cdk-virtual-scroll-content-wrapper so Angular CDK's layout is never disrupted) if (!document.querySelector('[data-ai-filter-btn]')) { const treeView = document.querySelector('site-category-list-tree-view') || document.querySelector('d360-data-list-tree-view'); if (treeView) { treeView.insertAdjacentHTML('beforebegin', TOGGLE_HTML + SEPARATOR_OPEN); const btn = document.querySelector('[data-ai-filter-btn]'); if (btn) btn.addEventListener('click', () => { filterActive = !filterActive; sessionStorage.setItem('aiFilterActive', filterActive ? '1' : '0'); if (filterActive) { expandAICategories(); } else { collapseFilterExpanded(); } applyFilter(getSidebar()); }); } } // In filter mode, expand any AI category nodes that entered the DOM but haven't been expanded yet. // Covers both AI_NODE_IDS entries and subcategories that match by name/slug (e.g. "Smart Components" // under Reference Guides), identified by data-ai-section + presence of a .tree-arrow expand button. // In filter mode, expand any AI category node that is collapsed — runs on every scan so // post-navigation rebuilds (which reset aria-expanded to false) re-trigger expansion. if (filterActive && sidebar) { AI_NODE_IDS.forEach(id => { const node = document.getElementById(id); if (!node) return; const treeItem = node.querySelector('[role="treeitem"]'); if (treeItem?.getAttribute('aria-expanded') === 'true') return; const arrow = node.querySelector('.tree-arrow'); if (arrow) { expandedByFilter.add(id); arrow.click(); } }); sidebar.querySelectorAll('[data-ai-section]').forEach(node => { if (!node.id?.startsWith('node-')) return; const treeItem = node.querySelector('[role="treeitem"]'); if (treeItem?.getAttribute('aria-expanded') === 'true') return; const arrow = node.querySelector('.tree-arrow'); if (arrow) { expandedByFilter.add(node.id); arrow.click(); } }); } if (sidebar) updateClosingSeparator(sidebar); applyFilter(getSidebar()); document.querySelectorAll('a[href]').forEach(el => { if (sidebar && sidebar.contains(el)) return; if (article && article.contains(el)) return; if (isPrefixOrSlug(el)) injectRight(el); }); if (article) article.querySelectorAll('a[href]').forEach(el => { if (isSlug(el)) injectLeft(el); }); const banner = document.querySelector('d360-smart-bars .info-bar p'); if (banner && !banner.dataset.aiSparkle) { banner.dataset.aiSparkle='1'; banner.insertAdjacentHTML('afterbegin', SPARKLE_LEAD); } }, 150); } scan(); new MutationObserver(mutations => { // Fast path: immediately tag AI category nodes before the CSS filter can hide them. // Handles two CDK virtual-scroll cases: // addedNodes — CDK inserts a brand-new node for Reference Guides etc. // attributes — CDK recycles an existing node and changes its id to an AI category id if (filterActive) { for (const m of mutations) { if (m.type === 'childList') { for (const node of m.addedNodes) { if (node.nodeType === 1 && node.id && AI_NODE_IDS.has(node.id)) { node.dataset.aiSection = '1'; } } } else if (m.type === 'attributes' && m.target.id && AI_NODE_IDS.has(m.target.id)) { m.target.dataset.aiSection = '1'; } } } scan(); }).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['id'] }); // On full-page reload with filter active (restored from sessionStorage), expansion clicks // may fire before Angular attaches event handlers to .tree-arrow buttons. Retry at 800ms // and 1500ms to ensure expansion lands after Angular finishes hydrating. if (filterActive) { setTimeout(() => { if (filterActive) expandAICategories(); }, 800); setTimeout(() => { if (filterActive) expandAICategories(); }, 1500); } // SPA navigation detection — Angular collapses the TOC tree via aria-expanded (attribute // mutation) without removing DOM nodes, so the childList MutationObserver never sees it. // Patch pushState and listen for popstate to re-expand after Angular finishes navigation. function onNavigation() { if (!filterActive) return; setTimeout(() => { if (filterActive) expandAICategories(); }, 500); setTimeout(() => { if (filterActive) expandAICategories(); }, 1200); } const origPush = history.pushState.bind(history); history.pushState = function (...args) { origPush(...args); onNavigation(); }; window.addEventListener('popstate', onNavigation); })();