/*** 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); }); } })();

Date	Change
2026-09-11	Remove Smart Components banner; add Debug Execution link (EN-8102).
2026-09-11	Initial publication (EN-8102).

UDLC Toolkit 3.2.0 Release Notes

Enhancements