collapse.js 5.84 KB
Newer Older
1
/* ========================================================================
Mark Otto's avatar
Mark Otto committed
2
 * Bootstrap: collapse.js v3.2.0
3
 * http://getbootstrap.com/javascript/#collapse
4
 * ========================================================================
5
 * Copyright 2011-2014 Twitter, Inc.
6
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
7
 * ======================================================================== */
8

9

10
11
+function ($) {
  'use strict';
Katie Zhu's avatar
Katie Zhu committed
12

13
14
  // COLLAPSE PUBLIC CLASS DEFINITION
  // ================================
15

16
17
18
  var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
19
    this.$trigger      = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
20
    this.transitioning = null
21

22
23
24
25
26
27
    if (this.options.parent) {
      this.$parent = this.getParent()
    } else {
      this.addAriaAndCollapsedClass(this.$element, this.$trigger)
    }

28
29
    if (this.options.toggle) this.toggle()
  }
30

Mark Otto's avatar
Mark Otto committed
31
  Collapse.VERSION  = '3.2.0'
32

33
34
  Collapse.TRANSITION_DURATION = 350

35
  Collapse.DEFAULTS = {
36
37
    toggle: true,
    trigger: '[data-toggle="collapse"]'
38
  }
39

40
41
42
43
  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }
44

45
46
  Collapse.prototype.show = function () {
    if (this.transitioning || this.$element.hasClass('in')) return
fat's avatar
fat committed
47

48
49
50
51
52
53
54
55
    var activesData
    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')

    if (actives && actives.length) {
      activesData = actives.data('bs.collapse')
      if (activesData && activesData.transitioning) return
    }

56
57
58
    var startEvent = $.Event('show.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return
59

60
61
    if (actives && actives.length) {
      Plugin.call(actives, 'hide')
62
      activesData || actives.data('bs.collapse', null)
63
64
65
    }

    var dimension = this.dimension()
66

67
68
69
    this.$element
      .removeClass('collapse')
      .addClass('collapsing')[dimension](0)
Patrick H. Lauke's avatar
Patrick H. Lauke committed
70
      .attr('aria-expanded', true)
71

72
73
74
75
    this.$trigger
      .removeClass('collapsed')
      .attr('aria-expanded', true)

76
    this.transitioning = 1
77

78
79
80
81
82
    var complete = function () {
      this.$element
        .removeClass('collapsing')
        .addClass('collapse in')[dimension]('')
      this.transitioning = 0
83
      this.$element
84
85
        .trigger('shown.bs.collapse')
    }
86

87
    if (!$.support.transition) return complete.call(this)
88

89
    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
90

91
92
    this.$element
      .one('bsTransitionEnd', $.proxy(complete, this))
93
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
94
  }
95

96
97
  Collapse.prototype.hide = function () {
    if (this.transitioning || !this.$element.hasClass('in')) return
fat's avatar
fat committed
98

99
100
101
    var startEvent = $.Event('hide.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return
fat's avatar
fat committed
102

103
    var dimension = this.dimension()
104

105
    this.$element[dimension](this.$element[dimension]())[0].offsetHeight
106

107
108
    this.$element
      .addClass('collapsing')
109
      .removeClass('collapse in')
Patrick H. Lauke's avatar
Patrick H. Lauke committed
110
      .attr('aria-expanded', false)
111

112
113
114
115
    this.$trigger
      .addClass('collapsed')
      .attr('aria-expanded', false)

116
    this.transitioning = 1
117

118
119
    var complete = function () {
      this.transitioning = 0
120
      this.$element
121
122
        .removeClass('collapsing')
        .addClass('collapse')
123
        .trigger('hidden.bs.collapse')
124
    }
125

126
    if (!$.support.transition) return complete.call(this)
127

128
129
130
    this.$element
      [dimension](0)
      .one('bsTransitionEnd', $.proxy(complete, this))
131
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
132
  }
133

134
  Collapse.prototype.toggle = function () {
fat's avatar
fat committed
135
    this[this.$element.hasClass('in') ? 'hide' : 'show']()
136
  }
137

138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
  Collapse.prototype.getParent = function () {
    return $(this.options.parent)
      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
      .each($.proxy(function (i, element) {
        var $element = $(element)
        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
      }, this))
      .end()
  }

  Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
    var isOpen = $element.hasClass('in')

    $element.attr('aria-expanded', isOpen)
    $trigger
      .toggleClass('collapsed', !isOpen)
      .attr('aria-expanded', isOpen)
  }

  function getTargetFromTrigger($trigger) {
    var href
    var target = $trigger.attr('data-target')
      || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7

    return $(target)
  }

165

166
167
  // COLLAPSE PLUGIN DEFINITION
  // ==========================
fat's avatar
fat committed
168

169
170
171
172
173
  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.collapse')
      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
174

175
      if (!data && options.toggle && option == 'show') options.toggle = false
176
177
178
179
      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
180

181
  var old = $.fn.collapse
182

183
184
  $.fn.collapse             = Plugin
  $.fn.collapse.Constructor = Collapse
185
186


187
188
  // COLLAPSE NO CONFLICT
  // ====================
189

190
191
192
193
  $.fn.collapse.noConflict = function () {
    $.fn.collapse = old
    return this
  }
194
195


196
197
  // COLLAPSE DATA-API
  // =================
fat's avatar
fat committed
198

199
200
  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
    var $this   = $(this)
201
202
203
204

    if (!$this.attr('data-target')) e.preventDefault()

    var $target = getTargetFromTrigger($this)
205
    var data    = $target.data('bs.collapse')
206
    var option  = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
fat's avatar
fat committed
207

208
    Plugin.call($target, option)
209
210
  })

211
}(jQuery);