]>
git.ipfire.org Git - ipfire.org.git/blob - static/scss/bootstrap-4.0.0-alpha.6/js/src/collapse.js
28c4493cc5d362ce9025492f1a696d75a72ac35e
1 import Util
from './util'
5 * --------------------------------------------------------------------------
6 * Bootstrap (v4.0.0-alpha.6): collapse.js
7 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
8 * --------------------------------------------------------------------------
11 const Collapse
= (($) => {
15 * ------------------------------------------------------------------------
17 * ------------------------------------------------------------------------
20 const NAME
= 'collapse'
21 const VERSION
= '4.0.0-alpha.6'
22 const DATA_KEY
= 'bs.collapse'
23 const EVENT_KEY
= `.${DATA_KEY}`
24 const DATA_API_KEY
= '.data-api'
25 const JQUERY_NO_CONFLICT
= $.fn
[NAME
]
26 const TRANSITION_DURATION
= 600
39 SHOW
: `show${EVENT_KEY}`,
40 SHOWN
: `shown${EVENT_KEY}`,
41 HIDE
: `hide${EVENT_KEY}`,
42 HIDDEN
: `hidden${EVENT_KEY}`,
43 CLICK_DATA_API
: `click${EVENT_KEY}${DATA_API_KEY}`
48 COLLAPSE
: 'collapse',
49 COLLAPSING
: 'collapsing',
50 COLLAPSED
: 'collapsed'
59 ACTIVES
: '.card > .show, .card > .collapsing',
60 DATA_TOGGLE
: '[data-toggle="collapse"]'
65 * ------------------------------------------------------------------------
67 * ------------------------------------------------------------------------
72 constructor(element
, config
) {
73 this._isTransitioning
= false
74 this._element
= element
75 this._config
= this._getConfig(config
)
76 this._triggerArray
= $.makeArray($(
77 `[data-toggle="collapse"][href="#${element.id}"],` +
78 `[data-toggle="collapse"][data-target="#${element.id}"]`
81 this._parent
= this._config
.parent
? this._getParent() : null
83 if (!this._config
.parent
) {
84 this._addAriaAndCollapsedClass(this._element
, this._triggerArray
)
87 if (this._config
.toggle
) {
95 static get VERSION() {
99 static get Default() {
107 if ($(this._element
).hasClass(ClassName
.SHOW
)) {
115 if (this._isTransitioning
) {
116 throw new Error('Collapse is transitioning')
119 if ($(this._element
).hasClass(ClassName
.SHOW
)) {
127 actives
= $.makeArray($(this._parent
).find(Selector
.ACTIVES
))
128 if (!actives
.length
) {
134 activesData
= $(actives
).data(DATA_KEY
)
135 if (activesData
&& activesData
._isTransitioning
) {
140 const startEvent
= $.Event(Event
.SHOW
)
141 $(this._element
).trigger(startEvent
)
142 if (startEvent
.isDefaultPrevented()) {
147 Collapse
._jQueryInterface
.call($(actives
), 'hide')
149 $(actives
).data(DATA_KEY
, null)
153 const dimension
= this._getDimension()
156 .removeClass(ClassName
.COLLAPSE
)
157 .addClass(ClassName
.COLLAPSING
)
159 this._element
.style
[dimension
] = 0
160 this._element
.setAttribute('aria-expanded', true)
162 if (this._triggerArray
.length
) {
163 $(this._triggerArray
)
164 .removeClass(ClassName
.COLLAPSED
)
165 .attr('aria-expanded', true)
168 this.setTransitioning(true)
170 const complete
= () => {
172 .removeClass(ClassName
.COLLAPSING
)
173 .addClass(ClassName
.COLLAPSE
)
174 .addClass(ClassName
.SHOW
)
176 this._element
.style
[dimension
] = ''
178 this.setTransitioning(false)
180 $(this._element
).trigger(Event
.SHOWN
)
183 if (!Util
.supportsTransitionEnd()) {
188 const capitalizedDimension
= dimension
[0].toUpperCase() + dimension
.slice(1)
189 const scrollSize
= `scroll${capitalizedDimension}`
192 .one(Util
.TRANSITION_END
, complete
)
193 .emulateTransitionEnd(TRANSITION_DURATION
)
195 this._element
.style
[dimension
] = `${this._element[scrollSize]}px`
199 if (this._isTransitioning
) {
200 throw new Error('Collapse is transitioning')
203 if (!$(this._element
).hasClass(ClassName
.SHOW
)) {
207 const startEvent
= $.Event(Event
.HIDE
)
208 $(this._element
).trigger(startEvent
)
209 if (startEvent
.isDefaultPrevented()) {
213 const dimension
= this._getDimension()
214 const offsetDimension
= dimension
=== Dimension
.WIDTH
?
215 'offsetWidth' : 'offsetHeight'
217 this._element
.style
[dimension
] = `${this._element[offsetDimension]}px`
219 Util
.reflow(this._element
)
222 .addClass(ClassName
.COLLAPSING
)
223 .removeClass(ClassName
.COLLAPSE
)
224 .removeClass(ClassName
.SHOW
)
226 this._element
.setAttribute('aria-expanded', false)
228 if (this._triggerArray
.length
) {
229 $(this._triggerArray
)
230 .addClass(ClassName
.COLLAPSED
)
231 .attr('aria-expanded', false)
234 this.setTransitioning(true)
236 const complete
= () => {
237 this.setTransitioning(false)
239 .removeClass(ClassName
.COLLAPSING
)
240 .addClass(ClassName
.COLLAPSE
)
241 .trigger(Event
.HIDDEN
)
244 this._element
.style
[dimension
] = ''
246 if (!Util
.supportsTransitionEnd()) {
252 .one(Util
.TRANSITION_END
, complete
)
253 .emulateTransitionEnd(TRANSITION_DURATION
)
256 setTransitioning(isTransitioning
) {
257 this._isTransitioning
= isTransitioning
261 $.removeData(this._element
, DATA_KEY
)
266 this._triggerArray
= null
267 this._isTransitioning
= null
274 config
= $.extend({}, Default
, config
)
275 config
.toggle
= Boolean(config
.toggle
) // coerce string values
276 Util
.typeCheckConfig(NAME
, config
, DefaultType
)
281 const hasWidth
= $(this._element
).hasClass(Dimension
.WIDTH
)
282 return hasWidth
? Dimension
.WIDTH
: Dimension
.HEIGHT
286 const parent
= $(this._config
.parent
)[0]
288 `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
290 $(parent
).find(selector
).each((i
, element
) => {
291 this._addAriaAndCollapsedClass(
292 Collapse
._getTargetFromElement(element
),
300 _addAriaAndCollapsedClass(element
, triggerArray
) {
302 const isOpen
= $(element
).hasClass(ClassName
.SHOW
)
303 element
.setAttribute('aria-expanded', isOpen
)
305 if (triggerArray
.length
) {
307 .toggleClass(ClassName
.COLLAPSED
, !isOpen
)
308 .attr('aria-expanded', isOpen
)
316 static _getTargetFromElement(element
) {
317 const selector
= Util
.getSelectorFromElement(element
)
318 return selector
? $(selector
)[0] : null
321 static _jQueryInterface(config
) {
322 return this.each(function () {
323 const $this = $(this)
324 let data
= $this.data(DATA_KEY
)
325 const _config
= $.extend(
329 typeof config
=== 'object' && config
332 if (!data
&& _config
.toggle
&& /show|hide/.test(config
)) {
333 _config
.toggle
= false
337 data
= new Collapse(this, _config
)
338 $this.data(DATA_KEY
, data
)
341 if (typeof config
=== 'string') {
342 if (data
[config
] === undefined) {
343 throw new Error(`No method named "${config}"`)
354 * ------------------------------------------------------------------------
355 * Data Api implementation
356 * ------------------------------------------------------------------------
359 $(document
).on(Event
.CLICK_DATA_API
, Selector
.DATA_TOGGLE
, function (event
) {
360 event
.preventDefault()
362 const target
= Collapse
._getTargetFromElement(this)
363 const data
= $(target
).data(DATA_KEY
)
364 const config
= data
? 'toggle' : $(this).data()
366 Collapse
._jQueryInterface
.call($(target
), config
)
371 * ------------------------------------------------------------------------
373 * ------------------------------------------------------------------------
376 $.fn
[NAME
] = Collapse
._jQueryInterface
377 $.fn
[NAME
].Constructor
= Collapse
378 $.fn
[NAME
].noConflict = function () {
379 $.fn
[NAME
] = JQUERY_NO_CONFLICT
380 return Collapse
._jQueryInterface
387 export default Collapse