feat: Implement new popout window for content viewing with outline, scroll spy, reading progress, and theme support.

2026-03-26 22:18:49 -04:00
parent e291a164f5
commit a093cf420b
3 changed files with 541 additions and 4 deletions
@@ -0,0 +1,77 @@
+const fs = require('fs');
+
+const js = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/app.js', 'utf8');
+
+const extractManager = (name) => {
+  const regex = new RegExp('const ' + name + ' = \\{[\\s\\S]*?\\n  \\};');
+  const match = regex.exec(js);
+  return match ? match[0] : '';
+};
+
+// Also we need variables
+const vars = 'let rightSidebarVisible = false;\nlet rightSidebarWidth = 280;\nlet headingsCache = [];\nlet activeHeadingId = null;';
+const utils = 'function el(tag, attrs, children) {\n  const e = document.createElement(tag);\n  if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }\n  if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }\n  return e;\n}';
+const safeCreateIcons = 'function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }';
+
+const code = [
+  vars,
+  utils,
+  safeCreateIcons,
+  extractManager('OutlineManager'),
+  extractManager('ScrollSpyManager'),
+  extractManager('ReadingProgressManager'),
+  extractManager('RightSidebarManager')
+].join('\n\n');
+
+let html = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', 'utf8');
+
+// replace body layout
+html = html.replace('<div class="main-layout" style="height: 100vh;">\n    <main class="content-area" id="content-area" style="margin-top: 15px;">',
+`<div class="main-layout" style="height: 100vh; display: flex; position: relative; overflow: hidden;">
+    <main class="content-area" id="content-area" style="margin-top: 15px; flex: 1; overflow-y: auto; overflow-x: hidden;">`);
+
+html = html.replace('</main>\n  </div>', 
+`</main>
+    <div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
+    <aside class="right-sidebar hidden" id="right-sidebar" role="complementary" aria-label="Table des matières">
+      <div class="right-sidebar-header">
+        <h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
+        <button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau">
+          <i data-lucide="chevron-right" style="width:16px;height:16px"></i>
+        </button>
+      </div>
+      <div class="outline-panel" id="outline-panel">
+        <nav class="outline-list" id="outline-list" role="navigation"></nav>
+        <div class="outline-empty" id="outline-empty" hidden>
+          <i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
+          <span>Aucun titre dans ce document</span>
+        </div>
+      </div>
+      <div class="reading-progress" id="reading-progress">
+        <div class="reading-progress-bar"><div class="reading-progress-fill" id="reading-progress-fill"></div></div>
+        <div class="reading-progress-text" id="reading-progress-text">0%</div>
+      </div>
+    </aside>
+  </div>`);
+
+// Inject TOC button
+html = html.replace('actionsDiv.appendChild(dlBtn);', `actionsDiv.appendChild(dlBtn);
+
+        const tocBtn = document.createElement("button");
+        tocBtn.className = "btn-action";
+        tocBtn.id = "toc-toggle-btn";
+        tocBtn.title = "Afficher/Masquer le sommaire";
+        tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
+        tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
+        actionsDiv.appendChild(tocBtn);`);
+
+// init TOC manager
+html = html.replace('// Highlight code blocks', `OutlineManager.init(); RightSidebarManager.init();
+
+        // Highlight code blocks`);
+
+// insert the managers code before initPopout();
+html = html.replace('async function initPopout()', code + '\n\n    async function initPopout()');
+
+fs.writeFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', html);
+console.log('Script ran successfully');