https://www.schueleraustausch.net/assets/controllers/cms_accordion…2f46b4e399fee5898e8a65959fa48ecb241ecdde.js

1import { Controller } from "@hotwired/stimulus"
2
3const dlChildTagTypes = ['dt', 'dd']
4
5let accordionCounter = 0
6
7export default class extends Controller {
8  connect() {
9    // we cannot use stimulus targets here since we do not control the contained HTML
10    // from within rails
11    this.listEl = this.element.querySelector("dl")
12    let itemIndex = 0
13    const accordionId = `cms-accordion-${accordionCounter}`
14    accordionCounter++
15
16    if (this.listEl) {
17      let nextTagIndex = 0
18      let nextItem = []
19      this.listEl.style.display = 'none'
20      this.accordionEl = document.createElement('div')
21      this.accordionEl.id = accordionId
22      this.accordionEl.classList.add("accordion")
23
24      let collapseId
25
26      for (const child of this.listEl.children) {
27        collapseId = `${accordionId}-collapse-${itemIndex}`
28
29        if (dlChildTagTypes[nextTagIndex] === child.tagName.toLowerCase()) {
30
31          // on last tag for a dl item (the dd in most cases) we create a accordion item from it
32          if ((nextTagIndex + 1) == dlChildTagTypes.length) {
33            const collapse = document.createElement('div')
34            const body = document.createElement('div')
35
36            body.innerHTML = child.innerHTML
37            body.classList.add('accordion-body')
38
39            collapse.append(body)
40            collapse.classList.add('accordion-collapse', 'collapse')
41            collapse.dataset.bsParent = `#${accordionId}`
42            collapse.id = collapseId
43
44
45            if (itemIndex === 0) {
46              collapse.classList.add('show')
47            }
48
49            const newItem = document.createElement('div')
50
51            nextItem.push(collapse)
52            newItem.classList.add('accordion-item')
53            newItem.append(...nextItem)
54
55
56            this.accordionEl.append(newItem)
57
58            nextItem = []
59            itemIndex++
60          } else {
61            const header = document.createElement('div')
62            const button = document.createElement('button')
63
64            button.innerHTML = child.innerHTML
65            button.type = 'button'
66            button.classList.add('accordion-button')
67            button.dataset.bsToggle = 'collapse'
68            button.dataset.bsTarget = `#${collapseId}`
69
70            if (itemIndex > 0) {
71              button.classList.add('collapsed')
72            }
73
74            header.append(button)
75            header.classList.add('accordion-header')
76
77            nextItem.push(header)
78          }
79
80          nextTagIndex = (nextTagIndex + 1) % dlChildTagTypes.length
81        } else {
82          console.error('invalid accordion order', dlChildTagTypes[nextTagIndex], child.tagName.toLowerCase())
83        }
84      }
85
86      this.listEl.parentNode.insertBefore(this.accordionEl, this.listEl)
87    }
88  }
89};