// This function contains all the replacement and theme logic. function applyReplacements() { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const lightModeColor = "#0259f7"; const darkModeColor = "#0259f7"; const borderColor = isDarkMode ? darkModeColor : lightModeColor; const replacements = [ { id: "mfdrs918-bsjdu3-062", find: `"buildingblocks-kernel-url-value"`, replace: `"buildingblocks-kernel-url-value"` }, { id: "mff3xrt4-ar6rux-017", find: `buildingblocks-kernel-url-value`, replace: `buildingblocks-kernel-url-value` }, { id: "mff41xxm-jz196i-022", find: `"https://myplatform.com"`, replace: `"https://myplatform.com"` } ]; replacements.forEach(item => { const blockElement = document.querySelector(`[data-block-id="${item.id}"]`); if (blockElement) { if (blockElement.innerHTML.includes(item.find)) { blockElement.innerHTML = blockElement.innerHTML.replace(item.find, item.replace); } } }); } // 1. Run on initial page load to handle the first view. window.onload = applyReplacements; // 2. Add an event listener to handle live theme changes. window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyReplacements); // ============================================================ // LOGO GRID — Scroll-triggered line draw animation // Replicates the docebo.com social-proof-logo-grid effect: // SVG strokeDashoffset draw-in with 3 glow layers per line. // Pure JS + inline SVG, no GSAP or other dependencies. // ============================================================ (function () { const PALETTE = ['#ff3da8', '#00b7ff']; const STROKE_CORE = 1; // px — crisp center line const STROKE_GLOW = 4; // px — soft inner glow const STROKE_HALO = 6; // px — wide outer halo const TRIGGER_POS = '85%'; // viewport position that fires the animation // ── Easing helpers ──────────────────────────────────────────── const rand = (lo, hi) => lo + Math.random() * (hi - lo); const pick = arr => arr[Math.floor(Math.random() * arr.length)]; // power1.inOut equivalent function easeInOut(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; } // ── Low-level SVG helpers ───────────────────────────────────── const NS = 'http://www.w3.org/2000/svg'; function svgEl(tag, attrs) { const el = document.createElementNS(NS, tag); Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v)); return el; } // Create a filter and return its id function makeGlowFilter(defs, id) { const filter = svgEl('filter', { id, x: '-50%', y: '-50%', width: '200%', height: '200%' }); const blur = svgEl('feGaussianBlur', { stdDeviation: '3', result: 'b' }); filter.appendChild(blur); defs.appendChild(filter); return id; } // Animate a strokeDashoffset from `total` → 0, then fade out function animateLine(elements, total, duration, delay, fadeTime) { let startTime = null; function draw(now) { if (!startTime) startTime = now + delay * 1000; if (now < startTime) { requestAnimationFrame(draw); return; } const elapsed = now - startTime; const progress = Math.min(elapsed / (duration * 1000), 1); const offset = total * (1 - easeInOut(progress)); elements.forEach(el => el.style.strokeDashoffset = offset); if (progress < 1) { requestAnimationFrame(draw); } else { // Draw complete — fade out all layers const fadeStart = performance.now(); function fade(now) { const p = Math.min((now - fadeStart) / (fadeTime * 1000), 1); const o = 1 - (p * p); // easeIn fade elements.forEach(el => el.style.opacity = o); if (p < 1) requestAnimationFrame(fade); } requestAnimationFrame(fade); } } requestAnimationFrame(draw); } // ── Build all SVG layers for the grid ──────────────────────── function buildOverlay(grid) { const items = [...grid.querySelectorAll('.logo-grid__item')]; if (!items.length) return; const gRect = grid.getBoundingClientRect(); const W = grid.offsetWidth; const H = grid.offsetHeight; // Overlay container const overlay = document.createElement('div'); overlay.style.cssText = 'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1;'; grid.appendChild(overlay); // Detect column count from layout const cols = Math.round(W / items[0].offsetWidth); const rows = Math.ceil(items.length / cols); // Vertical line x-positions: left border + internal dividers + right border // (mirrors docebo.com: m includes 0 and W so all 4 perimeter sides animate) const vLines = [0]; for (let c = 1; c < cols; c++) { const item = items[c]; if (item) vLines.push(Math.round(item.getBoundingClientRect().left - gRect.left)); } vLines.push(W); // Horizontal line y-positions: top border + internal row dividers + bottom border const firstItem = items[0].getBoundingClientRect(); const lastItem = items[items.length - 1].getBoundingClientRect(); const hLines = [Math.round(firstItem.top - gRect.top)]; for (let r = 0; r < rows - 1; r++) { const rowEnd = items.slice(r * cols, (r + 1) * cols); const rowStart = items.slice((r + 1) * cols, (r + 2) * cols); if (!rowEnd.length || !rowStart.length) continue; const bottomOfRow = Math.max(...rowEnd.map(el => el.getBoundingClientRect().bottom - gRect.top)); const topOfNext = Math.min(...rowStart.map(el => el.getBoundingClientRect().top - gRect.top)); hLines.push((bottomOfRow + topOfNext) / 2); } hLines.push(Math.round(lastItem.bottom - gRect.top)); const timelines = []; // collect { elements, total, duration, delay, fadeTime } // ── Horizontal lines ───────────────────────────────────────── hLines.forEach((y, i) => { const padX = W * 0.05; const x1 = -padX, x2 = W + padX; const width = x2 - x1; const svgW = Math.round(width); const color = pick(PALETTE); const filtId = `glow-h-${Date.now()}-${i}`; const svg = svgEl('svg', { viewBox : `${x1} 0 ${svgW} ${H}`, preserveAspectRatio: 'xMinYMin meet', 'aria-hidden' : 'true', }); Object.assign(svg.style, { position: 'absolute', left: `${x1}px`, top: '0', width: `${svgW}px`, height: `${H}px`, overflow: 'visible', }); const defs = svgEl('defs', {}); makeGlowFilter(defs, filtId); svg.appendChild(defs); const d = `M ${x1} ${y} L ${x2} ${y}`; const halo = svgEl('path', { d, stroke: color, 'stroke-width': STROKE_HALO, 'stroke-opacity': '0.15', fill: 'none', filter: `url(#${filtId})` }); const glow = svgEl('path', { d, stroke: color, 'stroke-width': STROKE_GLOW, 'stroke-opacity': '0.35', fill: 'none', filter: `url(#${filtId})` }); const core = svgEl('path', { d, stroke: color, 'stroke-width': STROKE_CORE, 'stroke-opacity': '1', fill: 'none' }); [core, glow, halo].forEach(el => { el.style.strokeDasharray = width; el.style.strokeDashoffset = width; el.style.strokeLinecap = 'round'; svg.appendChild(el); }); overlay.appendChild(svg); timelines.push({ elements : [core, glow, halo], total : width, duration : rand(0.81, 1.44), delay : rand(0, 1.08), fadeTime : 0.36, }); }); // ── Vertical lines ─────────────────────────────────────────── if (vLines.length) { const padY = H * 0.1; const y1 = -padY, y2 = H + padY; const height = y2 - y1; const color = pick(PALETTE); const filtId = `glow-v-${Date.now()}`; const svg = svgEl('svg', { viewBox : `0 ${y1} ${W} ${Math.round(height)}`, preserveAspectRatio: 'xMinYMin meet', 'aria-hidden' : 'true', }); Object.assign(svg.style, { position: 'absolute', left: '0', top: `${y1}px`, width: `${W}px`, height: `${Math.round(height)}px`, overflow: 'visible', }); const defs = svgEl('defs', {}); makeGlowFilter(defs, filtId); svg.appendChild(defs); vLines.forEach((x, i) => { const lineColor = pick(PALETTE); const halo = svgEl('line', { x1: x, y1, x2: x, y2, stroke: lineColor, 'stroke-width': STROKE_HALO, 'stroke-opacity': '0.15', filter: `url(#${filtId})` }); const glow = svgEl('line', { x1: x, y1, x2: x, y2, stroke: lineColor, 'stroke-width': STROKE_GLOW, 'stroke-opacity': '0.35', filter: `url(#${filtId})` }); const core = svgEl('line', { x1: x, y1, x2: x, y2, stroke: lineColor, 'stroke-width': STROKE_CORE, 'stroke-opacity': '1' }); [core, glow, halo].forEach(el => { el.style.strokeDasharray = height; el.style.strokeDashoffset = height; el.style.strokeLinecap = 'round'; svg.appendChild(el); }); timelines.push({ elements : [core, glow, halo], total : height, duration : rand(0.81, 1.44), delay : rand(0, 1.26), fadeTime : 0.36, }); }); overlay.appendChild(svg); } // ── Shuffle and fire all timelines together ─────────────────── for (let i = timelines.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [timelines[i], timelines[j]] = [timelines[j], timelines[i]]; } timelines.forEach(t => { const jitter = rand(0, 0.27); animateLine(t.elements, t.total, t.duration, t.delay + jitter, t.fadeTime); }); return overlay; } // ── Main init ──────────────────────────────────────────────── function initGrid(grid) { if (getComputedStyle(grid).position === 'static') { grid.style.position = 'relative'; } let overlay = null; function play() { if (overlay) overlay.remove(); overlay = buildOverlay(grid); } // Rebuild on resize (debounced) let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(play, 200); }); // Fire when grid reaches 85% of the viewport (same as docebo.com) const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) play(); }); }, { threshold: 0, rootMargin: `0px 0px -${100 - parseInt(TRIGGER_POS)}% 0px`, }); io.observe(grid); } // ── Bootstrap (handles async Document360 injection) ────────── function tryInit() { const grid = document.querySelector('section.coming-soon .logo-grid'); if (grid && !grid.dataset.lineInit) { grid.dataset.lineInit = '1'; initGrid(grid); } } if (document.readyState !== 'loading') { tryInit(); } else { document.addEventListener('DOMContentLoaded', tryInit); } const mo = new MutationObserver(tryInit); mo.observe(document.body, { childList: true, subtree: true }); })(); /* // Function to get the value of a CSS variable from the root element. function getCssVariable(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); } // Helper function to check if a color is "light" by its luminance. // This handles hex, RGB, and other color formats. function isColorLight(color) { if (!color || color === 'transparent') { return false; // Default to dark if color is not found or transparent } let r, g, b; if (color.startsWith('#')) { // Handle hex codes const hex = color.substring(1); r = parseInt(hex.substring(0, 2), 16); g = parseInt(hex.substring(2, 4), 16); b = parseInt(hex.substring(4, 6), 16); } else if (color.startsWith('rgb')) { // Handle RGB values const rgb = color.match(/\d+/g).map(Number); r = rgb[0]; g = rgb[1]; b = rgb[2]; } else { // Fallback for other formats, assume it's a dark color for safety return false; } // Calculate luminance (brightness) using the W3C formula const luma = (0.2126 * r + 0.7152 * g + 0.0722 * b); return luma > 128; } // This function contains all the replacement and theme logic. function applyReplacements() { const bgColor = getCssVariable('--bs-body-bg'); const isLightMode = isColorLight(bgColor); // Set a contrasting border color based on the background. const borderColor = isLightMode ? 'black' : 'white'; const replacements = [ { id: "mfdrs918-bsjdu3-062", find: `"buildingblocks-kernel-url-value"`, replace: `"buildingblocks-kernel-url-value"` }, { id: "mff3xrt4-ar6rux-017", find: `buildingblocks-kernel-url-value`, replace: `buildingblocks-kernel-url-value` }, { id: "mff41xxm-jz196i-022", find: `"https://myplatform.com"`, replace: `"https://myplatform.com"` } ]; replacements.forEach(item => { const preElement = document.querySelector(`[data-block-id="${item.id}"]`); if (preElement) { if (preElement.innerHTML.includes(item.find)) { preElement.innerHTML = preElement.innerHTML.replace(item.find, item.replace); } } }); } */