Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
collapse.js 9.60 KiB
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 
    DATA_CHILDREN : 'data-children'
62 
  }
63
64
65 
  /**
66 
   * ------------------------------------------------------------------------
67 
   * Class Definition
68 
   * ------------------------------------------------------------------------
69 
   */
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
class Collapse { constructor(element, config) { this._isTransitioning = false this._element = element this._config = this._getConfig(config) this._triggerArray = $.makeArray($( `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) this._parent = this._config.parent ? this._getParent() : null if (!this._config.parent) { this._addAriaAndCollapsedClass(this._element, this._triggerArray) } this._selectorActives = Selector.ACTIVES if (this._parent) { const childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null if (childrenSelector !== null) { this._selectorActives = `${childrenSelector} > .show, ${childrenSelector} > .collapsing` } } if (this._config.toggle) { this.toggle() } } // getters static get VERSION() { return VERSION } static get Default() { return Default } // public toggle() { if ($(this._element).hasClass(ClassName.SHOW)) { this.hide() } else { this.show() } } show() { if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) { return } let actives let activesData if (this._parent) { actives = $.makeArray($(this._parent).find(this._selectorActives)) if (!actives.length) { actives = null } } if (actives) { activesData = $(actives).data(DATA_KEY) if (activesData && activesData._isTransitioning) {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
return } } const startEvent = $.Event(Event.SHOW) $(this._element).trigger(startEvent) if (startEvent.isDefaultPrevented()) { return } if (actives) { Collapse._jQueryInterface.call($(actives), 'hide') if (!activesData) { $(actives).data(DATA_KEY, null) } } const dimension = this._getDimension() $(this._element) .removeClass(ClassName.COLLAPSE) .addClass(ClassName.COLLAPSING) this._element.style[dimension] = 0 this._element.setAttribute('aria-expanded', true) if (this._triggerArray.length) { $(this._triggerArray) .removeClass(ClassName.COLLAPSED) .attr('aria-expanded', true) } this.setTransitioning(true) const complete = () => { $(this._element) .removeClass(ClassName.COLLAPSING) .addClass(ClassName.COLLAPSE) .addClass(ClassName.SHOW) this._element.style[dimension] = '' this.setTransitioning(false) $(this._element).trigger(Event.SHOWN) } if (!Util.supportsTransitionEnd()) { complete() return } const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1) const scrollSize = `scroll${capitalizedDimension}` $(this._element) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(TRANSITION_DURATION) this._element.style[dimension] = `${this._element[scrollSize]}px` } hide() { if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) { return } const startEvent = $.Event(Event.HIDE) $(this._element).trigger(startEvent)
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
if (startEvent.isDefaultPrevented()) { return } const dimension = this._getDimension() this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px` Util.reflow(this._element) $(this._element) .addClass(ClassName.COLLAPSING) .removeClass(ClassName.COLLAPSE) .removeClass(ClassName.SHOW) this._element.setAttribute('aria-expanded', false) if (this._triggerArray.length) { $(this._triggerArray) .addClass(ClassName.COLLAPSED) .attr('aria-expanded', false) } this.setTransitioning(true) const complete = () => { this.setTransitioning(false) $(this._element) .removeClass(ClassName.COLLAPSING) .addClass(ClassName.COLLAPSE) .trigger(Event.HIDDEN) } this._element.style[dimension] = '' if (!Util.supportsTransitionEnd()) { complete() return } $(this._element) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(TRANSITION_DURATION) } setTransitioning(isTransitioning) { this._isTransitioning = isTransitioning } dispose() { $.removeData(this._element, DATA_KEY) this._config = null this._parent = null this._element = null this._triggerArray = null this._isTransitioning = null } // private _getConfig(config) { config = $.extend({}, Default, config) config.toggle = Boolean(config.toggle) // coerce string values Util.typeCheckConfig(NAME, config, DefaultType) return config } _getDimension() {
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
const hasWidth = $(this._element).hasClass(Dimension.WIDTH) return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT } _getParent() { const parent = $(this._config.parent)[0] const selector = `[data-toggle="collapse"][data-parent="${this._config.parent}"]` $(parent).find(selector).each((i, element) => { this._addAriaAndCollapsedClass( Collapse._getTargetFromElement(element), [element] ) }) return parent } _addAriaAndCollapsedClass(element, triggerArray) { if (element) { const isOpen = $(element).hasClass(ClassName.SHOW) element.setAttribute('aria-expanded', isOpen) if (triggerArray.length) { $(triggerArray) .toggleClass(ClassName.COLLAPSED, !isOpen) .attr('aria-expanded', isOpen) } } } // static static _getTargetFromElement(element) { const selector = Util.getSelectorFromElement(element) return selector ? $(selector)[0] : null } static _jQueryInterface(config) { return this.each(function () { const $this = $(this) let data = $this.data(DATA_KEY) const _config = $.extend( {}, Default, $this.data(), typeof config === 'object' && config ) if (!data && _config.toggle && /show|hide/.test(config)) { _config.toggle = false } if (!data) { data = new Collapse(this, _config) $this.data(DATA_KEY, data) } if (typeof config === 'string') { if (data[config] === undefined) { throw new Error(`No method named "${config}"`) } data[config]() } }) } }
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
/** * ------------------------------------------------------------------------ * Data Api implementation * ------------------------------------------------------------------------ */ $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { if (/input|textarea/i.test(event.target.tagName)) { event.preventDefault() } const target = Collapse._getTargetFromElement(this) const data = $(target).data(DATA_KEY) const config = data ? 'toggle' : $(this).data() Collapse._jQueryInterface.call($(target), config) }) /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ $.fn[NAME] = Collapse._jQueryInterface $.fn[NAME].Constructor = Collapse $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Collapse._jQueryInterface } return Collapse })(jQuery) export default Collapse