Remove sidebar ToC for articles with long headings
This commit is contained in:
parent
115f39a4ec
commit
edef108656
10
js/toc.js
10
js/toc.js
|
@ -1,6 +1,5 @@
|
||||||
// Auto generate table of contents
|
// Auto generate table of contents
|
||||||
// Code based on https://techindetail.com/table-of-contents-javascript/
|
// Code based on https://techindetail.com/table-of-contents-javascript/
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', (event) => {
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
const article = document.querySelector("article");
|
const article = document.querySelector("article");
|
||||||
const headings = article.querySelectorAll("h2, h3");
|
const headings = article.querySelectorAll("h2, h3");
|
||||||
|
@ -55,15 +54,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
leftSidebar.classList.add('hidden');
|
leftSidebar.classList.add('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Open the article ToC and hide the left sidebar for small screen size
|
|
||||||
// Code based on https://codepen.io/neptotech/pen/RwjRjOZ
|
|
||||||
const windowWidth = window.innerWidth;
|
|
||||||
if (windowWidth < 480) {
|
|
||||||
toc.removeAttribute('open');
|
|
||||||
} else {
|
|
||||||
toc.setAttribute('open', true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the stickiness of the sidebar ToC if it is larger than screen height
|
// Remove the stickiness of the sidebar ToC if it is larger than screen height
|
||||||
function preventSidebarOverflow() {
|
function preventSidebarOverflow() {
|
||||||
if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
|
if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
|
||||||
|
|
|
@ -34,11 +34,11 @@
|
||||||
</header>
|
</header>
|
||||||
<nav class="navbar"></nav>
|
<nav class="navbar"></nav>
|
||||||
<main>
|
<main>
|
||||||
<aside class="left-sidebar">
|
<!-- <aside class="left-sidebar">
|
||||||
<div class="sidebar__toc">
|
<div class="sidebar__toc">
|
||||||
<h3 class="sidebar__toc-title">Contents</h3>
|
<h3 class="sidebar__toc-title">Contents</h3>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<section class="article-section">
|
<section class="article-section">
|
||||||
|
|
|
@ -34,11 +34,11 @@
|
||||||
</header>
|
</header>
|
||||||
<nav class="navbar"></nav>
|
<nav class="navbar"></nav>
|
||||||
<main>
|
<main>
|
||||||
<aside class="left-sidebar">
|
<!-- <aside class="left-sidebar">
|
||||||
<div class="sidebar__toc">
|
<div class="sidebar__toc">
|
||||||
<h3 class="sidebar__toc-title">Contents</h3>
|
<h3 class="sidebar__toc-title">Contents</h3>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<section class="article-section">
|
<section class="article-section">
|
||||||
|
|
Loading…
Reference in New Issue