https://wang1rrr.github.io/js/tools/tocToggle.js

1/* main function */
2
3import { main } from "../main.js";
4
5export function initTocToggle() {
6  const TocToggle = {
7    toggleBar: document.querySelector(".page-aside-toggle"),
8    postPageContainerDom: document.querySelector(".post-page-container"),
9    toggleBarIcon: document.querySelector(".page-aside-toggle i"),
10    articleContentContainerDom: document.querySelector(
11      ".article-content-container",
12    ),
13    mainContentDom: document.querySelector(".main-content"),
14
15    isOpenPageAside: false,
16
17    initToggleBarButton() {
18      this.toggleBar &&
19        this.toggleBar.addEventListener("click", () => {
20          this.isOpenPageAside = !this.isOpenPageAside;
21          main.styleStatus.isOpenPageAside = this.isOpenPageAside;
22          main.setStyleStatus();
23          this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
24        });
25    },
26
27    toggleClassName(element, className, condition) {
28      if (element) {
29        element.classList.toggle(className, condition);
30      }
31    },
32    changePageLayoutWhenOpenToggle(isOpen) {
33      this.toggleClassName(this.toggleBarIcon, "fas", isOpen);
34      this.toggleClassName(this.toggleBarIcon, "fa-indent", isOpen);
35      this.toggleClassName(this.toggleBarIcon, "fa-outdent", !isOpen);
36      this.toggleClassName(this.postPageContainerDom, "show-toc", isOpen);
37      this.toggleClassName(this.mainContentDom, "has-toc", isOpen);
38    },
39
40    pageAsideHandleOfTOC(isOpen) {
41      this.toggleBar.style.display = "flex";
42      this.isOpenPageAside = isOpen;
43      this.changePageLayoutWhenOpenToggle(isOpen);
44    },
45  };
46
47  TocToggle.initToggleBarButton();
48  return TocToggle;
49}
50
51// Event listeners
52try {
53  swup.hooks.on("page:view", () => {
54    initTocToggle();
55  });
56} catch (e) {}
57
58document.addEventListener("DOMContentLoaded", initTocToggle);