mirror of
https://github.com/boostorg/boostlook.git
synced 2026-01-19 04:02:14 +00:00
refactor: refine regex for <body> targeting, adjust CSS for releases page
This commit is contained in:
committed by
Julio C. Estrada
parent
27ef69af74
commit
21d8b262e8
@@ -542,10 +542,14 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.boostlook:not(#libraryReadMe) {
|
||||
.boostlook {
|
||||
margin-left: 18rem;
|
||||
}
|
||||
|
||||
.boostlook#libraryReadMe {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.boostlook #toggle-toc {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
@@ -585,8 +589,6 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
html.toc-hidden .boostlook #toc.toc2 {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
100
boostlook.rb
100
boostlook.rb
@@ -1,74 +1,66 @@
|
||||
Asciidoctor::Extensions.register do
|
||||
postprocessor do
|
||||
process do |doc, output|
|
||||
output = output.sub(/<body(.*?)>/, '<body\\1><div class="boostlook">')
|
||||
output = output.sub(/<\/body>/, "</div></body>")
|
||||
output = output.sub(/(<div id="toc".*?>)/, '<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>\\1')
|
||||
|
||||
output = output.sub(/(<div id="footer".*?>)/, '</div>\\1')
|
||||
|
||||
inline_script = <<~SCRIPT
|
||||
<script>
|
||||
(function() {
|
||||
var isVisible = localStorage.getItem('tocVisible') === 'true';
|
||||
var isPinned = localStorage.getItem('tocPinned') === 'true';
|
||||
document.documentElement.classList.toggle('toc-visible', isVisible);
|
||||
document.documentElement.classList.toggle('toc-hidden', !isVisible);
|
||||
document.documentElement.classList.toggle('toc-pinned', isPinned);
|
||||
})();
|
||||
</script>
|
||||
SCRIPT
|
||||
output = output.sub(/<\/head>/, "#{inline_script}</head>")
|
||||
output = output.sub(/(<body[^>]*>)/, '\1<div class="boostlook">')
|
||||
output = output.sub('</body>', '</div></body>')
|
||||
output = output.sub(/(<body.*?<div[^>]*id="toc"[^>]*>)/m, '\1<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>')
|
||||
output = output.sub(/(<body.*?<div[^>]*id="footer"[^>]*>)/m, '</div>\1')
|
||||
|
||||
script_tag = <<~SCRIPT
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
const tocButton = document.getElementById("toggle-toc");
|
||||
const toc = document.getElementById("toc");
|
||||
(function() {
|
||||
const html = document.documentElement;
|
||||
const isPinned = localStorage.getItem('tocPinned') === 'true';
|
||||
|
||||
let isVisible = localStorage.getItem("tocVisible") === "true";
|
||||
let isPinned = localStorage.getItem("tocPinned") === "true";
|
||||
|
||||
function updateTocVisibility(visible) {
|
||||
html.classList.toggle("toc-visible", visible);
|
||||
html.classList.toggle("toc-hidden", !visible);
|
||||
tocButton.setAttribute("aria-expanded", visible);
|
||||
tocButton.textContent = visible ? "×" : "☰";
|
||||
tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
|
||||
html.classList.add('toc-hidden');
|
||||
if (isPinned) {
|
||||
html.classList.add('toc-pinned');
|
||||
html.classList.add('toc-visible');
|
||||
html.classList.remove('toc-hidden');
|
||||
}
|
||||
|
||||
function updateTocPinned(pinned) {
|
||||
html.classList.toggle("toc-pinned", pinned);
|
||||
localStorage.setItem("tocPinned", pinned);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tocButton = document.getElementById("toggle-toc");
|
||||
const toc = document.getElementById("toc");
|
||||
|
||||
tocButton.addEventListener("click", () => {
|
||||
isVisible = !isVisible;
|
||||
isPinned = !isPinned;
|
||||
updateTocVisibility(isVisible);
|
||||
updateTocPinned(isPinned);
|
||||
localStorage.setItem("tocVisible", isVisible);
|
||||
localStorage.setItem("tocPinned", isPinned);
|
||||
});
|
||||
if (!tocButton || !toc) return;
|
||||
|
||||
tocButton.addEventListener("mouseenter", () => {
|
||||
if (!isVisible) {
|
||||
updateTocVisibility(true);
|
||||
let isPinned = localStorage.getItem('tocPinned') === 'true';
|
||||
|
||||
function updateTocVisibility(visible) {
|
||||
html.classList.toggle("toc-visible", visible);
|
||||
html.classList.toggle("toc-hidden", !visible);
|
||||
tocButton.setAttribute("aria-expanded", visible);
|
||||
tocButton.textContent = visible ? "×" : "☰";
|
||||
tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
|
||||
}
|
||||
});
|
||||
|
||||
toc.addEventListener("mouseleave", () => {
|
||||
if (!isVisible) {
|
||||
updateTocVisibility(false);
|
||||
}
|
||||
});
|
||||
tocButton.addEventListener("click", () => {
|
||||
isPinned = !isPinned;
|
||||
localStorage.setItem('tocPinned', isPinned);
|
||||
html.classList.toggle('toc-pinned', isPinned);
|
||||
updateTocVisibility(isPinned); state
|
||||
});
|
||||
|
||||
updateTocVisibility(isVisible);
|
||||
});
|
||||
tocButton.addEventListener("mouseenter", () => {
|
||||
if (!isPinned) {
|
||||
updateTocVisibility(true);
|
||||
}
|
||||
});
|
||||
|
||||
toc.addEventListener("mouseleave", () => {
|
||||
if (!isPinned) {
|
||||
updateTocVisibility(false);
|
||||
}
|
||||
});
|
||||
|
||||
updateTocVisibility(isPinned);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
SCRIPT
|
||||
output = output.sub(/<\/body>/, "#{script_tag}</body>")
|
||||
|
||||
output = output.sub('</body>', "#{script_tag}</body>")
|
||||
|
||||
output
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user