source: trip-planner-front/node_modules/bootstrap/js/src/collapse.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 8.9 KB
Line 
1/**
2 * --------------------------------------------------------------------------
3 * Bootstrap (v5.1.3): collapse.js
4 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5 * --------------------------------------------------------------------------
6 */
7
8import {
9 defineJQueryPlugin,
10 getElement,
11 getSelectorFromElement,
12 getElementFromSelector,
13 reflow,
14 typeCheckConfig
15} from './util/index'
16import Data from './dom/data'
17import EventHandler from './dom/event-handler'
18import Manipulator from './dom/manipulator'
19import SelectorEngine from './dom/selector-engine'
20import BaseComponent from './base-component'
21
22/**
23 * ------------------------------------------------------------------------
24 * Constants
25 * ------------------------------------------------------------------------
26 */
27
28const NAME = 'collapse'
29const DATA_KEY = 'bs.collapse'
30const EVENT_KEY = `.${DATA_KEY}`
31const DATA_API_KEY = '.data-api'
32
33const Default = {
34 toggle: true,
35 parent: null
36}
37
38const DefaultType = {
39 toggle: 'boolean',
40 parent: '(null|element)'
41}
42
43const EVENT_SHOW = `show${EVENT_KEY}`
44const EVENT_SHOWN = `shown${EVENT_KEY}`
45const EVENT_HIDE = `hide${EVENT_KEY}`
46const EVENT_HIDDEN = `hidden${EVENT_KEY}`
47const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
48
49const CLASS_NAME_SHOW = 'show'
50const CLASS_NAME_COLLAPSE = 'collapse'
51const CLASS_NAME_COLLAPSING = 'collapsing'
52const CLASS_NAME_COLLAPSED = 'collapsed'
53const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
54const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
55
56const WIDTH = 'width'
57const HEIGHT = 'height'
58
59const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
60const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
61
62/**
63 * ------------------------------------------------------------------------
64 * Class Definition
65 * ------------------------------------------------------------------------
66 */
67
68class 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
312EventHandler.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
333defineJQueryPlugin(Collapse)
334
335export default Collapse
Note: See TracBrowser for help on using the repository browser.