// TNS API Documentation Custom JavaScript // Enhanced with TNS Brand Colors and Professional Interactions document.addEventListener('DOMContentLoaded', function() { // TNS Brand Colors (matching CSS variables) const TNS_COLORS = { primaryBlue: '#2458D0', secondaryBlue: '#1720B3', accentBlue: '#327EF5', darkNavy: '#000000', lightTeal: '#43E5E2', purpleDark: '#15092C', purpleMedium: '#21156B', textLight: '#FFFFFF', textDark: '#2D3748', success: '#48BB78', warning: '#F6E05E', error: '#F56565' }; // Initialize TNS Documentation Enhancements function initTNSEnhancements() { console.log('🚀 Initializing TNS API Documentation Enhancements...'); addTNSAnimations(); enhanceTNSSidebar(); setupTNSFeedback(); addTNSCopyButtons(); enhanceTNSSearch(); addTNSSmoothScrolling(); setupTNSLoadingStates(); addTNSKeyboardNavigation(); setupTNSTooltips(); console.log('✅ TNS API Documentation Enhancements loaded successfully!'); } // Add TNS-branded animations to content sections function addTNSAnimations() { const sections = document.querySelectorAll('.th-content-section-left-column, .th-content-section-right-column'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry, index) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.classList.add('tns-fade-in'); }, index * 150); } }); }, { threshold: 0.1 }); sections.forEach(section => { observer.observe(section); }); // Add scale animation to feedback section const feedbackSection = document.querySelector('.th-feedback'); if (feedbackSection) { setTimeout(() => { feedbackSection.classList.add('tns-scale-in'); }, 800); } } // Enhanced TNS sidebar navigation function enhanceTNSSidebar() { const sidebarItems = document.querySelectorAll('.th-left-sidebar a'); sidebarItems.forEach((item, index) => { // Add staggered slide-in animation setTimeout(() => { item.classList.add('tns-slide-in'); }, index * 100); item.addEventListener('click', function(e) { // Remove active class from all items sidebarItems.forEach(link => link.classList.remove('active')); // Add active class to clicked item this.classList.add('active'); // Add loading state to content const content = document.querySelector('.th-content'); if (content) { content.classList.add('tns-loading'); setTimeout(() => { content.classList.remove('tns-loading'); content.classList.add('tns-fade-in'); }, 800); } // Create ripple effect createTNSRipple(this, e); }); // Add hover sound effect (optional) item.addEventListener('mouseenter', function() { this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'; }); }); } // TNS-branded feedback system function setupTNSFeedback() { const feedbackSection = document.querySelector('.th-feedback'); if (!feedbackSection) return; // Create enhanced TNS feedback buttons if they don't exist const existingButtons = feedbackSection.querySelectorAll('button'); if (existingButtons.length === 0) { feedbackSection.innerHTML = `

Was this section helpful?

Your feedback helps us improve our documentation

`; } const feedbackButtons = feedbackSection.querySelectorAll('.tns-feedback-btn'); feedbackButtons.forEach(button => { button.addEventListener('click', function(e) { const feedback = this.getAttribute('data-feedback'); // Create ripple effect createTNSRipple(this, e); // Disable all buttons feedbackButtons.forEach(btn => btn.disabled = true); // Show loading state this.innerHTML = ' Submitting...'; setTimeout(() => { // Show success message with TNS branding feedbackSection.innerHTML = `

✨

Thank you for your feedback!

${feedback === 'yes' ? 'We\'re glad this was helpful!' : 'We\'ll work on improving this section.'}

`; feedbackSection.classList.add('tns-scale-in'); }, 1200); // Log feedback (replace with your API call) console.log('TNS Feedback received:', feedback); }); }); } // Add TNS-styled copy buttons to code blocks function addTNSCopyButtons() { const codeBlocks = document.querySelectorAll('pre code, code'); codeBlocks.forEach(block => { if (block.textContent.length > 20 && !block.closest('pre')?.querySelector('.tns-copy-btn')) { const copyBtn = document.createElement('button'); copyBtn.className = 'tns-copy-btn'; copyBtn.innerHTML = ` Copy `; copyBtn.style.cssText = ` position: absolute; top: 12px; right: 12px; background: ${TNS_COLORS.accentBlue}; color: ${TNS_COLORS.textLight}; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(50, 126, 245, 0.25); z-index: 10; `; const wrapper = block.closest('pre') || block; if (wrapper.style.position !== 'relative') { wrapper.style.position = 'relative'; } wrapper.appendChild(copyBtn); copyBtn.addEventListener('click', async (e) => { e.preventDefault(); try { await navigator.clipboard.writeText(block.textContent); copyBtn.innerHTML = ` Copied! `; copyBtn.style.background = TNS_COLORS.success; setTimeout(() => { copyBtn.innerHTML = ` Copy `; copyBtn.style.background = TNS_COLORS.accentBlue; }, 2000); } catch (err) { console.error('Failed to copy text: ', err); } }); copyBtn.addEventListener('mouseenter', function() { this.style.background = TNS_COLORS.primaryBlue; this.style.transform = 'translateY(-2px)'; }); copyBtn.addEventListener('mouseleave', function() { this.style.background = TNS_COLORS.accentBlue; this.style.transform = 'translateY(0)'; }); } }); } // Enhanced TNS search functionality function enhanceTNSSearch() { const searchInput = document.querySelector('input[type="search"], input[placeholder*="Search"]'); if (!searchInput) return; let searchTimeout; // Style the search input with TNS branding searchInput.style.cssText += ` background: ${TNS_COLORS.textLight}; border: 2px solid #E2E8F0; border-radius: 12px; padding: 12px 16px 12px 40px; transition: all 0.3s ease; font-size: 14px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23${TNS_COLORS.primaryBlue.substring(1)}' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3e%3c/path%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: 12px center; `; searchInput.addEventListener('focus', function() { this.style.borderColor = TNS_COLORS.accentBlue; this.style.boxShadow = `0 0 0 3px rgba(50, 126, 245, 0.1)`; }); searchInput.addEventListener('blur', function() { this.style.borderColor = '#E2E8F0'; this.style.boxShadow = 'none'; }); searchInput.addEventListener('input', function() { clearTimeout(searchTimeout); const query = this.value.toLowerCase(); // Add loading state this.style.backgroundImage = `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23${TNS_COLORS.lightTeal.substring(1)}' viewBox='0 0 16 16'%3e%3cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3e%3c/svg%3e")`; searchTimeout = setTimeout(() => { // Reset background this.style.backgroundImage = `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23${TNS_COLORS.primaryBlue.substring(1)}' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3e%3c/path%3e%3c/svg%3e")`; // Enhanced search highlighting const contentSections = document.querySelectorAll('.th-content-section-left-column, .th-content-section-right-column'); contentSections.forEach(section => { if (query && section.textContent.toLowerCase().includes(query)) { section.classList.add('tns-success'); section.style.transform = 'translateY(-2px)'; } else if (query) { section.style.opacity = '0.4'; section.style.transform = 'scale(0.98)'; } else { section.classList.remove('tns-success'); section.style.opacity = ''; section.style.transform = ''; } }); }, 600); }); } // TNS smooth scrolling for navigation function addTNSSmoothScrolling() { const navLinks = document.querySelectorAll('.th-left-sidebar a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href').substring(1); const target = document.getElementById(targetId); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); // TNS highlight effect target.style.background = `linear-gradient(135deg, ${TNS_COLORS.lightTeal}20 0%, ${TNS_COLORS.accentBlue}10 100%)`; target.style.borderColor = TNS_COLORS.lightTeal; target.style.transform = 'scale(1.02)'; setTimeout(() => { target.style.background = ''; target.style.borderColor = ''; target.style.transform = ''; }, 2500); } }); }); } // Setup TNS loading states function setupTNSLoadingStates() { // Add loading states to dynamic content const dynamicElements = document.querySelectorAll('[data-dynamic]'); dynamicElements.forEach(element => { element.classList.add('tns-loading'); setTimeout(() => { element.classList.remove('tns-loading'); element.classList.add('tns-fade-in'); }, Math.random() * 1000 + 500); }); } // Add keyboard navigation function addTNSKeyboardNavigation() { document.addEventListener('keydown', function(e) { if (e.ctrlKey || e.metaKey) { switch(e.key) { case 'k': e.preventDefault(); const searchInput = document.querySelector('input[type="search"], input[placeholder*="Search"]'); if (searchInput) { searchInput.focus(); searchInput.select(); } break; } } }); } // Setup TNS tooltips function setupTNSTooltips() { const elementsWithTooltips = document.querySelectorAll('[title]'); elementsWithTooltips.forEach(element => { const title = element.getAttribute('title'); element.removeAttribute('title'); const tooltip = document.createElement('div'); tooltip.className = 'tns-tooltip'; tooltip.textContent = title; tooltip.style.cssText = ` position: absolute; background: ${TNS_COLORS.purpleDark}; color: ${TNS_COLORS.textLight}; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; z-index: 1000; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(21, 9, 44, 0.25); `; document.body.appendChild(tooltip); element.addEventListener('mouseenter', function() { const rect = this.getBoundingClientRect(); tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px'; tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px'; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(-4px)'; }); element.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(0)'; }); }); } // Create TNS ripple effect function createTNSRipple(element, event) { const ripple = document.createElement('span'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; left: ${x}px; top: ${y}px; background: ${TNS_COLORS.lightTeal}; border-radius: 50%; opacity: 0.6; transform: scale(0); animation: tnsRipple 0.6s ease-out; pointer-events: none; `; if (element.style.position !== 'relative') { element.style.position = 'relative'; } element.style.overflow = 'hidden'; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } // Add ripple animation keyframes const style = document.createElement('style'); style.textContent = ` @keyframes tnsRipple { to { transform: scale(2); opacity: 0; } } .tns-loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid ${TNS_COLORS.textLight}40; border-radius: 50%; border-top-color: ${TNS_COLORS.textLight}; animation: tnsSpinner 0.8s ease-in-out infinite; } @keyframes tnsSpinner { to { transform: rotate(360deg); } } `; document.head.appendChild(style); // Initialize everything initTNSEnhancements(); // Add performance monitoring if (window.performance && window.performance.mark) { window.performance.mark('tns-enhancements-complete'); } }); // Export for potential external use window.TNSDocumentationEnhancer = { colors: { primaryBlue: '#2458D0', secondaryBlue: '#1720B3', accentBlue: '#327EF5', lightTeal: '#43E5E2', purpleDark: '#15092C' }, version: '1.0.0' };

Sections

UI Integration Example

UI Integration Example (Jetpack Compose)