Skip to content

Commit

Permalink
fix(tab): added orange brand example
Browse files Browse the repository at this point in the history 
adding arria and minding right left up down and tab
  • Loading branch information
gildas bescond committed Jan 14, 2016
1 parent 515b878 commit 67622af
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 1 deletion.
88 changes: 87 additions & 1 deletion js/src/tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Util from './util'
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/

var test ;
const Tab = (($) => {


Expand Down Expand Up @@ -146,10 +146,48 @@ const Tab = (($) => {
this._element = null
}

static _keydown(e) {
console.log('keydown!');
var $this = $(this)
, $items
, $ul = $this.closest('ul[role=tablist] ')
, index
, k = e.which || e.keyCode

$this = $(this)
if (!/(37|38|39|40)/.test(k)) return

$items = $ul.find('[role=tab]:visible')
index = $items.index($items.filter(':focus'))

if (k == 38 || k == 37) index-- // up & left
if (k == 39 || k == 40) index++ // down & right


if(index < 0) index = $items.length -1
if(index == $items.length) index = 0

var nextTab = $items.eq(index)
if(nextTab.attr('role') ==='tab'){

nextTab.tab('show') //Comment this line for dynamically loaded tabPabels, to save Ajax requests on arrow key navigation
.focus()
}
// nextTab.focus()

e.preventDefault()
e.stopPropagation()
}

// private

_activate(element, container, callback) {
console.log('activate');
//--- rajout
var $active = $(container).find('> .active')
$active.find('[data-toggle=tab], [data-toggle=pill]').attr({ 'tabIndex' : '-1','aria-selected' : false })
$active.filter('.tab-pane').attr({ 'aria-hidden' : true,'tabIndex' : '-1' })
//---
let active = $(container).find(Selector.ACTIVE_CHILD)[0]
let isTransitioning = callback
&& Util.supportsTransitionEnd()
Expand Down Expand Up @@ -177,6 +215,14 @@ const Tab = (($) => {
if (active) {
$(active).removeClass(ClassName.IN)
}

if (element.tagName == 'A')
{
// $(container).find('[data-toggle=tab], [data-toggle=pill]').attr({ 'tabIndex' : '0','aria-selected' : true }).focus() // (DOESN'T WORK ?)
$('#'+element.id).attr({ 'tabIndex' : '0','aria-selected' : true }).focus()
}
$(element).filter('.tab-pane.active').attr({ 'aria-hidden' : false,'tabIndex' : '0' })

}

_transitionComplete(element, active, isTransitioning, callback) {
Expand Down Expand Up @@ -218,6 +264,7 @@ const Tab = (($) => {
if (callback) {
callback()
}

}


Expand Down Expand Up @@ -258,12 +305,51 @@ const Tab = (($) => {
})


$(document)
.on('keydown.tab.data-api','[data-toggle="tab"], [data-toggle="pill"]' , function (event) {
if (!/(38|40|39|37)/.test(event.which)) {
return
}
event.preventDefault()
Tab._keydown.call($(this), event)
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
// ajout de l'accesibilité
// ===============================


var uniqueId = function(prefix) {
return (prefix || 'ui-id') + '-' + Math.floor((Math.random()*1000)+1)
}

var $tablist = $('.nav-tabs, .nav-pills')
, $lis = $tablist.children('li')
, $tabs = $tablist.find('[data-toggle="tab"], [data-toggle="pill"]')

$tablist.attr('role', 'tablist')
$lis.attr('role', 'presentation')
$tabs.attr('role', 'tab')

$tabs.each(function( index ) {
var tabpanel = $($(this).attr('href'))
, tab = $(this)
, tabid = tab.attr('id') || uniqueId('ui-tab')

tab.attr('id', tabid)

if(tab.hasClass('active')){
tab.attr( { 'tabIndex' : '0', 'aria-selected' : 'true', 'aria-controls': tab.attr('href').substr(1) } )
tabpanel.attr({ 'role' : 'tabpanel', 'tabIndex' : '0', 'aria-hidden' : 'false', 'aria-labelledby':tabid })
}else{
tab.attr( { 'tabIndex' : '-1', 'aria-selected' : 'false', 'aria-controls': tab.attr('href').substr(1) } )
tabpanel.attr( { 'role' : 'tabpanel', 'tabIndex' : '-1', 'aria-hidden' : 'true', 'aria-labelledby':tabid } )
}
})

$.fn[NAME] = Tab._jQueryInterface
$.fn[NAME].Constructor = Tab
$.fn[NAME].noConflict = function () {
Expand Down
4 changes: 4 additions & 0 deletions js/tests/visual/tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ <h4>Tabs without fade</h4>
<ul id="myTab" class="nav nav-tabs">
<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="#message" data-toggle="tab" class="nav-link">Message</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>
<div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
Expand All @@ -46,6 +47,9 @@ <h4>Tabs without fade</h4>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane" id="message">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
<div class="tab-pane" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
Expand Down

0 comments on commit 67622af

Please sign in to comment.