1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): collapse.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import {
|
---|
9 | defineJQueryPlugin,
|
---|
10 | getElement,
|
---|
11 | getSelectorFromElement,
|
---|
12 | getElementFromSelector,
|
---|
13 | reflow,
|
---|
14 | typeCheckConfig
|
---|
15 | } from './util/index'
|
---|
16 | import Data from './dom/data'
|
---|
17 | import EventHandler from './dom/event-handler'
|
---|
18 | import Manipulator from './dom/manipulator'
|
---|
19 | import SelectorEngine from './dom/selector-engine'
|
---|
20 | import BaseComponent from './base-component'
|
---|
21 |
|
---|
22 | /**
|
---|
23 | * ------------------------------------------------------------------------
|
---|
24 | * Constants
|
---|
25 | * ------------------------------------------------------------------------
|
---|
26 | */
|
---|
27 |
|
---|
28 | const NAME = 'collapse'
|
---|
29 | const DATA_KEY = 'bs.collapse'
|
---|
30 | const EVENT_KEY = `.${DATA_KEY}`
|
---|
31 | const DATA_API_KEY = '.data-api'
|
---|
32 |
|
---|
33 | const Default = {
|
---|
34 | toggle: true,
|
---|
35 | parent: null
|
---|
36 | }
|
---|
37 |
|
---|
38 | const DefaultType = {
|
---|
39 | toggle: 'boolean',
|
---|
40 | parent: '(null|element)'
|
---|
41 | }
|
---|
42 |
|
---|
43 | const EVENT_SHOW = `show${EVENT_KEY}`
|
---|
44 | const EVENT_SHOWN = `shown${EVENT_KEY}`
|
---|
45 | const EVENT_HIDE = `hide${EVENT_KEY}`
|
---|
46 | const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
---|
47 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
---|
48 |
|
---|
49 | const CLASS_NAME_SHOW = 'show'
|
---|
50 | const CLASS_NAME_COLLAPSE = 'collapse'
|
---|
51 | const CLASS_NAME_COLLAPSING = 'collapsing'
|
---|
52 | const CLASS_NAME_COLLAPSED = 'collapsed'
|
---|
53 | const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
|
---|
54 | const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
|
---|
55 |
|
---|
56 | const WIDTH = 'width'
|
---|
57 | const HEIGHT = 'height'
|
---|
58 |
|
---|
59 | const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
|
---|
60 | const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
|
---|
61 |
|
---|
62 | /**
|
---|
63 | * ------------------------------------------------------------------------
|
---|
64 | * Class Definition
|
---|
65 | * ------------------------------------------------------------------------
|
---|
66 | */
|
---|
67 |
|
---|
68 | class Collapse extends BaseComponent {
|
---|
69 | constructor(element, config) {
|
---|
70 | super(element)
|
---|
71 |
|
---|
72 | this._isTransitioning = false
|
---|
73 | this._config = this._getConfig(config)
|
---|
74 | this._triggerArray = []
|
---|
75 |
|
---|
76 | const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
|
---|
77 |
|
---|
78 | for (let i = 0, len = toggleList.length; i < len; i++) {
|
---|
79 | const elem = toggleList[i]
|
---|
80 | const selector = getSelectorFromElement(elem)
|
---|
81 | const filterElement = SelectorEngine.find(selector)
|
---|
82 | .filter(foundElem => foundElem === this._element)
|
---|
83 |
|
---|
84 | if (selector !== null && filterElement.length) {
|
---|
85 | this._selector = selector
|
---|
86 | this._triggerArray.push(elem)
|
---|
87 | }
|
---|
88 | }
|
---|
89 |
|
---|
90 | this._initializeChildren()
|
---|
91 |
|
---|
92 | if (!this._config.parent) {
|
---|
93 | this._addAriaAndCollapsedClass(this._triggerArray, this._isShown())
|
---|
94 | }
|
---|
95 |
|
---|
96 | if (this._config.toggle) {
|
---|
97 | this.toggle()
|
---|
98 | }
|
---|
99 | }
|
---|
100 |
|
---|
101 | // Getters
|
---|
102 |
|
---|
103 | static get Default() {
|
---|
104 | return Default
|
---|
105 | }
|
---|
106 |
|
---|
107 | static get NAME() {
|
---|
108 | return NAME
|
---|
109 | }
|
---|
110 |
|
---|
111 | // Public
|
---|
112 |
|
---|
113 | toggle() {
|
---|
114 | if (this._isShown()) {
|
---|
115 | this.hide()
|
---|
116 | } else {
|
---|
117 | this.show()
|
---|
118 | }
|
---|
119 | }
|
---|
120 |
|
---|
121 | show() {
|
---|
122 | if (this._isTransitioning || this._isShown()) {
|
---|
123 | return
|
---|
124 | }
|
---|
125 |
|
---|
126 | let actives = []
|
---|
127 | let activesData
|
---|
128 |
|
---|
129 | if (this._config.parent) {
|
---|
130 | const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
|
---|
131 | actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth
|
---|
132 | }
|
---|
133 |
|
---|
134 | const container = SelectorEngine.findOne(this._selector)
|
---|
135 | if (actives.length) {
|
---|
136 | const tempActiveData = actives.find(elem => container !== elem)
|
---|
137 | activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null
|
---|
138 |
|
---|
139 | if (activesData && activesData._isTransitioning) {
|
---|
140 | return
|
---|
141 | }
|
---|
142 | }
|
---|
143 |
|
---|
144 | const startEvent = EventHandler.trigger(this._element, EVENT_SHOW)
|
---|
145 | if (startEvent.defaultPrevented) {
|
---|
146 | return
|
---|
147 | }
|
---|
148 |
|
---|
149 | actives.forEach(elemActive => {
|
---|
150 | if (container !== elemActive) {
|
---|
151 | Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide()
|
---|
152 | }
|
---|
153 |
|
---|
154 | if (!activesData) {
|
---|
155 | Data.set(elemActive, DATA_KEY, null)
|
---|
156 | }
|
---|
157 | })
|
---|
158 |
|
---|
159 | const dimension = this._getDimension()
|
---|
160 |
|
---|
161 | this._element.classList.remove(CLASS_NAME_COLLAPSE)
|
---|
162 | this._element.classList.add(CLASS_NAME_COLLAPSING)
|
---|
163 |
|
---|
164 | this._element.style[dimension] = 0
|
---|
165 |
|
---|
166 | this._addAriaAndCollapsedClass(this._triggerArray, true)
|
---|
167 | this._isTransitioning = true
|
---|
168 |
|
---|
169 | const complete = () => {
|
---|
170 | this._isTransitioning = false
|
---|
171 |
|
---|
172 | this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
---|
173 | this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
---|
174 |
|
---|
175 | this._element.style[dimension] = ''
|
---|
176 |
|
---|
177 | EventHandler.trigger(this._element, EVENT_SHOWN)
|
---|
178 | }
|
---|
179 |
|
---|
180 | const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
|
---|
181 | const scrollSize = `scroll${capitalizedDimension}`
|
---|
182 |
|
---|
183 | this._queueCallback(complete, this._element, true)
|
---|
184 | this._element.style[dimension] = `${this._element[scrollSize]}px`
|
---|
185 | }
|
---|
186 |
|
---|
187 | hide() {
|
---|
188 | if (this._isTransitioning || !this._isShown()) {
|
---|
189 | return
|
---|
190 | }
|
---|
191 |
|
---|
192 | const startEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
---|
193 | if (startEvent.defaultPrevented) {
|
---|
194 | return
|
---|
195 | }
|
---|
196 |
|
---|
197 | const dimension = this._getDimension()
|
---|
198 |
|
---|
199 | this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
|
---|
200 |
|
---|
201 | reflow(this._element)
|
---|
202 |
|
---|
203 | this._element.classList.add(CLASS_NAME_COLLAPSING)
|
---|
204 | this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
---|
205 |
|
---|
206 | const triggerArrayLength = this._triggerArray.length
|
---|
207 | for (let i = 0; i < triggerArrayLength; i++) {
|
---|
208 | const trigger = this._triggerArray[i]
|
---|
209 | const elem = getElementFromSelector(trigger)
|
---|
210 |
|
---|
211 | if (elem && !this._isShown(elem)) {
|
---|
212 | this._addAriaAndCollapsedClass([trigger], false)
|
---|
213 | }
|
---|
214 | }
|
---|
215 |
|
---|
216 | this._isTransitioning = true
|
---|
217 |
|
---|
218 | const complete = () => {
|
---|
219 | this._isTransitioning = false
|
---|
220 | this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
---|
221 | this._element.classList.add(CLASS_NAME_COLLAPSE)
|
---|
222 | EventHandler.trigger(this._element, EVENT_HIDDEN)
|
---|
223 | }
|
---|
224 |
|
---|
225 | this._element.style[dimension] = ''
|
---|
226 |
|
---|
227 | this._queueCallback(complete, this._element, true)
|
---|
228 | }
|
---|
229 |
|
---|
230 | _isShown(element = this._element) {
|
---|
231 | return element.classList.contains(CLASS_NAME_SHOW)
|
---|
232 | }
|
---|
233 |
|
---|
234 | // Private
|
---|
235 |
|
---|
236 | _getConfig(config) {
|
---|
237 | config = {
|
---|
238 | ...Default,
|
---|
239 | ...Manipulator.getDataAttributes(this._element),
|
---|
240 | ...config
|
---|
241 | }
|
---|
242 | config.toggle = Boolean(config.toggle) // Coerce string values
|
---|
243 | config.parent = getElement(config.parent)
|
---|
244 | typeCheckConfig(NAME, config, DefaultType)
|
---|
245 | return config
|
---|
246 | }
|
---|
247 |
|
---|
248 | _getDimension() {
|
---|
249 | return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT
|
---|
250 | }
|
---|
251 |
|
---|
252 | _initializeChildren() {
|
---|
253 | if (!this._config.parent) {
|
---|
254 | return
|
---|
255 | }
|
---|
256 |
|
---|
257 | const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
|
---|
258 | SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem))
|
---|
259 | .forEach(element => {
|
---|
260 | const selected = getElementFromSelector(element)
|
---|
261 |
|
---|
262 | if (selected) {
|
---|
263 | this._addAriaAndCollapsedClass([element], this._isShown(selected))
|
---|
264 | }
|
---|
265 | })
|
---|
266 | }
|
---|
267 |
|
---|
268 | _addAriaAndCollapsedClass(triggerArray, isOpen) {
|
---|
269 | if (!triggerArray.length) {
|
---|
270 | return
|
---|
271 | }
|
---|
272 |
|
---|
273 | triggerArray.forEach(elem => {
|
---|
274 | if (isOpen) {
|
---|
275 | elem.classList.remove(CLASS_NAME_COLLAPSED)
|
---|
276 | } else {
|
---|
277 | elem.classList.add(CLASS_NAME_COLLAPSED)
|
---|
278 | }
|
---|
279 |
|
---|
280 | elem.setAttribute('aria-expanded', isOpen)
|
---|
281 | })
|
---|
282 | }
|
---|
283 |
|
---|
284 | // Static
|
---|
285 |
|
---|
286 | static jQueryInterface(config) {
|
---|
287 | return this.each(function () {
|
---|
288 | const _config = {}
|
---|
289 | if (typeof config === 'string' && /show|hide/.test(config)) {
|
---|
290 | _config.toggle = false
|
---|
291 | }
|
---|
292 |
|
---|
293 | const data = Collapse.getOrCreateInstance(this, _config)
|
---|
294 |
|
---|
295 | if (typeof config === 'string') {
|
---|
296 | if (typeof data[config] === 'undefined') {
|
---|
297 | throw new TypeError(`No method named "${config}"`)
|
---|
298 | }
|
---|
299 |
|
---|
300 | data[config]()
|
---|
301 | }
|
---|
302 | })
|
---|
303 | }
|
---|
304 | }
|
---|
305 |
|
---|
306 | /**
|
---|
307 | * ------------------------------------------------------------------------
|
---|
308 | * Data Api implementation
|
---|
309 | * ------------------------------------------------------------------------
|
---|
310 | */
|
---|
311 |
|
---|
312 | EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
---|
313 | // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
---|
314 | if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
|
---|
315 | event.preventDefault()
|
---|
316 | }
|
---|
317 |
|
---|
318 | const selector = getSelectorFromElement(this)
|
---|
319 | const selectorElements = SelectorEngine.find(selector)
|
---|
320 |
|
---|
321 | selectorElements.forEach(element => {
|
---|
322 | Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
|
---|
323 | })
|
---|
324 | })
|
---|
325 |
|
---|
326 | /**
|
---|
327 | * ------------------------------------------------------------------------
|
---|
328 | * jQuery
|
---|
329 | * ------------------------------------------------------------------------
|
---|
330 | * add .Collapse to jQuery only if jQuery is present
|
---|
331 | */
|
---|
332 |
|
---|
333 | defineJQueryPlugin(Collapse)
|
---|
334 |
|
---|
335 | export default Collapse
|
---|