aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-10-28 22:57:26 -0700
committerMark Otto <[email protected]>2014-10-28 22:57:26 -0700
commitc4b053a0131e93a206429ee2575dd67fd9508e12 (patch)
treebe93b1e96719a75830a6ea6277ed5c042e9dad75 /js
parentbf3be5a456b3f6699a7832957dc0d1fbf6ac1590 (diff)
parent45b59f4307da4c343c605abe41b4909ba632abf1 (diff)
downloadbootstrap-c4b053a0131e93a206429ee2575dd67fd9508e12.tar.xz
bootstrap-c4b053a0131e93a206429ee2575dd67fd9508e12.zip
Merge branch 'master' into cursor_var
Diffstat (limited to 'js')
-rw-r--r--js/button.js4
-rw-r--r--js/carousel.js8
-rw-r--r--js/collapse.js65
-rw-r--r--js/dropdown.js4
-rw-r--r--js/tab.js8
-rw-r--r--js/tests/unit/button.js10
-rw-r--r--js/tests/unit/collapse.js72
7 files changed, 121 insertions, 50 deletions
diff --git a/js/button.js b/js/button.js
index 901e47a6e..7a449980a 100644
--- a/js/button.js
+++ b/js/button.js
@@ -35,10 +35,10 @@
if (data.resetText == null) $el.data('resetText', $el[val]())
- $el[val](data[state] == null ? this.options[state] : data[state])
-
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
+ $el[val](data[state] == null ? this.options[state] : data[state])
+
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)
diff --git a/js/carousel.js b/js/carousel.js
index b68899009..8884424ef 100644
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -207,7 +207,7 @@
// CAROUSEL DATA-API
// =================
- $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
+ var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@@ -223,7 +223,11 @@
}
e.preventDefault()
- })
+ }
+
+ $(document)
+ .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
+ .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
diff --git a/js/collapse.js b/js/collapse.js
index abbf25f2a..5d0f932ff 100644
--- a/js/collapse.js
+++ b/js/collapse.js
@@ -16,9 +16,15 @@
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
+ this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
- if (this.options.parent) this.$parent = $(this.options.parent)
+ if (this.options.parent) {
+ this.$parent = this.getParent()
+ } else {
+ this.addAriaAndCollapsedClass(this.$element, this.$trigger)
+ }
+
if (this.options.toggle) this.toggle()
}
@@ -27,7 +33,8 @@
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
- toggle: true
+ toggle: true,
+ trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
@@ -62,6 +69,10 @@
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
+ this.$trigger
+ .removeClass('collapsed')
+ .attr('aria-expanded', true)
+
this.transitioning = 1
var complete = function () {
@@ -98,6 +109,10 @@
.removeClass('collapse in')
.attr('aria-expanded', false)
+ this.$trigger
+ .addClass('collapsed')
+ .attr('aria-expanded', false)
+
this.transitioning = 1
var complete = function () {
@@ -120,6 +135,33 @@
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
+ 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)
+ }
+
// COLLAPSE PLUGIN DEFINITION
// ==========================
@@ -155,22 +197,13 @@
// =================
$(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)
+
+ if (!$this.attr('data-target')) e.preventDefault()
+
+ var $target = getTargetFromTrigger($this)
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').attr('aria-expanded', false)
- var isCollapsed = $target.hasClass('in')
- $this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed)
- }
+ var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})
diff --git a/js/dropdown.js b/js/dropdown.js
index 7388f8124..fd7f658f7 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -154,6 +154,8 @@
.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)
+ .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
+ .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
+ .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);
diff --git a/js/tab.js b/js/tab.js
index dd307a424..5c09da49b 100644
--- a/js/tab.js
+++ b/js/tab.js
@@ -141,9 +141,13 @@
// TAB DATA-API
// ============
- $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
+ var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
- })
+ }
+
+ $(document)
+ .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
+ .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 73747cdd4..320996483 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -33,9 +33,9 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
- equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
+ equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
@@ -46,16 +46,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
- equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
+ equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
$btn.bootstrapButton('reset')
- equal($btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () {
+ equal($btn.html(), 'mdo', 'btn text equals mdo')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()
@@ -67,16 +67,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat"/>')
equal($btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('loading')
- equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
+ equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
$btn.bootstrapButton('reset')
- equal($btn.html(), '', 'btn text equals ""')
setTimeout(function () {
+ equal($btn.html(), '', 'btn text equals ""')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index c1d78575c..30d00e413 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -79,7 +79,7 @@ $(function () {
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
- .on('show.bs.collapse', function () {
+ .on('shown.bs.collapse', function () {
ok(!$target.hasClass('collapsed'))
start()
})
@@ -94,7 +94,7 @@ $(function () {
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
- .on('hide.bs.collapse', function () {
+ .on('hidden.bs.collapse', function () {
ok($target.hasClass('collapsed'))
start()
})
@@ -137,12 +137,12 @@ $(function () {
test('should remove "collapsed" class from active accordion target', function () {
stop()
- var accordionHTML = '<div id="accordion">'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
+ var accordionHTML = '<div class="panel-group" id="accordion">'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ '</div>'
- var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
+ var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@@ -156,7 +156,7 @@ $(function () {
$('<div id="body3"/>')
.appendTo($groups.eq(2))
- .on('show.bs.collapse', function () {
+ .on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@@ -170,12 +170,12 @@ $(function () {
test('should allow dots in data-parent', function () {
stop()
- var accordionHTML = '<div class="accordion">'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
+ var accordionHTML = '<div class="panel-group accordion">'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ '</div>'
- var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
+ var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
@@ -189,7 +189,7 @@ $(function () {
$('<div id="body3"/>')
.appendTo($groups.eq(2))
- .on('show.bs.collapse', function () {
+ .on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@@ -207,7 +207,7 @@ $(function () {
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
- .on('show.bs.collapse', function () {
+ .on('shown.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
start()
})
@@ -222,7 +222,7 @@ $(function () {
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
- .on('hide.bs.collapse', function () {
+ .on('hidden.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
start()
})
@@ -233,12 +233,12 @@ $(function () {
test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function () {
stop()
- var accordionHTML = '<div id="accordion">'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
- + '<div class="accordion-group"/>'
+ var accordionHTML = '<div class="panel-group" id="accordion">'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ + '<div class="panel"/>'
+ '</div>'
- var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
+ var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@@ -252,7 +252,7 @@ $(function () {
$('<div id="body3" aria-expanded="false"/>')
.appendTo($groups.eq(2))
- .on('show.bs.collapse', function () {
+ .on('shown.bs.collapse', function () {
equal($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
equal($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"')
equal($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"')
@@ -298,4 +298,32 @@ $(function () {
}, 1)
})
+ test('should add "collapsed" class to target when collapse is hidden via manual invocation', function () {
+ stop()
+
+ var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+
+ $('<div id="test1" class="in"/>')
+ .appendTo('#qunit-fixture')
+ .on('hidden.bs.collapse', function () {
+ ok($target.hasClass('collapsed'))
+ start()
+ })
+ .bootstrapCollapse('hide')
+ })
+
+ test('should remove "collapsed" class from target when collapse is shown via manual invocation', function () {
+ stop()
+
+ var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
+
+ $('<div id="test1"/>')
+ .appendTo('#qunit-fixture')
+ .on('shown.bs.collapse', function () {
+ ok(!$target.hasClass('collapsed'))
+ start()
+ })
+ .bootstrapCollapse('show')
+ })
+
})