rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

rewrite tab with new active shit

Browse Source
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 = {
A: 'a',
LI: 'li',
LI_DROPDOWN: 'li.dropdown',
DROPDOWN: '.dropdown',
UL: 'ul:not(.dropdown-menu)',
FADE_CHILD: '> .fade',
FADE_CHILD: '> .nav-item .fade, > .fade',
ACTIVE: '.active',
ACTIVE_CHILD: '> .active',
ACTIVE_CHILD: '> .nav-item > .active, > .active',
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() {
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;
}
@ -95,10 +96,6 @@ var Tab = (function ($) {
if (ulElement) {
previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
previous = previous[previous.length - 1];
if (previous) {
previous = $(previous).find(Selector.A)[0];
}
}
var hideEvent = $.Event(Event.HIDE, {
@ -123,7 +120,7 @@ var Tab = (function ($) {
target = $(selector)[0];
}
this._activate($(this._element).closest(Selector.LI)[0], ulElement);
this._activate(this._element, ulElement);
var complete = function complete() {
var hiddenEvent = $.Event(Event.HIDDEN, {
@ -178,22 +175,16 @@ var Tab = (function ($) {
$(active).removeClass(ClassName.ACTIVE);
var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];
if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE);
}
var activeToggle = $(active).find(Selector.DATA_TOGGLE)[0];
if (activeToggle) {
activeToggle.setAttribute('aria-expanded', false);
}
active.setAttribute('aria-expanded', false);
}
$(element).addClass(ClassName.ACTIVE);
var elementToggle = $(element).find(Selector.DATA_TOGGLE)[0];
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true);
}
element.setAttribute('aria-expanded', true);
if (isTransitioning) {
Util.reflow(element);
@ -204,15 +195,12 @@ var Tab = (function ($) {
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) {
$(dropdownElement).addClass(ClassName.ACTIVE);
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
}
elementToggle = $(element).find(Selector.DATA_TOGGLE)[0];
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true);
}
element.setAttribute('aria-expanded', true);
}
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 = {
A : 'a',
LI : 'li',
LI_DROPDOWN : 'li.dropdown',
DROPDOWN : '.dropdown',
UL : 'ul:not(.dropdown-menu)',
FADE_CHILD : '> .fade',
FADE_CHILD : '> .nav-item .fade, > .fade',
ACTIVE : '.active',
ACTIVE_CHILD : '> .active',
ACTIVE_CHILD : '> .nav-item > .active, > .active',
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() {
if (this._element.parentNode &&
(this._element.parentNode.nodeType === Node.ELEMENT_NODE) &&
($(this._element).parent().hasClass(ClassName.ACTIVE))) {
($(this._element).hasClass(ClassName.ACTIVE))) {
return
}
@ -90,10 +91,6 @@ const Tab = (($) => {
if (ulElement) {
previous = $.makeArray($(ulElement).find(Selector.ACTIVE))
previous = previous[previous.length - 1]
if (previous) {
previous = $(previous).find(Selector.A)[0]
}
}
let hideEvent = $.Event(Event.HIDE, {
@ -120,7 +117,7 @@ const Tab = (($) => {
}
this._activate(
$(this._element).closest(Selector.LI)[0],
this._element,
ulElement
)
@ -189,22 +186,16 @@ const Tab = (($) => {
let dropdownChild = $(active).find(
Selector.DROPDOWN_ACTIVE_CHILD
)[0]
if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE)
}
let activeToggle = $(active).find(Selector.DATA_TOGGLE)[0]
if (activeToggle) {
activeToggle.setAttribute('aria-expanded', false)
}
active.setAttribute('aria-expanded', false)
}
$(element).addClass(ClassName.ACTIVE)
let elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true)
}
element.setAttribute('aria-expanded', true)
if (isTransitioning) {
Util.reflow(element)
@ -216,15 +207,12 @@ const Tab = (($) => {
if (element.parentNode &&
($(element.parentNode).hasClass(ClassName.DROPDOWN_MENU))) {
let dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0]
let dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) {
$(dropdownElement).addClass(ClassName.ACTIVE)
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
}
elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]
if (elementToggle) {
elementToggle.setAttribute('aria-expanded', true)
}
element.setAttribute('aria-expanded', true)
}
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) {
assert.expect(8)
var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li class="active"><a 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 active" href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
+ '<li><a class="nav-item" href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
+ '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$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('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$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('li:not(.active) a').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
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')
assert.strictEqual($tabs.find('.active a').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('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$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('li:not(.active) a').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
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>
<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="dropdown nav-item">
<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">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<a class="dropdown-item" href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a>
<a class="dropdown-item" href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
@ -67,14 +67,14 @@
<h4>Tabs with fade</h4>
<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="dropdown nav-item">
<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">
<li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
<a class="dropdown-item" href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a>
<a class="dropdown-item" href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a>
</div>
</li>
</ul>
<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="dropdown nav-item">
<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">
<li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
<a class="dropdown-item" href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
<a class="dropdown-item" href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
</div>
</li>
</ul>
<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="dropdown nav-item">
<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">
<li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
<a class="dropdown-item" href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a>
<a class="dropdown-item" href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a>
</div>
</li>
</ul>
<div id="myTabContent3" class="tab-content">