feat: Implement new popout window for content viewing with outline, scroll spy, reading progress, and theme support.
This commit is contained in:
parent
e291a164f5
commit
a093cf420b
@ -37,10 +37,30 @@
|
||||
<body class="popup-mode">
|
||||
<div class="popout-loading" id="loading">Chargement...</div>
|
||||
|
||||
<div class="main-layout" style="height: 100vh;">
|
||||
<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;">
|
||||
<!-- JavaScript will inject breadcrumb, title, and markdown content here -->
|
||||
</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>
|
||||
|
||||
<script>
|
||||
@ -60,6 +80,428 @@
|
||||
applyTheme(saved);
|
||||
}
|
||||
|
||||
let rightSidebarVisible = false;
|
||||
let rightSidebarWidth = 280;
|
||||
let headingsCache = [];
|
||||
let activeHeadingId = null;
|
||||
|
||||
function el(tag, attrs, children) {
|
||||
const e = document.createElement(tag);
|
||||
if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }
|
||||
if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }
|
||||
return e;
|
||||
}
|
||||
|
||||
function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }
|
||||
|
||||
const OutlineManager = {
|
||||
/**
|
||||
* Slugify text to create valid IDs
|
||||
*/
|
||||
slugify(text) {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.trim() || 'heading';
|
||||
},
|
||||
|
||||
/**
|
||||
* Parse headings from markdown content
|
||||
*/
|
||||
parseHeadings() {
|
||||
const contentArea = document.querySelector('.md-content');
|
||||
if (!contentArea) return [];
|
||||
|
||||
const headings = [];
|
||||
const h2s = contentArea.querySelectorAll('h2');
|
||||
const h3s = contentArea.querySelectorAll('h3');
|
||||
const allHeadings = [...h2s, ...h3s].sort((a, b) => {
|
||||
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
||||
});
|
||||
|
||||
const usedIds = new Map();
|
||||
|
||||
allHeadings.forEach((heading) => {
|
||||
const text = heading.textContent.trim();
|
||||
if (!text) return;
|
||||
|
||||
const level = parseInt(heading.tagName[1]);
|
||||
let id = this.slugify(text);
|
||||
|
||||
// Handle duplicate IDs
|
||||
if (usedIds.has(id)) {
|
||||
const count = usedIds.get(id) + 1;
|
||||
usedIds.set(id, count);
|
||||
id = `${id}-${count}`;
|
||||
} else {
|
||||
usedIds.set(id, 1);
|
||||
}
|
||||
|
||||
// Inject ID into heading if not present
|
||||
if (!heading.id) {
|
||||
heading.id = id;
|
||||
} else {
|
||||
id = heading.id;
|
||||
}
|
||||
|
||||
headings.push({
|
||||
id,
|
||||
level,
|
||||
text,
|
||||
element: heading
|
||||
});
|
||||
});
|
||||
|
||||
return headings;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render outline list
|
||||
*/
|
||||
renderOutline(headings) {
|
||||
const outlineList = document.getElementById('outline-list');
|
||||
const outlineEmpty = document.getElementById('outline-empty');
|
||||
|
||||
if (!outlineList) return;
|
||||
|
||||
outlineList.innerHTML = '';
|
||||
|
||||
if (!headings || headings.length === 0) {
|
||||
outlineList.hidden = true;
|
||||
if (outlineEmpty) {
|
||||
outlineEmpty.hidden = false;
|
||||
safeCreateIcons();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
outlineList.hidden = false;
|
||||
if (outlineEmpty) outlineEmpty.hidden = true;
|
||||
|
||||
headings.forEach((heading) => {
|
||||
const item = el('a', {
|
||||
class: `outline-item level-${heading.level}`,
|
||||
href: `#${heading.id}`,
|
||||
'data-heading-id': heading.id,
|
||||
role: 'link'
|
||||
}, [document.createTextNode(heading.text)]);
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.scrollToHeading(heading.id);
|
||||
});
|
||||
|
||||
outlineList.appendChild(item);
|
||||
});
|
||||
|
||||
headingsCache = headings;
|
||||
},
|
||||
|
||||
/**
|
||||
* Scroll to heading with smooth behavior
|
||||
*/
|
||||
scrollToHeading(headingId) {
|
||||
const heading = document.getElementById(headingId);
|
||||
if (!heading) return;
|
||||
|
||||
const contentArea = document.getElementById('content-area');
|
||||
if (!contentArea) return;
|
||||
|
||||
// Calculate offset for fixed header (if any)
|
||||
const headerHeight = 80;
|
||||
const headingTop = heading.offsetTop;
|
||||
|
||||
contentArea.scrollTo({
|
||||
top: headingTop - headerHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Update active state immediately
|
||||
this.setActiveHeading(headingId);
|
||||
},
|
||||
|
||||
/**
|
||||
* Set active heading in outline
|
||||
*/
|
||||
setActiveHeading(headingId) {
|
||||
if (activeHeadingId === headingId) return;
|
||||
|
||||
activeHeadingId = headingId;
|
||||
|
||||
const items = document.querySelectorAll('.outline-item');
|
||||
items.forEach((item) => {
|
||||
if (item.getAttribute('data-heading-id') === headingId) {
|
||||
item.classList.add('active');
|
||||
item.setAttribute('aria-current', 'location');
|
||||
// Scroll outline item into view
|
||||
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
} else {
|
||||
item.classList.remove('active');
|
||||
item.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize outline for current document
|
||||
*/
|
||||
init() {
|
||||
const headings = this.parseHeadings();
|
||||
this.renderOutline(headings);
|
||||
ScrollSpyManager.init(headings);
|
||||
ReadingProgressManager.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* Cleanup
|
||||
*/
|
||||
destroy() {
|
||||
ScrollSpyManager.destroy();
|
||||
ReadingProgressManager.destroy();
|
||||
headingsCache = [];
|
||||
activeHeadingId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const ScrollSpyManager = {
|
||||
observer: null,
|
||||
headings: [],
|
||||
|
||||
init(headings) {
|
||||
this.destroy();
|
||||
this.headings = headings;
|
||||
|
||||
if (!headings || headings.length === 0) return;
|
||||
|
||||
const contentArea = document.getElementById('content-area');
|
||||
if (!contentArea) return;
|
||||
|
||||
const options = {
|
||||
root: contentArea,
|
||||
rootMargin: '-20% 0px -70% 0px',
|
||||
threshold: [0, 0.3, 0.5, 1.0]
|
||||
};
|
||||
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
// Find the most visible heading
|
||||
let mostVisible = null;
|
||||
let maxRatio = 0;
|
||||
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
|
||||
maxRatio = entry.intersectionRatio;
|
||||
mostVisible = entry.target;
|
||||
}
|
||||
});
|
||||
|
||||
if (mostVisible && mostVisible.id) {
|
||||
OutlineManager.setActiveHeading(mostVisible.id);
|
||||
}
|
||||
}, options);
|
||||
|
||||
// Observe all headings
|
||||
headings.forEach((heading) => {
|
||||
if (heading.element) {
|
||||
this.observer.observe(heading.element);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
this.observer = null;
|
||||
}
|
||||
this.headings = [];
|
||||
}
|
||||
};
|
||||
|
||||
const ReadingProgressManager = {
|
||||
scrollHandler: null,
|
||||
|
||||
init() {
|
||||
this.destroy();
|
||||
|
||||
const contentArea = document.getElementById('content-area');
|
||||
if (!contentArea) return;
|
||||
|
||||
this.scrollHandler = this.throttle(() => {
|
||||
this.updateProgress();
|
||||
}, 100);
|
||||
|
||||
contentArea.addEventListener('scroll', this.scrollHandler);
|
||||
this.updateProgress();
|
||||
},
|
||||
|
||||
updateProgress() {
|
||||
const contentArea = document.getElementById('content-area');
|
||||
const progressFill = document.getElementById('reading-progress-fill');
|
||||
const progressText = document.getElementById('reading-progress-text');
|
||||
|
||||
if (!contentArea || !progressFill || !progressText) return;
|
||||
|
||||
const scrollTop = contentArea.scrollTop;
|
||||
const scrollHeight = contentArea.scrollHeight;
|
||||
const clientHeight = contentArea.clientHeight;
|
||||
|
||||
const maxScroll = scrollHeight - clientHeight;
|
||||
const percentage = maxScroll > 0 ? Math.round((scrollTop / maxScroll) * 100) : 0;
|
||||
|
||||
progressFill.style.width = `${percentage}%`;
|
||||
progressText.textContent = `${percentage}%`;
|
||||
},
|
||||
|
||||
throttle(func, delay) {
|
||||
let lastCall = 0;
|
||||
return function(...args) {
|
||||
const now = Date.now();
|
||||
if (now - lastCall >= delay) {
|
||||
lastCall = now;
|
||||
func.apply(this, args);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
destroy() {
|
||||
const contentArea = document.getElementById('content-area');
|
||||
if (contentArea && this.scrollHandler) {
|
||||
contentArea.removeEventListener('scroll', this.scrollHandler);
|
||||
}
|
||||
this.scrollHandler = null;
|
||||
|
||||
// Reset progress
|
||||
const progressFill = document.getElementById('reading-progress-fill');
|
||||
const progressText = document.getElementById('reading-progress-text');
|
||||
if (progressFill) progressFill.style.width = '0%';
|
||||
if (progressText) progressText.textContent = '0%';
|
||||
}
|
||||
};
|
||||
|
||||
const RightSidebarManager = {
|
||||
init() {
|
||||
this.loadState();
|
||||
this.initToggle();
|
||||
this.initResize();
|
||||
},
|
||||
|
||||
loadState() {
|
||||
const savedVisible = localStorage.getItem('obsigate-right-sidebar-visible');
|
||||
const savedWidth = localStorage.getItem('obsigate-right-sidebar-width');
|
||||
|
||||
if (savedVisible !== null) {
|
||||
rightSidebarVisible = savedVisible === 'true';
|
||||
}
|
||||
|
||||
if (savedWidth) {
|
||||
rightSidebarWidth = parseInt(savedWidth) || 280;
|
||||
}
|
||||
|
||||
this.applyState();
|
||||
},
|
||||
|
||||
applyState() {
|
||||
const sidebar = document.getElementById('right-sidebar');
|
||||
const handle = document.getElementById('right-sidebar-resize-handle');
|
||||
const tocBtn = document.getElementById('toc-toggle-btn');
|
||||
const headerToggleBtn = document.getElementById('right-sidebar-toggle-btn');
|
||||
|
||||
if (!sidebar) return;
|
||||
|
||||
if (rightSidebarVisible) {
|
||||
sidebar.classList.remove('hidden');
|
||||
sidebar.style.width = `${rightSidebarWidth}px`;
|
||||
if (handle) handle.classList.remove('hidden');
|
||||
if (tocBtn) {
|
||||
tocBtn.classList.add('active');
|
||||
tocBtn.title = 'Masquer le sommaire';
|
||||
}
|
||||
if (headerToggleBtn) {
|
||||
headerToggleBtn.title = 'Masquer le panneau';
|
||||
headerToggleBtn.setAttribute('aria-label', 'Masquer le panneau');
|
||||
}
|
||||
} else {
|
||||
sidebar.classList.add('hidden');
|
||||
if (handle) handle.classList.add('hidden');
|
||||
if (tocBtn) {
|
||||
tocBtn.classList.remove('active');
|
||||
tocBtn.title = 'Afficher le sommaire';
|
||||
}
|
||||
if (headerToggleBtn) {
|
||||
headerToggleBtn.title = 'Afficher le panneau';
|
||||
headerToggleBtn.setAttribute('aria-label', 'Afficher le panneau');
|
||||
}
|
||||
}
|
||||
|
||||
// Update icons
|
||||
safeCreateIcons();
|
||||
},
|
||||
|
||||
toggle() {
|
||||
rightSidebarVisible = !rightSidebarVisible;
|
||||
localStorage.setItem('obsigate-right-sidebar-visible', rightSidebarVisible);
|
||||
this.applyState();
|
||||
},
|
||||
|
||||
initToggle() {
|
||||
const toggleBtn = document.getElementById('right-sidebar-toggle-btn');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', () => this.toggle());
|
||||
}
|
||||
},
|
||||
|
||||
initResize() {
|
||||
const handle = document.getElementById('right-sidebar-resize-handle');
|
||||
const sidebar = document.getElementById('right-sidebar');
|
||||
|
||||
if (!handle || !sidebar) return;
|
||||
|
||||
let isResizing = false;
|
||||
let startX = 0;
|
||||
let startWidth = 0;
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
isResizing = true;
|
||||
startX = e.clientX;
|
||||
startWidth = sidebar.offsetWidth;
|
||||
handle.classList.add('active');
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
};
|
||||
|
||||
const onMouseMove = (e) => {
|
||||
if (!isResizing) return;
|
||||
|
||||
const delta = startX - e.clientX;
|
||||
let newWidth = startWidth + delta;
|
||||
|
||||
// Constrain width
|
||||
newWidth = Math.max(200, Math.min(400, newWidth));
|
||||
|
||||
sidebar.style.width = `${newWidth}px`;
|
||||
rightSidebarWidth = newWidth;
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
if (!isResizing) return;
|
||||
|
||||
isResizing = false;
|
||||
handle.classList.remove('active');
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
|
||||
localStorage.setItem('obsigate-right-sidebar-width', rightSidebarWidth);
|
||||
};
|
||||
|
||||
handle.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
};
|
||||
|
||||
async function initPopout() {
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const vault = decodeURIComponent(pathParts[2]);
|
||||
@ -151,6 +593,14 @@
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
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);
|
||||
|
||||
header.appendChild(actionsDiv);
|
||||
area.appendChild(header);
|
||||
@ -173,6 +623,8 @@
|
||||
window.lucide.createIcons();
|
||||
}
|
||||
|
||||
OutlineManager.init(); RightSidebarManager.init();
|
||||
|
||||
// Highlight code blocks
|
||||
document.querySelectorAll('pre code').forEach((el) => {
|
||||
hljs.highlightElement(el);
|
||||
|
||||
@ -2559,9 +2559,17 @@ body.resizing-v {
|
||||
box-shadow: none;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
.right-sidebar.hidden {
|
||||
transform: translateX(100%) !important;
|
||||
width: 280px !important;
|
||||
min-width: 280px !important;
|
||||
display: flex;
|
||||
}
|
||||
.right-sidebar:not(.hidden) {
|
||||
transform: translateX(0);
|
||||
box-shadow: -4px 0 20px rgba(0,0,0,0.3);
|
||||
transform: translateX(0) !important;
|
||||
box-shadow: -4px 0 20px rgba(0,0,0,0.3) !important;
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.right-sidebar-resize-handle {
|
||||
|
||||
77
patch.js
Normal file
77
patch.js
Normal file
@ -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');
|
||||
Loading…
x
Reference in New Issue
Block a user