collapse.js 10.70 KiB
import $ from 'jquery'
import Util from './util'
/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.1.2): collapse.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */
const Collapse = (($) => {
  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
  const NAME                = 'collapse'
  const VERSION             = '4.1.2'
  const DATA_KEY            = 'bs.collapse'
  const EVENT_KEY           = `.${DATA_KEY}`
  const DATA_API_KEY        = '.data-api'
  const JQUERY_NO_CONFLICT  = $.fn[NAME]
  const Default = {
    toggle : true,
    parent : ''
  const DefaultType = {
    toggle : 'boolean',
    parent : '(string|element)'
  const Event = {
    SHOW           : `show${EVENT_KEY}`,
    SHOWN          : `shown${EVENT_KEY}`,
    HIDE           : `hide${EVENT_KEY}`,
    HIDDEN         : `hidden${EVENT_KEY}`,
    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
  const ClassName = {
    SHOW       : 'show',
    COLLAPSE   : 'collapse',
    COLLAPSING : 'collapsing',
    COLLAPSED  : 'collapsed'
  const Dimension = {
    WIDTH  : 'width',
    HEIGHT : 'height'
  const Selector = {
    ACTIVES     : '.show, .collapsing',
    DATA_TOGGLE : '[data-toggle="collapse"]'
  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
  class Collapse {
    constructor(element, config) {
      this._isTransitioning = false
      this._element         = element
      this._config          = this._getConfig(config)
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
this._triggerArray = $.makeArray(document.querySelectorAll( `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) const toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE)) for (let i = 0, len = toggleList.length; i < len; i++) { const elem = toggleList[i] const selector = Util.getSelectorFromElement(elem) const filterElement = [].slice.call(document.querySelectorAll(selector)) .filter((foundElem) => foundElem === element) if (selector !== null && filterElement.length > 0) { this._selector = selector this._triggerArray.push(elem) } } this._parent = this._config.parent ? this._getParent() : null if (!this._config.parent) { this._addAriaAndCollapsedClass(this._element, this._triggerArray) } 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 = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES)) .filter((elem) => elem.getAttribute('data-parent') === this._config.parent) if (actives.length === 0) { actives = null } } if (actives) { activesData = $(actives).not(this._selector).data(DATA_KEY) if (activesData && activesData._isTransitioning) { return