Created
July 25, 2014 21:59
-
-
Save scottnix/7f0175ba607117b1e139 to your computer and use it in GitHub Desktop.
Bootstrap.js files required for dropdown menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ======================================================================== | |
* Bootstrap: dropdown.js v3.2.0 | |
* http://getbootstrap.com/javascript/#dropdowns | |
* ======================================================================== | |
* Copyright 2011-2014 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
* ======================================================================== */ | |
+function ($) { | |
'use strict'; | |
// DROPDOWN CLASS DEFINITION | |
// ========================= | |
var backdrop = '.dropdown-backdrop' | |
var toggle = '[data-toggle="dropdown"]' | |
var Dropdown = function (element) { | |
$(element).on('click.bs.dropdown', this.toggle) | |
} | |
Dropdown.VERSION = '3.2.0' | |
Dropdown.prototype.toggle = function (e) { | |
var $this = $(this) | |
if ($this.is('.disabled, :disabled')) return | |
var $parent = getParent($this) | |
var isActive = $parent.hasClass('open') | |
clearMenus() | |
if (!isActive) { | |
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { | |
// if mobile we use a backdrop because click events don't delegate | |
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) | |
} | |
var relatedTarget = { relatedTarget: this } | |
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) | |
if (e.isDefaultPrevented()) return | |
$this | |
.trigger('focus') | |
.attr('aria-expanded', 'true') | |
$parent | |
.toggleClass('open') | |
.trigger('shown.bs.dropdown', relatedTarget) | |
} | |
return false | |
} | |
Dropdown.prototype.keydown = function (e) { | |
if (!/(38|40|27)/.test(e.keyCode)) return | |
var $this = $(this) | |
e.preventDefault() | |
e.stopPropagation() | |
if ($this.is('.disabled, :disabled')) return | |
var $parent = getParent($this) | |
var isActive = $parent.hasClass('open') | |
if (!isActive || (isActive && e.keyCode == 27)) { | |
if (e.which == 27) $parent.find(toggle).trigger('focus') | |
return $this.trigger('click') | |
} | |
var desc = ' li:not(.divider):visible a' | |
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc) | |
if (!$items.length) return | |
var index = $items.index($items.filter(':focus')) | |
if (e.keyCode == 38 && index > 0) index-- // up | |
if (e.keyCode == 40 && index < $items.length - 1) index++ // down | |
if (!~index) index = 0 | |
$items.eq(index).trigger('focus') | |
} | |
function clearMenus(e) { | |
if (e && e.which === 3) return | |
$(backdrop).remove() | |
$(toggle).each(function () { | |
var $this = $(this) | |
var $parent = getParent($this) | |
var relatedTarget = { relatedTarget: this } | |
if (!$parent.hasClass('open')) return | |
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) | |
if (e.isDefaultPrevented()) return | |
$this.attr('aria-expanded', 'false') | |
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) | |
}) | |
} | |
function getParent($this) { | |
var selector = $this.attr('data-target') | |
if (!selector) { | |
selector = $this.attr('href') | |
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 | |
} | |
var $parent = selector && $(selector) | |
return $parent && $parent.length ? $parent : $this.parent() | |
} | |
// DROPDOWN PLUGIN DEFINITION | |
// ========================== | |
function Plugin(option) { | |
return this.each(function () { | |
var $this = $(this) | |
var data = $this.data('bs.dropdown') | |
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this))) | |
if (typeof option == 'string') data[option].call($this) | |
}) | |
} | |
var old = $.fn.dropdown | |
$.fn.dropdown = Plugin | |
$.fn.dropdown.Constructor = Dropdown | |
// DROPDOWN NO CONFLICT | |
// ==================== | |
$.fn.dropdown.noConflict = function () { | |
$.fn.dropdown = old | |
return this | |
} | |
// APPLY TO STANDARD DROPDOWN ELEMENTS | |
// =================================== | |
$(document) | |
.on('click.bs.dropdown.data-api', clearMenus) | |
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) | |
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) | |
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown) | |
}(jQuery); | |
/* ======================================================================== | |
* Bootstrap: collapse.js v3.2.0 | |
* http://getbootstrap.com/javascript/#collapse | |
* ======================================================================== | |
* Copyright 2011-2014 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
* ======================================================================== */ | |
+function ($) { | |
'use strict'; | |
// COLLAPSE PUBLIC CLASS DEFINITION | |
// ================================ | |
var Collapse = function (element, options) { | |
this.$element = $(element) | |
this.options = $.extend({}, Collapse.DEFAULTS, options) | |
this.transitioning = null | |
if (this.options.parent) this.$parent = $(this.options.parent) | |
if (this.options.toggle) this.toggle() | |
} | |
Collapse.VERSION = '3.2.0' | |
Collapse.DEFAULTS = { | |
toggle: true | |
} | |
Collapse.prototype.dimension = function () { | |
var hasWidth = this.$element.hasClass('width') | |
return hasWidth ? 'width' : 'height' | |
} | |
Collapse.prototype.show = function () { | |
if (this.transitioning || this.$element.hasClass('in')) return | |
var startEvent = $.Event('show.bs.collapse') | |
this.$element.trigger(startEvent) | |
if (startEvent.isDefaultPrevented()) return | |
var actives = this.$parent && this.$parent.find('> .panel > .in') | |
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() | |
this.$element | |
.removeClass('collapse') | |
.addClass('collapsing')[dimension](0) | |
this.transitioning = 1 | |
var complete = function () { | |
this.$element | |
.removeClass('collapsing') | |
.addClass('collapse in')[dimension]('') | |
this.transitioning = 0 | |
this.$element | |
.trigger('shown.bs.collapse') | |
} | |
if (!$.support.transition) return complete.call(this) | |
var scrollSize = $.camelCase(['scroll', dimension].join('-')) | |
this.$element | |
.one('bsTransitionEnd', $.proxy(complete, this)) | |
.emulateTransitionEnd(350)[dimension](this.$element[0][scrollSize]) | |
} | |
Collapse.prototype.hide = function () { | |
if (this.transitioning || !this.$element.hasClass('in')) return | |
var startEvent = $.Event('hide.bs.collapse') | |
this.$element.trigger(startEvent) | |
if (startEvent.isDefaultPrevented()) return | |
var dimension = this.dimension() | |
this.$element[dimension](this.$element[dimension]())[0].offsetHeight | |
this.$element | |
.addClass('collapsing') | |
.removeClass('collapse in') | |
this.transitioning = 1 | |
var complete = function () { | |
this.transitioning = 0 | |
this.$element | |
.trigger('hidden.bs.collapse') | |
.removeClass('collapsing') | |
.addClass('collapse') | |
} | |
if (!$.support.transition) return complete.call(this) | |
this.$element | |
[dimension](0) | |
.one('bsTransitionEnd', $.proxy(complete, this)) | |
.emulateTransitionEnd(350) | |
} | |
Collapse.prototype.toggle = function () { | |
this[this.$element.hasClass('in') ? 'hide' : 'show']() | |
} | |
// COLLAPSE PLUGIN DEFINITION | |
// ========================== | |
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 (!data && options.toggle && option == 'show') option = !option | |
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 | |
// COLLAPSE NO CONFLICT | |
// ==================== | |
$.fn.collapse.noConflict = function () { | |
$.fn.collapse = old | |
return this | |
} | |
// COLLAPSE DATA-API | |
// ================= | |
$(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) | |
if (!data || !data.transitioning) { | |
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed') | |
$this.toggleClass('collapsed', $target.hasClass('in')) | |
} | |
Plugin.call($target, option) | |
}) | |
}(jQuery); | |
/* ======================================================================== | |
* Bootstrap: transition.js v3.2.0 | |
* http://getbootstrap.com/javascript/#transitions | |
* ======================================================================== | |
* Copyright 2011-2014 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
* ======================================================================== */ | |
+function ($) { | |
'use strict'; | |
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) | |
// ============================================================ | |
function transitionEnd() { | |
var el = document.createElement('bootstrap') | |
var transEndEventNames = { | |
WebkitTransition : 'webkitTransitionEnd', | |
MozTransition : 'transitionend', | |
OTransition : 'oTransitionEnd otransitionend', | |
transition : 'transitionend' | |
} | |
for (var name in transEndEventNames) { | |
if (el.style[name] !== undefined) { | |
return { end: transEndEventNames[name] } | |
} | |
} | |
return false // explicit for ie8 ( ._.) | |
} | |
// http://blog.alexmaccaw.com/css-transitions | |
$.fn.emulateTransitionEnd = function (duration) { | |
var called = false | |
var $el = this | |
$(this).one('bsTransitionEnd', function () { called = true }) | |
var callback = function () { if (!called) $($el).trigger($.support.transition.end) } | |
setTimeout(callback, duration) | |
return this | |
} | |
$(function () { | |
$.support.transition = transitionEnd() | |
if (!$.support.transition) return | |
$.event.special.bsTransitionEnd = { | |
bindType: $.support.transition.end, | |
delegateType: $.support.transition.end, | |
handle: function (e) { | |
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) | |
} | |
} | |
}) | |
}(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please can you explain how to use this code?