From 187f7b71bd0907defe4f5ba2e3a9260039bbb5a5 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Mon, 14 Aug 2023 00:40:16 +0800 Subject: [PATCH] Auto generate ToC on left sidebar --- css/style-toc.css | 5 ++-- js/toc.js | 23 ++++++++++++++++++- playlists/index.html | 8 ++----- .../faq-same-gender-romance-mods.html | 10 -------- .../guides/kotor-juhani-romance-guide.html | 10 -------- .../guides/kotor-redeeming-bastila-guide.html | 5 ---- .../kotor-same-gender-romance-mods.html | 4 ---- 7 files changed, 26 insertions(+), 39 deletions(-) diff --git a/css/style-toc.css b/css/style-toc.css index 9cb58f0e..daf392e2 100644 --- a/css/style-toc.css +++ b/css/style-toc.css @@ -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; } \ No newline at end of file diff --git a/js/toc.js b/js/toc.js index 5ed0bed1..6cb152e6 100644 --- a/js/toc.js +++ b/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(); }); \ No newline at end of file diff --git a/playlists/index.html b/playlists/index.html index 49c9caf9..a230274f 100644 --- a/playlists/index.html +++ b/playlists/index.html @@ -37,10 +37,6 @@ @@ -57,7 +53,7 @@
-

My Dear Summer Lover

+

My Dear Summer Lover

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 @@
-

Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌

+

Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌

A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top diff --git a/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html b/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html index 076c82a8..2984c9d1 100644 --- a/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html +++ b/shrines/starwarskotor/articles/faq-same-gender-romance-mods.html @@ -37,16 +37,6 @@ diff --git a/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html b/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html index f9a14503..0a1722e9 100644 --- a/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html +++ b/shrines/starwarskotor/guides/kotor-juhani-romance-guide.html @@ -37,16 +37,6 @@ diff --git a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html index ea3e9a53..ca00dd27 100644 --- a/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html +++ b/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html @@ -37,11 +37,6 @@ diff --git a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html index 93f58c18..0d25f694 100644 --- a/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html +++ b/shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html @@ -37,10 +37,6 @@