Skip to content

B
bootstrap
Commit 03e73270 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

rewrite tab with new active shit

parent 4e45e236
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 78 deletions
js/dist/tab.js
View file @ 03e73270
......@@ -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) {
......
js/dist/tab.js.map
View file @ 03e73270
This diff was suppressed by a .gitattributes entry.
js/src/tab.js
View file @ 03e73270
......@@ -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) {
......
js/tests/unit/tab.js
View file @ 03e73270
......@@ -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')
})
})
js/tests/visual/tab.html
View file @ 03e73270
......@@ -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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment