|
1 | | -import { Controller } from "@hotwired/stimulus"; |
2 | | -import { |
3 | | - showContent, |
4 | | - hideContent, |
5 | | - getNextEnabledIndex, |
6 | | - getPreviousEnabledIndex, |
7 | | -} from "../utils"; |
| 1 | +import { Controller } from '@hotwired/stimulus'; |
| 2 | +import { showContent, hideContent, getNextEnabledIndex, getPreviousEnabledIndex, } from '../utils'; |
8 | 3 | const AccordionController = class extends Controller { |
9 | | - // targets |
10 | | - static targets = ["item", "trigger", "content"]; |
11 | | - // values |
12 | | - static values = { openItems: Array }; |
13 | | - connect() { |
14 | | - this.multiple = this.element.dataset.multiple === "true"; |
15 | | - } |
16 | | - contentTargetConnected(content) { |
17 | | - setTimeout(() => { |
18 | | - this.setContentHeight(content); |
19 | | - }, 100); |
20 | | - } |
21 | | - toggle(event) { |
22 | | - const trigger = event.currentTarget; |
23 | | - const item = this.itemTargets.find((item) => { |
24 | | - return item.contains(trigger); |
25 | | - }); |
26 | | - if (!item) return; |
27 | | - const value = item.dataset.value; |
28 | | - const isOpen = this.openItemsValue.includes(value); |
29 | | - if (isOpen) { |
30 | | - this.openItemsValue = this.openItemsValue.filter((v) => v !== value); |
31 | | - } else { |
32 | | - if (this.multiple) { |
33 | | - this.openItemsValue = [...this.openItemsValue, value]; |
34 | | - } else { |
35 | | - this.openItemsValue = [value]; |
36 | | - } |
| 4 | + // targets |
| 5 | + static targets = ['item', 'trigger', 'content']; |
| 6 | + // values |
| 7 | + static values = { openItems: Array }; |
| 8 | + connect() { |
| 9 | + this.multiple = this.element.dataset.multiple === 'true'; |
37 | 10 | } |
38 | | - } |
39 | | - focusTrigger(event) { |
40 | | - const trigger = event.currentTarget; |
41 | | - const key = event.key; |
42 | | - const focusableTriggers = this.triggerTargets.filter( |
43 | | - (trigger) => !trigger.disabled, |
44 | | - ); |
45 | | - const index = focusableTriggers.indexOf(trigger); |
46 | | - let newIndex = 0; |
47 | | - if (key === "ArrowUp") { |
48 | | - newIndex = getPreviousEnabledIndex({ |
49 | | - items: focusableTriggers, |
50 | | - currentIndex: index, |
51 | | - wrapAround: true, |
52 | | - }); |
53 | | - } else { |
54 | | - newIndex = getNextEnabledIndex({ |
55 | | - items: focusableTriggers, |
56 | | - currentIndex: index, |
57 | | - wrapAround: true, |
58 | | - }); |
| 11 | + contentTargetConnected(content) { |
| 12 | + setTimeout(() => { |
| 13 | + this.setContentHeight(content); |
| 14 | + }, 100); |
59 | 15 | } |
60 | | - focusableTriggers[newIndex].focus(); |
61 | | - } |
62 | | - openItemsValueChanged(openItems) { |
63 | | - this.itemTargets.forEach((item) => { |
64 | | - const itemValue = item.dataset.value; |
65 | | - const trigger = this.triggerTargets.find((trigger) => |
66 | | - item.contains(trigger), |
67 | | - ); |
68 | | - const content = this.contentTargets.find((content) => |
69 | | - item.contains(content), |
70 | | - ); |
71 | | - if (openItems.includes(itemValue)) { |
72 | | - showContent({ |
73 | | - trigger, |
74 | | - content: content, |
75 | | - contentContainer: content, |
| 16 | + toggle(event) { |
| 17 | + const trigger = event.currentTarget; |
| 18 | + const item = this.itemTargets.find((item) => { |
| 19 | + return item.contains(trigger); |
76 | 20 | }); |
77 | | - } else { |
78 | | - hideContent({ |
79 | | - trigger, |
80 | | - content: content, |
81 | | - contentContainer: content, |
| 21 | + if (!item) |
| 22 | + return; |
| 23 | + const value = item.dataset.value; |
| 24 | + const isOpen = this.openItemsValue.includes(value); |
| 25 | + if (isOpen) { |
| 26 | + this.openItemsValue = this.openItemsValue.filter((v) => v !== value); |
| 27 | + } |
| 28 | + else { |
| 29 | + if (this.multiple) { |
| 30 | + this.openItemsValue = [...this.openItemsValue, value]; |
| 31 | + } |
| 32 | + else { |
| 33 | + this.openItemsValue = [value]; |
| 34 | + } |
| 35 | + } |
| 36 | + } |
| 37 | + focusTrigger(event) { |
| 38 | + const trigger = event.currentTarget; |
| 39 | + const key = event.key; |
| 40 | + const focusableTriggers = this.triggerTargets.filter((trigger) => !trigger.disabled); |
| 41 | + const index = focusableTriggers.indexOf(trigger); |
| 42 | + let newIndex = 0; |
| 43 | + if (key === 'ArrowUp') { |
| 44 | + newIndex = getPreviousEnabledIndex({ |
| 45 | + items: focusableTriggers, |
| 46 | + currentIndex: index, |
| 47 | + wrapAround: true, |
| 48 | + }); |
| 49 | + } |
| 50 | + else { |
| 51 | + newIndex = getNextEnabledIndex({ |
| 52 | + items: focusableTriggers, |
| 53 | + currentIndex: index, |
| 54 | + wrapAround: true, |
| 55 | + }); |
| 56 | + } |
| 57 | + focusableTriggers[newIndex].focus(); |
| 58 | + } |
| 59 | + openItemsValueChanged(openItems) { |
| 60 | + this.itemTargets.forEach((item) => { |
| 61 | + const itemValue = item.dataset.value; |
| 62 | + const trigger = this.triggerTargets.find((trigger) => item.contains(trigger)); |
| 63 | + const content = this.contentTargets.find((content) => item.contains(content)); |
| 64 | + if (openItems.includes(itemValue)) { |
| 65 | + showContent({ |
| 66 | + trigger, |
| 67 | + content: content, |
| 68 | + contentContainer: content, |
| 69 | + }); |
| 70 | + } |
| 71 | + else { |
| 72 | + hideContent({ |
| 73 | + trigger, |
| 74 | + content: content, |
| 75 | + contentContainer: content, |
| 76 | + }); |
| 77 | + } |
| 78 | + }); |
| 79 | + } |
| 80 | + setContentHeight(element) { |
| 81 | + const height = this.getContentHeight(element) || element.getBoundingClientRect().height; |
| 82 | + element.style.setProperty('--radix-accordion-content-height', `${height}px`); |
| 83 | + } |
| 84 | + getContentHeight(el) { |
| 85 | + const clone = el.cloneNode(true); |
| 86 | + Object.assign(clone.style, { |
| 87 | + display: 'block', |
| 88 | + position: 'absolute', |
| 89 | + visibility: 'hidden', |
82 | 90 | }); |
83 | | - } |
84 | | - }); |
85 | | - } |
86 | | - setContentHeight(element) { |
87 | | - const height = |
88 | | - this.getContentHeight(element) || element.getBoundingClientRect().height; |
89 | | - element.style.setProperty( |
90 | | - "--radix-accordion-content-height", |
91 | | - `${height}px`, |
92 | | - ); |
93 | | - } |
94 | | - getContentHeight(el) { |
95 | | - const clone = el.cloneNode(true); |
96 | | - Object.assign(clone.style, { |
97 | | - display: "block", |
98 | | - position: "absolute", |
99 | | - visibility: "hidden", |
100 | | - }); |
101 | | - document.body.appendChild(clone); |
102 | | - const height = clone.getBoundingClientRect().height; |
103 | | - document.body.removeChild(clone); |
104 | | - return height; |
105 | | - } |
| 91 | + document.body.appendChild(clone); |
| 92 | + const height = clone.getBoundingClientRect().height; |
| 93 | + document.body.removeChild(clone); |
| 94 | + return height; |
| 95 | + } |
106 | 96 | }; |
107 | 97 | export { AccordionController }; |
0 commit comments