Skip to content

Commit

Permalink
tut_spa: improve code editor tabs style & fix code loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@pthom
pthom committed Dec 21, 2024
1 parent 820f1fb commit 43345c2
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 50 deletions.
4 changes: 4 additions & 0 deletions tutorial/justfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ gpt_files_content:
tutorial-json_toc:
python scripts/convert_toc.py


tutorial_prepare: tutorial-json_toc
cd single_page_book_app && npm install

tutorial_book:
cd jbook && rm -rf _build && export PYTHONPATH=$(pwd)/sphinx_ext_imgui && jupyter-book build .

Expand Down
49 changes: 20 additions & 29 deletions tutorial/single_page_book_app/resources_singlepage/code_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,10 @@ async function _processCodesIncludeInMarkdown(mdText, baseUrlPath) {
if (line.trim().startsWith("```{codes_include}")) {
const match = line.match(/```{codes_include}\s+(.*)/);
if (match) {
console.log("Found codes_include directive:", match[1]); // Log matched directive
// console.log("Found codes_include directive:", match[1]); // Log matched directive
const baseName = match[1].trim();

// Generate HTML as a string
// const tabsHtml = `
// <div class="code-editor-tab-container" data-base-name="${baseName}">
// <div class="code-editor-tab-buttons">
// <button class="code-editor-tab-button active" data-tab="Python">Python</button>
// <button class="code-editor-tab-button" data-tab="C++">C++</button>
// </div>
// <div class="code-editor-tab-content">
// <div class="code-editor-tab-pane" data-language="Python" data-file="${baseName}.py">
// <div class="codemirror-placeholder" data-language="python"></div>
// </div>
// <div class="code-editor-tab-pane hidden" data-language="C++" data-file="${baseName}.cpp">
// <div class="codemirror-placeholder" data-language="cpp"></div>
// </div>
// </div>
// </div>`;
const tabsHtml = `
<div class="code-editor-tab-container" data-base-name="${baseName}">
<div class="code-editor-tab-buttons">
Expand All @@ -52,9 +37,7 @@ async function _processCodesIncludeInMarkdown(mdText, baseUrlPath) {
</div>
</div>
</div>`;


console.log("Generated HTML for tabs:", tabsHtml); // Debug log
// console.log("Generated HTML for tabs:", tabsHtml); // Debug log
processedLines.push(tabsHtml);
}
insideCodesIncludeBlock = true;
Expand All @@ -68,31 +51,37 @@ async function _processCodesIncludeInMarkdown(mdText, baseUrlPath) {
return processedLines.join("\n");
}


async function _initializeCodeMirrorEditors(baseUrlPath) {
const containers = document.querySelectorAll(".code-editor-tab-container");

console.log("Found Code Editor Containers:", containers.length); // Debug log
// console.log("Found Code Editor Containers:", containers.length); // Debug log

for (const container of containers) {
const tabPanes = container.querySelectorAll(".code-editor-tab-pane");

console.log("Found Tab Panes:", tabPanes.length); // Debug log
// console.log("Found Tab Panes:", tabPanes.length); // Debug log

for (const tabPane of tabPanes) {
const filePath = tabPane.dataset.file;
const language = tabPane.dataset.language.toLowerCase();

console.log(`Initializing CodeMirror for file: ${filePath}, language: ${language}`); // Debug log
// console.log(`Initializing CodeMirror for file: ${filePath}, language: ${language}`); // Debug log

try {
const fileResponse = await fetch(`${baseUrlPath}${filePath}`);
// Correctly handle baseUrlPath and filePath to avoid duplication
// Relative path; combine with baseUrlPath
let fullPath = new URL(filePath, `${window.location.origin}/${baseUrlPath}/`).toString();
// console.log(`Full Path for Fetch: ${fullPath}`); // Debug log

const fileResponse = await fetch(fullPath);
if (!fileResponse.ok) {
console.warn(`File not found: ${baseUrlPath}${filePath}`);
console.warn(`File not found: ${fullPath}`);
continue;
}

const codeContent = await fileResponse.text();
console.log(`Fetched Code Content for ${filePath}:\n`, codeContent); // Debug log
// console.log(`Fetched Code Content for ${filePath}:\n`, codeContent); // Debug log

const cmPlaceholder = tabPane.querySelector(".codemirror-placeholder");

Expand Down Expand Up @@ -129,16 +118,17 @@ async function _initializeCodeMirrorEditors(baseUrlPath) {
_setupCodeEditorTabs(containers); // Ensure tab setup is called
}


function _setupCodeEditorTabs(containers) {
containers.forEach((container) => {
const buttons = container.querySelectorAll(".code-editor-tab-button");
const panes = container.querySelectorAll(".code-editor-tab-pane");

buttons.forEach((button) => {
console.log(`Attaching click event to button: ${button.dataset.tab}`); // Debugging log
// console.log(`Attaching click event to button: ${button.dataset.tab}`); // Debugging log
button.addEventListener("click", () => {
const targetTab = button.dataset.tab;
console.log(`Tab clicked: ${targetTab}`); // Debugging log
// console.log(`Tab clicked: ${targetTab}`); // Debugging log

// Deactivate all buttons and panes
buttons.forEach((btn) => btn.classList.remove("active"));
Expand Down Expand Up @@ -191,12 +181,13 @@ export async function prepareCodeEditors(mdText, baseUrlPath) {
const renderedHtml = marked(processedMdText);

// Debug log: Final rendered HTML
console.log("Final Rendered HTML:", renderedHtml);
// console.log("Final Rendered HTML:", renderedHtml);

// Update the content area with the rendered HTML
const contentArea = document.getElementById("content-area");
contentArea.innerHTML = renderedHtml;

// Initialize CodeMirror editors for the placeholders
await _initializeCodeMirrorEditors(baseUrlPath);
//await _initializeCodeMirrorEditors(baseUrlPath);
await _initializeCodeMirrorEditors("jbook");
}
55 changes: 34 additions & 21 deletions tutorial/single_page_book_app/resources_singlepage/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,60 +248,73 @@ body {
/* ==========================
Code Editor Tabs
========================== */

.code-editor-tab-container {
border: 1px solid #ccc;
border: 1px solid #007bff; /* Blue border for the container */
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
background-color: #f9f9f9;
background-color: #ffffff;
}

.code-editor-tab-buttons {
display: flex;
background-color: #f9f9f9;
justify-content: flex-start; /* Align tabs to the left */
padding: 0.2rem; /* Small padding around tabs */
background-color: #f9f9f9; /* Light gray for the tab bar */
border-bottom: 1px solid #ccc;
gap: 0.2rem; /* Add small gap between tabs */
}

.code-editor-tab-button {
flex: 1;
padding: 0.5rem;
text-align: center;
background-color: #e9ecef;
padding: 0.5rem 1rem; /* Adjust padding for a compact look */
border: none;
border-radius: 4px 4px 0 0; /* Rounded top corners */
background-color: #e9ecef; /* Light gray background for inactive tabs */
cursor: pointer;
font-size: 1rem;
font-size: 0.9rem;
font-weight: bold;
color: #333; /* Neutral dark text for inactive tabs */
transition: background-color 0.3s, color 0.3s;
}

.code-editor-tab-button.active {
background-color: #007bff; /* Blue background for active tab */
color: white; /* White text for active tab */
font-weight: bold;
background-color: #007bff;
color: white;
border-bottom: 2px solid white;
border-bottom: 2px solid #ffffff; /* Seamless transition to the content area */
}

.code-editor-tab-button:hover {
background-color: #0056b3;
background-color: #0056b3; /* Darker blue on hover */
color: white;
}

.code-editor-tab-content {
padding: 0;
background-color: white;
padding: 1rem;
background-color: #ffffff; /* White background for content area */
border-top: none;
}

.code-editor-tab-pane {
display: none; /* All panes are hidden by default */
padding: 1rem;
display: block;
animation: fadeIn 0.2s ease-in; /* Smooth fade-in animation for content */
}

.code-editor-tab-pane:not(.hidden) {
display: block; /* Only the active pane is shown */
.code-editor-tab-pane.hidden {
display: none;
}

.code-editor-tab-button.active {
background-color: #007bff;
color: white;
/* Subtle animation for tab switching */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ==========================
Expand Down

0 comments on commit 43345c2

Please sign in to comment.