Auto generate ToC on left sidebar
This commit is contained in:
Helen Chong
parent
5379dbf82b
commit
187f7b71bd
|
|
@ -19,13 +19,11 @@
|
|||
|
||||
.toc ol {
|
||||
border-top: 1px solid var(--clr-title-border);
|
||||
list-style-position: inside;
|
||||
padding: 0.8em 0 0 0;
|
||||
padding: 0.8em 0 0 1em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.toc ol ul {
|
||||
list-style-position: inside;
|
||||
list-style-type: disc;
|
||||
line-height: 1.5;
|
||||
padding-left: 1em;
|
||||
|
|
@ -63,6 +61,7 @@
|
|||
}
|
||||
|
||||
.sidebar__toc ol ul {
|
||||
padding-top: 0.5em;
|
||||
padding-left: 1.25rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
23
js/toc.js
23
js/toc.js
|
|
@ -1,7 +1,12 @@
|
|||
// Auto generate table of contents
|
||||
// Code based on https://techindetail.com/table-of-contents-javascript/
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const article = document.querySelector("article");
|
||||
const headings = article.querySelectorAll("h2, h3");
|
||||
const toc = document.querySelector(".toc");
|
||||
const tocSidebar = document.querySelector(".sidebar__toc");
|
||||
const leftSidebar = document.querySelector('.left-sidebar');
|
||||
const totalHeadings = headings.length;
|
||||
let tocOl = document.createElement("ol");
|
||||
let tocFragment = new DocumentFragment();
|
||||
|
|
@ -43,12 +48,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
}
|
||||
tocOl.append(tocFragment);
|
||||
toc.append(tocOl);
|
||||
const tocClone = tocOl.cloneNode(true);
|
||||
tocSidebar.appendChild(tocClone);
|
||||
} else {
|
||||
toc.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;
|
||||
const leftSidebar = document.querySelector('.left-sidebar');
|
||||
if (windowWidth < 480) {
|
||||
toc.removeAttribute('open');
|
||||
leftSidebar.classList.add('hidden');
|
||||
|
|
@ -56,4 +65,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
toc.setAttribute('open', true);
|
||||
leftSidebar.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Don't make the sidebar ToC sticky if it is larger than screen height
|
||||
function preventSidebarOverflow() {
|
||||
if (
|
||||
document.documentElement.clientHeight <
|
||||
tocSidebar.offsetHeight + 50
|
||||
) {
|
||||
tocSidebar.style.marginTop = "50px";
|
||||
tocSidebar.style.position = "static";
|
||||
}
|
||||
}
|
||||
preventSidebarOverflow();
|
||||
});
|
||||
|
|
@ -37,10 +37,6 @@
|
|||
<aside class="left-sidebar">
|
||||
<nav class="sidebar__toc" role=”doc-toc”>
|
||||
<h3 class="sidebar__toc-title">Contents</h3>
|
||||
<ol class="sidebar__toc-list">
|
||||
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
|
||||
<li><a href="#Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
|
@ -57,7 +53,7 @@
|
|||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 id="My-Dear-Summer-Lover">My Dear Summer Lover</h2>
|
||||
<h2>My Dear Summer Lover</h2>
|
||||
|
||||
<img src="./img/My-Dear-Summer-Lover-cover.png" width="400px" height="400px" alt="A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix'">
|
||||
|
||||
|
|
@ -75,7 +71,7 @@
|
|||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 id="Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2>
|
||||
<h2>Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2>
|
||||
|
||||
<img src="./img/Mandopop-LGBTQ+-Anthem-Cover.png" width="400px" height="400px" alt="A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top">
|
||||
|
||||
|
|
|
|||
|
|
@ -37,16 +37,6 @@
|
|||
<aside class="left-sidebar">
|
||||
<nav class="sidebar__toc">
|
||||
<h3 class="sidebar__toc-title">Contents</h3>
|
||||
<ol class="sidebar__toc-list">
|
||||
<li><a href="#introduction">Introduction</a></li>
|
||||
<li><a href="#technical-questions">Technical Questions</a></li>
|
||||
<li><a href="#mod-content-questions">Mod Content Questions</a></li>
|
||||
<li><a href="#mod-specific-questions">Mod-Specific Questions</a></li>
|
||||
<ul>
|
||||
<li><a href="#arr-redux">Alternate Revan Romances REDUX</a></li>
|
||||
<li><a href="#handmaid-disc-romances">Handmaiden and Female Exile - Disciple and Male Exile Romances</a></li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,16 +37,6 @@
|
|||
<aside class="left-sidebar">
|
||||
<div class="sidebar__toc">
|
||||
<h3 class="sidebar__toc-title">Contents</h3>
|
||||
<ol class="sidebar__toc-list">
|
||||
<li><a href="#Introduction">Introduction</a></li>
|
||||
<li><a href="#Notes">Important Notes</a></li>
|
||||
<li><a href="#Walkthrough">Walkthrough</a></li>
|
||||
<ul>
|
||||
<li><a href="#History">History Conversation Path</a></li>
|
||||
<li><a href="#Personal">Personal Conversation Path</a></li>
|
||||
</ul>
|
||||
<li><a href="#Mods">Mod Recommendations</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,11 +37,6 @@
|
|||
<aside class="left-sidebar">
|
||||
<div class="sidebar__toc">
|
||||
<h3 class="sidebar__toc-title">Contents</h3>
|
||||
<ol class="sidebar__toc-list">
|
||||
<li><a href="#Introduction">Introduction</a></li>
|
||||
<li><a href="#Mechanics">The Mechanics of Redeeming Bastila</a></li>
|
||||
<li><a href="#Walkthrough">Dialogue Walkthrough</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,10 +37,6 @@
|
|||
<aside class="left-sidebar">
|
||||
<div class="sidebar__toc">
|
||||
<h3 class="sidebar__toc-title">Contents</h3>
|
||||
<ol class="sidebar__toc-list">
|
||||
<li><a href="#KotOR1">For <cite>Knights of the Old Republic I</cite></a></li>
|
||||
<li><a href="#KotOR2">For <cite>Knights of the Old Republic II: The Sith Lords</cite></a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue