https://cdn.bukowskis.com/assets/src/backoffice/accordions/accordi…3ff659be2f287f47f34ccb63f50983bdf0678595.js

1import m from 'mithril'
2import AccordionSection from 'src/backoffice/accordions/accordion_section'
3
4export default class Accordion {
5  constructor (elem) {
6    const input = elem.querySelector('input')
7    this.sections = JSON.parse(input.getAttribute('value'))
8    this.name = input.getAttribute('name')
9    elem.removeChild(input)
10  }
11
12  view () {
13    return m('.c-accordion',
14      m('.c-accordion__sections',
15        this.sections.map((section, i) => {
16          return m(AccordionSection, { ...section, sectionIndex: i, accordion: this })
17        })),
18
19      m('.c-accordion__add-section',
20        m('.c-button.c-button--small', { onclick: () => this._addSection() },
21          'Add section')),
22
23      m('input', {
24        type: 'hidden',
25        name: this.name,
26        value: JSON.stringify(this.sections)
27      })
28    )
29  }
30
31  update (sectionIndex, attribute, value) {
32    this.sections[sectionIndex][attribute] = value
33  }
34
35  moveUp (sectionIndex) {
36    if (sectionIndex === 0) { return }
37    this._swap(this.sections, sectionIndex, sectionIndex - 1)
38  }
39
40  moveDown (sectionIndex) {
41    if (sectionIndex === this.sections.length - 1) { return }
42    this._swap(this.sections, sectionIndex, sectionIndex + 1)
43  }
44
45  remove (sectionIndex) {
46    this.sections = this.sections.filter((_section, i) => i !== sectionIndex)
47  }
48
49  _swap (arr, a, b) {
50    [arr[a], arr[b]] = [arr[b], arr[a]]
51  }
52
53  _addSection () {
54    this.sections.push({ title: '', body: '' })
55  }
56};