https://n-works.link/wp_2309/wp-content/themes/nworks/assets/js/modules/toc.js

1export class TOC {
2  constructor(rootElement, handler, content) {
3    this.rootElement = rootElement
4    this.handler = handler
5    this.content = content
6    this.updateMaxHeight()
7
8    this.appendButton()
9    this.attachEvents()
10  }
11
12  /**
13   * tocを開く際、max-heightの値が高すぎるとアニメーションの視覚的なdurationが高すぎるため適宜変更する
14   */
15  updateMaxHeight() {
16    this.maxHeight = this.content.scrollHeight
17    this.content.style.setProperty('--max-height', `${this.maxHeight}px`)
18  }
19
20  attachEvents() {
21    const handlers = [this.button, this.handler]
22    handlers.forEach((handler) => {
23      handler.addEventListener('click', () => {
24        if (this.rootElement.classList.contains('open')) {
25          this.rootElement.classList.remove('open')
26        } else {
27          this.rootElement.classList.add('open')
28        }
29      })
30    })
31
32    window.addEventListener('resize', () => {
33      this.updateMaxHeight()
34    })
35  }
36
37  appendButton() {
38    const buttonElement = document.createElement('button');
39    buttonElement.classList.add('toc_button');
40    buttonElement.textContent = 'もっと見る';
41
42    const arrowElement = document.createElement('div');
43    arrowElement.textContent = "\u2228";
44    arrowElement.classList.add('toc_button__arrow');
45
46    buttonElement.appendChild(arrowElement);
47    this.rootElement.appendChild(buttonElement);
48    this.button = buttonElement;
49  }
50}