collapse.js 4.81 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
19
  var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.transitioning = null
20

21
22
23
    if (this.options.parent) this.$parent = $(this.options.parent)
    if (this.options.toggle) this.toggle()
  }
24

Mark Otto's avatar
Mark Otto committed
25
  Collapse.VERSION  = '3.2.0'
26

27
28
  Collapse.TRANSITION_DURATION = 350

29
30
31
  Collapse.DEFAULTS = {
    toggle: true
  }
32

33
34
35
36
  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }
37

38
39
  Collapse.prototype.show = function () {
    if (this.transitioning || this.$element.hasClass('in')) return
fat's avatar
fat committed
40

41
42
43
    var startEvent = $.Event('show.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return
44

45
    var actives = this.$parent && this.$parent.find('> .panel > .in')
46

47
48
49
50
51
52
53
54
    if (actives && actives.length) {
      var hasData = actives.data('bs.collapse')
      if (hasData && hasData.transitioning) return
      Plugin.call(actives, 'hide')
      hasData || actives.data('bs.collapse', null)
    }

    var dimension = this.dimension()
55

56
57
58
    this.$element
      .removeClass('collapse')
      .addClass('collapsing')[dimension](0)
59

60
    this.transitioning = 1
61

62
63
64
65
66
    var complete = function () {
      this.$element
        .removeClass('collapsing')
        .addClass('collapse in')[dimension]('')
      this.transitioning = 0
67
      this.$element
68
69
        .trigger('shown.bs.collapse')
    }
70

71
    if (!$.support.transition) return complete.call(this)
72

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

75
76
    this.$element
      .one('bsTransitionEnd', $.proxy(complete, this))
77
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
78
  }
79

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

83
84
85
    var startEvent = $.Event('hide.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return
fat's avatar
fat committed
86

87
    var dimension = this.dimension()
88

89
    this.$element[dimension](this.$element[dimension]())[0].offsetHeight
90

91
92
    this.$element
      .addClass('collapsing')
93
      .removeClass('collapse in')
94

95
    this.transitioning = 1
96

97
98
    var complete = function () {
      this.transitioning = 0
99
      this.$element
100
101
102
103
        .trigger('hidden.bs.collapse')
        .removeClass('collapsing')
        .addClass('collapse')
    }
104

105
    if (!$.support.transition) return complete.call(this)
106

107
108
109
    this.$element
      [dimension](0)
      .one('bsTransitionEnd', $.proxy(complete, this))
110
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
111
  }
112

113
  Collapse.prototype.toggle = function () {
fat's avatar
fat committed
114
    this[this.$element.hasClass('in') ? 'hide' : 'show']()
115
  }
116

117

118
119
  // COLLAPSE PLUGIN DEFINITION
  // ==========================
fat's avatar
fat committed
120

121
122
123
124
125
  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)
126

127
128
129
130
131
      if (!data && options.toggle && option == 'show') option = !option
      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
132

133
  var old = $.fn.collapse
134

135
136
  $.fn.collapse             = Plugin
  $.fn.collapse.Constructor = Collapse
137
138


139
140
  // COLLAPSE NO CONFLICT
  // ====================
141

142
143
144
145
  $.fn.collapse.noConflict = function () {
    $.fn.collapse = old
    return this
  }
146
147


148
149
  // COLLAPSE DATA-API
  // =================
fat's avatar
fat committed
150

151
152
153
154
155
156
157
158
159
160
161
  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
    var href
    var $this   = $(this)
    var target  = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
    var $target = $(target)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()
    var parent  = $this.attr('data-parent')
    var $parent = parent && $(parent)
162

163
164
    if (!data || !data.transitioning) {
      if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed')
fat's avatar
fat committed
165
      $this.toggleClass('collapsed', $target.hasClass('in'))
166
    }
fat's avatar
fat committed
167

168
    Plugin.call($target, option)
169
170
  })

171
}(jQuery);