diff options
| author | Mark Otto <[email protected]> | 2014-10-28 22:57:26 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-10-28 22:57:26 -0700 |
| commit | c4b053a0131e93a206429ee2575dd67fd9508e12 (patch) | |
| tree | be93b1e96719a75830a6ea6277ed5c042e9dad75 /js | |
| parent | bf3be5a456b3f6699a7832957dc0d1fbf6ac1590 (diff) | |
| parent | 45b59f4307da4c343c605abe41b4909ba632abf1 (diff) | |
| download | bootstrap-c4b053a0131e93a206429ee2575dd67fd9508e12.tar.xz bootstrap-c4b053a0131e93a206429ee2575dd67fd9508e12.zip | |
Merge branch 'master' into cursor_var
Diffstat (limited to 'js')
| -rw-r--r-- | js/button.js | 4 | ||||
| -rw-r--r-- | js/carousel.js | 8 | ||||
| -rw-r--r-- | js/collapse.js | 65 | ||||
| -rw-r--r-- | js/dropdown.js | 4 | ||||
| -rw-r--r-- | js/tab.js | 8 | ||||
| -rw-r--r-- | js/tests/unit/button.js | 10 | ||||
| -rw-r--r-- | js/tests/unit/collapse.js | 72 |
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); @@ -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') + }) + }) |
