]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | import Util from './util' |
2 | ||
3 | ||
4 | /** | |
5 | * -------------------------------------------------------------------------- | |
6 | * Bootstrap (v4.0.0-alpha.6): collapse.js | |
7 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
8 | * -------------------------------------------------------------------------- | |
9 | */ | |
10 | ||
11 | const Collapse = (($) => { | |
12 | ||
13 | ||
14 | /** | |
15 | * ------------------------------------------------------------------------ | |
16 | * Constants | |
17 | * ------------------------------------------------------------------------ | |
18 | */ | |
19 | ||
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 | |
27 | ||
28 | const Default = { | |
29 | toggle : true, | |
30 | parent : '' | |
31 | } | |
32 | ||
33 | const DefaultType = { | |
34 | toggle : 'boolean', | |
35 | parent : 'string' | |
36 | } | |
37 | ||
38 | const Event = { | |
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}` | |
44 | } | |
45 | ||
46 | const ClassName = { | |
47 | SHOW : 'show', | |
48 | COLLAPSE : 'collapse', | |
49 | COLLAPSING : 'collapsing', | |
50 | COLLAPSED : 'collapsed' | |
51 | } | |
52 | ||
53 | const Dimension = { | |
54 | WIDTH : 'width', | |
55 | HEIGHT : 'height' | |
56 | } | |
57 | ||
58 | const Selector = { | |
59 | ACTIVES : '.card > .show, .card > .collapsing', | |
60 | DATA_TOGGLE : '[data-toggle="collapse"]' | |
61 | } | |
62 | ||
63 | ||
64 | /** | |
65 | * ------------------------------------------------------------------------ | |
66 | * Class Definition | |
67 | * ------------------------------------------------------------------------ | |
68 | */ | |
69 | ||
70 | class Collapse { | |
71 | ||
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}"]` | |
79 | )) | |
80 | ||
81 | this._parent = this._config.parent ? this._getParent() : null | |
82 | ||
83 | if (!this._config.parent) { | |
84 | this._addAriaAndCollapsedClass(this._element, this._triggerArray) | |
85 | } | |
86 | ||
87 | if (this._config.toggle) { | |
88 | this.toggle() | |
89 | } | |
90 | } | |
91 | ||
92 | ||
93 | // getters | |
94 | ||
95 | static get VERSION() { | |
96 | return VERSION | |
97 | } | |
98 | ||
99 | static get Default() { | |
100 | return Default | |
101 | } | |
102 | ||
103 | ||
104 | // public | |
105 | ||
106 | toggle() { | |
107 | if ($(this._element).hasClass(ClassName.SHOW)) { | |
108 | this.hide() | |
109 | } else { | |
110 | this.show() | |
111 | } | |
112 | } | |
113 | ||
114 | show() { | |
115 | if (this._isTransitioning) { | |
116 | throw new Error('Collapse is transitioning') | |
117 | } | |
118 | ||
119 | if ($(this._element).hasClass(ClassName.SHOW)) { | |
120 | return | |
121 | } | |
122 | ||
123 | let actives | |
124 | let activesData | |
125 | ||
126 | if (this._parent) { | |
127 | actives = $.makeArray($(this._parent).find(Selector.ACTIVES)) | |
128 | if (!actives.length) { | |
129 | actives = null | |
130 | } | |
131 | } | |
132 | ||
133 | if (actives) { | |
134 | activesData = $(actives).data(DATA_KEY) | |
135 | if (activesData && activesData._isTransitioning) { | |
136 | return | |
137 | } | |
138 | } | |
139 | ||
140 | const startEvent = $.Event(Event.SHOW) | |
141 | $(this._element).trigger(startEvent) | |
142 | if (startEvent.isDefaultPrevented()) { | |
143 | return | |
144 | } | |
145 | ||
146 | if (actives) { | |
147 | Collapse._jQueryInterface.call($(actives), 'hide') | |
148 | if (!activesData) { | |
149 | $(actives).data(DATA_KEY, null) | |
150 | } | |
151 | } | |
152 | ||
153 | const dimension = this._getDimension() | |
154 | ||
155 | $(this._element) | |
156 | .removeClass(ClassName.COLLAPSE) | |
157 | .addClass(ClassName.COLLAPSING) | |
158 | ||
159 | this._element.style[dimension] = 0 | |
160 | this._element.setAttribute('aria-expanded', true) | |
161 | ||
162 | if (this._triggerArray.length) { | |
163 | $(this._triggerArray) | |
164 | .removeClass(ClassName.COLLAPSED) | |
165 | .attr('aria-expanded', true) | |
166 | } | |
167 | ||
168 | this.setTransitioning(true) | |
169 | ||
170 | const complete = () => { | |
171 | $(this._element) | |
172 | .removeClass(ClassName.COLLAPSING) | |
173 | .addClass(ClassName.COLLAPSE) | |
174 | .addClass(ClassName.SHOW) | |
175 | ||
176 | this._element.style[dimension] = '' | |
177 | ||
178 | this.setTransitioning(false) | |
179 | ||
180 | $(this._element).trigger(Event.SHOWN) | |
181 | } | |
182 | ||
183 | if (!Util.supportsTransitionEnd()) { | |
184 | complete() | |
185 | return | |
186 | } | |
187 | ||
188 | const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1) | |
189 | const scrollSize = `scroll${capitalizedDimension}` | |
190 | ||
191 | $(this._element) | |
192 | .one(Util.TRANSITION_END, complete) | |
193 | .emulateTransitionEnd(TRANSITION_DURATION) | |
194 | ||
195 | this._element.style[dimension] = `${this._element[scrollSize]}px` | |
196 | } | |
197 | ||
198 | hide() { | |
199 | if (this._isTransitioning) { | |
200 | throw new Error('Collapse is transitioning') | |
201 | } | |
202 | ||
203 | if (!$(this._element).hasClass(ClassName.SHOW)) { | |
204 | return | |
205 | } | |
206 | ||
207 | const startEvent = $.Event(Event.HIDE) | |
208 | $(this._element).trigger(startEvent) | |
209 | if (startEvent.isDefaultPrevented()) { | |
210 | return | |
211 | } | |
212 | ||
213 | const dimension = this._getDimension() | |
214 | const offsetDimension = dimension === Dimension.WIDTH ? | |
215 | 'offsetWidth' : 'offsetHeight' | |
216 | ||
217 | this._element.style[dimension] = `${this._element[offsetDimension]}px` | |
218 | ||
219 | Util.reflow(this._element) | |
220 | ||
221 | $(this._element) | |
222 | .addClass(ClassName.COLLAPSING) | |
223 | .removeClass(ClassName.COLLAPSE) | |
224 | .removeClass(ClassName.SHOW) | |
225 | ||
226 | this._element.setAttribute('aria-expanded', false) | |
227 | ||
228 | if (this._triggerArray.length) { | |
229 | $(this._triggerArray) | |
230 | .addClass(ClassName.COLLAPSED) | |
231 | .attr('aria-expanded', false) | |
232 | } | |
233 | ||
234 | this.setTransitioning(true) | |
235 | ||
236 | const complete = () => { | |
237 | this.setTransitioning(false) | |
238 | $(this._element) | |
239 | .removeClass(ClassName.COLLAPSING) | |
240 | .addClass(ClassName.COLLAPSE) | |
241 | .trigger(Event.HIDDEN) | |
242 | } | |
243 | ||
244 | this._element.style[dimension] = '' | |
245 | ||
246 | if (!Util.supportsTransitionEnd()) { | |
247 | complete() | |
248 | return | |
249 | } | |
250 | ||
251 | $(this._element) | |
252 | .one(Util.TRANSITION_END, complete) | |
253 | .emulateTransitionEnd(TRANSITION_DURATION) | |
254 | } | |
255 | ||
256 | setTransitioning(isTransitioning) { | |
257 | this._isTransitioning = isTransitioning | |
258 | } | |
259 | ||
260 | dispose() { | |
261 | $.removeData(this._element, DATA_KEY) | |
262 | ||
263 | this._config = null | |
264 | this._parent = null | |
265 | this._element = null | |
266 | this._triggerArray = null | |
267 | this._isTransitioning = null | |
268 | } | |
269 | ||
270 | ||
271 | // private | |
272 | ||
273 | _getConfig(config) { | |
274 | config = $.extend({}, Default, config) | |
275 | config.toggle = Boolean(config.toggle) // coerce string values | |
276 | Util.typeCheckConfig(NAME, config, DefaultType) | |
277 | return config | |
278 | } | |
279 | ||
280 | _getDimension() { | |
281 | const hasWidth = $(this._element).hasClass(Dimension.WIDTH) | |
282 | return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT | |
283 | } | |
284 | ||
285 | _getParent() { | |
286 | const parent = $(this._config.parent)[0] | |
287 | const selector = | |
288 | `[data-toggle="collapse"][data-parent="${this._config.parent}"]` | |
289 | ||
290 | $(parent).find(selector).each((i, element) => { | |
291 | this._addAriaAndCollapsedClass( | |
292 | Collapse._getTargetFromElement(element), | |
293 | [element] | |
294 | ) | |
295 | }) | |
296 | ||
297 | return parent | |
298 | } | |
299 | ||
300 | _addAriaAndCollapsedClass(element, triggerArray) { | |
301 | if (element) { | |
302 | const isOpen = $(element).hasClass(ClassName.SHOW) | |
303 | element.setAttribute('aria-expanded', isOpen) | |
304 | ||
305 | if (triggerArray.length) { | |
306 | $(triggerArray) | |
307 | .toggleClass(ClassName.COLLAPSED, !isOpen) | |
308 | .attr('aria-expanded', isOpen) | |
309 | } | |
310 | } | |
311 | } | |
312 | ||
313 | ||
314 | // static | |
315 | ||
316 | static _getTargetFromElement(element) { | |
317 | const selector = Util.getSelectorFromElement(element) | |
318 | return selector ? $(selector)[0] : null | |
319 | } | |
320 | ||
321 | static _jQueryInterface(config) { | |
322 | return this.each(function () { | |
323 | const $this = $(this) | |
324 | let data = $this.data(DATA_KEY) | |
325 | const _config = $.extend( | |
326 | {}, | |
327 | Default, | |
328 | $this.data(), | |
329 | typeof config === 'object' && config | |
330 | ) | |
331 | ||
332 | if (!data && _config.toggle && /show|hide/.test(config)) { | |
333 | _config.toggle = false | |
334 | } | |
335 | ||
336 | if (!data) { | |
337 | data = new Collapse(this, _config) | |
338 | $this.data(DATA_KEY, data) | |
339 | } | |
340 | ||
341 | if (typeof config === 'string') { | |
342 | if (data[config] === undefined) { | |
343 | throw new Error(`No method named "${config}"`) | |
344 | } | |
345 | data[config]() | |
346 | } | |
347 | }) | |
348 | } | |
349 | ||
350 | } | |
351 | ||
352 | ||
353 | /** | |
354 | * ------------------------------------------------------------------------ | |
355 | * Data Api implementation | |
356 | * ------------------------------------------------------------------------ | |
357 | */ | |
358 | ||
359 | $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { | |
360 | event.preventDefault() | |
361 | ||
362 | const target = Collapse._getTargetFromElement(this) | |
363 | const data = $(target).data(DATA_KEY) | |
364 | const config = data ? 'toggle' : $(this).data() | |
365 | ||
366 | Collapse._jQueryInterface.call($(target), config) | |
367 | }) | |
368 | ||
369 | ||
370 | /** | |
371 | * ------------------------------------------------------------------------ | |
372 | * jQuery | |
373 | * ------------------------------------------------------------------------ | |
374 | */ | |
375 | ||
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 | |
381 | } | |
382 | ||
383 | return Collapse | |
384 | ||
385 | })(jQuery) | |
386 | ||
387 | export default Collapse |