root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

rewrite tab with new active shit

This commit is contained in:
Jacob Thornton 2015-08-18 22:03:34 -07:00
parent 4e45e2363c
commit 03e732708c
5 changed files with 55 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/dist/tab.js vendored
View File

@ -45,13 +45,14 @@ var Tab = (function ($) {
var Selector = { var Selector = {
A: 'a', A: 'a',
LI: 'li', LI: 'li',
LI_DROPDOWN: 'li.dropdown', DROPDOWN: '.dropdown',
UL: 'ul:not(.dropdown-menu)', UL: 'ul:not(.dropdown-menu)',
FADE_CHILD: '> .fade', FADE_CHILD: '> .nav-item .fade, > .fade',
ACTIVE: '.active', ACTIVE: '.active',
ACTIVE_CHILD: '> .active', ACTIVE_CHILD: '> .nav-item > .active, > .active',
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]', DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu > .active' DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
}; };
/** /**
@ -83,7 +84,7 @@ var Tab = (function ($) {
value: function show() { value: function show() {
var _this = this; var _this = this;
if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).parent().hasClass(ClassName.ACTIVE)) { if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE)) {
return; return;
} }
@ -95,10 +96,6 @@ var Tab = (function ($) {
if (ulElement) { if (ulElement) {
previous = $.makeArray($(ulElement).find(Selector.ACTIVE)); previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
previous = previous[previous.length - 1]; previous = previous[previous.length - 1];
if (previous) {
previous = $(previous).find(Selector.A)[0];
}
} }
var hideEvent = $.Event(Event.HIDE, { var hideEvent = $.Event(Event.HIDE, {
@ -123,7 +120,7 @@ var Tab = (function ($) {
target = $(selector)[0]; target = $(selector)[0];
} }
this._activate($(this._element).closest(Selector.LI)[0], ulElement); this._activate(this._element, ulElement);
var complete = function complete() { var complete = function complete() {
var hiddenEvent = $.Event(Event.HIDDEN, { var hiddenEvent = $.Event(Event.HIDDEN, {
@ -178,22 +175,16 @@ var Tab = (function ($) {
$(active).removeClass(ClassName.ACTIVE); $(active).removeClass(ClassName.ACTIVE);
var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0]; var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];
if (dropdownChild) { if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE); $(dropdownChild).removeClass(ClassName.ACTIVE);
} }
var activeToggle = $(active).find(Selector.DATA_TOGGLE)[0]; active.setAttribute('aria-expanded', false);
if (activeToggle) {
activeToggle.setAttribute('aria-expanded', false);
}
} }
$(element).addClass(ClassName.ACTIVE); $(element).addClass(ClassName.ACTIVE);
element.setAttribute('aria-expanded', true);
var elementToggle = $(element).find(Selector.DATA_TOGGLE)[0];
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true);
}
if (isTransitioning) { if (isTransitioning) {
Util.reflow(element); Util.reflow(element);
@ -204,15 +195,12 @@ var Tab = (function ($) {
if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
var dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0]; var dropdownElement = $(element).closest(Selector.DROPDOWN)[0];
if (dropdownElement) { if (dropdownElement) {
$(dropdownElement).addClass(ClassName.ACTIVE); $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
} }
elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]; element.setAttribute('aria-expanded', true);
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true);
}
} }
if (callback) { if (callback) {

2
js/dist/tab.js.map vendored
View File

File diff suppressed because one or more lines are too long

38
js/src/tab.js
View File

@ -43,13 +43,14 @@ const Tab = (($) => {
const Selector = { const Selector = {
A : 'a', A : 'a',
LI : 'li', LI : 'li',
LI_DROPDOWN : 'li.dropdown', DROPDOWN : '.dropdown',
UL : 'ul:not(.dropdown-menu)', UL : 'ul:not(.dropdown-menu)',
FADE_CHILD : '> .fade', FADE_CHILD : '> .nav-item .fade, > .fade',
ACTIVE : '.active', ACTIVE : '.active',
ACTIVE_CHILD : '> .active', ACTIVE_CHILD : '> .nav-item > .active, > .active',
DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]', DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]',
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu > .active' DROPDOWN_TOGGLE : '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
} }
@ -78,7 +79,7 @@ const Tab = (($) => {
show() { show() {
if (this._element.parentNode && if (this._element.parentNode &&
(this._element.parentNode.nodeType === Node.ELEMENT_NODE) && (this._element.parentNode.nodeType === Node.ELEMENT_NODE) &&
($(this._element).parent().hasClass(ClassName.ACTIVE))) { ($(this._element).hasClass(ClassName.ACTIVE))) {
return return
} }
@ -90,10 +91,6 @@ const Tab = (($) => {
if (ulElement) { if (ulElement) {
previous = $.makeArray($(ulElement).find(Selector.ACTIVE)) previous = $.makeArray($(ulElement).find(Selector.ACTIVE))
previous = previous[previous.length - 1] previous = previous[previous.length - 1]
if (previous) {
previous = $(previous).find(Selector.A)[0]
}
} }
let hideEvent = $.Event(Event.HIDE, { let hideEvent = $.Event(Event.HIDE, {
@ -120,7 +117,7 @@ const Tab = (($) => {
} }
this._activate( this._activate(
$(this._element).closest(Selector.LI)[0], this._element,
ulElement ulElement
) )
@ -189,22 +186,16 @@ const Tab = (($) => {
let dropdownChild = $(active).find( let dropdownChild = $(active).find(
Selector.DROPDOWN_ACTIVE_CHILD Selector.DROPDOWN_ACTIVE_CHILD
)[0] )[0]
if (dropdownChild) { if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE) $(dropdownChild).removeClass(ClassName.ACTIVE)
} }
let activeToggle = $(active).find(Selector.DATA_TOGGLE)[0] active.setAttribute('aria-expanded', false)
if (activeToggle) {
activeToggle.setAttribute('aria-expanded', false)
}
} }
$(element).addClass(ClassName.ACTIVE) $(element).addClass(ClassName.ACTIVE)
element.setAttribute('aria-expanded', true)
let elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true)
}
if (isTransitioning) { if (isTransitioning) {
Util.reflow(element) Util.reflow(element)
@ -216,15 +207,12 @@ const Tab = (($) => {
if (element.parentNode && if (element.parentNode &&
($(element.parentNode).hasClass(ClassName.DROPDOWN_MENU))) { ($(element.parentNode).hasClass(ClassName.DROPDOWN_MENU))) {
let dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0] let dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) { if (dropdownElement) {
$(dropdownElement).addClass(ClassName.ACTIVE) $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
} }
elementToggle = $(element).find(Selector.DATA_TOGGLE)[0] element.setAttribute('aria-expanded', true)
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true)
}
} }
if (callback) { if (callback) {

20
js/tests/unit/tab.js
View File

@ -191,26 +191,26 @@ $(function () {
QUnit.test('selected tab should have aria-expanded', function (assert) { QUnit.test('selected tab should have aria-expanded', function (assert) {
assert.expect(8) assert.expect(8)
var tabsHTML = '<ul class="nav nav-tabs">' var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li class="active"><a href="#home" toggle="tab" aria-expanded="true">Home</a></li>' + '<li><a class="nav-item active" href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
+ '<li><a href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>' + '<li><a class="nav-item" href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
+ '</ul>' + '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first a').bootstrapTab('show') $tabs.find('li:first a').bootstrapTab('show')
assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true') assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$tabs.find('li:last a').trigger('click') $tabs.find('li:last a').trigger('click')
assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true') assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
$tabs.find('li:first a').bootstrapTab('show') $tabs.find('li:first a').bootstrapTab('show')
assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true') assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$tabs.find('li:first a').trigger('click') $tabs.find('li:first a').trigger('click')
assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true') assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
}) })
}) })

36
js/tests/visual/tab.html
View File

@ -35,14 +35,14 @@
<h4>Tabs without fade</h4> <h4>Tabs without fade</h4>
<ul id="myTab" class="nav nav-tabs"> <ul id="myTab" class="nav nav-tabs">
<li class="active nav-item"><a href="#home" class="nav-link" data-toggle="tab">Home</a></li> <li class="nav-item"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
<li class="nav-item"><a href="#profile" data-toggle="tab" class="nav-link">Profile</a></li> <li class="nav-item"><a href="#profile" data-toggle="tab" class="nav-link">Profile</a></li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" id="myTabDrop1" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop1" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <a class="dropdown-item" href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> <a class="dropdown-item" href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a>
</ul> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div id="myTabContent" class="tab-content">
@ -67,14 +67,14 @@
<h4>Tabs with fade</h4> <h4>Tabs with fade</h4>
<ul id="myTab1" class="nav nav-tabs"> <ul id="myTab1" class="nav nav-tabs">
<li class="active nav-item"><a class="nav-link" href="#home1" data-toggle="tab">Home</a></li> <li class="nav-item"><a class="nav-link active" href="#home1" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#profile1" data-toggle="tab">Profile</a></li> <li class="nav-item"><a class="nav-link" href="#profile1" data-toggle="tab">Profile</a></li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" id="myTabDrop2" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop2" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2"> <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
<li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li> <a class="dropdown-item" href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a>
<li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li> <a class="dropdown-item" href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a>
</ul> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent1" class="tab-content"> <div id="myTabContent1" class="tab-content">
@ -103,10 +103,10 @@
<li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li> <li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" id="myTabDrop3" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop3" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3"> <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
<li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li> <a class="dropdown-item" href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
<li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li> <a class="dropdown-item" href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
</ul> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent2" class="tab-content"> <div id="myTabContent2" class="tab-content">
@ -135,10 +135,10 @@
<li class="nav-item"><a class="nav-link" href="#profile3" data-toggle="tab">Profile</a></li> <li class="nav-item"><a class="nav-link" href="#profile3" data-toggle="tab">Profile</a></li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" id="myTabDrop4" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop4" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4"> <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
<li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li> <a class="dropdown-item" href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a>
<li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li> <a class="dropdown-item" href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a>
</ul> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent3" class="tab-content"> <div id="myTabContent3" class="tab-content">