Full document, spreadsheet, slideshow, and diagram tooling
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request 'feat(docs): add minimap toggle button' (#301) from feat/minimap-toggle into main

scott 49a1c668 03f1a0bf

+24 -1
+4
src/docs/index.html
··· 53 53 <button class="btn-icon" id="btn-outline" title="Document outline"> 54 54 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px"><line x1="2" y1="3" x2="14" y2="3"/><line x1="4" y1="6.5" x2="14" y2="6.5"/><line x1="6" y1="10" x2="14" y2="10"/><line x1="2" y1="13.5" x2="14" y2="13.5"/></svg> 55 55 </button> 56 + <!-- Minimap toggle --> 57 + <button class="btn-icon" id="btn-minimap" title="Toggle minimap"> 58 + <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="2" y="1.5" width="12" height="13" rx="1"/><line x1="5" y1="4.5" x2="11" y2="4.5"/><line x1="5" y1="7.5" x2="9" y2="7.5"/><line x1="5" y1="10.5" x2="10" y2="10.5"/></svg> 59 + </button> 56 60 <!-- Version history --> 57 61 <button class="btn-icon" id="btn-history" title="Version history"> 58 62 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>
+20 -1
src/docs/sidebar-wiring.ts
··· 256 256 257 257 // ── Minimap ───────────────────────────────────────────────── 258 258 259 + const MINIMAP_STORAGE_KEY = 'tools-minimap-enabled'; 260 + 259 261 export function wireMinimap(deps: { editor: Editor }): void { 260 262 const { editor } = deps; 261 263 const minimapEl = document.getElementById('minimap') as HTMLElement; 262 264 const minimapViewport = document.getElementById('minimap-viewport') as HTMLElement; 263 265 const minimapHeadingsEl = document.getElementById('minimap-headings') as HTMLElement; 266 + const toggleBtn = document.getElementById('btn-minimap') as HTMLElement | null; 267 + 268 + let minimapEnabled = localStorage.getItem(MINIMAP_STORAGE_KEY) !== 'false'; 269 + 270 + function updateToggleBtn(): void { 271 + if (toggleBtn) toggleBtn.classList.toggle('active', minimapEnabled); 272 + } 264 273 265 274 function updateMinimap(): void { 266 275 const html = editor.getHTML(); 267 276 const headings = extractHeadings(html); 268 277 269 - if (headings.length < 2) { 278 + if (headings.length < 2 || !minimapEnabled) { 270 279 minimapEl.style.display = 'none'; 271 280 return; 272 281 } ··· 302 311 minimapViewport.style.height = height + '%'; 303 312 } 304 313 314 + if (toggleBtn) { 315 + toggleBtn.addEventListener('click', () => { 316 + minimapEnabled = !minimapEnabled; 317 + localStorage.setItem(MINIMAP_STORAGE_KEY, String(minimapEnabled)); 318 + updateToggleBtn(); 319 + updateMinimap(); 320 + }); 321 + } 322 + 323 + updateToggleBtn(); 305 324 editor.on('update', updateMinimap); 306 325 document.addEventListener('scroll', updateMinimapViewport, { passive: true }); 307 326 // Delayed initial render