1(function loadDeviconCSS() { 2 const link = document.createElement('link'); 3 link.rel = 'stylesheet'; 4 link.href = 'https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css'; 5 document.head.appendChild(link); 6})(); 7 8document.addEventListener('DOMContentLoaded', function() { 9 initLangTabs(); 10 11 // Listen for theme changes to re-style tabs 12 const observer = new MutationObserver(function(mutations) { 13 mutations.forEach(function(mutation) { 14 if (mutation.attributeName === 'class' && mutation.target.nodeName === 'HTML') { 15 setTimeout(initLangTabs, 50); 16 } 17 }); 18 }); 19 20 observer.observe(document.documentElement, { 21 attributes: true 22 }); 23 24 // Also handle theme changes when page hash changes (mdbook sometimes updates theme this way) 25 window.addEventListener('hashchange', function() { 26 setTimeout(initLangTabs, 100); 27 }); 28 29 // Handle page navigation 30 window.addEventListener('load', function() { 31 setTimeout(initLangTabs, 100); 32 }); 33}); 34 35function initLangTabs() { 36 const langTabsContainers = document.querySelectorAll('.langtabs'); 37 38 langTabsContainers.forEach(function(container) { 39 const tabButtons = container.querySelectorAll('.langtabs-tab'); 40 41 tabButtons.forEach(function(button) { 42 button.removeEventListener('click', handleTabClick); 43 button.addEventListener('click', handleTabClick); 44 }); 45 46 // If no tab active select first 47 if (!container.querySelector('.langtabs-tab.active')) { 48 const firstButton = tabButtons[0]; 49 if (firstButton) { 50 firstButton.click(); 51 } 52 } 53 }); 54} 55 56function handleTabClick() { 57 const container = this.closest('.langtabs'); 58 const lang = this.getAttribute('data-lang'); 59 60 // Deactivate all tabs in this container 61 const tabButtons = container.querySelectorAll('.langtabs-tab'); 62 const tabContents = container.querySelectorAll('.langtabs-code'); 63 64 tabButtons.forEach(function(btn) { 65 btn.classList.remove('active'); 66 }); 67 tabContents.forEach(function(content) { 68 content.classList.remove('active'); 69 }); 70 71 // Activate selected tab 72 this.classList.add('active'); 73 const activeContent = container.querySelector(`.langtabs-code[data-lang="${lang}"]`); 74 if (activeContent) { 75 activeContent.classList.add('active'); 76 } 77}