|
| 1 | +<button id="theme-toggle" class="theme-toggle" aria-label="Toggle Dark Mode"> |
| 2 | + <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18.75a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM6.166 18.894a.75.75 0 01-1.06-1.06l1.59-1.591a.75.75 0 111.061 1.06l-1.59 1.591zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM5.106 6.166a.75.75 0 011.06-1.06l1.591 1.59a.75.75 0 11-1.06 1.061l-1.591-1.59z"/></svg> |
| 3 | + <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/></svg> |
| 4 | +</button> |
| 5 | + |
1 | 6 | <script src="/js/clipboard.min.js"></script> |
2 | 7 | <script src="/js/toc.js"></script> |
3 | 8 |
|
4 | 9 | <script> |
5 | | - // Replacing $(function() { ... }) with native DOMContentLoaded |
6 | 10 | document.addEventListener('DOMContentLoaded', () => { |
7 | | - /** Tabs: */ |
| 11 | + |
| 12 | + /** 1. Theme Switcher Logic */ |
| 13 | + const themeToggle = document.getElementById('theme-toggle'); |
| 14 | + const htmlElement = document.documentElement; |
| 15 | + const hljsThemeLink = document.getElementById('hljs-theme'); // Grab the CSS link |
| 16 | + |
| 17 | + if (themeToggle) { |
| 18 | + themeToggle.addEventListener('click', () => { |
| 19 | + if (htmlElement.getAttribute('data-theme') === 'dark') { |
| 20 | + // Switch to Light Mode |
| 21 | + htmlElement.removeAttribute('data-theme'); |
| 22 | + localStorage.setItem('jooby-theme', 'light'); |
| 23 | + |
| 24 | + // Switch code block to Agate |
| 25 | + if (hljsThemeLink) hljsThemeLink.href = 'js/styles/agate.min.css'; |
| 26 | + |
| 27 | + } else { |
| 28 | + // Switch to Dark Mode |
| 29 | + htmlElement.setAttribute('data-theme', 'dark'); |
| 30 | + localStorage.setItem('jooby-theme', 'dark'); |
| 31 | + |
| 32 | + // Switch code block to Atom One Dark |
| 33 | + if (hljsThemeLink) hljsThemeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css'; |
| 34 | + } |
| 35 | + }); |
| 36 | + } |
| 37 | + |
| 38 | + /** 2. Tabs Logic */ |
8 | 39 | const tabButtons = document.querySelectorAll('.primary .switch .switch--item'); |
9 | 40 | const contents = document.querySelectorAll('.primary .content'); |
10 | 41 |
|
11 | 42 | tabButtons.forEach(button => { |
12 | 43 | button.addEventListener('click', function () { |
13 | | - // Extract option number (e.g., '1' from 'option-1') |
14 | 44 | const match = this.className.match(/option-(\d+)/); |
15 | 45 | if (!match) return; |
16 | 46 | const option = match[1]; |
|
28 | 58 | }); |
29 | 59 | }); |
30 | 60 |
|
31 | | - /** Clipboard.js Initialization */ |
32 | | - // Note: Since you're already loading clipboard.min.js, we just use the native constructor |
| 61 | + /** 3. Clipboard.js Initialization */ |
33 | 62 | const clipboard = new ClipboardJS('.clipboard'); |
34 | 63 | clipboard.on('success', (e) => { |
35 | 64 | e.clearSelection(); |
| 65 | + const btn = e.trigger; |
| 66 | + const originalHTML = btn.innerHTML; |
| 67 | + |
| 68 | + // Temporarily change background and insert a checkmark SVG |
| 69 | + btn.style.backgroundColor = '#10b981'; // Tailwind emerald-500 |
| 70 | + btn.style.borderColor = '#059669'; |
| 71 | + btn.innerHTML = `<svg fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>`; |
| 72 | + |
| 73 | + // Revert back after 2 seconds |
| 74 | + setTimeout(() => { |
| 75 | + btn.style.backgroundColor = ''; |
| 76 | + btn.style.borderColor = ''; |
| 77 | + btn.innerHTML = originalHTML; |
| 78 | + }, 2000); |
36 | 79 | }); |
37 | 80 | }); |
| 81 | + /** 4. Code Callout Badges (Zero-Flash & Auto-Format) */ |
| 82 | + document.querySelectorAll('pre.highlightjs').forEach(pre => { |
| 83 | + // Check every 10ms if highlight.js has finished formatting this block |
| 84 | + const checkInterval = setInterval(() => { |
| 85 | + if (pre.dataset.highlighted === "yes" || pre.querySelector('.hljs')) { |
| 86 | + clearInterval(checkInterval); |
| 87 | + |
| 88 | + const codeEl = pre.querySelector('code'); |
| 89 | + if (codeEl) { |
| 90 | + // Upgraded regex to handle consecutive callouts like: // (1) (2) |
| 91 | + // The "Lookahead" (?= ... ) now checks if the rest of the line |
| 92 | + // is empty OR contains subsequent (N) callout numbers. |
| 93 | + const calloutRegex = /(\/\/\s*|\s+)\(\s*(?:<[^>]+>\s*)*(\d+)\s*(?:<[^>]+>\s*)*\)(?=\s*(?:<[^>]+>\s*)*(?:\(\s*(?:<[^>]+>\s*)*\d+\s*(?:<[^>]+>\s*)*\)\s*(?:<[^>]+>\s*)*)*(\n|<|$))/g; |
| 94 | + |
| 95 | + codeEl.innerHTML = codeEl.innerHTML.replace( |
| 96 | + calloutRegex, |
| 97 | + (match, prefix, num) => { |
| 98 | + // Injects a hidden "//" before EVERY badge so that |
| 99 | + // multiple badges paste safely as "// 1 // 2" |
| 100 | + return ` <span class="visually-hidden">//</span> <span class="conum-badge">${num}</span>`; |
| 101 | + } |
| 102 | + ); |
| 103 | + } |
| 104 | + |
| 105 | + // Reveal the block smoothly |
| 106 | + pre.classList.add('badges-loaded'); |
| 107 | + } |
| 108 | + }, 10); |
| 109 | + |
| 110 | + // Fallback: Reveal the block anyway after 500ms |
| 111 | + setTimeout(() => { |
| 112 | + pre.classList.add('badges-loaded'); |
| 113 | + clearInterval(checkInterval); |
| 114 | + }, 500); |
| 115 | + }); |
| 116 | + /** 5. Copy Header Anchor Links to Clipboard */ |
| 117 | + document.querySelectorAll('a.anchor').forEach(anchor => { |
| 118 | + anchor.addEventListener('click', function(e) { |
| 119 | + // We do NOT prevent default, so the browser still scrolls to the header naturally |
| 120 | + |
| 121 | + // Construct the full absolute URL for the clipboard |
| 122 | + const fullUrl = window.location.origin + window.location.pathname + window.location.search + this.getAttribute('href'); |
| 123 | + |
| 124 | + // Use native clipboard API |
| 125 | + navigator.clipboard.writeText(fullUrl).then(() => { |
| 126 | + // Add the 'copied' class for visual feedback |
| 127 | + this.classList.add('copied'); |
| 128 | + |
| 129 | + // Remove the checkmark after 2 seconds |
| 130 | + setTimeout(() => { |
| 131 | + this.classList.remove('copied'); |
| 132 | + }, 2000); |
| 133 | + }).catch(err => console.error('Failed to copy anchor:', err)); |
| 134 | + }); |
| 135 | + }); |
| 136 | + /** 6. Hamburger Menu */ |
| 137 | + document.addEventListener('DOMContentLoaded', function() { |
| 138 | + const menuToggle = document.getElementById('menu-toggle'); |
| 139 | + |
| 140 | + // Try to find the Toc (Table of Contents) or the Navigation Container |
| 141 | + const sidebar = document.getElementById('toc') || |
| 142 | + document.querySelector('.nav-container') || |
| 143 | + document.getElementById('sidebar'); |
| 144 | + |
| 145 | + if (menuToggle && sidebar) { |
| 146 | + menuToggle.addEventListener('click', function() { |
| 147 | + sidebar.classList.toggle('active'); |
| 148 | + menuToggle.classList.toggle('open'); |
| 149 | + |
| 150 | + // Optional: Prevent body scrolling when menu is open |
| 151 | + document.body.classList.toggle('menu-open'); |
| 152 | + }); |
| 153 | + } else { |
| 154 | + console.warn("Hamburger menu: Could not find the navigation element to toggle."); |
| 155 | + } |
| 156 | + }); |
38 | 157 | </script> |
0 commit comments