mirror of
https://github.com/ArthurSonzogni/FTXUI.git
synced 2025-12-16 01:48:56 +08:00
Compare commits
1 Commits
5b50eed0c6
...
c25ea71a05
| Author | SHA1 | Date | |
|---|---|---|---|
|
c25ea71a05 |
@@ -178,8 +178,8 @@ include(cmake/ftxui_install.cmake)
|
||||
include(cmake/ftxui_package.cmake)
|
||||
include(cmake/ftxui_modules.cmake)
|
||||
|
||||
add_subdirectory(examples)
|
||||
add_subdirectory(doc)
|
||||
add_subdirectory(examples)
|
||||
|
||||
# You can generate ./examples_modules/ by running
|
||||
# ./tools/generate_examples_modules.sh
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Khula:700);
|
||||
|
||||
html {
|
||||
--toc-width: 250px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color:#EEE;
|
||||
padding:0px;
|
||||
@@ -45,8 +41,7 @@ h1 {
|
||||
flex:1;
|
||||
}
|
||||
|
||||
#selectExample,
|
||||
#selectExample option {
|
||||
#selectExample, #selectExample option {
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
@@ -66,8 +61,7 @@ h1 {
|
||||
height: calc(clamp(200px, 100vh - 300px, 900px));
|
||||
overflow: hidden;
|
||||
border:none;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
#terminalContainer {
|
||||
@@ -75,7 +69,6 @@ h1 {
|
||||
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);
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.fakeButtons {
|
||||
@@ -112,69 +105,3 @@ h1 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,18 +9,13 @@
|
||||
<script type="module" src="index.mjs"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toc-container">
|
||||
<div class="toc-list"></div>
|
||||
</div>
|
||||
<script id="example_script"></script>
|
||||
|
||||
<div class="page">
|
||||
<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. See <a id="source">source</a>.
|
||||
This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
|
||||
</p>
|
||||
|
||||
<div id="terminalContainer">
|
||||
|
||||
@@ -92,69 +92,6 @@ 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<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(dirContainer);
|
||||
}
|
||||
}''
|
||||
|
||||
Reference in New Issue
Block a user