document.querySelectorAll('a img').forEach(img => img.removeAttribute('data-type')); /* ============================================================ Doc360 — Hide left TOC + Article Summary on specific pages v2 — fixes SPA race condition / flash on navigation ============================================================ */ (function () { 'use strict'; var PAGE_SLUGS = [ '/docs/demand-service', '/v1/docs/demand-service', '/docs/on-demand-emergency-work', '/docs/contracted-service', '/v1/docs/contracted-service', '/docs/short-term-projects', '/v1/docs/short-term-projects', '/docs/long-term-projects', '/v1/docs/long-term-projects', '/docs/maintenance-and-bug-fix-log', '/v1/docs/maintenance-and-bug-fix-log', '/release-hub/docs/maintenance-bug-fix-log', '/release-hub/docs', '/release-hub/docs/release-hub', '/docs/marketing-option-b-cards', '/release-hub/docs/st-release-notes', '/release-hub/docs/st-bug-fix-log', '/release-hub/docs/residential-service', '/release-hub/docs/residential-construction', '/release-hub/docs/commercial-service', '/release-hub/docs/commercial-construction', '/release-hub/docs/roofing-and-exteriors-release-notes' ]; var SUMMARY_SELECTOR = 'd360-article-summary'; function isHiddenPage() { return PAGE_SLUGS.some(function (s) { return window.location.pathname === s; }); } /* ---------- LEFT PANEL ---------- */ function hidePanel() { var panel = document.querySelector('site-docs-left-panel-container'); var content = document.querySelector('site-docs-content-panel-container'); var main = document.querySelector('#main-content'); if (!panel) return false; // signal: not ready yet panel.style.setProperty('display', 'none', 'important'); panel.style.setProperty('min-width', '0', 'important'); panel.style.setProperty('width', '0', 'important'); if (content) { content.style.setProperty('flex', '1 1 100%', 'important'); content.style.setProperty('max-width', '100%', 'important'); content.style.setProperty('width', '100%', 'important'); } if (main) { main.style.setProperty('padding', '24px 48px', 'important'); main.style.setProperty('max-width', '1200px', 'important'); main.style.setProperty('margin', '0 auto', 'important'); } return true; } function showPanel() { var panel = document.querySelector('site-docs-left-panel-container'); var content = document.querySelector('site-docs-content-panel-container'); var main = document.querySelector('#main-content'); if (!panel) return; panel.style.removeProperty('display'); panel.style.removeProperty('min-width'); panel.style.removeProperty('width'); if (content) { content.style.removeProperty('flex'); content.style.removeProperty('max-width'); content.style.removeProperty('width'); } if (main) { main.style.removeProperty('padding'); main.style.removeProperty('max-width'); main.style.removeProperty('margin'); } } /* ---------- ARTICLE SUMMARY ---------- */ function hideSummary() { var el = document.querySelector(SUMMARY_SELECTOR); if (!el) return false; // signal: not ready yet el.style.setProperty('display', 'none', 'important'); return true; } function showSummary() { var el = document.querySelector(SUMMARY_SELECTOR); if (el) el.style.removeProperty('display'); } /* ---------- MAIN CHECK ---------- */ // Returns true only when all target elements were found and acted on function check() { if (isHiddenPage()) { var panelDone = hidePanel(); var summaryDone = hideSummary(); return panelDone && summaryDone; } else { showPanel(); showSummary(); return true; } } /* ---------- RETRY LOOP ---------- After SPA navigation, Angular renders async. Poll every 50ms for up to 1500ms until elements are found. ------------------------------------------------------------ */ var retryTimer = null; function checkWithRetry() { clearInterval(retryTimer); var elapsed = 0; retryTimer = setInterval(function () { elapsed += 50; var done = check(); if (done || elapsed >= 1500) clearInterval(retryTimer); }, 50); } /* ---------- ALWAYS OBSERVE BODY ---------- Watch the full subtree so no Angular injection slips through, regardless of whether the panel element exists or not. ------------------------------------------------------------ */ var frameTimer; var observer = new MutationObserver(function () { cancelAnimationFrame(frameTimer); frameTimer = requestAnimationFrame(check); }); observer.observe(document.body, { childList: true, subtree: true }); /* ---------- SPA ROUTER HOOKS ---------- */ var origPushState = history.pushState.bind(history); history.pushState = function (state, title, url) { origPushState(state, title, url); checkWithRetry(); // use retry loop on navigation }; // Covers browser back/forward buttons window.addEventListener('popstate', function () { checkWithRetry(); }); /* ---------- INIT ---------- */ checkWithRetry(); })(); /*------------*/ window.wsFilter = function (f) { var btnStyles = { all: { on: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(55,65,81);background:rgb(55,65,81);color:rgb(255,255,255);', off: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(209,213,219);background:rgb(243,244,246);color:rgb(55,65,81);' }, pg: { on: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(124,74,3);background:rgb(124,74,3);color:rgb(254,249,236);', off: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(245,228,192);background:rgb(254,249,236);color:rgb(124,74,3);' }, id: { on: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(60,52,137);background:rgb(60,52,137);color:rgb(243,242,254);', off: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(213,208,247);background:rgb(243,242,254);color:rgb(60,52,137);' }, oe: { on: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(10,92,68);background:rgb(10,92,68);color:rgb(232,248,242);', off: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(168,230,208);background:rgb(232,248,242);color:rgb(10,92,68);' }, sp: { on: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(26,95,165);background:rgb(26,95,165);color:rgb(234,243,253);', off: 'cursor:pointer;font-size:13px;font-weight:500;padding:5px 14px;border-radius:999px;border:1.5px solid rgb(188,217,245);background:rgb(234,243,253);color:rgb(26,95,165);' } }; var labels = { all: 'all steps', pg: 'Profitable growth', id: 'Insight-driven decisions', oe: 'Operational efficiency', sp: 'Speed & responsiveness' }; /* Show / hide each step */ var steps = document.querySelectorAll('.ws-step'); var shown = 0; steps.forEach(function (s) { var codes = s.getAttribute('data-o').split(' '); var visible = (f === 'all') || (codes.indexOf(f) > -1); s.style.display = visible ? 'block' : 'none'; if (visible) shown++; }); /* Update counter */ var count = document.getElementById('ws-count'); if (count) { count.textContent = f === 'all' ? 'Showing all ' + shown + ' steps' : 'Showing ' + shown + ' step' + (shown !== 1 ? 's' : '') + ' — ' + labels[f]; } /* Show / hide empty message */ var empty = document.getElementById('ws-empty'); if (empty) { empty.style.display = shown === 0 ? 'block' : 'none'; } /* Update chip button styles */ Object.keys(btnStyles).forEach(function (k) { var btn = document.getElementById('ws-' + k); if (btn) { btn.setAttribute('style', f === k ? btnStyles[k].on : btnStyles[k].off); } }); }; /* ============================================================ Release Hub Home — body class + explore panel Single merged IIFE replacing the two separate ones. Handles body class injection AND panel injection. SPA-aware: works on full loads + client-side navigation. ============================================================ */ (function () { 'use strict'; /* ============================================================ CONFIGURABLE SECTION Update URLs to match your actual Doc360 paths. Lists are displayed in the order defined here — already sorted alphabetically for you. ============================================================ */ var INDUSTRY = [ { name: 'Residential Service & Replacement', url: '/release-hub/docs/residential-service', icon: '' }, { name: 'Residential Construction', url: '/release-hub/docs/residential-construction', icon: '' }, { name: 'Commercial Service & Replacement', url: '/release-hub/docs/commercial-service', icon: '' }, { name: 'Commercial Construction', url: '/release-hub/docs/commercial-construction', icon: '' }, { name: 'Roofing & Exteriors', url: '/release-hub/docs/roofing-and-exteriors-release-notes', icon: '' }, ]; var PRODUCT = [ { name: 'Contact Center Pro', url: '/docs/release-notes-7', icon: '' }, { name: 'Enterprise Hub', url: '/docs/release-notes-2', icon: '' }, { name: 'Field Mobile App', url: '/docs/release-notes-1', icon: '' }, { name: 'Full Procurement Integration', url: '/docs/release-notes-5', icon: '' }, { name: 'Voice Agents', url: '/docs/release-notes-8', icon: '' }, ]; /* "See all products" link */ var SEE_ALL_URL = '/docs/product-areas'; /* ============================================================ END CONFIGURABLE SECTION ============================================================ */ /* ─── Body class management ─── */ function updateBodyClass() { var path = window.location.pathname; if (path === '/release-hub' || path === '/release-hub/') { document.body.classList.add('is-release-hub-home'); } else { document.body.classList.remove('is-release-hub-home'); } } /* ─── HTML builders ─── */ function icon(d) { return ''; } function row(item) { return '' + '' + icon(item.icon) + '' + '' + item.name + '' + '\u2192' + ''; } function seeAllCTA(view) { if (view !== 'product') return ''; return '' + 'See all products' + '' + ''; } function buildPanel() { return '

' + '

Explore release notes

' + '

' + '' + '' + '

' + '

' + INDUSTRY.map(row).join('') + '

' + '' + '

'; } function wireToggle(panel) { panel.querySelectorAll('.ep-toggle-btn').forEach(function (btn) { btn.addEventListener('click', function () { panel.querySelectorAll('.ep-toggle-btn').forEach(function (b) { b.classList.remove('ep-active'); }); btn.classList.add('ep-active'); var v = btn.getAttribute('data-ep-view'); panel.querySelector('#ep-list-industry').style.display = v === 'industry' ? 'block' : 'none'; panel.querySelector('#ep-list-product').style.display = v === 'product' ? 'block' : 'none'; }); }); } /* ─── Wrap hero children into a single left column ─── */ function wrapHeroContent(container) { if (container.querySelector('.hero-left-wrapper')) return; var children = Array.from(container.children).filter(function (el) { return !el.classList.contains('hero-explore-panel'); }); if (!children.length) return; var wrapper = document.createElement('div'); wrapper.className = 'hero-left-wrapper'; container.insertBefore(wrapper, children[0]); children.forEach(function (child) { wrapper.appendChild(child); }); } function unwrapHeroContent() { var wrapper = document.querySelector('.hero-left-wrapper'); if (!wrapper) return; var container = wrapper.parentNode; Array.from(wrapper.children).forEach(function (child) { container.insertBefore(child, wrapper); }); wrapper.remove(); } /* ─── Panel inject / remove ─── */ function removePanel() { var el = document.querySelector('.hero-explore-panel'); if (el) el.remove(); } function injectPanel() { // Only act on the Release Hub home — never touch other workspaces' heroes if (!document.body.classList.contains('is-release-hub-home')) return; var container = document.querySelector('.hero-section .container'); if (!container) return; wrapHeroContent(container); if (container.querySelector('.hero-explore-panel')) return; var tmp = document.createElement('div'); tmp.innerHTML = buildPanel(); var panel = tmp.firstChild; container.appendChild(panel); wireToggle(panel); } /* ─── Inject a style rule to instantly hide stale hero sections ─── */ (function () { var s = document.createElement('style'); s.id = 'rh-ssr-hide'; s.textContent = 'body.rh-clearing-heroes site-hero-section:not(:last-of-type){display:none!important;}'; document.head.appendChild(s); })(); /* ─── Remove duplicate/stale hero sections left by SSR after SPA nav ─── */ function removeStaleSsrHeroes() { var heroes = document.querySelectorAll('site-hero-section'); if (heroes.length <= 1) { document.body.classList.remove('rh-clearing-heroes'); return; } for (var i = 0; i < heroes.length - 1; i++) { heroes[i].remove(); } document.body.classList.remove('rh-clearing-heroes'); } /* ─── Full cleanup — call synchronously when leaving Release Hub ─── */ function cleanupReleaseHub() { removePanel(); unwrapHeroContent(); // Instantly hide stale heroes via CSS before the deferred DOM removal document.body.classList.add('rh-clearing-heroes'); removeStaleSsrHeroes(); } /* ─── SPA navigation hooks ─── */ var previousPath = window.location.pathname; function onNavigate() { var currentPath = window.location.pathname; var wasReleaseHub = (previousPath === '/release-hub' || previousPath === '/release-hub/'); var isReleaseHub = (currentPath === '/release-hub' || currentPath === '/release-hub/'); if (wasReleaseHub && !isReleaseHub) { cleanupReleaseHub(); } previousPath = currentPath; updateBodyClass(); if (isReleaseHub) { setTimeout(injectPanel, 400); } // Hide stale heroes immediately via CSS, then remove from DOM after Angular settles. if (!isReleaseHub) { document.body.classList.add('rh-clearing-heroes'); setTimeout(removeStaleSsrHeroes, 600); setTimeout(removeStaleSsrHeroes, 1200); } } var origPush = history.pushState.bind(history); history.pushState = function (s, t, u) { origPush(s, t, u); onNavigate(); }; var origReplace = history.replaceState.bind(history); history.replaceState = function (s, t, u) { origReplace(s, t, u); onNavigate(); }; window.addEventListener('popstate', onNavigate); window.addEventListener('hashchange', onNavigate); // MutationObserver: only inject if we are on the Release Hub home // and the panel hasn't been added yet — avoids touching other heroes var raf; new MutationObserver(function () { if (!document.body.classList.contains('is-release-hub-home')) return; cancelAnimationFrame(raf); raf = requestAnimationFrame(injectPanel); }).observe(document.body, { childList: true, subtree: true }); updateBodyClass(); injectPanel(); })(); /* ============================================================ Release Highlights — Lightbox player Handles Wistia video lightbox for release highlight cards. Functions are global so they're ready before any click fires. ============================================================ */ window.openLightbox = function (videoId) { var lb = document.getElementById('wn-lightbox'); if (!lb) return; document.getElementById('wn-lightbox-iframe').src = 'https://fast.wistia.net/embed/iframe/' + videoId + '?autoplay=1&videoFoam=true'; lb.style.display = 'flex'; document.body.style.overflow = 'hidden'; }; window.closeLightboxBtn = function () { var lb = document.getElementById('wn-lightbox'); if (!lb) return; document.getElementById('wn-lightbox-iframe').src = ''; lb.style.display = 'none'; document.body.style.overflow = ''; }; window.closeLightbox = function (e) { if (e.target === document.getElementById('wn-lightbox')) { window.closeLightboxBtn(); } }; document.addEventListener('keydown', function (e) { if (e.key === 'Escape') window.closeLightboxBtn(); }); /* ============================================================ Latest Release Notes — Icon injection for industry buttons Prepends SVG icons to plain styled buttons in #rln-industry-links. The buttons themselves are styled inline in the article HTML. ============================================================ */ (function () { 'use strict'; var ICONS = { 'Residential Service & Replacement': '', 'Residential Construction': '', 'Commercial Service & Replacement': '', 'Commercial Construction': '', 'Roofing & Exteriors': '' }; function svgIcon(pathData) { return ''; } function injectIcons() { var container = document.getElementById('rln-industry-links'); if (!container) return; container.querySelectorAll('a').forEach(function (a) { if (a.getAttribute('data-icon-injected')) return; // already done var label = a.textContent.trim(); var iconPath = ICONS[label]; if (!iconPath) return; a.innerHTML = svgIcon(iconPath) + ' ' + label; a.setAttribute('data-icon-injected', '1'); }); } /* Run on load and after SPA navigations */ injectIcons(); var raf; new MutationObserver(function () { cancelAnimationFrame(raf); raf = requestAnimationFrame(injectIcons); }).observe(document.body, { childList: true, subtree: true }); })(); /* ============================================================ Browse by Product — Core / Pro / Max toggle (generalized) REPLACES the existing "Browse by Product — Core / Pro toggle" block in Global JS Customization. Why this changed: The old handler hardcoded exactly two tiers (isCore boolean) and toggled .bbp-list-core / .bbp-list-pro directly. This version reads data-tier from whichever button was clicked and shows/hides ANY number of panels within the same .bbp-section, so a page can have 2 tiers or 3 (or more) without another code change. Backward compatible: panels can use the new data-bbp-panel="x" attribute (recommended), OR keep the legacy .bbp-list-core / .bbp-list-pro classes — both are recognized. Existing Core/Pro toggles elsewhere in Doc360 keep working unchanged. ============================================================ */ document.addEventListener('click', function(e) { var btn = e.target.closest('.bbp-toggle-btn'); if (!btn) return; var section = btn.closest('.bbp-section'); if (!section) return; var tier = btn.getAttribute('data-tier'); /* Update button styles: active vs inactive */ var buttons = section.querySelectorAll('.bbp-toggle-btn'); buttons.forEach(function (b) { var isActive = b === btn; b.style.background = isActive ? '#ffffff' : 'transparent'; b.style.color = isActive ? '#0d1b35' : 'rgba(255,255,255,0.65)'; b.style.boxShadow = isActive ? '0 1px 3px rgba(0,0,0,0.20)' : 'none'; }); /* Show the matching panel, hide the rest. A panel's tier comes from data-bbp-panel if present, otherwise falls back to the legacy class names so older markup keeps working. */ var panels = section.querySelectorAll('[data-bbp-panel], .bbp-list-core, .bbp-list-pro'); panels.forEach(function (panel) { var panelTier = panel.getAttribute('data-bbp-panel'); if (!panelTier) { if (panel.classList.contains('bbp-list-core')) panelTier = 'core'; else if (panel.classList.contains('bbp-list-pro')) panelTier = 'pro'; } if (!panelTier) return; panel.style.display = panelTier === tier ? '' : 'none'; }); /* Elements that should only appear on certain tabs (e.g. "View all products" hidden on the Max tab) use a comma-separated data-bbp-visible-tiers list instead of a single panel tier. */ var conditional = section.querySelectorAll('[data-bbp-visible-tiers]'); conditional.forEach(function (el) { var tiers = el.getAttribute('data-bbp-visible-tiers').split(',').map(function (t) { return t.trim(); }); el.style.display = tiers.indexOf(tier) > -1 ? '' : 'none'; }); }); /* ============================================================ "What's Max?" info button — popover open/close ADD this as a new block in Global JS Customization. It's independent of the Core/Pro/Max toggle handler used elsewhere, so both patterns can exist on the same page or different pages without conflicting. ============================================================ */ document.addEventListener('click', function (e) { var btn = e.target.closest('.max-info-btn'); if (btn) { var popover = document.getElementById(btn.getAttribute('aria-controls')); if (!popover) return; var isOpen = popover.style.display === 'block'; popover.style.display = isOpen ? 'none' : 'block'; btn.setAttribute('aria-expanded', String(!isOpen)); return; } /* Click outside an open popover closes it */ document.querySelectorAll('.max-info-popover').forEach(function (p) { if (p.style.display === 'block' && !p.contains(e.target)) { p.style.display = 'none'; var relatedBtn = document.querySelector('[aria-controls="' + p.id + '"]'); if (relatedBtn) relatedBtn.setAttribute('aria-expanded', 'false'); } }); }); /* Escape key closes any open popover */ document.addEventListener('keydown', function (e) { if (e.key !== 'Escape') return; document.querySelectorAll('.max-info-popover').forEach(function (p) { if (p.style.display === 'block') { p.style.display = 'none'; var relatedBtn = document.querySelector('[aria-controls="' + p.id + '"]'); if (relatedBtn) relatedBtn.setAttribute('aria-expanded', 'false'); } }); }); /* ============================================================ Header Icon Links — Academy + Ideas v8 — desktop: before d360-header-profile in the nav flex row mobile: inside .footer-options (the empty flex slot next to the profile/login in the mobile drawer) ============================================================ */ (function () { 'use strict'; var ICONS = [ { id: 'st-header-academy', label: 'Academy', url: 'https://servicetitan.docebosaas.com/academy/', svg: '' }, { id: 'st-header-ideas', label: 'Ideas', url: 'https://ideas.servicetitan.com/', svg: '' } ]; /* ── Body-level tooltip ── */ var _tooltip = null; function getTooltip() { if (_tooltip && document.body.contains(_tooltip)) return _tooltip; _tooltip = document.createElement('div'); _tooltip.id = 'st-icon-tooltip'; _tooltip.style.cssText = [ 'position:fixed', 'z-index:999999', 'background:#141414', 'color:#fff', 'font-size:11.5px', 'font-weight:500', 'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif', 'padding:4px 9px', 'border-radius:5px', 'white-space:nowrap', 'pointer-events:none', 'opacity:0', 'transition:opacity 0.15s ease', 'top:0', 'left:0' ].join(';'); document.body.appendChild(_tooltip); return _tooltip; } function showTooltip(label, anchorEl) { var tip = getTooltip(); tip.textContent = label; tip.style.display = 'block'; var rect = anchorEl.getBoundingClientRect(); var tipWidth = tip.offsetWidth; tip.style.left = Math.round(rect.left + (rect.width / 2) - (tipWidth / 2)) + 'px'; tip.style.top = Math.round(rect.bottom + 6) + 'px'; requestAnimationFrame(function () { tip.style.opacity = '1'; }); } function hideTooltip() { var tip = getTooltip(); tip.style.opacity = '0'; } /* ── Build one icon wrapper ── context: 'desktop' or 'mobile' — used to scope cleanup ── */ function buildItem(icon, context) { var wrap = document.createElement('div'); wrap.setAttribute('data-st-icon', icon.id); wrap.setAttribute('data-st-ctx', context); wrap.style.cssText = 'display:inline-flex;align-items:center;margin:0;padding:0;'; var a = document.createElement('a'); a.href = icon.url; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'st-header-icon-btn'; a.setAttribute('aria-label', icon.label); a.innerHTML = ''; a.addEventListener('mouseenter', function () { showTooltip(icon.label, a); }); a.addEventListener('mouseleave', hideTooltip); wrap.appendChild(a); return wrap; } /* ── Desktop injection ── Inserts before in the primary nav flex row. ── */ function injectDesktop() { if (document.querySelector('[data-st-icon][data-st-ctx="desktop"]')) return true; var profile = document.querySelector( 'site-desktop-primary-header d360-header-profile' ); if (!profile) { // Fallback: any d360-header-profile not inside the mobile drawer var all = document.querySelectorAll('d360-header-profile'); for (var i = 0; i < all.length; i++) { if (!all[i].closest('[bladefooter]') && !all[i].classList.contains('mobile-view')) { profile = all[i]; break; } } } if (!profile) return false; var parent = profile.parentElement; if (!parent) return false; for (var j = ICONS.length - 1; j >= 0; j--) { parent.insertBefore(buildItem(ICONS[j], 'desktop'), profile); } return true; } /* ── Mobile injection ── Target: div.footer-options inside the blade footer. This is the empty flex slot that sits alongside the profile section in the mobile drawer bottom bar. ── */ function injectMobile() { if (document.querySelector('[data-st-icon][data-st-ctx="mobile"]')) return true; var footerOptions = document.querySelector('[bladefooter] .footer-options'); if (!footerOptions) return false; for (var i = ICONS.length - 1; i >= 0; i--) { footerOptions.insertBefore(buildItem(ICONS[i], 'mobile'), footerOptions.firstChild); } return true; } /* ── Combined injection ── */ function injectAll() { var desktop = injectDesktop(); injectMobile(); // best-effort — only present when mobile drawer is open return desktop; } /* ── Retry loop ── */ var retryTimer = null; function injectWithRetry() { clearInterval(retryTimer); var elapsed = 0; retryTimer = setInterval(function () { elapsed += 50; var done = injectAll(); if (done || elapsed >= 2000) clearInterval(retryTimer); }, 50); } /* ── MutationObserver ── Watches for both desktop icons going missing AND the mobile drawer being opened (which renders .footer-options fresh). ── */ var raf; new MutationObserver(function () { cancelAnimationFrame(raf); raf = requestAnimationFrame(function () { var desktopMissing = !document.querySelector('[data-st-icon][data-st-ctx="desktop"]'); var drawerOpen = !!document.querySelector('[bladefooter] .footer-options'); var mobileMissing = drawerOpen && !document.querySelector('[data-st-icon][data-st-ctx="mobile"]'); if (desktopMissing) injectDesktop(); if (mobileMissing) injectMobile(); }); }).observe(document.body, { childList: true, subtree: true }); /* ── SPA navigation ── */ function onNavigate() { document.querySelectorAll('[data-st-icon]').forEach(function (el) { el.remove(); }); injectWithRetry(); } var _origPush = history.pushState.bind(history); var _origReplace = history.replaceState.bind(history); history.pushState = function (s, t, u) { _origPush(s, t, u); onNavigate(); }; history.replaceState = function (s, t, u) { _origReplace(s, t, u); onNavigate(); }; window.addEventListener('popstate', onNavigate); injectWithRetry(); })(); /* ============================================================ Left Panel — Default to Collapsed State Masks the panel with opacity:0 immediately, collapses it via the toggle button, then unmasks once done. Updated selector: aria-label changed to "Toggle navigation panel" in Doc360 when the Favorites feature was introduced. ============================================================ */ (function () { 'use strict'; var HIDDEN_SLUGS = [ '/docs/demand-service', '/v1/docs/demand-service', '/docs/on-demand-emergency-work', '/docs/contracted-service', '/v1/docs/contracted-service', '/docs/short-term-projects', '/v1/docs/short-term-projects', '/docs/long-term-projects', '/v1/docs/long-term-projects', '/docs/maintenance-and-bug-fix-log', '/v1/docs/maintenance-and-bug-fix-log', '/release-hub/docs/maintenance-bug-fix-log', '/release-hub/docs', '/release-hub/docs/release-hub', '/docs/marketing-option-b-topics', '/release-hub/docs/st-release-notes', '/release-hub/docs/st-bug-fix-log', '/release-hub/docs/residential-service', '/release-hub/docs/residential-construction', '/release-hub/docs/commercial-service', '/release-hub/docs/commercial-construction', '/release-hub/docs/roofing-and-exteriors-release-notes' ]; function isHiddenPage() { return HIDDEN_SLUGS.some(function (s) { return window.location.pathname === s; }); } /* ── Mask helpers ── opacity:0 hides the panel visually but preserves layout, so the article area doesn't reflow or shift at any point. ── */ function applyMask() { if (!isHiddenPage()) { document.body.classList.add('lp-collapsing'); } } function removeMask() { document.body.classList.remove('lp-collapsing'); } /* Safety: always remove mask after 2s no matter what */ var maskTimer = null; function applyMaskWithSafety() { applyMask(); clearTimeout(maskTimer); maskTimer = setTimeout(removeMask, 2000); } /* ── Core collapse logic ── */ function tryCollapse() { if (isHiddenPage()) { removeMask(); return true; } var btn = document.querySelector( 'button.expand-collapse-btn[aria-label="Toggle navigation panel"]' ); if (!btn) return false; if (btn.getAttribute('aria-expanded') === 'true') { btn.click(); } /* Remove mask after Doc360's collapse animation completes */ setTimeout(removeMask, 150); clearTimeout(maskTimer); return true; } /* ── MutationObserver ── */ var observer = null; function observeAndCollapse() { if (isHiddenPage()) { removeMask(); return; } if (tryCollapse()) return; if (observer) observer.disconnect(); observer = new MutationObserver(function () { var btn = document.querySelector( 'button.expand-collapse-btn[aria-label="Toggle navigation panel"]' ); if (!btn) return; observer.disconnect(); observer = null; if (btn.getAttribute('aria-expanded') === 'true') { btn.click(); } setTimeout(removeMask, 150); clearTimeout(maskTimer); }); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(function () { if (observer) { observer.disconnect(); observer = null; } removeMask(); }, 5000); } /* ── SPA navigation hooks ── */ var _origPush = history.pushState.bind(history); var _origReplace = history.replaceState.bind(history); history.pushState = function (s, t, u) { _origPush(s, t, u); applyMaskWithSafety(); setTimeout(observeAndCollapse, 50); }; history.replaceState = function (s, t, u) { _origReplace(s, t, u); applyMaskWithSafety(); setTimeout(observeAndCollapse, 50); }; window.addEventListener('popstate', function () { applyMaskWithSafety(); setTimeout(observeAndCollapse, 50); }); /* ── Init — fresh page load ── */ applyMaskWithSafety(); observeAndCollapse(); })(); /* ============================================================ ServiceTitan Max PLP — body class + conditional font load Same pattern as the existing "is-release-hub-home" logic above. - Adds body.is-stmax-plp only when on the Max PLP article, which is what scopes the Global CSS rules to just this page. - Loads the Nunito / Nunito Sans font ONLY on this page (as a , not a CSS @import), so every other Knowledge Base page does not pay for an extra font request it never uses. This also sidesteps the CSS rule that @import must be the very first rule in a stylesheet — which a plain @import appended to the bottom of Global CSS would silently violate and get ignored. UPDATED — fixed path (was '/docs/servicetitan-max-home', which does not match the actual published URL) AND added a content-based fallback (checks for the article's own heading id) so this keeps working even if the slug changes again in the future. ============================================================ */ (function () { 'use strict'; var MAX_PLP_PATHS = [ '/docs/servicetitan-max', '/v1/docs/servicetitan-max', '/docs/servicetitan-max-home', '/v1/docs/servicetitan-max-home' ]; var FONT_HREF = "https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Nunito:wght@400;600;700;800&display=swap"; var FONT_LINK_ID = 'stmax-plp-font'; function isMaxPlp() { // Primary check: known published path(s) if (MAX_PLP_PATHS.indexOf(window.location.pathname) > -1) return true; // Fallback: the article's own heading id, so a future slug // rename doesn't silently break the styling again. return !!document.getElementById('servicetitan-max'); } function loadFont() { if (document.getElementById(FONT_LINK_ID)) return; var link = document.createElement('link'); link.id = FONT_LINK_ID; link.rel = 'stylesheet'; link.href = FONT_HREF; document.head.appendChild(link); } function removeFont() { var link = document.getElementById(FONT_LINK_ID); if (link) link.remove(); } function updateStMaxPlpState() { if (isMaxPlp()) { document.body.classList.add('is-stmax-plp'); loadFont(); } else { document.body.classList.remove('is-stmax-plp'); removeFont(); } } updateStMaxPlpState(); var origPush = history.pushState.bind(history); history.pushState = function (s, t, u) { origPush(s, t, u); updateStMaxPlpState(); }; var origReplace = history.replaceState.bind(history); history.replaceState = function (s, t, u) { origReplace(s, t, u); updateStMaxPlpState(); }; window.addEventListener('popstate', updateStMaxPlpState); })();