Skip to content
Permalink
Browse files

Tabs: Style updates

  • Loading branch information...
arschmitz committed Aug 21, 2015
1 parent 913afd5 commit 21400d1cb22c2d2385ea2cdeea1c6f5fe7f2e4ab
@@ -22,7 +22,7 @@
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
// Modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
@@ -40,14 +40,14 @@
}
});
// addTab form: calls addTab function on submit and closes the dialog
// AddTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).on( "submit", function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
// Actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
@@ -60,14 +60,14 @@
tabCounter++;
}
// addTab button: just opens the dialog
// AddTab button: just opens the dialog
$( "#add_tab" )
.button()
.on( "click", function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
// Close icon: removing the tab on click
tabs.on( "click", "span.ui-icon-close", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
@@ -19,7 +19,7 @@ common.testWidget( "tabs", {
hide: null,
show: null,

// callbacks
// Callbacks
activate: null,
beforeActivate: null,
beforeLoad: null,
@@ -191,7 +191,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
tabs.eq( 0 ).simulate( "focus" );

// down, right, down (wrap), up (wrap)
// Down, right, down (wrap), up (wrap)
function step1() {
assert.hasClasses( tabs.eq( 0 ), "ui-state-focus", "first tab has focus" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
@@ -242,7 +242,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
setTimeout( step2, 25 );
}

// left, home, space
// Left, home, space
function step2() {
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
@@ -280,7 +280,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
setTimeout( step3 );
}

// end, enter
// End, enter
function step3() {
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
@@ -307,7 +307,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
setTimeout( step4 );
}

// enter (collapse)
// Enter (collapse)
function step4() {
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
@@ -347,7 +347,7 @@ $.each({
equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
tabs.eq( 0 ).simulate( "focus" );

// down
// Down
function step1() {
var eventProperties = { keyCode: keyCode.DOWN };
eventProperties[ modifier + "Key" ] = true;
@@ -371,7 +371,7 @@ $.each({
setTimeout( step2, 25 );
}

// right
// Right
function step2() {
var eventProperties = { keyCode: keyCode.RIGHT };
eventProperties[ modifier + "Key" ] = true;
@@ -398,7 +398,7 @@ $.each({
setTimeout( step3, 25 );
}

// down (wrap)
// Down (wrap)
function step3() {
var eventProperties = { keyCode: keyCode.DOWN };
eventProperties[ modifier + "Key" ] = true;
@@ -421,7 +421,7 @@ $.each({
setTimeout( step4, 25 );
}

// up (wrap)
// Up (wrap)
function step4() {
var eventProperties = { keyCode: keyCode.UP };
eventProperties[ modifier + "Key" ] = true;
@@ -445,7 +445,7 @@ $.each({
setTimeout( step5, 25 );
}

// left
// Left
function step5() {
var eventProperties = { keyCode: keyCode.LEFT };
eventProperties[ modifier + "Key" ] = true;
@@ -472,7 +472,7 @@ $.each({
setTimeout( step6, 25 );
}

// home
// Home
function step6() {
var eventProperties = { keyCode: keyCode.HOME };
eventProperties[ modifier + "Key" ] = true;
@@ -499,7 +499,7 @@ $.each({
setTimeout( step7, 25 );
}

// end
// End
function step7() {
var eventProperties = { keyCode: keyCode.END };
eventProperties[ modifier + "Key" ] = true;
@@ -523,7 +523,7 @@ $.each({
setTimeout( step8, 25 );
}

// space
// Space
function step8() {
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
@@ -58,7 +58,7 @@ test( "beforeActivate", function() {
anchors = tabs.find( ".ui-tabs-anchor" ),
panels = element.find( ".ui-tabs-panel" );

// from collapsed
// From collapsed
element.one( "tabsbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ), "originalEvent" );
equal( ui.oldTab.length, 0, "oldTab length" );
@@ -72,7 +72,7 @@ test( "beforeActivate", function() {
element.tabs( "option", "active", 0 );
state( element, 1, 0, 0 );

// switching tabs
// Switching tabs
element.one( "tabsbeforeactivate", function( event, ui ) {
equal( event.originalEvent.type, "click", "originalEvent" );
equal( ui.oldTab.length, 1, "oldTab length" );
@@ -88,7 +88,7 @@ test( "beforeActivate", function() {
anchors.eq( 1 ).trigger( "click" );
state( element, 0, 1, 0 );

// collapsing
// Collapsing
element.one( "tabsbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ), "originalEvent" );
equal( ui.oldTab.length, 1, "oldTab length" );
@@ -102,7 +102,7 @@ test( "beforeActivate", function() {
element.tabs( "option", "active", false );
state( element, 0, 0, 0 );

// prevent activation
// Prevent activation
element.one( "tabsbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ), "originalEvent" );
equal( ui.oldTab.length, 0, "oldTab length" );
@@ -129,7 +129,7 @@ test( "activate", function() {
anchors = element.find( ".ui-tabs-anchor" ),
panels = element.find( ".ui-tabs-panel" );

// from collapsed
// From collapsed
element.one( "tabsactivate", function( event, ui ) {
ok( !( "originalEvent" in event ), "originalEvent" );
equal( ui.oldTab.length, 0, "oldTab length" );
@@ -143,7 +143,7 @@ test( "activate", function() {
element.tabs( "option", "active", 0 );
state( element, 1, 0, 0 );

// switching tabs
// Switching tabs
element.one( "tabsactivate", function( event, ui ) {
equal( event.originalEvent.type, "click", "originalEvent" );
equal( ui.oldTab.length, 1, "oldTab length" );
@@ -159,7 +159,7 @@ test( "activate", function() {
anchors.eq( 1 ).trigger( "click" );
state( element, 0, 1, 0 );

// collapsing
// Collapsing
element.one( "tabsactivate", function( event, ui ) {
ok( !( "originalEvent" in event ), "originalEvent" );
equal( ui.oldTab.length, 1, "oldTab length" );
@@ -173,7 +173,7 @@ test( "activate", function() {
element.tabs( "option", "active", false );
state( element, 0, 0, 0 );

// prevent activation
// Prevent activation
element.one( "tabsbeforeactivate", function( event ) {
ok( true, "tabsbeforeactivate" );
event.preventDefault();
@@ -190,7 +190,7 @@ test( "beforeLoad", function() {
var tab, panelId, panel,
element = $( "#tabs2" );

// init
// Init
element.one( "tabsbeforeload", function( event, ui ) {
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
panelId = tab.attr( "aria-controls" );
@@ -234,7 +234,7 @@ test( "beforeLoad", function() {
state( element, 0, 0, 1, 0, 0 );
equal( panel.html(), "", "panel html after" );

// click, change panel content
// Click, change panel content
element.one( "tabsbeforeload", function( event, ui ) {
tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
panelId = tab.attr( "aria-controls" );
@@ -263,7 +263,7 @@ asyncTest( "load", function() {
var tab, panelId, panel,
element = $( "#tabs2" );

// init
// Init
element.one( "tabsload", function( event, ui ) {
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
panelId = tab.attr( "aria-controls" );
@@ -110,27 +110,27 @@ test( "refresh", function() {
state( element, 1, 0, 0 );
disabled( element, false );

// disable tab via markup
// Disable tab via markup
element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" );
element.tabs( "refresh" );
state( element, 1, 0, 0 );
disabled( element, [ 1 ] );

// add remote tab
// Add remote tab
element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" );
element.tabs( "refresh" );
state( element, 1, 0, 0, 0 );
disabled( element, [ 1 ] );
equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1,
"panel added for remote tab" );

// remove all tabs
// Remove all tabs
element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove();
element.tabs( "refresh" );
state( element );
equal( element.tabs( "option", "active" ), false, "no active tab" );

// add tabs
// Add tabs
element.find( ".ui-tabs-nav" )
.append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" )
.append( "<li><a href='#newTab3'>new 3</a></li>" )
@@ -145,26 +145,26 @@ test( "refresh", function() {
state( element, 0, 0, 0, 0 );
disabled( element, [ 0 ] );

// activate third tab
// Activate third tab
element.tabs( "option", "active", 2 );
state( element, 0, 0, 1, 0 );
disabled( element, [ 0 ] );

// remove fourth tab, third tab should stay active
// Remove fourth tab, third tab should stay active
element.find( ".ui-tabs-nav li" ).eq( 3 ).remove();
element.find( ".ui-tabs-panel" ).eq( 3 ).remove();
element.tabs( "refresh" );
state( element, 0, 0, 1 );
disabled( element, [ 0 ] );

// remove third (active) tab, second tab should become active
// Remove third (active) tab, second tab should become active
element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
element.find( ".ui-tabs-panel" ).eq( 2 ).remove();
element.tabs( "refresh" );
state( element, 0, 1 );
disabled( element, [ 0 ] );

// remove first tab, previously active tab (now first) should stay active
// Remove first tab, previously active tab (now first) should stay active
element.find( ".ui-tabs-nav li" ).eq( 0 ).remove();
element.find( ".ui-tabs-panel" ).eq( 0 ).remove();
element.tabs( "refresh" );
@@ -182,7 +182,7 @@ test( "refresh - looping", function() {
state( element, 0, 1, 0 );
disabled( element, [ 0 ] );

// remove active, jump to previous
// Remove active, jump to previous
// previous is disabled, just back one more
// reached first tab, move to end
// activate last tab
@@ -197,7 +197,7 @@ asyncTest( "load", function() {

var element = $( "#tabs2" ).tabs();

// load content of inactive tab
// Load content of inactive tab
// useful for preloading content with custom caching
element.one( "tabsbeforeload", function( event, ui ) {
var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),

0 comments on commit 21400d1

Please sign in to comment.
You can’t perform that action at this time.