diff --git a/examples/index.css b/examples/index.css index 32b44750..24597d56 100644 --- a/examples/index.css +++ b/examples/index.css @@ -1,15 +1,19 @@ @import url(https://fonts.googleapis.com/css?family=Khula:700); +html { + --toc-width: 250px; +} + body { - background-color:#EEE; - padding:0px; - margin:0px; + background-color: #EEE; + padding: 0px; + margin: 0px; font-family: Khula, Helvetica, sans-serif; font-size: 130%; } .page { - max-width:1300px; + max-width: 1300px; margin: auto; padding: 10px; } @@ -20,7 +24,7 @@ a { margin: 0 -.25rem; padding: 0 .25rem; transition: color .3s ease-in-out, - box-shadow .3s ease-in-out; + box-shadow .3s ease-in-out; } a:hover { @@ -30,45 +34,48 @@ a:hover { h1 { text-decoration: underline; - width:100%; - background-color: rgba(100,100,255,0.5); + width: 100%; + background-color: rgba(100, 100, 255, 0.5); padding: 10px; margin: 0; } #selectExample { - flex:1; + flex: 1; } -#selectExample, #selectExample option { +#selectExample, +#selectExample option { font-size: 16px; font-family: sans-serif; font-weight: 700; line-height: 1.3; - border:0px; + border: 0px; background-color: #bbb; - color:black; + color: black; } #selectExample:focus { - outline:none; + outline: none; } #terminal { - width:100%; + width: 100%; height 500px; height: calc(clamp(200px, 100vh - 300px, 900px)); overflow: hidden; - border:none; - background-color:black; + border: none; + padding: 10px; + margin: 10px; } #terminalContainer { overflow: hidden; border-radius: 10px; - box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75), - 0px 2px 80px 0px rgba(0,0,0,0.50); + box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75), + 0px 2px 80px 0px rgba(0, 0, 0, 0.50); + background-color: black; } .fakeButtons { @@ -76,7 +83,7 @@ h1 { width: 10px; border-radius: 50%; border: 1px solid #000; - margin:6px; + margin: 6px; background-color: #ff3b47; border-color: #9d252b; display: inline-block; @@ -95,13 +102,79 @@ h1 { } .fakeMenu { - display:flex; + display: flex; flex-direction: row; - width:100%; + width: 100%; box-sizing: border-box; height: 25px; background-color: #bbb; - color:black; + color: black; margin: 0 auto; overflow: hidden; } + +.toc-container { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: var(--toc-width); + background: white; + padding: 0; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; +} + +.toc-title { + font-weight: bold; + margin-bottom: 5px; + font-size: 0.9em; + color: #555; + + position: sticky; + transition: position 1.0s ease-in-out; + top: 0; + z-index: 1; + padding: 20px; + margin: 0; + + border-bottom: 1px solid #ddd; + + /* Gradient background for the title */ + background-color: #f0f0f0; +} + +.toc-item { + padding: 3px 8px; + margin: 0; + cursor: pointer; + font-size: 0.85em; + border-radius: 3px; + transition: background 0.2s; +} + +.toc-item:hover { + background: #f0f0f0; +} + +.toc-item.selected { + background: #e0e0e0; + font-weight: bold; +} + +@media (max-width: 1024px) { + .toc-container { + display: none; + } + + .page { + margin-left: 0; + } +} + +@media (min-width: 1025px) { + .page { + margin-left: calc(var(--toc-width) + 20px); + } +} diff --git a/examples/index.html b/examples/index.html index 675f70d2..d38f9750 100644 --- a/examples/index.html +++ b/examples/index.html @@ -9,13 +9,18 @@ +
+
+

FTXUI is a simple functional C++ library for terminal user interface.
- This showcases the: ./example/ folder.
+ This showcases the: ./example/ + folder. See source.

diff --git a/examples/index.mjs b/examples/index.mjs index 63d27326..bd96a70a 100644 --- a/examples/index.mjs +++ b/examples/index.mjs @@ -92,6 +92,69 @@ window.Module = { }, }; +const source = document.querySelector("#source"); +source.href = "https://github.com/ArthurSonzogni/FTXUI/blob/main/examples/" + example + ".cpp"; + const words = example.split('/') words[1] = "ftxui_example_" + words[1] + ".js" document.querySelector("#example_script").src = words.join('/'); + + +// Table of Contents (TOC) for quick navigation. + +// Get select element +const selectEl = document.querySelector('select#selectExample'); +if (!selectEl) { + console.error('select#selectExample not found'); +} else { + // Get TOC container + const tocContainer = document.querySelector('.toc-container'); + const tocList = tocContainer.querySelector('.toc-list'); + + // Group options by directory + const groupedOptions = Array.from(selectEl.options).reduce((acc, option) => { + const [dir, file] = option.text.split('/'); + if (!acc[dir]) { + acc[dir] = []; + } + acc[dir].push({ option, file }); + return acc; + }, {}); + + // Generate TOC items + for (const dir in groupedOptions) { + const dirContainer = document.createElement('div'); + + const dirHeader = document.createElement('div'); + dirHeader.textContent = dir; + dirHeader.className = 'toc-title'; + dirContainer.appendChild(dirHeader); + + groupedOptions[dir].forEach(({ option, file }) => { + const tocItem = document.createElement('div'); + tocItem.textContent = file; + tocItem.className = 'toc-item'; + + if (selectEl.options[selectEl.selectedIndex].value === option.value) { + tocItem.classList.add('selected'); + } + + // Click handler + tocItem.addEventListener('click', () => { + for(let i=0; i