Skip to content

Commit

Permalink
Implement TOC drawer component (#1410)
Browse files Browse the repository at this point in the history
* feat: add toc drawer button

* feat: open and close the toc dialog

* feat: add animation

* fix: only display button in single pages

* feat: optimize style

* chore: blur active element on toc dialog
  • Loading branch information
HEIGE-PCloud authored Dec 24, 2024
1 parent 7fd1402 commit 61bb404
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 37 deletions.
1 change: 0 additions & 1 deletion assets/css/_core/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ body {
@import "../_partial/mask";
@import "../_partial/icon";
@import "../_partial/details";
@import "../_partial/fixed-button";
@import "../_partial/cookieconsent";

img {
Expand Down
32 changes: 0 additions & 32 deletions assets/css/_partial/_fixed-button.scss

This file was deleted.

39 changes: 39 additions & 0 deletions assets/css/_partial/_single/_toc.scss
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,42 @@
}
}
}

#toc-dialog {
transition:
display 0.2s allow-discrete,
overlay 0.2s allow-discrete,
translate 0.2s,
opacity 0.2s 0.4s;
opacity: 0;
translate: 100vw 0;
&::backdrop {
transition:
display 0.5s allow-discrete,
overlay 0.5s allow-discrete,
opacity 0.2s 0.4s;
opacity: 0;
}
&[open],
&[open]::backdrop {
opacity: 1;
transition:
display 0.2s allow-discrete,
overlay 0.2s allow-discrete,
translate 0.2s,
opacity 0.2s;
}
&[open] {
translate: 0 0;
}

@starting-style {
&[open],
&[open]::backdrop {
opacity: 0;
}
&[open] {
translate: 100vw 0;
}
}
}
66 changes: 66 additions & 0 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -777,6 +777,18 @@ html.dark {
--showcase-hover-color: white;
}

.tw-fixed {
position: fixed;
}

.tw-bottom-4 {
bottom: 1rem;
}

.tw-right-4 {
right: 1rem;
}

.tw-m-0 {
margin: 0px;
}
Expand All @@ -786,11 +798,21 @@ html.dark {
margin-bottom: 0.25rem !important;
}

.tw-mx-0 {
margin-left: 0px;
margin-right: 0px;
}

.tw-mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.tw-mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}

.tw-my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
Expand All @@ -801,6 +823,15 @@ html.dark {
margin-bottom: 1rem;
}

.tw-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.tw-ml-16 {
margin-left: 4rem;
}

.tw-ml-4 {
margin-left: 1rem;
}
Expand Down Expand Up @@ -842,6 +873,10 @@ html.dark {
height: fit-content;
}

.tw-h-full {
height: 100%;
}

.\!tw-max-h-0 {
max-height: 0px !important;
}
Expand All @@ -854,10 +889,18 @@ html.dark {
max-height: 2rem;
}

.tw-max-h-full {
max-height: 100%;
}

.tw-w-full {
width: 100%;
}

.tw-max-w-full {
max-width: 100%;
}

.tw-translate-y-\[-2px\] {
--tw-translate-y: -2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
Expand All @@ -883,10 +926,18 @@ html.dark {
flex-direction: row;
}

.tw-flex-col {
flex-direction: column;
}

.tw-justify-between {
justify-content: space-between;
}

.tw-gap-2 {
gap: 0.5rem;
}

.tw-overflow-x-auto {
overflow-x: auto;
}
Expand Down Expand Up @@ -950,6 +1001,15 @@ html.dark {
vertical-align: text-bottom;
}

.tw-text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}

.tw-uppercase {
text-transform: uppercase;
}

.tw-text-fgColor-link-muted {
color: var(--global-link-color);
}
Expand Down Expand Up @@ -1069,6 +1129,12 @@ html.dark {
border-color: rgb(54 54 54 / var(--tw-border-opacity, 1));
}

@media (min-width: 768px) {
.md\:tw-hidden {
display: none;
}
}

@media print {
.print\:\!tw-m-0 {
margin: 0px !important;
Expand Down
16 changes: 16 additions & 0 deletions assets/js/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -703,6 +703,21 @@ function initToc() {
}
}

function initTocDialog() {
const dialog: HTMLDialogElement | null = document.querySelector('#toc-dialog');
const openButton = document.querySelector('#toc-drawer-button');
if (!dialog || !openButton) {
return;
}
openButton.addEventListener('click', () => {
dialog.showModal();
document.activeElement?.blur();
});
dialog.addEventListener('click', (e) => {
dialog.close();
})

}
function initMapbox() {
if (window.config.mapbox) {
mapboxgl.accessToken = window.config.mapbox.accessToken;
Expand Down Expand Up @@ -954,6 +969,7 @@ function init() {
initTypeit();
initMapbox();
initToc();
initTocDialog();
onScroll();
onResize();
onClickMask();
Expand Down
13 changes: 10 additions & 3 deletions layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,22 @@
{{- partial "footer.html" . -}}
</div>

<div id="fixed-buttons" class="print:!tw-hidden">
<div class="print:!tw-hidden tw-flex tw-flex-col tw-fixed tw-right-4 tw-bottom-4 tw-gap-2">
{{- /* top button */ -}}
<a href="#back-to-top" id="back-to-top-button" class="fixed-button tw-transition-opacity tw-opacity-0" title="{{ T `backToTop` }}">
<a href="#back-to-top" id="back-to-top-button" class="tw-transition-opacity tw-opacity-0 tw-block tw-bg-bgColor-secondary tw-rounded-full" style="padding: 0.6rem; line-height: 1.3rem; font-size: 1rem;" title="{{ T `backToTop` }}">
{{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "arrow-up") }}
</a>

{{/* toc dialog button */}}
{{- if .Page.Scratch.Get "enableTocDialog" -}}
<button id="toc-drawer-button" class="tw-block tw-bg-bgColor-secondary tw-rounded-full md:tw-hidden" style="padding: 0.6rem; line-height: 1.3rem; font-size: 1rem;">
{{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "bars") }}
</button>
{{- end -}}

{{- /* comment button */ -}}
{{- if .Page.Scratch.Get "enableComment" -}}
<a href="#comments" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
<a href="#comments" id="view-comments" class="tw-block tw-bg-bgColor-secondary tw-rounded-full" style="padding: 0.6rem; line-height: 1.3rem; font-size: 1rem;" title="{{ T `viewComments` }}">
{{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "comment") }}
</a>
{{- end -}}
Expand Down
14 changes: 13 additions & 1 deletion layouts/posts/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,19 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
</div>
</div>
{{- end -}}


{{/* TOC Dialog */}}
{{- .Page.Scratch.Set "enableTocDialog" true -}}
<dialog id="toc-dialog" class="tw-max-w-full tw-w-full tw-max-h-full tw-h-full tw-ml-16">
<div class="toc tw-mx-4 tw-max-w-full">
<h2 class="tw-mx-0 tw-my-6 tw-uppercase tw-text-2xl">{{ T "contents" }}</h2>
<div class="toc-content">
{{- dict "Content" .TableOfContents "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
</div>
</div>
</dialog>


{{- /* TOC Style */ -}}
{{- if eq $toc.enable true -}}
{{- if eq $toc.keepStatic true -}}
Expand Down

0 comments on commit 61bb404

Please sign in to comment.