Auto generate ToC on left sidebar
This commit is contained in:
parent
5379dbf82b
commit
187f7b71bd
|
@ -19,13 +19,11 @@
|
||||||
|
|
||||||
.toc ol {
|
.toc ol {
|
||||||
border-top: 1px solid var(--clr-title-border);
|
border-top: 1px solid var(--clr-title-border);
|
||||||
list-style-position: inside;
|
padding: 0.8em 0 0 1em;
|
||||||
padding: 0.8em 0 0 0;
|
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc ol ul {
|
.toc ol ul {
|
||||||
list-style-position: inside;
|
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
@ -63,6 +61,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar__toc ol ul {
|
.sidebar__toc ol ul {
|
||||||
|
padding-top: 0.5em;
|
||||||
padding-left: 1.25rem;
|
padding-left: 1.25rem;
|
||||||
list-style-type: disc;
|
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) => {
|
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");
|
||||||
const toc = document.querySelector(".toc");
|
const toc = document.querySelector(".toc");
|
||||||
|
const tocSidebar = document.querySelector(".sidebar__toc");
|
||||||
|
const leftSidebar = document.querySelector('.left-sidebar');
|
||||||
const totalHeadings = headings.length;
|
const totalHeadings = headings.length;
|
||||||
let tocOl = document.createElement("ol");
|
let tocOl = document.createElement("ol");
|
||||||
let tocFragment = new DocumentFragment();
|
let tocFragment = new DocumentFragment();
|
||||||
|
@ -43,12 +48,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
}
|
}
|
||||||
tocOl.append(tocFragment);
|
tocOl.append(tocFragment);
|
||||||
toc.append(tocOl);
|
toc.append(tocOl);
|
||||||
|
const tocClone = tocOl.cloneNode(true);
|
||||||
|
tocSidebar.appendChild(tocClone);
|
||||||
} else {
|
} else {
|
||||||
toc.classList.add('hidden');
|
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 windowWidth = window.innerWidth;
|
||||||
const leftSidebar = document.querySelector('.left-sidebar');
|
|
||||||
if (windowWidth < 480) {
|
if (windowWidth < 480) {
|
||||||
toc.removeAttribute('open');
|
toc.removeAttribute('open');
|
||||||
leftSidebar.classList.add('hidden');
|
leftSidebar.classList.add('hidden');
|
||||||
|
@ -56,4 +65,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
toc.setAttribute('open', true);
|
toc.setAttribute('open', true);
|
||||||
leftSidebar.classList.remove('hidden');
|
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">
|
<aside class="left-sidebar">
|
||||||
<nav class="sidebar__toc" role=”doc-toc”>
|
<nav class="sidebar__toc" role=”doc-toc”>
|
||||||
<h3 class="sidebar__toc-title">Contents</h3>
|
<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>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
@ -57,7 +53,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="content-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'">
|
<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>
|
||||||
|
|
||||||
<section class="content-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">
|
<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">
|
<aside class="left-sidebar">
|
||||||
<nav class="sidebar__toc">
|
<nav class="sidebar__toc">
|
||||||
<h3 class="sidebar__toc-title">Contents</h3>
|
<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>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
|
@ -37,16 +37,6 @@
|
||||||
<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>
|
||||||
<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>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
|
@ -37,11 +37,6 @@
|
||||||
<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>
|
||||||
<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>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
|
@ -37,10 +37,6 @@
|
||||||
<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>
|
||||||
<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>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue