aboutsummaryrefslogtreecommitdiff
path: root/js/collapse.js
diff options
context:
space:
mode:
authorfat <[email protected]>2015-05-06 13:34:14 -0700
committerfat <[email protected]>2015-05-06 13:34:14 -0700
commitd1fbe200f46002431cdeebf965c4b789ef7ed267 (patch)
tree43a7cc7667492e519b906f8a428935da2972ac14 /js/collapse.js
parent09fb80568a52af6c440db971cdc6fd88eab8f8b5 (diff)
downloadbootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.tar.xz
bootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.zip
remove closureness from plugins
Diffstat (limited to 'js/collapse.js')
-rw-r--r--js/collapse.js526
1 files changed, 141 insertions, 385 deletions
diff --git a/js/collapse.js b/js/collapse.js
index 156163e3f..954513c5e 100644
--- a/js/collapse.js
+++ b/js/collapse.js
@@ -1,455 +1,211 @@
-/** =======================================================================
- * Bootstrap: collapse.js v4.0.0
+/* ========================================================================
+ * Bootstrap: collapse.js v3.3.4
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * ========================================================================
- * @fileoverview - Bootstrap's collapse plugin. Flexible support for
- * collapsible components like accordions and navigation.
- *
- * Public Methods & Properties:
- *
- * + $.carousel
- * + $.carousel.noConflict
- * + $.carousel.Constructor
- * + $.carousel.Constructor.VERSION
- * + $.carousel.Constructor.Defaults
- * + $.carousel.Constructor.Defaults.toggle
- * + $.carousel.Constructor.Defaults.trigger
- * + $.carousel.Constructor.Defaults.parent
- * + $.carousel.Constructor.prototype.toggle
- * + $.carousel.Constructor.prototype.show
- * + $.carousel.Constructor.prototype.hide
- *
- * ========================================================================
- */
+ * ======================================================================== */
-'use strict';
++function ($) {
+ 'use strict';
-/**
- * Our collapse class.
- * @param {Element!} element
- * @param {Object=} opt_config
- * @constructor
- */
-var Collapse = function (element, opt_config) {
+ // COLLAPSE PUBLIC CLASS DEFINITION
+ // ================================
- /** @private {Element} */
- this._element = element
+ var Collapse = function (element, options) {
+ this.$element = $(element)
+ this.options = $.extend({}, Collapse.DEFAULTS, options)
+ this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
+ '[data-toggle="collapse"][data-target="#' + element.id + '"]')
+ this.transitioning = null
- /** @private {Object} */
- this._config = $.extend({}, Collapse['Defaults'], opt_config)
+ if (this.options.parent) {
+ this.$parent = this.getParent()
+ } else {
+ this.addAriaAndCollapsedClass(this.$element, this.$trigger)
+ }
- /** @private {Element} */
- this._trigger = typeof this._config['trigger'] == 'string' ?
- $(this._config['trigger'])[0] : this._config['trigger']
+ if (this.options.toggle) this.toggle()
+ }
- /** @private {boolean} */
- this._isTransitioning = false
+ Collapse.VERSION = '3.3.4'
- /** @private {?Element} */
- this._parent = this._config['parent'] ? this._getParent() : null
+ Collapse.TRANSITION_DURATION = 350
- if (!this._config['parent']) {
- this._addAriaAndCollapsedClass(this._element, this._trigger)
+ Collapse.DEFAULTS = {
+ toggle: true
}
- if (this._config['toggle']) {
- this['toggle']()
+ Collapse.prototype.dimension = function () {
+ var hasWidth = this.$element.hasClass('width')
+ return hasWidth ? 'width' : 'height'
}
-}
-
-
-/**
- * @const
- * @type {string}
- */
-Collapse['VERSION'] = '4.0.0'
-
-
-/**
- * @const
- * @type {Object}
- */
-Collapse['Defaults'] = {
- 'toggle' : true,
- 'trigger' : '[data-toggle="collapse"]',
- 'parent' : null
-}
-
-
-/**
- * @const
- * @type {string}
- * @private
- */
-Collapse._NAME = 'collapse'
-
-
-/**
- * @const
- * @type {string}
- * @private
- */
-Collapse._DATA_KEY = 'bs.collapse'
-
-
-/**
- * @const
- * @type {number}
- * @private
- */
-Collapse._TRANSITION_DURATION = 600
-
-
-/**
- * @const
- * @type {Function}
- * @private
- */
-Collapse._JQUERY_NO_CONFLICT = $.fn[Collapse._NAME]
-
-
-/**
- * @const
- * @enum {string}
- * @private
- */
-Collapse._Event = {
- SHOW : 'show.bs.collapse',
- SHOWN : 'shown.bs.collapse',
- HIDE : 'hide.bs.collapse',
- HIDDEN : 'hidden.bs.collapse'
-}
-
-
-/**
- * @const
- * @enum {string}
- * @private
- */
-Collapse._ClassName = {
- IN : 'in',
- COLLAPSE : 'collapse',
- COLLAPSING : 'collapsing',
- COLLAPSED : 'collapsed'
-}
-
-
-/**
- * @const
- * @enum {string}
- * @private
- */
-Collapse._Dimension = {
- WIDTH : 'width',
- HEIGHT : 'height'
-}
-
-
-/**
- * @const
- * @enum {string}
- * @private
- */
-Collapse._Selector = {
- ACTIVES : '.panel > .in, .panel > .collapsing'
-}
-
-
-/**
- * Provides the jQuery Interface for the alert component.
- * @param {Object|string=} opt_config
- * @this {jQuery}
- * @return {jQuery}
- * @private
- */
-Collapse._jQueryInterface = function (opt_config) {
- return this.each(function () {
- var $this = $(this)
- var data = $this.data(Collapse._DATA_KEY)
- var config = $.extend({}, Collapse['Defaults'], $this.data(), typeof opt_config == 'object' && opt_config)
-
- if (!data && config['toggle'] && opt_config == 'show') {
- config['toggle'] = false
- }
+ Collapse.prototype.show = function () {
+ if (this.transitioning || this.$element.hasClass('in')) return
- if (!data) {
- data = new Collapse(this, config)
- $this.data(Collapse._DATA_KEY, data)
- }
+ var activesData
+ var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
- if (typeof opt_config == 'string') {
- data[opt_config]()
+ if (actives && actives.length) {
+ activesData = actives.data('bs.collapse')
+ if (activesData && activesData.transitioning) return
}
- })
-}
+ var startEvent = $.Event('show.bs.collapse')
+ this.$element.trigger(startEvent)
+ if (startEvent.isDefaultPrevented()) return
-/**
- * Function for getting target element from element
- * @return {Element}
- * @private
- */
-Collapse._getTargetFromElement = function (element) {
- var selector = Bootstrap.getSelectorFromElement(element)
-
- return selector ? $(selector)[0] : null
-}
-
+ if (actives && actives.length) {
+ Plugin.call(actives, 'hide')
+ activesData || actives.data('bs.collapse', null)
+ }
-/**
- * Toggles the collapse element based on the presence of the 'in' class
- */
-Collapse.prototype['toggle'] = function () {
- if ($(this._element).hasClass(Collapse._ClassName.IN)) {
- this['hide']()
- } else {
- this['show']()
- }
-}
+ var dimension = this.dimension()
+ this.$element
+ .removeClass('collapse')
+ .addClass('collapsing')[dimension](0)
+ .attr('aria-expanded', true)
-/**
- * Show's the collapsing element
- */
-Collapse.prototype['show'] = function () {
- if (this._isTransitioning || $(this._element).hasClass(Collapse._ClassName.IN)) {
- return
- }
+ this.$trigger
+ .removeClass('collapsed')
+ .attr('aria-expanded', true)
- var activesData, actives
+ this.transitioning = 1
- if (this._parent) {
- actives = $.makeArray($(Collapse._Selector.ACTIVES))
- if (!actives.length) {
- actives = null
+ var complete = function () {
+ this.$element
+ .removeClass('collapsing')
+ .addClass('collapse in')[dimension]('')
+ this.transitioning = 0
+ this.$element
+ .trigger('shown.bs.collapse')
}
- }
- if (actives) {
- activesData = $(actives).data(Collapse._DATA_KEY)
- if (activesData && activesData._isTransitioning) {
- return
- }
- }
+ if (!$.support.transition) return complete.call(this)
- var startEvent = $.Event(Collapse._Event.SHOW)
- $(this._element).trigger(startEvent)
- if (startEvent.isDefaultPrevented()) {
- return
- }
+ var scrollSize = $.camelCase(['scroll', dimension].join('-'))
- if (actives) {
- Collapse._jQueryInterface.call($(actives), 'hide')
- if (!activesData) {
- $(actives).data(Collapse._DATA_KEY, null)
- }
+ this.$element
+ .one('bsTransitionEnd', $.proxy(complete, this))
+ .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
- var dimension = this._getDimension()
+ Collapse.prototype.hide = function () {
+ if (this.transitioning || !this.$element.hasClass('in')) return
- $(this._element)
- .removeClass(Collapse._ClassName.COLLAPSE)
- .addClass(Collapse._ClassName.COLLAPSING)
+ var startEvent = $.Event('hide.bs.collapse')
+ this.$element.trigger(startEvent)
+ if (startEvent.isDefaultPrevented()) return
- this._element.style[dimension] = 0
- this._element.setAttribute('aria-expanded', true)
+ var dimension = this.dimension()
- if (this._trigger) {
- $(this._trigger).removeClass(Collapse._ClassName.COLLAPSED)
- this._trigger.setAttribute('aria-expanded', true)
- }
+ this.$element[dimension](this.$element[dimension]())[0].offsetHeight
- this['setTransitioning'](true)
+ this.$element
+ .addClass('collapsing')
+ .removeClass('collapse in')
+ .attr('aria-expanded', false)
- var complete = function () {
- $(this._element)
- .removeClass(Collapse._ClassName.COLLAPSING)
- .addClass(Collapse._ClassName.COLLAPSE)
- .addClass(Collapse._ClassName.IN)
+ this.$trigger
+ .addClass('collapsed')
+ .attr('aria-expanded', false)
- this._element.style[dimension] = ''
+ this.transitioning = 1
- this['setTransitioning'](false)
+ var complete = function () {
+ this.transitioning = 0
+ this.$element
+ .removeClass('collapsing')
+ .addClass('collapse')
+ .trigger('hidden.bs.collapse')
+ }
- $(this._element).trigger(Collapse._Event.SHOWN)
- }.bind(this)
+ if (!$.support.transition) return complete.call(this)
- if (!Bootstrap.transition) {
- complete()
- return
+ this.$element
+ [dimension](0)
+ .one('bsTransitionEnd', $.proxy(complete, this))
+ .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
- var scrollSize = 'scroll' + (dimension[0].toUpperCase() + dimension.slice(1))
-
- $(this._element)
- .one(Bootstrap.TRANSITION_END, complete)
- .emulateTransitionEnd(Collapse._TRANSITION_DURATION)
-
- this._element.style[dimension] = this._element[scrollSize] + 'px'
-}
-
-
-/**
- * Hides's the collapsing element
- */
-Collapse.prototype['hide'] = function () {
- if (this._isTransitioning || !$(this._element).hasClass(Collapse._ClassName.IN)) {
- return
+ Collapse.prototype.toggle = function () {
+ this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
- var startEvent = $.Event(Collapse._Event.HIDE)
- $(this._element).trigger(startEvent)
- if (startEvent.isDefaultPrevented()) return
-
- var dimension = this._getDimension()
- var offsetDimension = dimension === Collapse._Dimension.WIDTH ?
- 'offsetWidth' : 'offsetHeight'
-
- this._element.style[dimension] = this._element[offsetDimension] + 'px'
-
- Bootstrap.reflow(this._element)
-
- $(this._element)
- .addClass(Collapse._ClassName.COLLAPSING)
- .removeClass(Collapse._ClassName.COLLAPSE)
- .removeClass(Collapse._ClassName.IN)
-
- this._element.setAttribute('aria-expanded', false)
-
- if (this._trigger) {
- $(this._trigger).addClass(Collapse._ClassName.COLLAPSED)
- this._trigger.setAttribute('aria-expanded', false)
+ 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()
}
- this['setTransitioning'](true)
-
- var complete = function () {
- this['setTransitioning'](false)
- $(this._element)
- .removeClass(Collapse._ClassName.COLLAPSING)
- .addClass(Collapse._ClassName.COLLAPSE)
- .trigger(Collapse._Event.HIDDEN)
-
- }.bind(this)
+ Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
+ var isOpen = $element.hasClass('in')
- this._element.style[dimension] = 0
-
- if (!Bootstrap.transition) {
- return complete()
+ $element.attr('aria-expanded', isOpen)
+ $trigger
+ .toggleClass('collapsed', !isOpen)
+ .attr('aria-expanded', isOpen)
}
- $(this._element)
- .one(Bootstrap.TRANSITION_END, complete)
- .emulateTransitionEnd(Collapse._TRANSITION_DURATION)
-}
-
-
+ function getTargetFromTrigger($trigger) {
+ var href
+ var target = $trigger.attr('data-target')
+ || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
-/**
- * @param {boolean} isTransitioning
- */
-Collapse.prototype['setTransitioning'] = function (isTransitioning) {
- this._isTransitioning = isTransitioning
-}
-
-
-/**
- * Returns the collapsing dimension
- * @return {string}
- * @private
- */
-Collapse.prototype._getDimension = function () {
- var hasWidth = $(this._element).hasClass(Collapse._Dimension.WIDTH)
- return hasWidth ? Collapse._Dimension.WIDTH : Collapse._Dimension.HEIGHT
-}
-
-
-/**
- * Returns the parent element
- * @return {Element}
- * @private
- */
-Collapse.prototype._getParent = function () {
- var selector = '[data-toggle="collapse"][data-parent="' + this._config['parent'] + '"]'
- var parent = $(this._config['parent'])[0]
- var elements = /** @type {Array.<Element>} */ ($.makeArray($(parent).find(selector)))
-
- for (var i = 0; i < elements.length; i++) {
- this._addAriaAndCollapsedClass(Collapse._getTargetFromElement(elements[i]), elements[i])
+ return $(target)
}
- return parent
-}
+ // COLLAPSE PLUGIN DEFINITION
+ // ==========================
-/**
- * Returns the parent element
- * @param {Element} element
- * @param {Element} trigger
- * @private
- */
-Collapse.prototype._addAriaAndCollapsedClass = function (element, trigger) {
- if (element) {
- var isOpen = $(element).hasClass(Collapse._ClassName.IN)
- element.setAttribute('aria-expanded', isOpen)
+ 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)
- if (trigger) {
- trigger.setAttribute('aria-expanded', isOpen)
- $(trigger).toggleClass(Collapse._ClassName.COLLAPSED, !isOpen)
- }
+ if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
+ if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
}
-}
+ var old = $.fn.collapse
+ $.fn.collapse = Plugin
+ $.fn.collapse.Constructor = Collapse
-/**
- * ------------------------------------------------------------------------
- * jQuery Interface + noConflict implementaiton
- * ------------------------------------------------------------------------
- */
-/**
- * @const
- * @type {Function}
- */
-$.fn[Collapse._NAME] = Collapse._jQueryInterface
-
-
-/**
- * @const
- * @type {Function}
- */
-$.fn[Collapse._NAME]['Constructor'] = Collapse
+ // COLLAPSE NO CONFLICT
+ // ====================
+ $.fn.collapse.noConflict = function () {
+ $.fn.collapse = old
+ return this
+ }
-/**
- * @const
- * @type {Function}
- */
-$.fn[Collapse._NAME]['noConflict'] = function () {
- $.fn[Collapse._NAME] = Collapse._JQUERY_NO_CONFLICT
- return this
-}
+ // COLLAPSE DATA-API
+ // =================
-/**
- * ------------------------------------------------------------------------
- * Data Api implementation
- * ------------------------------------------------------------------------
- */
+ $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
+ var $this = $(this)
-$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (event) {
- event.preventDefault()
+ if (!$this.attr('data-target')) e.preventDefault()
- var target = Collapse._getTargetFromElement(this)
+ var $target = getTargetFromTrigger($this)
+ var data = $target.data('bs.collapse')
+ var option = data ? 'toggle' : $this.data()
- var data = $(target).data(Collapse._DATA_KEY)
- var config = data ? 'toggle' : $.extend({}, $(this).data(), { trigger: this })
+ Plugin.call($target, option)
+ })
- Collapse._jQueryInterface.call($(target), config)
-})
+}(jQuery);