zhangyiss/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2025-09-01 04:14:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve example style.

Browse Source 
Based uppon @yurenchen000 suggestion.

Fixed:https://github.com/ArthurSonzogni/FTXUI/issues/1090
This commit is contained in:
ArthurSonzogni
2025-08-17 13:51:18 +02:00
parent adec8a302f
commit 79f9262871
3 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
examples/index.css
View File

@@ -1,7 +1,7 @@
@import url(https://fonts.googleapis.com/css?family=Khula:700);
html {
--toc-width: 380px;
--toc-width: 250px;
}
body {
@@ -120,9 +120,10 @@ h1 {
bottom: 0;
width: var(--toc-width);
background: white;
padding: 8px;
padding-top: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.toc-title {
@@ -132,15 +133,21 @@ h1 {
color: #555;
position: sticky;
transition: position 1.0s ease-in-out;
top: 0;
background: white;
z-index: 1;
padding-top: 8px;
padding: 20px;
margin: 0;
border-bottom: 1px solid #ddd;
/* Gradient background for the title */
background-color: #f0f0f0;
}
.toc-item {
padding: 3px 8px;
margin: 2px 0;
margin: 0;
cursor: pointer;
font-size: 0.85em;
border-radius: 3px;

5
examples/index.html
View File

@@ -10,7 +10,6 @@
</head>
<body>
<div class="toc-container">
<div class="toc-title">▼ Examples</div>
<div class="toc-list"></div>
</div>
<script id="example_script"></script>
@@ -19,7 +18,9 @@
<p>
<a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
functional C++ library for terminal user interface. <br/>
This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
This showcases the: <a
href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
folder. See <a id="source">source</a>.
</p>
<div id="terminalContainer">

63
examples/index.mjs
View File

@@ -92,6 +92,9 @@ 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('/');
@@ -108,26 +111,50 @@ if (!selectEl) {
const tocContainer = document.querySelector('.toc-container');
const tocList = tocContainer.querySelector('.toc-list');
// Generate TOC items
Array.from(selectEl.options).forEach((option, index) => {
const tocItem = document.createElement('div');
tocItem.textContent = option.text;
tocItem.className = 'toc-item';
if (index == selectEl.selectedIndex) {
tocItem.classList.add('selected');
// 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;
}, {});
// Click handler
tocItem.addEventListener('click', () => {
selectEl.selectedIndex = index;
// Generate TOC items
for (const dir in groupedOptions) {
const dirContainer = document.createElement('div');
history.pushState({}, "", "?file=" + option.value);
location.reload();
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<selectEl.options.length; ++i) {
if (selectEl.options[i].value == option.value) {
selectEl.selectedIndex = i;
break;
}
}
history.pushState({}, "", "?file=" + option.value);
location.reload();
});
dirContainer.appendChild(tocItem);
});
tocList.appendChild(tocItem);
});
console.log('TOC created successfully!');
}
tocList.appendChild(dirContainer);
}
}''