diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/button.js | 6 | ||||
| -rw-r--r-- | js/src/collapse.js | 16 | ||||
| -rw-r--r-- | js/src/tab.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/button.js | 17 | ||||
| -rw-r--r-- | js/tests/unit/collapse.js | 76 |
5 files changed, 95 insertions, 22 deletions
diff --git a/js/src/button.js b/js/src/button.js index 6295d0db0..722fd489d 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -90,6 +90,12 @@ const Button = (($) => { } if (triggerChangeEvent) { + if (input.hasAttribute('disabled') || + rootElement.hasAttribute('disabled') || + input.classList.contains('disabled') || + rootElement.classList.contains('disabled')) { + return + } input.checked = !$(this._element).hasClass(ClassName.ACTIVE) $(input).trigger('change') } diff --git a/js/src/collapse.js b/js/src/collapse.js index dec272297..bf1c738f5 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -56,9 +56,8 @@ const Collapse = (($) => { } const Selector = { - ACTIVES : '.card > .show, .card > .collapsing', - DATA_TOGGLE : '[data-toggle="collapse"]', - DATA_CHILDREN : 'data-children' + ACTIVES : '.show, .collapsing', + DATA_TOGGLE : '[data-toggle="collapse"]' } @@ -78,20 +77,13 @@ const Collapse = (($) => { `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) + this._parent = this._config.parent ? this._getParent() : null if (!this._config.parent) { this._addAriaAndCollapsedClass(this._element, this._triggerArray) } - this._selectorActives = Selector.ACTIVES - if (this._parent) { - const childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null - if (childrenSelector !== null) { - this._selectorActives = `${childrenSelector} > .show, ${childrenSelector} > .collapsing` - } - } - if (this._config.toggle) { this.toggle() } @@ -129,7 +121,7 @@ const Collapse = (($) => { let activesData if (this._parent) { - actives = $.makeArray($(this._parent).find(this._selectorActives)) + actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES)) if (!actives.length) { actives = null } diff --git a/js/src/tab.js b/js/src/tab.js index 6f8187d17..c7bc520df 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -140,7 +140,7 @@ const Tab = (($) => { } dispose() { - $.removeClass(this._element, DATA_KEY) + $.removeData(this._element, DATA_KEY) this._element = null } diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index abc04e10a..489d400a6 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -156,4 +156,21 @@ $(function () { assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute') }) + QUnit.test('should handle disabled attribute on non-button elements', function (assert) { + assert.expect(2) + var groupHTML = ' <div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' + + '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' + + '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' + + '</label>' + + '</div>' + var $group = $(groupHTML).appendTo('#qunit-fixture') + + var $btn = $group.children().eq(0) + var $input = $btn.children().eq(0) + + $btn.trigger('click') + assert.ok($btn.is(':not(.active)'), 'button did not become active') + assert.ok(!$input.is(':checked'), 'checkbox did not get checked') + }) + }) diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index 35fcf2108..2b9d0e58f 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -491,27 +491,85 @@ $(function () { }) QUnit.test('should allow accordion to use children other than card', function (assert) { - assert.expect(2) + assert.expect(4) var done = assert.async() - var accordionHTML = '<div id="accordion" data-children=".item">' + var accordionHTML = '<div id="accordion">' + '<div class="item">' + '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>' + '</div>' + '<div class="item">' - + '<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' + '</div>' + '</div>' $(accordionHTML).appendTo('#qunit-fixture') - var $target = $('#linkTrigger') - $('#collapseOne').on('shown.bs.collapse', function () { - assert.ok($(this).hasClass('show')) - assert.ok(!$('#collapseTwo').hasClass('show')) - done() + var $trigger = $('#linkTrigger') + var $triggerTwo = $('#linkTriggerTwo') + var $collapseOne = $('#collapseOne') + var $collapseTwo = $('#collapseTwo') + $collapseOne.on('shown.bs.collapse', function () { + assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') + assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') + $collapseTwo.on('shown.bs.collapse', function () { + assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown') + assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown') + done() + }) + $triggerTwo.trigger($.Event('click')) }) - $target.trigger($.Event('click')) + $trigger.trigger($.Event('click')) + }) + + QUnit.test('should collapse accordion children but not nested accordion children', function (assert) { + assert.expect(9) + var done = assert.async() + $('<div id="accordion">' + + '<div class="item">' + + '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' + + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">' + + '<div id="nestedAccordion">' + + '<div class="item">' + + '<a id="nestedLinkTrigger" data-parent="#nestedAccordion" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' + + '<div id="nestedCollapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">' + + '</div>' + + '</div>' + + '</div>' + + '</div>' + + '</div>' + + '<div class="item">' + + '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' + + '</div>' + + '</div>').appendTo('#qunit-fixture') + var $trigger = $('#linkTrigger') + var $triggerTwo = $('#linkTriggerTwo') + var $nestedTrigger = $('#nestedLinkTrigger') + var $collapseOne = $('#collapseOne') + var $collapseTwo = $('#collapseTwo') + var $nestedCollapseOne = $('#nestedCollapseOne') + + + $collapseOne.one('shown.bs.collapse', function () { + assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') + assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') + assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown') + $nestedCollapseOne.one('shown.bs.collapse', function () { + assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') + assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') + assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown') + $collapseTwo.one('shown.bs.collapse', function () { + assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown') + assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown') + assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown') + done() + }) + $triggerTwo.trigger($.Event('click')) + }) + $nestedTrigger.trigger($.Event('click')) + }) + $trigger.trigger($.Event('click')) }) QUnit.test('should not prevent event for input', function (assert) { |
