/** * Channel Properties Filter & Search * Doc360 Integration Script * * This script adds filtering and search functionality to the Channel Properties documentation. * Features: * - Filter channels by currency * - Search channels by name * - Clear filters * - Responsive design */ /** (function() { 'use strict'; // Configuration const CONFIG = { selectors: { channelAccordion: '.details-wrapper', channelCode: '.channel-code', currencyBadge: '.currency-badge', searchContainer: '#channel-search-container', filterContainer: '#channel-filter-container' }, css: { filterBar: ` #channel-filter-bar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } #channel-search-input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid #d1d9e0; border-radius: 6px; font-size: 14px; } #channel-search-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .currency-filter-container { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .currency-filter-label { font-size: 14px; font-weight: 500; color: #374151; margin-right: 8px; } .currency-filter-badge { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; border: 1px solid #d1d9e0; background: white; color: #374151; } .currency-filter-badge:hover { background: #f3f4f6; } .currency-filter-badge.active { background: #10b981; color: white; border-color: #10b981; } .clear-filters-btn { padding: 6px 12px; background: #ef4444; color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s ease; } .clear-filters-btn:hover { background: #dc2626; } .search-stats { font-size: 12px; color: #6b7280; margin-left: auto; } .hidden-channel { display: none !important; } @media (max-width: 768px) { #channel-filter-bar { flex-direction: column; align-items: stretch; } .currency-filter-container { justify-content: center; } .search-stats { margin-left: 0; text-align: center; } } ` } }; let filteredChannels = []; let activeCurrencyFilters = new Set(); let searchQuery = ''; let allChannels = []; // Initialize when DOM is ready function init() { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', setup); } else { setup(); } } // Main setup function function setup() { // Add CSS addCSS(); // Wait a bit for the page to fully render, then initialize setTimeout(() => { try { collectChannels(); createFilterBar(); setupEventListeners(); updateStats(); } catch (error) { console.log('Channel Properties Filter: Waiting for content to load...'); // Retry after a longer delay setTimeout(setup, 2000); } }, 1000); } // Add CSS to the page function addCSS() { const style = document.createElement('style'); style.textContent = CONFIG.css.filterBar; document.head.appendChild(style); } // Collect all channels and their currencies function collectChannels() { const channelElements = document.querySelectorAll(CONFIG.selectors.channelAccordion); allChannels = []; channelElements.forEach((element, index) => { const channelCodeElement = element.querySelector(CONFIG.selectors.channelCode); const currencyElements = element.querySelectorAll(CONFIG.selectors.currencyBadge); if (channelCodeElement) { const channelCode = channelCodeElement.textContent.trim(); const currencies = Array.from(currencyElements).map(el => el.textContent.trim()); allChannels.push({ element: element, code: channelCode, currencies: currencies, index: index }); } }); if (allChannels.length === 0) { throw new Error('No channels found'); } } // Create the filter bar function createFilterBar() { // Find a good place to insert the filter bar const targetElement = document.querySelector('h1') || document.querySelector('.details-wrapper'); if (!targetElement) return; // Get all unique currencies const allCurrencies = new Set(); allChannels.forEach(channel => { channel.currencies.forEach(currency => allCurrencies.add(currency)); }); const sortedCurrencies = Array.from(allCurrencies).sort(); // Create filter bar HTML const filterBarHTML = `

`; // Insert filter bar targetElement.insertAdjacentHTML('afterend', filterBarHTML); } // Setup event listeners function setupEventListeners() { // Search input const searchInput = document.getElementById('channel-search-input'); if (searchInput) { searchInput.addEventListener('input', handleSearch); } // Currency filter badges document.querySelectorAll('.currency-filter-badge').forEach(badge => { badge.addEventListener('click', handleCurrencyFilter); }); // Clear filters button const clearButton = document.getElementById('clear-filters'); if (clearButton) { clearButton.addEventListener('click', clearAllFilters); } } // Handle search input function handleSearch(event) { searchQuery = event.target.value.toLowerCase().trim(); applyFilters(); } // Handle currency filter function handleCurrencyFilter(event) { const currency = event.target.dataset.currency; if (activeCurrencyFilters.has(currency)) { activeCurrencyFilters.delete(currency); event.target.classList.remove('active'); } else { activeCurrencyFilters.add(currency); event.target.classList.add('active'); } applyFilters(); } // Clear all filters function clearAllFilters() { // Clear search const searchInput = document.getElementById('channel-search-input'); if (searchInput) { searchInput.value = ''; } searchQuery = ''; // Clear currency filters activeCurrencyFilters.clear(); document.querySelectorAll('.currency-filter-badge').forEach(badge => { badge.classList.remove('active'); }); applyFilters(); } // Apply all active filters function applyFilters() { let visibleCount = 0; allChannels.forEach(channel => { let isVisible = true; // Apply search filter if (searchQuery && !channel.code.toLowerCase().includes(searchQuery)) { isVisible = false; } // Apply currency filter if (activeCurrencyFilters.size > 0) { const hasMatchingCurrency = channel.currencies.some(currency => activeCurrencyFilters.has(currency) ); if (!hasMatchingCurrency) { isVisible = false; } } // Show/hide channel if (isVisible) { channel.element.classList.remove('hidden-channel'); visibleCount++; } else { channel.element.classList.add('hidden-channel'); } }); updateStats(visibleCount); } // Update statistics display function updateStats(visibleCount = null) { const statsElement = document.getElementById('search-stats'); if (!statsElement) return; const total = allChannels.length; const showing = visibleCount !== null ? visibleCount : total; let statsText = `Showing ${showing} of ${total} channels`; if (searchQuery) { statsText += ` • Search: "${searchQuery}"`; } if (activeCurrencyFilters.size > 0) { const currencies = Array.from(activeCurrencyFilters).join(', '); statsText += ` • Currency: ${currencies}`; } statsElement.textContent = statsText; } // Public API for debugging window.ChannelPropertiesFilter = { getChannels: () => allChannels, getActiveCurrencyFilters: () => activeCurrencyFilters, getSearchQuery: () => searchQuery, clearFilters: clearAllFilters, refresh: setup }; // Start the initialization init(); })(); */