(function () { if (typeof window === 'undefined') { return; } // Prevent multiple setup of global handlers if (window.__hops_catalog_handlers_bound) { // Handlers are already bound once on document. We just need our state loop. } else { window.__hops_catalog_handlers_bound = true; setupGlobalHandlers(); } let catalogData = []; let isFetching = false; let hasFetched = false; let currentPage = 1; const itemsPerPage = 48; // Grid of 4x12 cards let activeCategories = new Set(); let uniqueCategories = []; let searchText = ''; const extendedCustomPaths = { 'google_sheets': 'integrations/productivity/google-sheets', 'postgresql': 'integrations/development/postgresql', 'supabase': 'integrations/development/supabase', 'salesforce_rest_api': 'integrations/marketing/salesforce', 'slack_v2': 'integrations/slack', 'zoom': 'integrations/zoom', 'zoom_admin': 'integrations/zoom', 'dropbox': 'integrations/dropbox' }; function cleanTitle(title) { return title.replace('🟣', '').replace('🔍', '').trim(); } function getSlug(name) { const nameClean = cleanTitle(name).toLowerCase(); if (nameClean === "openai (chatgpt)") return "openai"; if (nameClean.startsWith("linear")) return "linear"; if (nameClean === "salesforce") return "salesforce_rest_api"; if (nameClean === "slack") return "slack_v2"; if (nameClean === "discord") return "discord"; if (nameClean === "discord bot") return "discord_bot"; if (nameClean === "zoom admin") return "zoom_admin"; if (nameClean === "bot for slack") return "slack_bot"; let slug = nameClean.replace(/ /g, "_"); slug = slug.replace(/[^a-z0-9_]/g, ""); return slug; } function isDarkMode() { return document.documentElement.classList.contains('dark') || document.body.classList.contains('dark'); } function applyThemeToStaticElements() { var dark = isDarkMode(); var searchEl = document.getElementById('catalog-search'); var triggerEl = document.getElementById('dropdown-trigger'); var menuEl = document.getElementById('dropdown-menu'); if (searchEl) { searchEl.style.backgroundColor = dark ? '#1e293b' : '#f1f5f9'; searchEl.style.borderColor = dark ? '#334155' : '#e2e8f0'; searchEl.style.color = dark ? '#f8fafc' : '#1e293b'; } if (triggerEl) { triggerEl.style.backgroundColor = dark ? '#1e293b' : '#f1f5f9'; triggerEl.style.borderColor = dark ? '#334155' : '#e2e8f0'; triggerEl.style.color = dark ? '#f8fafc' : '#1e293b'; } if (menuEl) { menuEl.style.backgroundColor = dark ? '#0f172a' : '#ffffff'; menuEl.style.borderColor = dark ? '#334155' : '#e2e8f0'; menuEl.style.color = dark ? '#f8fafc' : '#1e293b'; } } function renderCard(item, pathPrefix) { const name = item.name; const title = cleanTitle(name); const category = item.category; const desc = item.description || `Connect ${title} to automate messaging, data, and workspace actions.`; let badgeHtml = ''; let href = ''; if (item.popular === true) { badgeHtml = 'Popular'; } href = `/${pathPrefix}/connections/connect-an-app`; const dataName = title.toLowerCase().replace(/"/g, ' ').replace(/'/g, ' ').trim(); const dataDesc = desc.toLowerCase().replace(/"/g, ' ').replace(/'/g, ' ').trim(); const dark = isDarkMode(); const cardBg = dark ? '#1e293b' : '#ffffff'; const cardBorder = dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'; const titleColor = dark ? '#ffffff' : '#1f2937'; const catColor = dark ? '#94a3b8' : '#64748b'; const descColor = dark ? '#9ca3af' : '#4b5563'; return ` ${badgeHtml} ${title} ${category} ${desc} `; } function renderPaginationControls(activePage, totalPages) { const container = document.getElementById('pagination-controls'); if (!container) return; if (totalPages <= 1) { container.innerHTML = ''; return; } const buttons = []; var dark = isDarkMode(); var btnBg = dark ? '#1e293b' : '#ffffff'; var btnColor = dark ? '#e2e8f0' : '#475569'; var btnBorder = dark ? '#334155' : '#e2e8f0'; var disabledBg = dark ? '#0f172a' : '#f8fafc'; var disabledColor = dark ? '#475569' : '#94a3b8'; // Previous Button buttons.push(` `); function addPageButton(p) { const isCurrent = p === activePage; buttons.push(` `); } function addEllipses() { buttons.push('...'); } const range = 1; const startPage = Math.max(2, activePage - range); const endPage = Math.min(totalPages - 1, activePage + range); addPageButton(1); if (startPage > 2) { addEllipses(); } for (let i = startPage; i <= endPage; i++) { addPageButton(i); } if (endPage < totalPages - 1) { addEllipses(); } if (totalPages > 1) { addPageButton(totalPages); } // Next Button buttons.push(` `); container.innerHTML = buttons.join(''); } function extractUniqueCategories() { if (catalogData.length === 0) return; const cats = new Set(); catalogData.forEach(item => { if (item.hidden !== true && item.category) { cats.add(item.category.trim()); } }); uniqueCategories = Array.from(cats).sort(); } function sortCatalogData(data) { if (!Array.isArray(data)) return []; return data.sort((a, b) => { const aPop = !!a.popular; const bPop = !!b.popular; if (aPop !== bPop) { return aPop ? -1 : 1; } const aName = (a.name || '').toLowerCase(); const bName = (b.name || '').toLowerCase(); if (aName < bName) return -1; if (aName > bName) return 1; return 0; }); } function renderDropdownOptions() { const pills = document.getElementById('category-pills'); if (uniqueCategories.length === 0) { extractUniqueCategories(); } if (pills) { const allActive = activeCategories.size === 0; const pillsHtml = [ `` ].concat(uniqueCategories.map(cat => { const isActive = activeCategories.has(cat); return ``; })).join(''); pills.innerHTML = pillsHtml; } const list = document.getElementById('category-options-list'); if (list) { const optionsHtml = uniqueCategories.map(cat => { const isChecked = activeCategories.has(cat); return ` ${cat} `; }).join(''); list.innerHTML = optionsHtml; } } function renderSelectedPills() { const container = document.getElementById('dropdown-trigger-content'); const placeholder = document.getElementById('dropdown-trigger-placeholder'); if (!container) return; // Remove existing pills const pills = container.querySelectorAll('.category-pill'); pills.forEach(pill => pill.remove()); if (activeCategories.size === 0) { if (placeholder) placeholder.style.display = 'block'; return; } if (placeholder) placeholder.style.display = 'none'; Array.from(activeCategories).forEach(cat => { const pill = document.createElement('div'); pill.className = 'category-pill'; pill.style.cssText = 'display: inline-flex; align-items: center; gap: 4px; background-color: #0047AB; color: #ffffff; border: 1px solid #0047AB; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.2; user-select: none;'; pill.innerHTML = ` ${cat} × `; container.appendChild(pill); }); } function initStateFromURL() { const params = new URLSearchParams(window.location.search); const catParam = params.get('category'); if (catParam) { activeCategories = new Set(catParam.split(',').filter(Boolean)); } else { activeCategories = new Set(); } searchText = (params.get('q') || '').toLowerCase().trim(); currentPage = parseInt(params.get('page'), 10) || 1; } function updateURL() { const params = new URLSearchParams(); if (activeCategories.size > 0) { params.set('category', Array.from(activeCategories).join(',')); } if (searchText) params.set('q', searchText); if (currentPage > 1) params.set('page', currentPage); const newRelativePathQuery = window.location.pathname + (params.toString() ? '?' + params.toString() : ''); try { window.history.replaceState(null, '', newRelativePathQuery); } catch (e) {} } function filterAndPaginate() { const grid = document.getElementById('integrations-grid'); const noResults = document.getElementById('no-results'); if (!grid) return; renderDropdownOptions(); renderSelectedPills(); // Sync input field value only when not focused (avoid clobbering user typing) const searchBar = document.getElementById('catalog-search'); if (searchBar && document.activeElement !== searchBar && searchBar.value.toLowerCase().trim() !== searchText) { searchBar.value = searchText; } // 1. Filter local catalogData array const filtered = catalogData.filter(item => { if (item.hidden === true) return false; const titleLower = cleanTitle(item.name).toLowerCase(); const descLower = (item.description || '').toLowerCase(); const category = item.category || ''; const matchesCategory = activeCategories.size === 0 || activeCategories.has(category); const matchesSearch = titleLower.includes(searchText) || descLower.includes(searchText); return matchesCategory && matchesSearch; }); // 2. Paginate filtered array const totalItems = filtered.length; const totalPages = Math.ceil(totalItems / itemsPerPage) || 1; if (currentPage > totalPages) { currentPage = totalPages; } if (currentPage < 1) { currentPage = 1; } const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; const pagedItems = filtered.slice(startIndex, endIndex); // 3. Render Cards const pathPrefix = 'docs'; const cardsHtml = pagedItems.map(item => renderCard(item, pathPrefix)).join(''); grid.innerHTML = cardsHtml; // 4. Render Controls renderPaginationControls(currentPage, totalPages); if (noResults) { noResults.style.display = totalItems === 0 ? 'block' : 'none'; } } function setupGlobalHandlers() { // Input Event Delegation (debounced to avoid focus loss / rerender storms) var __searchDebounce = null; document.addEventListener('input', function (e) { if (e.target && e.target.id === 'catalog-search') { var val = e.target.value.toLowerCase().trim(); if (__searchDebounce) clearTimeout(__searchDebounce); __searchDebounce = setTimeout(function () { searchText = val; currentPage = 1; filterAndPaginate(); }, 180); } }); // Toggle dropdown menu document.addEventListener('click', function (e) { const trigger = e.target.closest('#dropdown-trigger'); const removeBtn = e.target.closest('.remove-pill-btn'); if (trigger && !removeBtn) { const menu = document.getElementById('dropdown-menu'); if (menu) { const isHidden = menu.style.display === 'none' || menu.style.display === ''; menu.style.display = isHidden ? 'block' : 'none'; } e.stopPropagation(); } }); // Close dropdown on click outside document.addEventListener('click', function (e) { const container = document.getElementById('category-dropdown-container'); const menu = document.getElementById('dropdown-menu'); if (container && menu && !container.contains(e.target)) { menu.style.display = 'none'; } }); // Handle Category Checkbox state change document.addEventListener('change', function (e) { if (e.target && e.target.classList.contains('cat-checkbox')) { const cat = e.target.value; if (e.target.checked) { activeCategories.add(cat); } else { activeCategories.delete(cat); } currentPage = 1; updateURL(); filterAndPaginate(); } }); // Handle Category Pill click document.addEventListener('click', function (e) { const pillBtn = e.target.closest('.cat-pill'); if (pillBtn) { const cat = pillBtn.getAttribute('data-category'); if (cat === '__all__') { activeCategories.clear(); } else if (activeCategories.has(cat)) { activeCategories.delete(cat); } else { activeCategories.add(cat); } currentPage = 1; updateURL(); filterAndPaginate(); e.stopPropagation(); } }); // Handle Pill Remove click document.addEventListener('click', function (e) { const removeBtn = e.target.closest('.remove-pill-btn'); if (removeBtn) { const cat = removeBtn.getAttribute('data-category'); if (cat) { activeCategories.delete(cat); currentPage = 1; updateURL(); filterAndPaginate(); } e.stopPropagation(); } }); // Pagination Button Click Delegation document.addEventListener('click', function (e) { const pageBtn = e.target.closest('.page-btn'); if (pageBtn) { const page = pageBtn.getAttribute('data-page'); if (page === 'prev') { currentPage = Math.max(1, currentPage - 1); } else if (page === 'next') { currentPage = currentPage + 1; // Bound check is handled inside filterAndPaginate } else { currentPage = parseInt(page, 10) || 1; } updateURL(); filterAndPaginate(); } }); // Handle browser back/forward buttons window.addEventListener('popstate', function () { const grid = document.getElementById('integrations-grid'); if (grid) { initStateFromURL(); filterAndPaginate(); } }); } // Periodic SPA routing loop checks if catalog mounts on active page setInterval(function () { const grid = document.getElementById('integrations-grid'); if (!grid) { return; } // If grid is present but not initialized for the current page instance applyThemeToStaticElements(); if (grid.dataset.initialized !== 'true') { grid.dataset.initialized = 'true'; initStateFromURL(); if (hasFetched) { filterAndPaginate(); } else if (window.__hops_catalog_data && window.__hops_catalog_data.length > 0) { catalogData = sortCatalogData(window.__hops_catalog_data); hasFetched = true; filterAndPaginate(); } else if (!isFetching) { isFetching = true; fetch('/assets/integrations_pipedream.json') .then(res => res.json()) .then(data => { catalogData = sortCatalogData(data); hasFetched = true; isFetching = false; filterAndPaginate(); }) .catch(err => { console.error('Error fetching integration catalog data:', err); isFetching = false; }); } } }, 250); })();