diff options
| author | gnarf <gnarf@gnarf.net> | 2011-05-01 05:12:17 -0500 |
|---|---|---|
| committer | gnarf <gnarf@gnarf.net> | 2011-05-01 05:12:17 -0500 |
| commit | 4a4d7e4b7392d86944c06e2ec98feef9501f9731 (patch) | |
| tree | 4be04eaa5e0cc6229cc16ccfd8235ca061a94c0e | |
| parent | d6379d11e3c336354b880603b2bfce81ef0b127d (diff) | |
| parent | fe3b36b8efcabf3d1f1d60523cae87c69a882f27 (diff) | |
| download | jquery-ui-4a4d7e4b7392d86944c06e2ec98feef9501f9731.tar.gz jquery-ui-4a4d7e4b7392d86944c06e2ec98feef9501f9731.zip | |
Merge branch 'master' into effects-unit
96 files changed, 3500 insertions, 2721 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 56e4aa021..ded809e1e 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -112,6 +112,9 @@ return; } + // work around a bug (likely same cause as #5265) + $( this ).blur(); + // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); diff --git a/demos/demos.css b/demos/demos.css index 2d2ce1fc8..f5f2dbe64 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -320,10 +320,10 @@ div.demo-description { #widget-docs .ui-tabs-nav li a:hover, #widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; } -#widget-docs .ui-tabs-nav li.ui-tabs-selected a:link, -#widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited, -#widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover, -#widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color:#e6820E; } +#widget-docs .ui-tabs-nav li.ui-tabs-active a:link, +#widget-docs .ui-tabs-nav li.ui-tabs-active a:visited, +#widget-docs .ui-tabs-nav li.ui-tabs-active a:hover, +#widget-docs .ui-tabs-nav li.ui-tabs-active a:active { color:#e6820E; } #widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; } diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index c62625791..407914589 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -12,12 +12,12 @@ <script> $(function() { $( "#tabs" ).tabs({ - ajaxOptions: { - error: function( xhr, status, index, anchor ) { - $( anchor.hash ).html( + beforeLoad: function( event, ui ) { + ui.jqXHR.error(function() { + ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); - } + }); } }); }); diff --git a/demos/tabs/bottom.html b/demos/tabs/bottom.html index 4f0e3c2a4..68ccac902 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -23,7 +23,6 @@ .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; } - .ui-tabs-selected { margin-top: -3px !important; } </style> </head> <body> diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html index ba8196d71..c3e882791 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -13,7 +13,13 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" }); + var tabs = $( "#tabs" ).tabs(); + tabs.find( ".ui-tabs-nav" ).sortable({ + axis: "x", + stop: function() { + tabs.tabs( "refresh" ); + } + }); }); </script> </head> diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html index 4ddb5c9c9..690f03420 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -20,7 +20,7 @@ .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } - .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } + .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style> </head> diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index a9d0df66e..a9745a062 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -11,12 +11,15 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { + // TODO overhaul this with custom animation API $(".demo").tooltip({ open: function() { - $(this).tooltip("widget").stop(false, true).hide().slideDown(); + $(".ui-tooltip").stop(false, true).hide().slideDown(); }, close: function() { - $(this).tooltip("widget").stop(false, true).show().slideUp(); + $(".ui-tooltip").stop(false, false).show().slideUp(function() { + $(this).remove(); + }); } }); }); diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index 6bc9c1e5c..3563350c5 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -14,6 +14,7 @@ <li><a href="tracking.html">Track the mouse</a></li> <li><a href="custom-animation.html">Custom animation</a></li> <li><a href="delegation-mixbag.html">Delegation Mixbag</a></li> + <li><a href="lots.html">Lots</a></li> </ul> </div> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index e3bb19e74..dd5dc9d92 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -13,12 +13,11 @@ $(function() { $(".demo").tooltip({ open: function() { - var tooltip = $(this).tooltip("widget"); - $(document).mousemove(function(event) { - tooltip.position({ - my: "left center", - at: "right center", - offset: "25 25", + var tooltip = $( ".ui-tooltip" ); + $(document).mousemove(function( event ) { + tooltip.position( { + my: "left+25 center", + at: "right+25 center", of: event }); }) @@ -26,7 +25,7 @@ .mousemove(); }, close: function() { - $(document).unbind("mousemove"); + $(document).unbind( "mousemove" ); } }); }); diff --git a/tests/static/menu/all-menus-icons.html b/tests/static/menu/all-menus-icons.html deleted file mode 100644 index e780a2398..000000000 --- a/tests/static/menu/all-menus-icons.html +++ /dev/null @@ -1,172 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Menu Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../static.js"></script> - - <script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script> - <script> - $(document).ready(function(){ - $('#switcher').themeswitcher(); - }); - </script> - - - - <style type="text/css"> -/* styles for this page only */ -.ui-menu { width: 200px; } -#flyout .ui-menu { position: relative; } -#flyout .ui-menu.ui-menu-icons { position: absolute; } - -.ui-menu.ui-menu-icons { position: relative; } -.ui-menu.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; } - -/* left-aligned icon */ -.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } - -/* right-aligned icon */ -.ui-menu .ui-icon.ui-menu-icon { position: static; float: right; } - </style> - -</head> -<body> - -<div id="switcher" style="position: absolute; top: 20px; right: 20px;"></div> - - -<!-- NOTES: - -* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu - ---> - - -<h2>Default</h2> - -<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom"> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> - <li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-scissors"></span>Addyston really long menu option to show wrap</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-wrench"></span>Adelphi</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-star"></span>Adena</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li> -</ul> - -<br /><br /> - -<div id="drilldown"> - -<h2>Drilldown</h2> - -<ul role="listbox" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"> - <a href="#" tabindex="-1" class="ui-state-hover ui-corner-all"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Amsterdam</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Cologne</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Frankfurt</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-star"></span>Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-heart"></span>Cologne</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-key"></span>Frankfurt</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a> - <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Munich</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Utrecht</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li> -</ul> - -</div> - -<br /><br /> - -<div id="flyout"> - -<h2>Flyout / nested</h2> - -<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" id="menu"> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-scissors"></span>Amsterdam</a> - <ul style="display: block; top: 88.5px; left: 205px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a> - <ul style="display: block; top: 73px; left: -11px; z-index: 9999;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-corner-all" href="#">Cologne</a> - <ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-state-hover ui-corner-all" href="#">Frankfurt</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-pencil"></span>Cologne</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clock"></span>Frankfurt</a></li> - <li role="menuitem" class="ui-menu-item"> - <a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a> - <ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li> - </ul> - </li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-lightbulb"></span>Munich</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clipboard"></span>Utrecht</a></li> - <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li> -</ul> - -</div> - - -</body> -</html> diff --git a/tests/static/menu/default.html b/tests/static/menu/default.html deleted file mode 100644 index dd1e0ba7d..000000000 --- a/tests/static/menu/default.html +++ /dev/null @@ -1,39 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Menu Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../static.js"></script> - -</head> -<body> - - -<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-widget ui-widget-content ui-corner-bottom"> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Aberdeen</a></li> - <li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Addyston</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adelphi</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adena</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alexandria</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alger</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alledonia</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alliance</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alpha</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvada</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvordton</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amanda</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amelia</a></li> - <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amesville</a></li> -</ul> - -</body> -</html> diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 65fd16ab6..c260ef22f 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,7 +20,7 @@ <script src="../testsuite.js"></script> <script> - function state( accordion ) { + function accordion_state( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ); var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; @@ -54,7 +54,6 @@ <script src="accordion_events.js"></script> <script src="accordion_methods.js"></script> <script src="accordion_options.js"></script> - <script src="accordion_tickets.js"></script> <script src="../swarminject.js"></script> <style> @@ -130,8 +129,8 @@ <li> <h2><a href="?p=1.1.3">Drums</a></h2> <ul> - <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> - <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.2">Acoustic</a></li> + <li><a href="?p=1.1.3.3">Electronic</a></li> <li><a href="?p=1.1.3.6">Accessories</a></li> </ul> </li> diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 05479faf9..280339c26 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -4,46 +4,46 @@ module( "accordion: core", accordionSetupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { test( "markup structure: " + type, function() { - var ac = $( selector ).accordion(); - ok( ac.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( ac.find( ".ui-accordion-header" ).length, 3, + var element = $( selector ).accordion(); + ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); + equal( element.find( ".ui-accordion-header" ).length, 3, ".ui-accordion-header elements exist, correct number" ); - equal( ac.find( ".ui-accordion-content" ).length, 3, + equal( element.find( ".ui-accordion-content" ).length, 3, ".ui-accordion-content elements exist, correct number" ); - same( ac.find( ".ui-accordion-header" ).next().get(), - ac.find( ".ui-accordion-content" ).get(), + same( element.find( ".ui-accordion-header" ).next().get(), + element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); }); }); test( "handle click on header-descendant", function() { - var ac = $( "#navigation" ).accordion(); + var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); test( "ui-accordion-heading class added to headers anchor", function() { expect( 1 ); - var ac = $( "#list1" ).accordion(); - var anchors = $( ".ui-accordion-heading" ); + var element = $( "#list1" ).accordion(); + var anchors = element.find( ".ui-accordion-heading" ); equals( anchors.length, 3 ); }); test( "accessibility", function () { expect( 13 ); - var ac = $( "#list1" ).accordion().accordion( "option", "active", 1 ); - var headers = $( ".ui-accordion-header" ); + var element = $( "#list1" ).accordion().accordion( "option", "active", 1 ); + var headers = element.find( ".ui-accordion-header" ); equals( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); equals( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); - equals( ac.attr( "role" ), "tablist", "main role" ); + equals( element.attr( "role" ), "tablist", "main role" ); equals( headers.attr( "role" ), "tab", "tab roles" ); equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); - ac.accordion( "option", "active", 0 ); + element.accordion( "option", "active", 0 ); equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); diff --git a/tests/unit/accordion/accordion_defaults.js b/tests/unit/accordion/accordion_defaults.js index 95a478057..9aa58e650 100644 --- a/tests/unit/accordion/accordion_defaults.js +++ b/tests/unit/accordion/accordion_defaults.js @@ -10,6 +10,11 @@ commonWidgetTests( "accordion", { icons: { "activeHeader": "ui-icon-triangle-1-s", "header": "ui-icon-triangle-1-e" - } + }, + + // callbacks + activate: null, + beforeActivate: null, + create: null } }); diff --git a/tests/unit/accordion/accordion_defaults_deprecated.js b/tests/unit/accordion/accordion_defaults_deprecated.js index b90b472e2..3f45a1f10 100644 --- a/tests/unit/accordion/accordion_defaults_deprecated.js +++ b/tests/unit/accordion/accordion_defaults_deprecated.js @@ -16,6 +16,13 @@ commonWidgetTests( "accordion", { "headerSelected": "ui-icon-triangle-1-s" }, navigation: false, - navigationFilter: function() {} + navigationFilter: function() {}, + + // callbacks + activate: null, + beforeActivate: null, + change: null, + changestart: null, + create: null } }); diff --git a/tests/unit/accordion/accordio.html b/tests/unit/accordion/accordion_deprecated.html index 4e4df72b4..e8254f4f3 100644 --- a/tests/unit/accordion/accordio.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,7 +17,7 @@ <script src="../testsuite.js"></script> <script> - function state( accordion ) { + function accordion_state( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ); var actual = accordion.find( ".ui-accordion-content" ).map(function() { return $( this ).css( "display" ) === "none" ? 0 : 1; @@ -51,7 +51,6 @@ <script src="accordion_events.js"></script> <script src="accordion_methods.js"></script> <script src="accordion_options.js"></script> - <script src="accordion_tickets.js"></script> <script src="accordion_deprecated.js"></script> <script src="../swarminject.js"></script> @@ -128,8 +127,8 @@ <li> <h2><a href="?p=1.1.3">Drums</a></h2> <ul> - <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> - <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.2">Acoustic</a></li> + <li><a href="?p=1.1.3.3">Electronic</a></li> <li><a href="?p=1.1.3.6">Accessories</a></li> </ul> </li> diff --git a/tests/unit/accordion/accordion_deprecated.js b/tests/unit/accordion/accordion_deprecated.js index 636404d18..0435f48a7 100644 --- a/tests/unit/accordion/accordion_deprecated.js +++ b/tests/unit/accordion/accordion_deprecated.js @@ -3,89 +3,89 @@ module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() ); test( "activate, numeric", function() { - var ac = $( "#list1" ).accordion({ active: 1 }); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", 0 ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", 1 ); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion({ active: 1 }); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", 0 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", 1 ); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, numeric, collapsible:true", function() { - var ac = $( "#list1" ).accordion({ collapsible: true }); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", 0 ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", -1 ); - state( ac, 0, 0, 0 ); + var element = $( "#list1" ).accordion({ collapsible: true }); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", 0 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", -1 ); + accordion_state( element, 0, 0, 0 ); }); test( "activate, boolean, collapsible: true", function() { - var ac = $( "#list1" ).accordion({ collapsible: true }); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", false ); - state( ac, 0, 0, 0 ); + var element = $( "#list1" ).accordion({ collapsible: true }); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", false ); + accordion_state( element, 0, 0, 0 ); }); test( "activate, boolean, collapsible: false", function() { - var ac = $( "#list1" ).accordion(); - ac.accordion( "activate", 2 ); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", false ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion(); + element.accordion( "activate", 2 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", false ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, string expression", function() { - var ac = $( "#list1" ).accordion({ active: "h3:last" }); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", ":first" ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", ":eq(1)" ); - state( ac, 0, 1, 0 ); - ac.accordion( "activate", ":last" ); - state( ac, 0, 0, 1 ); + var element = $( "#list1" ).accordion({ active: "h3:last" }); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", ":first" ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", ":eq(1)" ); + accordion_state( element, 0, 1, 0 ); + element.accordion( "activate", ":last" ); + accordion_state( element, 0, 0, 1 ); }); test( "activate, jQuery or DOM element", function() { - var ac = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); - state( ac, 0, 0, 1 ); - ac.accordion( "activate", $( "#list1 h3:first" ) ); - state( ac, 1, 0, 0 ); - ac.accordion( "activate", $( "#list1 h3" )[ 1 ] ); - state( ac, 0, 1, 0 ); + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); + accordion_state( element, 0, 0, 1 ); + element.accordion( "activate", $( "#list1 h3:first" ) ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "activate", $( "#list1 h3" )[ 1 ] ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: Selector }", function() { - var ac = $("#list1").accordion({ + var element = $("#list1").accordion({ active: "h3:last" }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", "h3:eq(1)" ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", "h3:eq(1)" ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: Element }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" )[ 0 ] }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] ); + accordion_state( element, 0, 1, 0 ); }); test( "{ active: jQuery Object }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) }); - state( ac, 0, 0, 1 ); - ac.accordion( "option", "active", $( "#list1 h3:eq(1)" ) ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 0, 1 ); + element.accordion( "option", "active", $( "#list1 h3:eq(1)" ) ); + accordion_state( element, 0, 1, 0 ); }); @@ -99,9 +99,9 @@ test( "{ autoHeight: true }, default", function() { }); test("{ autoHeight: false }", function() { - var accordion = $('#navigation').accordion({ autoHeight: false }); + var element = $('#navigation').accordion({ autoHeight: false }); var sizes = []; - accordion.find(".ui-accordion-content").each(function() { + element.find(".ui-accordion-content").each(function() { sizes.push($(this).height()); }); ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] ); @@ -111,8 +111,8 @@ test("{ autoHeight: false }", function() { test( "{ fillSpace: true }", function() { $( "#navigationWrapper" ).height( 500 ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac, 446, 458 ); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element, 446, 458 ); }); test( "{ fillSapce: true } with sibling", function() { @@ -124,8 +124,8 @@ test( "{ fillSapce: true } with sibling", function() { marginBottom: 30 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac , 346, 358); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element , 346, 358); }); test( "{ fillSpace: true } with multiple siblings", function() { @@ -152,8 +152,8 @@ test( "{ fillSpace: true } with multiple siblings", function() { marginBottom: 15 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ fillSpace: true }); - equalHeights( ac, 296, 308 ); + var element = $( "#navigation" ).accordion({ fillSpace: true }); + equalHeights( element, 296, 308 ); }); @@ -163,13 +163,13 @@ test( "{ fillSpace: true } with multiple siblings", function() { module( "accordion (deprecated) - icons", accordionSetupTeardown() ); test( "icons, headerSelected", function() { - var list = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ icons: { headerSelected: "a1", header: "h1" } }); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - list.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } ); - ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + element.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } ); + ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); }); @@ -179,18 +179,18 @@ test( "icons, headerSelected", function() { module( "accordion (deprecated) - resize", accordionSetupTeardown() ); test( "resize", function() { - var expected = $( "#navigation" ) + var element = $( "#navigation" ) .parent() .height( 300 ) .end() .accordion({ heightStyle: "fill" }); - equalHeights( expected, 246, 258 ); + equalHeights( element, 246, 258 ); - expected.parent().height( 500 ); - expected.accordion( "resize" ); - equalHeights( expected, 446, 458 ); + element.parent().height( 500 ); + element.accordion( "resize" ); + equalHeights( element, 446, 458 ); }); @@ -200,25 +200,25 @@ test( "resize", function() { module( "accordion (deprecated) - navigation", accordionSetupTeardown() ); test( "{ navigation: true, navigationFilter: header }", function() { - var ac = $( "#navigation" ).accordion({ + var element = $( "#navigation" ).accordion({ navigation: true, navigationFilter: function() { return /\?p=1\.1\.3$/.test( this.href ); } }); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "{ navigation: true, navigationFilter: content }", function() { - var ac = $("#navigation").accordion({ + var element = $("#navigation").accordion({ navigation: true, navigationFilter: function() { return /\?p=1\.1\.3\.2$/.test(this.href); } }); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); }); @@ -229,26 +229,26 @@ module( "accordion (deprecated) - changestart/change events", accordionSetupTear test( "changestart", function() { expect( 26 ); - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - ac.accordion( "option", "active", 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + accordion_state( element, 1, 0, 0 ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -257,34 +257,34 @@ test( "changestart", function() { strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); }); headers.eq( 1 ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); - ac.one( "accordionchangestart", function( event, ui ) { + element.one( "accordionchangestart", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); - ac.accordion( "option", "active", false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + accordion_state( element, 0, 0, 0 ); }); test( "change", function() { expect( 20 ); - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); @@ -292,9 +292,9 @@ test( "change", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); - ac.accordion( "option", "active", 0 ); + element.accordion( "option", "active", 0 ); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -306,7 +306,7 @@ test( "change", function() { }); headers.eq( 1 ).click(); - ac.one( "accordionchange", function( event, ui ) { + element.one( "accordionchange", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); @@ -314,7 +314,7 @@ test( "change", function() { equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); }); - ac.accordion( "option", "active", false ); + element.accordion( "option", "active", false ); }); })(jQuery); diff --git a/tests/unit/accordion/accordion_events.js b/tests/unit/accordion/accordion_events.js index 0b9f14706..2438f28ea 100644 --- a/tests/unit/accordion/accordion_events.js +++ b/tests/unit/accordion/accordion_events.js @@ -3,27 +3,29 @@ module( "accordion: events", accordionSetupTeardown() ); test( "beforeActivate", function() { - expect( 42 ); - var ac = $( "#list1" ).accordion({ + expect( 38 ); + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - ac.accordion( "option", "active", 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + accordion_state( element, 1, 0, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + equals( event.originalEvent.type, "click" ); equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -32,37 +34,26 @@ test( "beforeActivate", function() { strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); }); headers.eq( 1 ).click(); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); strictEqual( ui.oldContent[ 0 ], content[ 1 ] ); equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); - state( ac, 0, 1, 0 ); + accordion_state( element, 0, 1, 0 ); }); - ac.accordion( "option", "active", false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + accordion_state( element, 0, 0, 0 ); - ac.one( "accordionbeforeactivate", function( event, ui ) { - equals( ui.oldHeader.size(), 0 ); - equals( ui.oldContent.size(), 0 ); - equals( ui.newHeader.size(), 1 ); - strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); - equals( ui.newContent.size(), 1 ); - strictEqual( ui.newContent[ 0 ], content[ 1 ] ); - event.preventDefault(); - state( ac, 0, 0, 0 ); - }); - ac.accordion( "option", "active", 1 ); - state( ac, 0, 0, 0 ); - - ac.one( "accordionbeforeactivate", function( event, ui ) { + element.one( "accordionbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); @@ -70,22 +61,22 @@ test( "beforeActivate", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 2 ] ); event.preventDefault(); - state( ac, 0, 0, 0 ); + accordion_state( element, 0, 0, 0 ); }); - headers.eq( 2 ).click(); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", 2 ); + accordion_state( element, 0, 0, 0 ); }); test( "activate", function() { - expect( 20 ); - var ac = $( "#list1" ).accordion({ + expect( 21 ); + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - var headers = ac.find( ".ui-accordion-header" ); - var content = ac.find( ".ui-accordion-content" ); + var headers = element.find( ".ui-accordion-header" ); + var content = element.find( ".ui-accordion-content" ); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 0 ); equals( ui.oldContent.size(), 0 ); equals( ui.newHeader.size(), 1 ); @@ -93,9 +84,9 @@ test( "activate", function() { equals( ui.newContent.size(), 1 ); strictEqual( ui.newContent[ 0 ], content[ 0 ] ); }); - ac.accordion( "option", "active", 0 ); + element.accordion( "option", "active", 0 ); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] ); equals( ui.oldContent.size(), 1 ); @@ -107,7 +98,7 @@ test( "activate", function() { }); headers.eq( 1 ).click(); - ac.one( "accordionactivate", function( event, ui ) { + element.one( "accordionactivate", function( event, ui ) { equals( ui.oldHeader.size(), 1 ); strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] ); equals( ui.oldContent.size(), 1 ); @@ -115,7 +106,17 @@ test( "activate", function() { equals( ui.newHeader.size(), 0 ); equals( ui.newContent.size(), 0 ); }); - ac.accordion( "option", "active", false ); + element.accordion( "option", "active", false ); + + // prevent activation + element.one( "accordionbeforeactivate", function( event ) { + ok( true ); + event.preventDefault(); + }); + element.one( "accordionactivate", function() { + ok( false ); + }); + element.accordion( "option", "active", 1 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index eade690b1..d45bde134 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -9,29 +9,29 @@ test( "destroy", function() { }); test( "enable/disable", function() { - var accordion = $('#list1').accordion(); - state( accordion, 1, 0, 0 ); - accordion.accordion( "disable" ); - accordion.accordion( "option", "active", 1 ); - state( accordion, 1, 0, 0 ); - accordion.accordion( "enable" ); - accordion.accordion( "option", "active", 1 ); - state( accordion, 0, 1, 0 ); + var element = $('#list1').accordion(); + accordion_state( element, 1, 0, 0 ); + element.accordion( "disable" ); + element.accordion( "option", "active", 1 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "enable" ); + element.accordion( "option", "active", 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "refresh", function() { - var expected = $( "#navigation" ) + var element = $( "#navigation" ) .parent() .height( 300 ) .end() .accordion({ heightStyle: "fill" }); - equalHeights( expected, 246, 258 ); + equalHeights( element, 246, 258 ); - expected.parent().height( 500 ); - expected.accordion( "refresh" ); - equalHeights( expected, 446, 458 ); + element.parent().height( 500 ); + element.accordion( "refresh" ); + equalHeights( element, 446, 458 ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 3796d80de..7bd6f2e74 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -3,184 +3,184 @@ module( "accordion: options", accordionSetupTeardown() ); test( "{ active: default }", function() { - var ac = $( "#list1" ).accordion(); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + var element = $( "#list1" ).accordion(); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); }); test( "{ active: false }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: false, collapsible: true }); - state( ac, 0, 0, 0 ); - equals( ac.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); - equals( ac.accordion( "option", "active" ), false ); + accordion_state( element, 0, 0, 0 ); + equals( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" ); + equals( element.accordion( "option", "active" ), false ); - ac.accordion( "option", "collapsible", false ); - state( ac, 1, 0, 0 ); - equals( ac.accordion( "option", "active" ), 0 ); + element.accordion( "option", "collapsible", false ); + accordion_state( element, 1, 0, 0 ); + equals( element.accordion( "option", "active" ), 0 ); - ac.accordion( "destroy" ); - ac.accordion({ + element.accordion( "destroy" ); + element.accordion({ active: false }); - state( ac, 1, 0, 0 ); - strictEqual( ac.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); + strictEqual( element.accordion( "option", "active" ), 0 ); }); test( "{ active: Number }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 2 }); - equals( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equals( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "active", 0 ); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", 0 ); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", 10 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 10 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); if ( $.uiBackCompat === false ) { test( "{ active: -Number }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: -1 }); - equals( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + equals( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "active", -2 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", -2 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", -10 ); - equals( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", -10 ); + equals( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.accordion( "option", "active", -3 ); - equals( ac.accordion( "option", "active" ), 0 ); - state( ac, 1, 0, 0 ); + element.accordion( "option", "active", -3 ); + equals( element.accordion( "option", "active" ), 0 ); + accordion_state( element, 1, 0, 0 ); }); } // TODO: add animation tests test( "{ collapsible: false }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 1 }); - ac.accordion( "option", "active", false ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", false ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ collapsible: true }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ active: 1, collapsible: true }); - ac.accordion( "option", "active", false ); - equal( ac.accordion( "option", "active" ), false ); - state( ac, 0, 0, 0 ); + element.accordion( "option", "active", false ); + equal( element.accordion( "option", "active" ), false ); + accordion_state( element, 0, 0, 0 ); - ac.accordion( "option", "active", 1 ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 1 ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).click(); - equals( ac.accordion( "option", "active" ), false ); - state( ac, 0, 0, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).click(); + equals( element.accordion( "option", "active" ), false ); + accordion_state( element, 0, 0, 0 ); }); test( "{ event: null }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ event: null }); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); - ac.accordion( "option", "active", 1 ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.accordion( "option", "active", 1 ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); // ensure default click handler isn't bound - ac.find( ".ui-accordion-header" ).eq( 2 ).click(); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 2 ).click(); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ event: custom }", function() { - var ac = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ event: "custom1 custom2" }); - state( ac, 1, 0, 0 ); + accordion_state( element, 1, 0, 0 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); // ensure default click handler isn't bound - ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); - ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" ); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.accordion( "option", "event", "custom3" ); + element.accordion( "option", "event", "custom3" ); // ensure old event handlers are unbound - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); - equal( ac.accordion( "option", "active" ), 2 ); - state( ac, 0, 0, 1 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); + equal( element.accordion( "option", "active" ), 2 ); + accordion_state( element, 0, 0, 1 ); - ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" ); - equal( ac.accordion( "option", "active" ), 1 ); - state( ac, 0, 1, 0 ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" ); + equal( element.accordion( "option", "active" ), 1 ); + accordion_state( element, 0, 1, 0 ); }); test( "{ header: default }", function() { // default: > li > :first-child,> :not(li):even // > :not(li):even - state( $( "#list1" ).accordion(), 1, 0, 0); + accordion_state( $( "#list1" ).accordion(), 1, 0, 0); // > li > :first-child - state( $( "#navigation" ).accordion(), 1, 0, 0); + accordion_state( $( "#navigation" ).accordion(), 1, 0, 0); }); test( "{ header: custom }", function() { - var ac = $( "#navigationWrapper" ).accordion({ + var element = $( "#navigationWrapper" ).accordion({ header: "h2" }); - ac.find( "h2" ).each(function() { + element.find( "h2" ).each(function() { ok( $( this ).hasClass( "ui-accordion-header" ) ); }); - equal( ac.find( ".ui-accordion-header" ).length, 3 ); - state( ac, 1, 0, 0 ); - ac.accordion( "option", "active", 2 ); - state( ac, 0, 0, 1 ); + equal( element.find( ".ui-accordion-header" ).length, 3 ); + accordion_state( element, 1, 0, 0 ); + element.accordion( "option", "active", 2 ); + accordion_state( element, 0, 0, 1 ); }); test( "{ heightStyle: 'auto' }", function() { - var ac = $( "#navigation" ).accordion({ heightStyle: "auto" }); - equalHeights( ac, 95, 130 ); + var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); + equalHeights( element, 95, 130 ); }); test( "{ heightStyle: 'content' }", function() { - var ac = $( "#navigation" ).accordion({ heightStyle: "content" }); - var sizes = ac.find( ".ui-accordion-content" ).map(function() { + var element = $( "#navigation" ).accordion({ heightStyle: "content" }); + var sizes = element.find( ".ui-accordion-content" ).map(function() { return $( this ).height(); }).get(); ok( sizes[ 0 ] >= 70 && sizes[ 0 ] <= 105, "was " + sizes[ 0 ] ); @@ -190,8 +190,8 @@ test( "{ heightStyle: 'content' }", function() { test( "{ heightStyle: 'fill' }", function() { $( "#navigationWrapper" ).height( 500 ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac, 446, 458 ); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element, 446, 458 ); }); test( "{ heightStyle: 'fill' } with sibling", function() { @@ -203,8 +203,8 @@ test( "{ heightStyle: 'fill' } with sibling", function() { marginBottom: 30 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac , 346, 358); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element , 346, 358); }); test( "{ heightStyle: 'fill' } with multiple siblings", function() { @@ -231,36 +231,36 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() { marginBottom: 15 }) .prependTo( "#navigationWrapper" ); - var ac = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeights( ac, 296, 308 ); + var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + equalHeights( element, 296, 308 ); }); test( "{ icons: false }", function() { - var list = $( "#list1" ); + var element = $( "#list1" ); function icons( on ) { - same( list.find( "span.ui-icon").length, on ? 3 : 0 ); - same( list.hasClass( "ui-accordion-icons" ), on ); + same( element.find( "span.ui-icon").length, on ? 3 : 0 ); + same( element.hasClass( "ui-accordion-icons" ), on ); } - list.accordion(); + element.accordion(); icons( true ); - list.accordion( "destroy" ).accordion({ + element.accordion( "destroy" ).accordion({ icons: false }); icons( false ); - list.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } ); + element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } ); icons( true ); - list.accordion( "option", "icons", false ); + element.accordion( "option", "icons", false ); icons( false ); }); test( "{ icons: hash }", function() { - var list = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion({ icons: { activeHeader: "a1", header: "h1" } }); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - list.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } ); - ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); - ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } ); + ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) ); + ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) ); }); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_tickets.js b/tests/unit/accordion/accordion_tickets.js deleted file mode 100644 index b301051da..000000000 --- a/tests/unit/accordion/accordion_tickets.js +++ /dev/null @@ -1,5 +0,0 @@ -(function( $ ) { - -module( "accordion: tickets", accordionSetupTeardown() ); - -}( jQuery ) ); diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index bc6388a75..8f1d9db9a 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -23,7 +23,6 @@ <script type="text/javascript" src="autocomplete_events.js"></script> <script type="text/javascript" src="autocomplete_methods.js"></script> <script type="text/javascript" src="autocomplete_options.js"></script> - <script type="text/javascript" src="autocomplete_tickets.js"></script> <script type="text/javascript" src="../swarminject.js"></script> </head> diff --git a/tests/unit/autocomplete/autocomplete_defaults.js b/tests/unit/autocomplete/autocomplete_defaults.js index e2196ea9e..ac83eaea4 100644 --- a/tests/unit/autocomplete/autocomplete_defaults.js +++ b/tests/unit/autocomplete/autocomplete_defaults.js @@ -1,19 +1,25 @@ -/* - * autocomplete_defaults.js - */ +commonWidgetTests( "autocomplete", { + defaults: { + appendTo: "body", + autoFocus: false, + delay: 300, + disabled: false, + minLength: 1, + position: { + my: "left top", + at: "left bottom", + collision: "none" + }, + source: null, -var autocomplete_defaults = { - appendTo: "body", - autoFocus: true, - delay: 300, - disabled: false, - minLength: 1, - position: { - my: "left top", - at: "left bottom", - collision: "none" - }, - source: null -}; - -commonWidgetTests('autocomplete', { defaults: autocomplete_defaults }); + // callbacks + change: null, + close: null, + create: null, + focus: null, + open: null, + response: null, + search: null, + select: null + } +}); diff --git a/tests/unit/autocomplete/autocomplete_tickets.js b/tests/unit/autocomplete/autocomplete_tickets.js deleted file mode 100644 index bde9faffd..000000000 --- a/tests/unit/autocomplete/autocomplete_tickets.js +++ /dev/null @@ -1,14 +0,0 @@ -/* - * autocomplete_tickets.js - */ -(function($) { - -module("autocomplete: tickets", { - teardown: function() { - $( ":ui-autocomplete" ).autocomplete( "destroy" ); - } -}); - - - -})(jQuery); diff --git a/tests/unit/button/button_defaults.js b/tests/unit/button/button_defaults.js index b81fa7cbb..96c7e5bfa 100644 --- a/tests/unit/button/button_defaults.js +++ b/tests/unit/button/button_defaults.js @@ -1,15 +1,14 @@ -/* - * button_defaults.js - */ +commonWidgetTests( "button", { + defaults: { + disabled: null, + icons: { + primary: null, + secondary: null + }, + label: null, + text: true, -var button_defaults = { - disabled: null, - text: true, - label: null, - icons: { - primary: null, - secondary: null + // callbacks + create: null } -}; - -commonWidgetTests('button', { defaults: button_defaults }); +}); diff --git a/tests/unit/dialog/dialog_defaults.js b/tests/unit/dialog/dialog_defaults.js index 612fd58c8..9f2e4c6a8 100644 --- a/tests/unit/dialog/dialog_defaults.js +++ b/tests/unit/dialog/dialog_defaults.js @@ -1,35 +1,34 @@ -/* - * dialog_defaults.js - */ +commonWidgetTests( "dialog", { + defaults: { + autoOpen: true, + buttons: {}, + closeOnEscape: true, + closeText: 'close', + disabled: false, + dialogClass: '', + draggable: true, + height: 'auto', + hide: null, + maxHeight: false, + maxWidth: false, + minHeight: 150, + minWidth: 150, + modal: false, + position: { + my: 'center', + at: 'center', + of: window, + collision: 'fit', + using: $.ui.dialog.prototype.options.position.using + }, + resizable: true, + show: null, + stack: true, + title: '', + width: 300, + zIndex: 1000, -var dialog_defaults = { - autoOpen: true, - buttons: {}, - closeOnEscape: true, - closeText: 'close', - disabled: false, - dialogClass: '', - draggable: true, - height: 'auto', - hide: null, - maxHeight: false, - maxWidth: false, - minHeight: 150, - minWidth: 150, - modal: false, - position: { - my: 'center', - at: 'center', - of: window, - collision: 'fit', - using: $.ui.dialog.prototype.options.position.using - }, - resizable: true, - show: null, - stack: true, - title: '', - width: 300, - zIndex: 1000 -}; - -commonWidgetTests('dialog', { defaults: dialog_defaults }); + // callbacks + create: null + } +}); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index fb8dea775..5705da079 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -180,7 +180,7 @@ test("height", function() { expect(3); el = $('<div></div>').dialog(); - equals(dlg().height(), dialog_defaults.minHeight, "default height"); + equals(dlg().height(), 150, "default height"); el.remove(); el = $('<div></div>').dialog({ height: 237 }); @@ -431,7 +431,7 @@ test("width", function() { expect(3); el = $('<div></div>').dialog(); - equals(dlg().width(), dialog_defaults.width, "default width"); + equals(dlg().width(), 300, "default width"); el.remove(); el = $('<div></div>').dialog({width: 437 }); diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index 7ddf53e48..ca5e77e78 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -20,7 +20,6 @@ <script type="text/javascript" src="draggable_events.js"></script> <script type="text/javascript" src="draggable_methods.js"></script> <script type="text/javascript" src="draggable_options.js"></script> - <script type="text/javascript" src="draggable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/draggable/draggable_tickets.js b/tests/unit/draggable/draggable_tickets.js deleted file mode 100644 index 709e55104..000000000 --- a/tests/unit/draggable/draggable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * draggable_tickets.js - */ -(function($) { - -module("draggable: tickets"); - -})(jQuery); diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index 1655bda63..ebe745836 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -21,7 +21,6 @@ <script type="text/javascript" src="droppable_events.js"></script> <script type="text/javascript" src="droppable_methods.js"></script> <script type="text/javascript" src="droppable_options.js"></script> - <script type="text/javascript" src="droppable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/droppable/droppable_tickets.js b/tests/unit/droppable/droppable_tickets.js deleted file mode 100644 index 05eeaa2a3..000000000 --- a/tests/unit/droppable/droppable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * droppable_tickets.js - */ -(function($) { - -module("droppable: tickets"); - -})(jQuery); diff --git a/tests/unit/menu/menu_defaults.js b/tests/unit/menu/menu_defaults.js index 58122fea2..dd182ca09 100644 --- a/tests/unit/menu/menu_defaults.js +++ b/tests/unit/menu/menu_defaults.js @@ -1,13 +1,12 @@ -/* - * menu_defaults.js - */ +commonWidgetTests( "menu", { + defaults: { + disabled: false, + position: { + my: "left top", + at: "right top" + }, -var menu_defaults = { - disabled: false, - position: { - my: "left top", - at: "right top" + // callbacks + create: null } -}; - -commonWidgetTests('menu', { defaults: menu_defaults }); +}); diff --git a/tests/unit/position/positio.html b/tests/unit/position/position_deprecated.html index 156235d7b..156235d7b 100644 --- a/tests/unit/position/positio.html +++ b/tests/unit/position/position_deprecated.html diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html index 02066b37e..8048203f8 100644 --- a/tests/unit/progressbar/progressbar.html +++ b/tests/unit/progressbar/progressbar.html @@ -21,7 +21,6 @@ <script type="text/javascript" src="progressbar_events.js"></script> <script type="text/javascript" src="progressbar_methods.js"></script> <script type="text/javascript" src="progressbar_options.js"></script> - <script type="text/javascript" src="progressbar_tickets.js"></script> <script type="text/javascript" src="../swarminject.js"></script> </head> diff --git a/tests/unit/progressbar/progressbar_defaults.js b/tests/unit/progressbar/progressbar_defaults.js index 925510871..3856e31a0 100644 --- a/tests/unit/progressbar/progressbar_defaults.js +++ b/tests/unit/progressbar/progressbar_defaults.js @@ -1,11 +1,10 @@ -/* - * progressbar_defaults.js - */ +commonWidgetTests( "progressbar", { + defaults: { + disabled: false, + value: 0, + max: 100, -var progressbar_defaults = { - disabled: false, - value: 0, - max: 100 -}; - -commonWidgetTests('progressbar', { defaults: progressbar_defaults }); + //callbacks + create: null + } +}); diff --git a/tests/unit/progressbar/progressbar_options.js b/tests/unit/progressbar/progressbar_options.js index 70ad7abab..230c939ab 100644 --- a/tests/unit/progressbar/progressbar_options.js +++ b/tests/unit/progressbar/progressbar_options.js @@ -10,6 +10,23 @@ test("{ value : 0 }, default", function() { same( 0, $("#progressbar").progressbar("value") ); }); +// Ticket #7231 - valueDiv should be hidden when value is at 0% +test( "value: visibility of valueDiv", function() { + expect( 5 ); + var element = $( "#progressbar" ).progressbar({ + value: 0 + }); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is initialized at 0" ); + element.progressbar( "value", 1 ); + ok( element.children( ".ui-progressbar-value" ).is( ":visible" ), "valueDiv visible when value is set to 1" ); + element.progressbar( "value", 100 ); + ok( element.children( ".ui-progressbar-value" ).is( ":visible" ), "valueDiv visible when value is set to 100" ); + element.progressbar( "value", 0 ); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is set to 0" ); + element.progressbar( "value", -1 ); + ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value set to -1 (normalizes to 0)" ); +}); + test("{ value : 5 }", function() { $("#progressbar").progressbar({ value: 5 diff --git a/tests/unit/progressbar/progressbar_tickets.js b/tests/unit/progressbar/progressbar_tickets.js deleted file mode 100644 index debd62614..000000000 --- a/tests/unit/progressbar/progressbar_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * progressbar_tickets.js - */ -(function($) { - -module("progressbar: tickets"); - -})(jQuery); diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 926201ce3..cb88c6751 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -22,7 +22,6 @@ <script type="text/javascript" src="resizable_events.js"></script> <script type="text/javascript" src="resizable_methods.js"></script> <script type="text/javascript" src="resizable_options.js"></script> - <script type="text/javascript" src="resizable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/resizable/resizable_tickets.js b/tests/unit/resizable/resizable_tickets.js deleted file mode 100644 index 55486655c..000000000 --- a/tests/unit/resizable/resizable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * resizable_tickets.js - */ -(function($) { - -module("resizable: tickets"); - -})(jQuery); diff --git a/tests/unit/selectable/selectable.html b/tests/unit/selectable/selectable.html index 7b739316d..85e843cda 100644 --- a/tests/unit/selectable/selectable.html +++ b/tests/unit/selectable/selectable.html @@ -20,7 +20,6 @@ <script type="text/javascript" src="selectable_events.js"></script> <script type="text/javascript" src="selectable_methods.js"></script> <script type="text/javascript" src="selectable_options.js"></script> - <script type="text/javascript" src="selectable_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/selectable/selectable_tickets.js b/tests/unit/selectable/selectable_tickets.js deleted file mode 100644 index da1da46de..000000000 --- a/tests/unit/selectable/selectable_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * selectable_tickets.js - */ -(function($) { - -module("selectable: tickets"); - -})(jQuery); diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html index 04234903e..6dc84660b 100644 --- a/tests/unit/slider/slider.html +++ b/tests/unit/slider/slider.html @@ -22,7 +22,6 @@ <script type="text/javascript" src="slider_events.js"></script> <script type="text/javascript" src="slider_methods.js"></script> <script type="text/javascript" src="slider_options.js"></script> - <script type="text/javascript" src="slider_tickets.js"></script> <script type="text/javascript"> // disable this stale testsuite for testswarm only diff --git a/tests/unit/slider/slider_defaults.js b/tests/unit/slider/slider_defaults.js index 76e5da8ea..03f2a4f8e 100644 --- a/tests/unit/slider/slider_defaults.js +++ b/tests/unit/slider/slider_defaults.js @@ -1,20 +1,19 @@ -/* - * slider_defaults.js - */ +commonWidgetTests( "slider", { + defaults: { + animate: false, + cancel: function() {}, + delay: 0, + disabled: false, + distance: 0, + max: 100, + min: 0, + orientation: 'horizontal', + range: false, + step: 1, + value: 0, + values: null, -var slider_defaults = { - animate: false, - cancel: function() {}, - delay: 0, - disabled: false, - distance: 0, - max: 100, - min: 0, - orientation: 'horizontal', - range: false, - step: 1, - value: 0, - values: null -}; - -commonWidgetTests('slider', { defaults: slider_defaults }); + // callbacks + create: null + } +}); diff --git a/tests/unit/slider/slider_methods.js b/tests/unit/slider/slider_methods.js index 77ae65148..4b2b0311d 100644 --- a/tests/unit/slider/slider_methods.js +++ b/tests/unit/slider/slider_methods.js @@ -74,7 +74,7 @@ test("value", function() { value: 5 }); equals(el.slider('value'), 5, 'range: ' + this + ' slider method get'); - el.slider('value', 10); + equals(el.slider('value', 10), el, 'value method is chainable'); equals(el.slider('value'), 10, 'range: ' + this + ' slider method set'); el.remove(); }); @@ -85,13 +85,13 @@ test("value", function() { el.slider('option', 'value', -2); equals(el.slider('option', 'value'), -2, 'value option does not respect min'); equals(el.slider('value'), -1, 'value method get respects min'); - el.slider('value', -2); + equals(el.slider('value', -2), el, 'value method is chainable'); equals(el.slider('option', 'value'), -1, 'value method set respects min'); // max with value option vs value method el.slider('option', 'value', 2); equals(el.slider('option', 'value'), 2, 'value option does not respect max'); equals(el.slider('value'), 1, 'value method get respects max'); - el.slider('value', 2); + equals(el.slider('value', 2), el, 'value method is chainable'); equals(el.slider('option', 'value'), 1, 'value method set respects max'); }); diff --git a/tests/unit/slider/slider_tickets.js b/tests/unit/slider/slider_tickets.js deleted file mode 100644 index 7397c60ba..000000000 --- a/tests/unit/slider/slider_tickets.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * slider_tickets.js - */ -(function($) { - -module("slider: tickets"); - -})(jQuery); diff --git a/tests/unit/spinner/spinner_defaults.js b/tests/unit/spinner/spinner_defaults.js index 0389ab169..f6081b1f3 100644 --- a/tests/unit/spinner/spinner_defaults.js +++ b/tests/unit/spinner/spinner_defaults.js @@ -1,16 +1,15 @@ -/*
- * spinner_defaults.js
- */
+commonWidgetTests( "spinner", {
+ defaults: {
+ disabled: false,
+ incremental: true,
+ max: null,
+ min: null,
+ numberformat: null,
+ page: 10,
+ step: null,
+ value: null,
-var spinner_defaults = {
- disabled: false,
- incremental: true,
- max: null,
- min: null,
- numberformat: null,
- page: 10,
- step: null,
- value: null
-};
-
-commonWidgetTests('spinner', { defaults: spinner_defaults });
+ // callbacks
+ create: null
+ }
+});
diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 74855ca9a..565a0b427 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -1,30 +1,88 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs Test Suite</title> - <link type="text/css" href="../../../themes/base/jquery.ui.tabs.css" rel="stylesheet" /> - - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.cookie.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script> - - <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> - <script type="text/javascript" src="../../../external/qunit.js"></script> - <script type="text/javascript" src="../../jquery.simulate.js"></script> - <script type="text/javascript" src="../testsuite.js"></script> - - <script type="text/javascript" src="tabs_core.js"></script> - <script type="text/javascript" src="tabs_defaults.js"></script> - <script type="text/javascript" src="tabs_events.js"></script> - <script type="text/javascript" src="tabs_methods.js"></script> - <script type="text/javascript" src="tabs_options.js"></script> - <script type="text/javascript" src="tabs_tickets.js"></script> - - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.tabs.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script> + $.uiBackCompat = false; + </script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="tabs_defaults.js"></script> + <script src="tabs_core.js"></script> + <script src="tabs_events.js"></script> + <script src="tabs_methods.js"></script> + <script src="tabs_options.js"></script> + <script src="tabs_tickets.js"></script> + + <script> + function tabs_state( tabs ) { + var expected = $.makeArray( arguments ).slice( 1 ); + var actual = tabs.find( ".ui-tabs-nav li" ).map(function() { + var tab = $( this ), + panel = $( $.ui.tabs.prototype._sanitizeSelector( + "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + tabIsActive = tab.hasClass( "ui-state-active" ), + panelIsActive = panel.css( "display" ) !== "none"; + + if ( tabIsActive && panelIsActive ) { + return 1; + } + if ( !tabIsActive && !panelIsActive ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( actual, expected ); + } + + function tabs_disabled( tabs, state ) { + var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) { + if ( typeof state === "boolean" ) { + return state ? 1 : 0; + } else { + return $.inArray( index, state ) !== -1 ? 1 : 0; + } + }); + + var internalState = tabs.tabs( "option", "disabled" ); + if ( internalState === false ) { + internalState = []; + } + if ( internalState === true ) { + internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) { + return index; + }); + } + + var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) { + var tab = $( this ), + tabIsDisabled = tab.hasClass( "ui-state-disabled" ); + + if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) { + return 1; + } + if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( tabs.tabs( "option", "disabled" ), state ); + same( actual, expected ); + } + </script> + <script> // disable this stale testsuite for testswarm only var url = window.location.search; url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); @@ -34,7 +92,7 @@ test("tabs", function() { ok(true, "disabled tabs testsuite"); }); } </script> - <script type="text/javascript" src="../swarminject.js"></script> + <script src="../swarminject.js"></script> </head> <body> @@ -42,80 +100,87 @@ <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> -<ol id="qunit-tests"> -</ol> - +<ol id="qunit-tests"></ol> <div id="qunit-fixture"> - <div id="tabs1"> - <ul> - <li><a href="#fragment-1"><span>1</span></a></li> - <li><a href="#fragment-2"><span>2</span></a></li> - <li><a href="#fragment-3"><span>3</span></a></li> - </ul> - <div id="fragment-1"></div> - <div id="fragment-2"></div> - <div id="fragment-3"></div> - </div> - <div id="tabs2"> - <ul> - <li><a href="#colon:test"><span>1</span></a></li> - <li><a href="#inline-style"><span>2</span></a></li> - <li><a href="data/test.html#test"><span>3</span></a></li> - <li><a href="data/test.html" title="∫ßáö Սե"><span>4</span></a></li> - </ul> - <div id="colon:test"></div> - <div style="height: 300px;" id="inline-style"></div> - </div> - <div id="tabs3"> - <div> - <ul id="tabs3-list"> - <li><a href="#tabs3-1">1</a></li> - </ul> - </div> - </div> - <div id="tabs4"> - <ul id="tabs4-list"> - <li><a href="#tabs4-1">1</a></li> - </ul> - <ol> - <li><a href="#tabs4-1">1</a></li> - </ol> - </div> - <div id="tabs4a"> - <ol id="tabs4a-list"> - <li><a href="#tabs4a-1">1</a></li> - </ol> +<div id="tabs1"> + <ul> + <li><a href="#fragment-1"><span>1</span></a></li> + <li><a href="#fragment-2"><span>2</span></a></li> + <li><a href="#fragment-3"><span>3</span></a></li> + </ul> + <div id="fragment-1"></div> + <div id="fragment-2"></div> + <div id="fragment-3"></div> +</div> + +<div id="tabs2"> + <ul> + <li><a href="#colon:test"><span>1</span></a></li> + <li><a href="#inline-style"><span>2</span></a></li> + <li><a href="data/test.html#test"><span>3</span></a></li> + <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> + </ul> + <div id="colon:test"></div> + <div style="height: 300px;" id="inline-style"></div> +</div> + +<div id="tabs3"> + <div> + <ul id="tabs3-list"> + <li><a href="#tabs3-1">1</a></li> + </ul> + </div> +</div> + +<div id="tabs4"> + <ul id="tabs4-list"> + <li><a href="#tabs4-1">1</a></li> + </ul> + <ol> + <li><a href="#tabs4-1">1</a></li> + </ol> +</div> + +<div id="tabs4a"> + <ol id="tabs4a-list"> + <li><a href="#tabs4a-1">1</a></li> + </ol> + <ul> + <li><a href="#tabs4a-1">1</a></li> + </ul> +</div> + +<div id="tabs5"> + <div> + <ul id="tabs5-list"></ul> + </div> +</div> + +<div id="tabs6"> + <ul id="tabs6-list"> + <li><a href="#tabs6-1">1</a> <ul> - <li><a href="#tabs4a-1">1</a></li> - </ul> - </div> - <div id="tabs5"> - <div> - <ul id="tabs5-list"></ul> - </div> - </div> - <div id="tabs6"> - <ul id="tabs6-list"> - <li><a href="#tabs6-1">1</a> - <ul> - <li><a href="#item6-3">3</a></li> - <li><a href="#item6-4">4</a></li> - </ul> - </li> - <li><a href="#tabs6-2">2</a></li> + <li><a href="#item6-3">3</a></li> + <li><a href="#item6-4">4</a></li> </ul> - <div id="tabs6-1"></div> - <div id="tabs6-2"></div> - </div> - <div id="tabs7"> - <ul id="tabs7-list"> - <li><a href="#tabs7-1">1</a></li> - <li><a href="#tabs7-2">2</a></li> - </ul> - <div id="tabs7-2"></div> - <div id="tabs7-1"></div> - </div> - </div> + </li> + <li><a href="#tabs6-2">2</a></li> + </ul> + <div id="tabs6-1"></div> + <div id="tabs6-2"></div> +</div> + +<div id="tabs7"> + <ul id="tabs7-list"> + <li><a href="#tabs7-1">1</a></li> + <li><a href="#tabs7-2">2</a></li> + </ul> + <div id="tabs7-2"></div> + <div id="tabs7-1"></div> +</div> + +</div> </body> </html> diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 652788bba..c9b16e3a8 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -1,58 +1,66 @@ -/* - * tabs_core.js - */ -var el; +(function( $ ) { -(function($) { +module( "tabs: core" ); -module("tabs: core"); +test( "markup structure", function() { + expect( 3 ); + var element = $( "#tabs1" ).tabs(); + ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" ); + ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" ); + equal( element.find( ".ui-tabs-panel" ).length, 3, + ".ui-tabs-panel elements exist, correct number" ); +}); + +$.each({ + "deep ul": "#tabs3", + "multiple lists, ul first": "#tabs4", + "multiple lists, ol first": "#tabs5", + "empty list": "#tabs6" +}, function( type, selector ) { + test( "markup structure: " + type, function() { + expect( 2 ); + var element = $( selector ).tabs(); + ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" ); + ok( $( selector + "-list" ).hasClass( "ui-tabs-nav" ), + "list item is .ui-tabs-nav" ); + }); +}); -test('navigation markup', function() { - el = $('#tabs3').tabs(); - ok($('#tabs3-list').hasClass('ui-tabs-nav'), 'custom markup; allow list to be any descendant'); - el.tabs('destroy'); +// #5893 - Sublist in the tab list are considered as tab +test( "nested list", function() { + expect( 1 ); - el = $('#tabs4').tabs(); - ok($('#tabs4-list').hasClass('ui-tabs-nav'), 'first list found becomes nav - ul'); - el.tabs('destroy'); + var element = $( "#tabs6" ).tabs(); + equals( element.data( "tabs" ).anchors.length, 2, "should contain 2 tab" ); +}); - el = $('#tabs4a').tabs(); - ok($('#tabs4a-list').hasClass('ui-tabs-nav'), 'first list found becomes nav - ol'); - el.tabs('destroy'); +test( "disconnected from DOM", function() { + expect( 2 ); - el = $('#tabs5').tabs(); - ok($('#tabs5-list').hasClass('ui-tabs-nav'), 'empty list can be used'); - el.tabs('destroy'); + var element = $( "#tabs1" ).remove().tabs(); + equals( element.find( ".ui-tabs-nav" ).length, 1, "should initialize nav" ); + equals( element.find( ".ui-tabs-panel" ).length, 3, "should initialize panels" ); }); -test('ajax', function() { - expect(4); - stop(); - - el = $('#tabs2'); - - el.tabs({ - selected: 2, - load: function() { - // spinner: default spinner - setTimeout(function() { - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - el.tabs('destroy'); - el.tabs({ - selected: 2, - spinner: '<img src="spinner.gif" alt="">', - load: function() { - // spinner: image - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - start(); - } - }); - }, 1); - } +test( "aria-controls", function() { + expect( 7 ); + var element = $( "#tabs1" ).tabs(), + tabs = element.find( ".ui-tabs-nav a" ); + tabs.each(function() { + var tab = $( this ); + equal( tab.attr( "href" ).substring( 1 ), tab.attr( "aria-controls" ) ); }); - + + element = $( "#tabs2" ).tabs(); + tabs = element.find( ".ui-tabs-nav a" ); + equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" ); + equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" ); + ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" ); + equal( tabs.eq( 3 ).attr( "aria-controls" ), "custom-id" ); +}); + +test( "accessibility", function() { + // TODO: add tests }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_defaults.js b/tests/unit/tabs/tabs_defaults.js index ef93c69ee..52b6f8a71 100644 --- a/tests/unit/tabs/tabs_defaults.js +++ b/tests/unit/tabs/tabs_defaults.js @@ -1,27 +1,16 @@ -/* - * tabs_defaults.js - */ +commonWidgetTests( "tabs", { + defaults: { + active: null, + collapsible: false, + disabled: false, + event: "click", + fx: null, -var tabs_defaults = { - add: null, - ajaxOptions: null, - cache: false, - collapsible: false, - cookie: null, - disable: null, - disabled: false, - enable: null, - event: "click", - fx: null, - idPrefix: "ui-tabs-", - load: null, - panelTemplate: "<div></div>", - remove: null, - select: null, - show: null, - spinner: "<em>Loading…</em>", - tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>" -}; - -// FAIL: falsy values break the cookie option -commonWidgetTests( "tabs", { defaults: tabs_defaults } ); + // callbacks + activate: null, + beforeActivate: null, + beforeLoad: null, + create: null, + load: null + } +}); diff --git a/tests/unit/tabs/tabs_defaults_deprecated.js b/tests/unit/tabs/tabs_defaults_deprecated.js new file mode 100644 index 000000000..1a56297e9 --- /dev/null +++ b/tests/unit/tabs/tabs_defaults_deprecated.js @@ -0,0 +1,29 @@ +commonWidgetTests( "tabs", { + defaults: { + active: null, + ajaxOptions: null, + cache: false, + collapsible: false, + cookie: null, + disabled: false, + event: "click", + fx: null, + idPrefix: "ui-tabs-", + panelTemplate: "<div></div>", + spinner: "<em>Loading…</em>", + tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>", + + // callbacks + activate: null, + add: null, + beforeActivate: null, + beforeLoad: null, + create: null, + disable: null, + enable: null, + load: null, + remove: null, + select: null, + show: null + } +}); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html new file mode 100644 index 000000000..e71fea3d4 --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.html @@ -0,0 +1,185 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Tabs Test Suite</title> + + <link rel="stylesheet" href="../../../themes/base/jquery.ui.tabs.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../external/jquery.cookie.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.tabs.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="tabs_defaults_deprecated.js"></script> + <script src="tabs_core.js"></script> + <script src="tabs_events.js"></script> + <script src="tabs_methods.js"></script> + <script src="tabs_options.js"></script> + <script src="tabs_tickets.js"></script> + <script src="tabs_deprecated.js"></script> + + <script> + function tabs_state( tabs ) { + var expected = $.makeArray( arguments ).slice( 1 ); + var actual = tabs.find( ".ui-tabs-nav li" ).map(function() { + var tab = $( this ), + panel = $( $.ui.tabs.prototype._sanitizeSelector( + "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + tabIsActive = tab.hasClass( "ui-state-active" ), + panelIsActive = panel.css( "display" ) !== "none"; + + if ( tabIsActive && panelIsActive ) { + return 1; + } + if ( !tabIsActive && !panelIsActive ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( actual, expected ); + } + + function tabs_disabled( tabs, state ) { + var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) { + if ( typeof state === "boolean" ) { + return state ? 1 : 0; + } else { + return $.inArray( index, state ) !== -1 ? 1 : 0; + } + }); + + var internalState = tabs.tabs( "option", "disabled" ); + if ( internalState === false ) { + internalState = []; + } + if ( internalState === true ) { + internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) { + return index; + }); + } + + var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) { + var tab = $( this ), + tabIsDisabled = tab.hasClass( "ui-state-disabled" ); + + if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) { + return 1; + } + if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) { + return 0; + } + return -1; // mixed state - invalid + }).get(); + same( tabs.tabs( "option", "disabled" ), state ); + same( actual, expected ); + } + </script> + <script> + // disable this stale testsuite for testswarm only + var url = window.location.search; + url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); + if ( url && url.indexOf("http") == 0 ) { + // reset config to kill previous tests; make sure testsuite.js is loaded afterwards to init the testswarm script + QUnit.init(); + test("tabs", function() { ok(true, "disabled tabs testsuite"); }); + } + </script> + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Tabs Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +<div id="tabs1"> + <ul> + <li><a href="#fragment-1"><span>1</span></a></li> + <li><a href="#fragment-2"><span>2</span></a></li> + <li><a href="#fragment-3"><span>3</span></a></li> + </ul> + <div id="fragment-1"></div> + <div id="fragment-2"></div> + <div id="fragment-3"></div> +</div> + +<div id="tabs2"> + <ul> + <li><a href="#colon:test"><span>1</span></a></li> + <li><a href="#inline-style"><span>2</span></a></li> + <li><a href="data/test.html#test"><span>3</span></a></li> + <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> + </ul> + <div id="colon:test"></div> + <div style="height: 300px;" id="inline-style"></div> +</div> + +<div id="tabs3"> + <div> + <ul id="tabs3-list"> + <li><a href="#tabs3-1">1</a></li> + </ul> + </div> +</div> + +<div id="tabs4"> + <ul id="tabs4-list"> + <li><a href="#tabs4-1">1</a></li> + </ul> + <ol> + <li><a href="#tabs4-1">1</a></li> + </ol> +</div> + +<div id="tabs4a"> + <ol id="tabs4a-list"> + <li><a href="#tabs4a-1">1</a></li> + </ol> + <ul> + <li><a href="#tabs4a-1">1</a></li> + </ul> +</div> + +<div id="tabs5"> + <div> + <ul id="tabs5-list"></ul> + </div> +</div> + +<div id="tabs6"> + <ul id="tabs6-list"> + <li><a href="#tabs6-1">1</a> + <ul> + <li><a href="#item6-3">3</a></li> + <li><a href="#item6-4">4</a></li> + </ul> + </li> + <li><a href="#tabs6-2">2</a></li> + </ul> + <div id="tabs6-1"></div> + <div id="tabs6-2"></div> +</div> + +<div id="tabs7"> + <ul id="tabs7-list"> + <li><a href="#tabs7-1">1</a></li> + <li><a href="#tabs7-2">2</a></li> + </ul> + <div id="tabs7-2"></div> + <div id="tabs7-1"></div> +</div> + +</div> +</body> +</html> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js new file mode 100644 index 000000000..25877e69c --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.js @@ -0,0 +1,386 @@ +(function( $ ) { + +module("tabs (deprecated): core"); + +test( "panel ids", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(); + + element.one( "tabsbeforeload", function( event, ui ) { + equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "from title attribute" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 4 ); + + element.one( "tabsbeforeload", function( event, ui ) { + ok( /^ui-tabs-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 2 ); +}); + +module("tabs (deprecated): options"); + +test('ajaxOptions', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('cache', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('idPrefix', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('tabTemplate', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('panelTemplate', function() { + ok(false, "missing test - untested code is broken code."); +}); + +test('cookie', function() { + expect(6); + + el = $('#tabs1'); + var cookieName = 'tabs_test', cookieObj = { name: cookieName }; + $.cookie(cookieName, null); // blank state + var cookie = function() { + return parseInt($.cookie(cookieName), 10); + }; + + el.tabs({ cookie: cookieObj }); + equals(cookie(), 0, 'initial cookie value'); + + el.tabs('destroy'); + el.tabs({ active: 1, cookie: cookieObj }); + equals(cookie(), 1, 'initial cookie value, from active property'); + + el.tabs('option', 'active', 2); + equals(cookie(), 2, 'cookie value updated after activating'); + + el.tabs('destroy'); + $.cookie(cookieName, 1); + el.tabs({ cookie: cookieObj }); + equals(cookie(), 1, 'initial cookie value, from existing cookie'); + + el.tabs('destroy'); + el.tabs({ cookie: cookieObj, collapsible: true }); + el.tabs('option', 'active', false); + equals(cookie(), -1, 'cookie value for all tabs unselected'); + + el.tabs('destroy'); + ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + +}); + + +test('spinner', function() { + expect(4); + stop(); + + el = $('#tabs2'); + + el.tabs({ + selected: 2, + load: function() { + // spinner: default spinner + setTimeout(function() { + equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); + equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); + el.tabs('destroy'); + el.tabs({ + selected: 2, + spinner: '<img src="spinner.gif" alt="">', + load: function() { + // spinner: image + equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); + equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); + start(); + } + }); + }, 1); + } + }); +}); + +test('selected', function() { + expect(10); + + el = $('#tabs1').tabs(); + equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); + + el.tabs('destroy'); + //set a hash in the url + location.hash = '#fragment-2'; + //selection of tab with divs ordered differently than list + el = $('#tabs1').tabs(); + equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + + el.tabs('destroy'); + //set a hash in the url + location.hash = '#tabs7-2'; + //selection of tab with divs ordered differently than list + el = $('#tabs7').tabs(); + equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + + el.tabs('destroy'); + el = $('#tabs1').tabs({ selected: -1 }); + equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected'); + equals( $('li.ui-tabs-active', el).length, 0, 'no tab should be selected' ); + equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' ); + + el.tabs('destroy'); + el.tabs({ selected: 1 }); + equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); + + el.tabs('destroy'); + el.tabs({ selected: 99 }); + equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('option', 'selected', 0); + equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected'); + + el.tabs('destroy'); + el = $('#tabs1').tabs(); + el.tabs('select', 1); + equals(el.tabs('option', 'selected'), 1, 'should select tab'); +}); + +module("tabs (deprecated): events"); + +test('enable', function() { + expect(4); + + var uiObj; + el = $('#tabs1').tabs({ + disabled: [ 0, 1 ], + enable: function (event, ui) { + uiObj = ui; + } + }); + el.tabs('enable', 1); + ok(uiObj !== undefined, 'trigger callback'); + equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); + equals(uiObj.index, 1, 'contain index'); +}); + +test('disable', function() { + expect(4); + + var uiObj; + el = $('#tabs1').tabs({ + disable: function (event, ui) { + uiObj = ui; + } + }); + el.tabs('disable', 1); + ok(uiObj !== undefined, 'trigger callback'); + equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); + equals(uiObj.index, 1, 'contain index'); +}); + +test('show', function() { + expect(5); + + var uiObj, eventObj; + el = $('#tabs1').tabs({ + show: function(event, ui) { + uiObj = ui; + eventObj = event; + } + }); + ok(uiObj !== undefined, 'trigger callback after initialization'); + equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element'); + equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element'); + equals(uiObj.index, 0, 'contain index'); + + el.find( "li:eq(1) a" ).simulate( "click" ); + equals( eventObj.originalEvent.type, "click", "show triggered by click" ); + +}); + +test('select', function() { + expect(7); + + var eventObj; + el = $('#tabs1').tabs({ + select: function(event, ui) { + ok(true, 'select triggered after initialization'); + equals(this, el[0], "context of callback"); + equals(event.type, 'tabsselect', 'event type in callback'); + equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element'); + equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element'); + equals(ui.index, 1, 'contain index'); + evenObj = event; + } + }); + el.tabs('select', 1); + + el.find( "li:eq(1) a" ).simulate( "click" ); + equals( evenObj.originalEvent.type, "click", "select triggered by click" ); +}); + +module( "tabs (deprecated): methods" ); + +test( "add", function() { + expect( 27 ); + + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + + // add without index + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 3, "ui.index" ); + equal( $( ui.tab ).text(), "New", "ui.tab" ); + equal( ui.panel.id, "new", "ui.panel" ); + }); + element.tabs( "add", "#new", "New" ); + tabs_state( element, 1, 0, 0, 0 ); + var tab = element.find( ".ui-tabs-nav li" ).last(), + anchor = tab.find( "a" ); + equals( tab.text(), "New", "label" ); + equals( anchor.attr( "href" ), "#new", "href" ); + equals( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); + anchor.simulate( "mouseover" ); + ok( tab.hasClass( "ui-state-hover" ), "hovered" ); + anchor.simulate( "click" ); + tabs_state( element, 0, 0, 0, 1 ); + + // add remote tab with index + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 1, "ui.index" ); + equal( $( ui.tab ).text(), "New Remote", "ui.tab" ); + equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" ); + }); + element.tabs( "add", "data/test.html", "New Remote", 1 ); + tabs_state( element, 0, 0, 0, 0, 1 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 1 ); + anchor = tab.find( "a" ); + equals( tab.text(), "New Remote", "label" ); + equals( anchor.attr( "href" ), "data/test.html", "href" ); + ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" ); + ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); + anchor.simulate( "mouseover" ); + ok( tab.hasClass( "ui-state-hover" ), "hovered" ); + anchor.simulate( "click" ); + tabs_state( element, 0, 1, 0, 0, 0 ); + + // add to empty tab set + element = $( "<div><ul></ul></div>" ).tabs(); + equals( element.tabs( "option", "active" ), false, "active: false on init" ); + element.one( "tabsadd", function( event, ui ) { + equal( ui.index, 0, "ui.index" ); + equal( $( ui.tab ).text(), "First", "ui.tab" ); + equal( ui.panel.id, "first", "ui.panel" ); + }); + element.tabs( "add", "#first", "First" ); + tabs_state( element, 1 ); + equals( element.tabs( "option", "active" ), 0, "active: 0 after add" ); +}); + +test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(); + equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); + element.tabs( "add", "/new", "New" ); + equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); +}); + +test( "remove", function() { + expect( 17 ); + + var element = $( "#tabs1" ).tabs({ active: 1 }); + tabs_state( element, 0, 1, 0 ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "2", "ui.tab" ); + equal( ui.panel.id, "fragment-2", "ui.panel" ); + }); + element.tabs( "remove", 1 ); + tabs_state( element, 0, 1 ); + equals( element.tabs( "option", "active" ), 1 ); + equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0, + "remove correct list item" ); + equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "3", "ui.tab" ); + equal( ui.panel.id, "fragment-3", "ui.panel" ); + }); + element.tabs( "remove", 1 ); + tabs_state( element, 1 ); + equals( element.tabs( "option", "active"), 0 ); + + element.one( "tabsremove", function( event, ui ) { + equal( ui.index, -1, "ui.index" ); + equal( $( ui.tab ).text(), "1", "ui.tab" ); + equal( ui.panel.id, "fragment-1", "ui.panel" ); + }); + element.tabs( "remove", 0 ); + equals( element.tabs( "option", "active" ), false ); +}); + +test('select', function() { + expect(6); + + el = $('#tabs1').tabs(); + + el.tabs('select', 1); + equals(el.tabs('option', 'active'), 1, 'should select tab'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('select', 0); + equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab'); + + el.tabs('destroy'); + el.tabs({ collapsible: true }); + el.tabs('select', -1); + equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1'); + + el.tabs('destroy'); + el.tabs(); + el.tabs('select', 0); + equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); + el.tabs('select', -1); + equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); + + el.tabs('select', '#fragment-2'); + equals(el.tabs('option', 'active'), 1, 'should select tab by id'); +}); + +test( "length", function() { + expect( 2 ); + + equals( $( "#tabs1" ).tabs().tabs( "length" ), 3, "basic tabs" ); + equals( $( "#tabs2" ).tabs().tabs( "length" ), 5, "ajax tabs with missing panels" ); +}); + +test( "url", function() { + expect( 2 ); + + var element = $( "#tabs2" ).tabs(), + tab = element.find( "a" ).eq( 3 ); + + element.tabs( "url", 3, "data/test2.html" ); + equals( tab.attr( "href" ), "data/test2.html", "href was updated" ); + element.one( "tabsbeforeload", function( event, ui ) { + equals( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" ); + event.preventDefault(); + }); + element.tabs( "option", "active", 3 ); +}); + +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index 24fb62f9b..28925a2b9 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -1,105 +1,198 @@ -/* - * tabs_events.js - */ -(function($) { - -module("tabs: events"); - -test('select', function() { - expect(7); - - var eventObj; - el = $('#tabs1').tabs({ - select: function(event, ui) { - ok(true, 'select triggered after initialization'); - equals(this, el[0], "context of callback"); - equals(event.type, 'tabsselect', 'event type in callback'); - equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element'); - equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element'); - equals(ui.index, 1, 'contain index'); - evenObj = event; - } +(function( $ ) { + +module( "tabs: events" ); + +test( "beforeActivate", function() { + expect( 38 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }), + tabs = element.find( ".ui-tabs-nav a" ), + panels = element.find( ".ui-tabs-panel" ); + + // from collapsed + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldPanel size" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); + tabs_state( element, 0, 0, 0 ); }); - el.tabs('select', 1); - - el.find( "li:eq(1) a" ).simulate( "click" ); - equals( evenObj.originalEvent.type, "click", "select triggered by click" ); -}); - -test('load', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('show', function() { - expect(5); - - var uiObj, eventObj; - el = $('#tabs1').tabs({ - show: function(event, ui) { - uiObj = ui; - eventObj = event; - } + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0 ); + + // switching tabs + element.one( "tabsbeforeactivate", function( event, ui ) { + equals( event.originalEvent.type, "click", "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + tabs_state( element, 1, 0, 0 ); }); - ok(uiObj !== undefined, 'trigger callback after initialization'); - equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element'); - equals(uiObj.index, 0, 'contain index'); - - el.find( "li:eq(1) a" ).simulate( "click" ); - equals( eventObj.originalEvent.type, "click", "show triggered by click" ); - + tabs.eq( 1 ).click(); + tabs_state( element, 0, 1, 0 ); + + // collapsing + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" ); + equals( ui.newTab.size(), 0, "newTab size" ); + equals( ui.newPanel.size(), 0, "newPanel size" ); + tabs_state( element, 0, 1, 0 ); + }); + element.tabs( "option", "active", false ); + tabs_state( element, 0, 0, 0 ); + + // prevent activation + element.one( "tabsbeforeactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldTab" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + event.preventDefault(); + tabs_state( element, 0, 0, 0 ); + }); + element.tabs( "option", "active", 1 ); + tabs_state( element, 0, 0, 0 ); }); -test('add', function() { - - // TODO move to methods, not at all event related... - - var el = $('<div id="tabs"><ul></ul></div>').tabs(); - equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab'); - - el.tabs('add', '#test1', 'Test 1'); - equals(el.tabs('option', 'selected'), 0, 'First tab added should be auto selected'); - - el.tabs('add', '#test2', 'Test 2'); - equals(el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected'); - -}); +test( "activate", function() { + expect( 30 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }), + tabs = element.find( ".ui-tabs-nav a" ), + panels = element.find( ".ui-tabs-panel" ); + + // from collapsed + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 0, "oldTab size" ); + equals( ui.oldPanel.size(), 0, "oldPanel size" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); + tabs_state( element, 1, 0, 0 ); + }); + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0 ); + + // switching tabs + element.one( "tabsactivate", function( event, ui ) { + equals( event.originalEvent.type, "click", "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" ); + equals( ui.newTab.size(), 1, "newTab size" ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" ); + equals( ui.newPanel.size(), 1, "newPanel size" ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); + tabs_state( element, 0, 1, 0 ); + }); + tabs.eq( 1 ).click(); + tabs_state( element, 0, 1, 0 ); + + // collapsing + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.oldTab.size(), 1, "oldTab size" ); + strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" ); + equals( ui.oldPanel.size(), 1, "oldPanel size" ); + strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" ); + equals( ui.newTab.size(), 0, "newTab size" ); + equals( ui.newPanel.size(), 0, "newPanel size" ); + tabs_state( element, 0, 0, 0 ); + }); + element.tabs( "option", "active", false ); + tabs_state( element, 0, 0, 0 ); -test('remove', function() { - ok(false, "missing test - untested code is broken code."); + // prevent activation + element.one( "tabsbeforeactivate", function( event ) { + ok( true, "tabsbeforeactivate" ); + event.preventDefault(); + }); + element.one( "tabsactivate", function() { + ok( false, "tabsactivate" ); + }); + element.tabs( "option", "active", 1 ); }); -test('enable', function() { - expect(4); - - var uiObj; - el = $('#tabs1').tabs({ - disabled: [ 0, 1 ], - enable: function (event, ui) { - uiObj = ui; - } +test( "beforeLoad", function() { + expect( 21 ); + + var tab, panelId, panel, + element = $( "#tabs2" ).tabs(); + + // TODO: init +// element.one( "tabsbeforeload", function( event, ui ) { +// }); +// element.tabs({ active: 2 }); + + // .option() + element.one( "tabsbeforeload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + ok( !( "originalEvent" in event ), "originalEvent" ); + ok( "abort" in ui.jqXHR, "jqXHR" ); + ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.html(), "", "panel html" ); + event.preventDefault(); + tabs_state( element, 1, 0, 0, 0, 0 ); }); - el.tabs('enable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0, 0 ); + equals( panel.html(), "", "panel html after" ); + + // click, change panel content + element.one( "tabsbeforeload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + equals( event.originalEvent.type, "click", "originalEvent" ); + ok( "abort" in ui.jqXHR, "jqXHR" ); + ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + ui.panel.html( "<p>testing</p>" ); + event.preventDefault(); + tabs_state( element, 0, 0, 1, 0, 0 ); + }); + element.find( ".ui-tabs-nav a" ).eq( 3 ).click(); + tabs_state( element, 0, 0, 0, 1, 0 ); + equals( panel.html(), "<p>testing</p>", "panel html after" ); }); -test('disable', function() { - expect(4); - - var uiObj; - el = $('#tabs1').tabs({ - disable: function (event, ui) { - uiObj = ui; - } - }); - el.tabs('disable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); +test( "load", function() { + ok( false, "missing test - untested code is broken code." ); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 0209af697..361ace45b 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -1,61 +1,6 @@ -/* - * tabs_methods.js - */ -(function($) { - -module("tabs: methods"); - -test('init', function() { - expect(9); - - el = $('#tabs1').tabs(); - - ok(true, '.tabs() called on element'); - ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container'); - ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' ); - ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' ); - ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li'); - ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li'); - equals( el.tabs('option', 'selected'), 0, 'selected option set' ); - equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active'); - equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' ); -}); +(function( $ ) { -test('init with hash', function() { - expect(5); - - //set a hash in the url - location.hash = '#fragment-2'; - - //selection of tab with divs ordered differently than list - el = $('#tabs1').tabs(); - - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); - - ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active'); - ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden'); - - ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active'); - ok(!$('#tabs1 div:eq(1)').is('.ui-tabs-hide'), 'second div for second tab should not be hidden'); -}); - -test('init mismatched order with hash', function() { - expect(5); - - //set a hash in the url - location.hash = '#tabs7-2'; - - //selection of tab with divs ordered differently than list - el = $('#tabs7').tabs(); - - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); - - ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active'); - ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden'); - - ok($('#tabs7-list li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active'); - ok(!$('#tabs7 div:eq(0)').is('.ui-tabs-hide'), 'first div for second tab should not be hidden'); -}); +module( "tabs: methods" ); test('destroy', function() { expect(6); @@ -66,148 +11,151 @@ test('destroy', function() { ok( el.is(':not(.ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-tabs-collapsible)'), 'remove classes from container'); ok( $('ul', el).is(':not(.ui-tabs-nav, .ui-helper-reset, .ui-helper-clearfix, .ui-widget-header, .ui-corner-all)'), 'remove classes from list' ); - ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom, .ui-tabs-hide)'), 'remove classes to panel' ); - ok( $('li:eq(0)', el).is(':not(.ui-tabs-selected, .ui-state-active, .ui-corner-top)'), 'remove classes from active li'); + ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom)'), 'remove classes to panel' ); + ok( $('li:eq(0)', el).is(':not(.ui-tabs-active, .ui-state-active, .ui-corner-top)'), 'remove classes from active li'); ok( $('li:eq(1)', el).is(':not(.ui-state-default, .ui-corner-top)'), 'remove classes from inactive li'); ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li'); }); -test('enable', function() { - expect(8); +test( "enable", function() { + expect( 8 ); - el = $('#tabs1').tabs({ disabled: [ 0, 1 ] }); - el.tabs("enable", 1); - ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same(el.tabs('option', 'disabled'), [ 0 ], 'update property'); - - // enable all tabs - el.tabs({ disabled: [ 0, 1 ] }); - el.tabs("enable"); - ok( !$('li.ui-state-disabled', el).length, 'enable all'); - same(el.tabs('option', 'disabled'), false, 'update property'); + var element = $( "#tabs1" ).tabs({ disabled: true }); + tabs_disabled( element, true ); + element.tabs( "enable" ); + tabs_disabled( element, false ); + element.tabs( "destroy" ); - el.tabs('destroy'); - // enable all tabs one by one - el.tabs({ disabled: [ 1, 2 ] }); - el.tabs("enable", 1); - ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same(el.tabs('option', 'disabled'), [ 2 ], 'update property'); - el.tabs("enable", 2); - ok( $('li:eq(2)', el).is(':not(.ui-state-disabled)'), 'remove class from li'); - same( el.tabs('option', 'disabled'), false, 'set to false'); + element.tabs({ disabled: [ 0, 1 ] }); + tabs_disabled( element, [ 0, 1 ] ); + element.tabs( "enable" ); + tabs_disabled( element, false ); }); -test('disable', function() { - expect(12); - - // normal - el = $('#tabs1').tabs(); - el.tabs('disable', 1); - ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 1 ], 'update disabled property'); - - // disable selected - el.tabs('disable', 0); - ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to selected li'); - same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property'); - - // disable all tabs - el.tabs('disable'); - same( $('li.ui-state-disabled', el).length, 3, 'disable all'); - same(el.tabs('option', 'disabled'), true, 'set to true'); - - el.tabs("destroy"); - // disable all tabs one by one - el.tabs(); - el.tabs('disable', 0); - ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 0 ], 'update disabled property'); - el.tabs('disable', 1); - ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property'); - el.tabs('disable', 2); - ok( $('li:eq(2)', el).is('.ui-state-disabled'), 'add class to li'); - same(el.tabs('option', 'disabled'), true, 'set to true'); +test( "enable( index )", function() { + expect( 10 ); + + var element = $( "#tabs1" ).tabs({ disabled: true }); + tabs_disabled( element, true ); + // fully disabled -> partially disabled + element.tabs( "enable", 1 ); + tabs_disabled( element, [ 0, 2 ] ); + // partially disabled -> partially disabled + element.tabs( "enable", 2 ); + tabs_disabled( element, [ 0 ] ); + // already enabled tab, no change + element.tabs( "enable", 2 ); + tabs_disabled( element, [ 0 ] ); + // partially disabled -> fully enabled + element.tabs( "enable", 0 ); + tabs_disabled( element, false ); }); -test('add', function() { - expect(4); - - el = $('#tabs1').tabs(); - el.tabs('add', '#new', 'New'); - - var added = $('li:last', el).simulate('mouseover'); - ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab'); - added.simulate('mouseout'); - var other = $('li:first', el).simulate('mouseover'); - ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab'); - other.simulate('mouseout'); +test( "disable", function() { + expect( 8 ); - equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page'); + var element = $( "#tabs1" ).tabs({ disabled: false }); + tabs_disabled( element, false ); + element.tabs( "disable" ); + tabs_disabled( element, true ); + element.tabs( "destroy" ); - ok(false, "missing test - untested code is broken code."); + element.tabs({ disabled: [ 0, 1 ] }); + tabs_disabled( element, [ 0, 1 ] ); + element.tabs( "disable" ); + tabs_disabled( element, true ); }); -test('remove', function() { - expect(4); - - el = $('#tabs1').tabs(); - - el.tabs('remove', 0); - equals(el.tabs('length'), 2, 'remove tab'); - equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item'); - equals($('#fragment-1').length, 0, 'remove associated panel'); - - // TODO delete tab -> focus tab to right - // TODO delete last tab -> focus tab to left - - el.tabs('select', 1); - el.tabs('remove', 1); - equals(el.tabs('option', 'selected'), 0, 'update selected property'); +test( "disable( index )", function() { + expect( 10 ); + + var element = $( "#tabs1" ).tabs({ disabled: false }); + tabs_disabled( element, false ); + // fully enabled -> partially disabled + element.tabs( "disable", 1 ); + tabs_disabled( element, [ 1 ] ); + // partially disabled -> partially disabled + element.tabs( "disable", 2 ); + tabs_disabled( element, [ 1, 2 ] ); + // already disabled tab, no change + element.tabs( "disable", 2 ); + tabs_disabled( element, [ 1, 2 ] ); + // partially disabled -> fully disabled + element.tabs( "disable", 0 ); + tabs_disabled( element, true ); }); -test('select', function() { - expect(6); - - el = $('#tabs1').tabs(); - - el.tabs('select', 1); - equals(el.tabs('option', 'selected'), 1, 'should select tab'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', 0); - equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in the already selected tab'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', -1); - equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in -1'); - - el.tabs('destroy'); - el.tabs(); - el.tabs('select', 0); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); - el.tabs('select', -1); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); - - el.tabs('select', '#fragment-2'); - equals(el.tabs('option', 'selected'), 1, 'should select tab by id'); +test( "refersh", function() { + expect( 27 ); + + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, false ); + + // disable tab via markup + element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + + // add remote tab + element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1, + "panel added for remote tab" ); + + // remove all tabs + element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove(); + element.tabs( "refresh" ); + tabs_state( element ); + equals( element.tabs( "option", "active" ), false, "no active tab" ); + + // 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>" ) + .append( "<li><a href='#newTab4'>new 4</a></li>" ) + .append( "<li><a href='#newTab5'>new 5</a></li>" ); + element + .append( "<div id='newTab2'>new 2</div>" ) + .append( "<div id='newTab3'>new 3</div>" ) + .append( "<div id='newTab4'>new 4</div>" ) + .append( "<div id='newTab5'>new 5</div>" ); + element.tabs( "refresh" ); + tabs_state( element, 0, 0, 0, 0 ); + tabs_disabled( element, [ 0 ] ); + + // activate third tab + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0 ); + tabs_disabled( element, [ 0 ] ); + + // 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" ); + tabs_state( element, 0, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // 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" ); + tabs_state( element, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // 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" ); + tabs_state( element, 1 ); + tabs_disabled( element, false ); }); test('load', function() { ok(false, "missing test - untested code is broken code."); }); -test('url', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('length', function() { - expect(1); - - el = $('#tabs1').tabs(); - equals(el.tabs('length'), $('ul a', el).length, ' should return length'); -}); - -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 1c621ac28..884a566c6 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -1,66 +1,134 @@ -/* - * tabs_options.js - */ -(function($) { +(function( $ ) { -module("tabs: options"); +module( "tabs: options" ); -test('ajaxOptions', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ active: default }", function() { + expect( 4 ); + + var element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "active" ), 0, "should be 0 by default" ); + tabs_state( element, 1, 0, 0 ); + element.tabs( "destroy" ); + + location.hash = "#fragment-3"; + element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" ); + tabs_state( element, 0, 0, 1 ); + element.tabs( "destroy" ); }); -test('cache', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ active: false }", function() { + expect( 7 ); + + var element = $( "#tabs1" ).tabs({ + active: false, + collapsible: true + }); + tabs_state( element, 0, 0, 0 ); + equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" ); + strictEqual( element.tabs( "option", "active" ), false ); + + element.tabs( "option", "collapsible", false ); + tabs_state( element, 1, 0, 0 ); + equal( element.tabs( "option", "active" ), 0 ); + + element.tabs( "destroy" ); + element.tabs({ + active: false + }); + tabs_state( element, 1, 0, 0 ); + strictEqual( element.tabs( "option", "active" ), 0 ); }); -test('collapsible', function() { - expect(4); +test( "{ active: Number }", function() { + expect( 8 ); + + var element = $( "#tabs1" ).tabs({ + active: 2 + }); + equals( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); - el = $('#tabs1'); + element.tabs( "option", "active", 0 ); + equals( element.tabs( "option", "active" ), 0 ); + tabs_state( element, 1, 0, 0 ); - el.tabs({ collapsible: true }); - equals(el.tabs('option', 'collapsible'), true, 'option set'); - ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached'); - el.tabs('select', 0); - equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden'); - el.tabs('option', 'collapsible', false); - ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached'); + element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + element.tabs( "option", "active", 10 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); }); -test('cookie', function() { - expect(6); +if ( $.uiBackCompat === false ) { + test( "{ active: -Number }", function() { + var element = $( "#tabs1" ).tabs({ + active: -1 + }); + equals( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); + + element.tabs( "option", "active", -2 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.tabs( "option", "active", -10 ); + equals( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.tabs( "option", "active", -3 ); + equals( element.tabs( "option", "active" ), 0 ); + tabs_state( element, 1, 0, 0 ); + }); +} + +test( "active - mismatched tab/panel order", function() { + expect( 3 ); + + location.hash = "#tabs7-2"; + var element = $( "#tabs7" ).tabs(); + equals( element.tabs( "option", "active" ), 1, "should be 1 based on URL" ); + tabs_state( element, 0, 1 ); + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0 ); +}); - el = $('#tabs1'); - var cookieName = 'tabs_test', cookieObj = { name: cookieName }; - $.cookie(cookieName, null); // blank state - var cookie = function() { - return parseInt($.cookie(cookieName), 10); - }; +test( "{ collapsible: false }", function() { + expect( 4 ); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 0, 'initial cookie value'); + var element = $( "#tabs1" ).tabs({ + active: 1 + }); + element.tabs( "option", "active", false ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); - el.tabs('destroy'); - el.tabs({ selected: 1, cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from selected property'); + element.find( ".ui-state-active a" ).eq( 1 ).click(); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); +}); - el.tabs('select', 2); - equals(cookie(), 2, 'cookie value updated after select'); +test( "{ collapsible: true }", function() { + expect( 6 ); - el.tabs('destroy'); - $.cookie(cookieName, 1); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from existing cookie'); + var element = $( "#tabs1" ).tabs({ + active: 1, + collapsible: true + }); - el.tabs('destroy'); - el.tabs({ cookie: cookieObj, collapsible: true }); - el.tabs('select', 0); - equals(cookie(), -1, 'cookie value for all tabs unselected'); + element.tabs( "option", "active", false ); + equal( element.tabs( "option", "active" ), false ); + tabs_state( element, 0, 0, 0 ); - el.tabs('destroy'); - ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + element.tabs( "option", "active", 1 ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + element.find( ".ui-state-active a" ).click(); + equal( element.tabs( "option", "active" ), false ); + tabs_state( element, 0, 0, 0 ); }); test('disabled', function() { @@ -87,50 +155,4 @@ test('fx', function() { ok(false, "missing test - untested code is broken code."); }); -test('idPrefix', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('panelTemplate', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('selected', function() { - expect(8); - - el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); - - el.tabs('destroy'); - el.tabs({ selected: -1 }); - equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected'); - equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' ); - equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' ); - - el.tabs('destroy'); - el.tabs({ selected: null }); - equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)'); - - el.tabs('destroy'); - el.tabs({ selected: 1 }); - equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); - - el.tabs('destroy'); - el.tabs({ selected: 99 }); - equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('option', 'selected', 0); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected'); -}); - -test('spinner', function() { - ok(false, "missing test - untested code is broken code."); -}); - -test('tabTemplate', function() { - ok(false, "missing test - untested code is broken code."); -}); - })(jQuery); diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js index 4a09d59e4..d7a59cb5b 100644 --- a/tests/unit/tabs/tabs_tickets.js +++ b/tests/unit/tabs/tabs_tickets.js @@ -5,111 +5,33 @@ module("tabs: tickets"); -test('#2715 - id containing colon', function() { - // http://dev.jqueryui.com/ticket/2715 - expect(4); - - el = $('#tabs2').tabs(); - ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' ); - ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' ); - - el.tabs('select', 1).tabs('select', 0); - ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' ); - ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' ); - -}); - -test('#???? - panel containing inline style', function() { - expect(3); - - var inlineStyle = function(property) { - return $('#inline-style')[0].style[property]; - }; - var expected = inlineStyle('height'); - - el = $('#tabs2').tabs(); - equals(inlineStyle('height'), expected, 'init should not remove inline style'); - - el.tabs('select', 1); - equals(inlineStyle('height'), expected, 'show tab should not remove inline style'); - - el.tabs('select', 0); - equals(inlineStyle('height'), expected, 'hide tab should not remove inline style'); - -}); - test('#3627 - Ajax tab with url containing a fragment identifier fails to load', function() { // http://dev.jqueryui.com/ticket/3627 expect(1); - el = $('#tabs2').tabs(); - - ok(/test.html$/.test( $('a:eq(2)', el).data('load.tabs') ), 'should ignore fragment identifier'); - + el = $('#tabs2').tabs({ + active: 2, + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok(/test.html$/.test( ui.ajaxSettings.url ), 'should ignore fragment identifier'); + } + }); }); test('#4033 - IE expands hash to full url and misinterprets tab as ajax', function() { // http://dev.jqueryui.com/ticket/4033 expect(1); - el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>') - .appendTo('#main').tabs(); - - equals($('a', el).data('load.tabs'), undefined, 'should not create ajax tab'); - -}); - -test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() { - // http://dev.jqueryui.com/ticket/5069 - expect(2); - - el = $('#tabs2').tabs(); - equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs'); - el.tabs('add', '/ajax_html_echo', 'Test'); - equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs'); - -}); - -test('#5893 - Sublist in the tab list are considered as tab', function() { - // http://dev.jqueryui.com/ticket/5893 - expect(1); - - el = $('#tabs6').tabs(); - equals(el.tabs( "length" ), 2, 'should contain 2 tab'); - -}); - -asyncTest( "#4581 - title attribute for remote tabs does not support foreign languages", function() { - expect( 1 ); - - $( "#tabs2" ).tabs({ - selected: 3, - load: function( event, ui ) { - equal( ui.panel.id, "∫ßáö_Սե", "proper title" ); - start(); + el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>'); + el.appendTo('#main'); + el.tabs({ + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok( false, 'should not be an ajax tab'); } }); -}); - -test('#6710 - selectors are global', function() { - // http://bugs.jqueryui.com/ticket/6710 - expect(1); - - var container = $('\ - <div>\ - <div id="tabs_6710">\ - <ul>\ - <li><a href="#tabs-1_6710">Nunc tincidunt</a></li>\ - <li><a href="#tabs-2_6710">Proin dolor</a></li>\ - </ul>\ - <div id="tabs-1_6710"> <p>first</p> </div>\ - <div id="tabs-2_6710"> <p>second</p>\ - </div>\ - </div>'); - container.find('#tabs_6710').tabs(); - ok( container.find('#tabs-2_6710').hasClass('ui-tabs-hide'), 'should find panels and add corresponding classes' ); + equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct'); }); - })(jQuery); diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 517b5dfa3..4b273ce78 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -26,8 +26,6 @@ var privateMethods = [ "_createWidget", "destroy", "option", - "enable", - "disable", "_trigger" ]; diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js index 419d7a085..c1fc49f1a 100644 --- a/tests/unit/tooltip/tooltip_defaults.js +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -1,16 +1,15 @@ -/* - * tooltip_defaults.js - */ +commonWidgetTests( "tooltip", { + defaults: { + disabled: false, + items: "[title]", + content: $.ui.tooltip.prototype.options.content, + position: { + my: "left center", + at: "right center", + offset: "15 0" + }, -var tooltip_defaults = { - disabled: false, - items: "[title]", - content: $.ui.tooltip.prototype.options.content, - position: { - my: "left center", - at: "right center", - offset: "15 0" + // callbacks + create: null } -}; - -commonWidgetTests('tooltip', { defaults: tooltip_defaults }); +}); diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html index 910345e4f..e74abb317 100644 --- a/tests/unit/widget/widget.html +++ b/tests/unit/widget/widget.html @@ -14,7 +14,6 @@ <script src="../testsuite.js"></script> <script src="widget_core.js"></script> - <script src="widget_tickets.js"></script> <script src="../swarminject.js"></script> </head> diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index 34f5ef67f..b1c27b104 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -202,6 +202,7 @@ test( "merge multiple option arguments", function() { $.widget( "ui.testWidget", { _create: function() { same( this.options, { + create: null, disabled: false, option1: "value1", option2: "value2", @@ -249,6 +250,7 @@ test( "._getCreateOptions()", function() { }, _create: function() { same( this.options, { + create: null, disabled: false, option1: "override1", option2: "value2", @@ -288,6 +290,45 @@ test( "re-init", function() { same( actions, [ "optionfoo", "init" ], "correct methods called on re-init with options" ); }); +test( "inheritance - options", function() { + // #5830 - Widget: Using inheritance overwrites the base classes options + $.widget( "ui.testWidgetBase", { + options: { + obj: { + key1: "foo", + key2: "bar" + }, + arr: [ "testing" ] + } + }); + + $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { + options: { + obj: { + key1: "baz" + }, + arr: [ "alpha", "beta" ] + } + }); + + same( $.ui.testWidgetBase.prototype.options.obj, { + key1: "foo", + key2: "bar" + }, "base class option object not overridden"); + same( $.ui.testWidgetBase.prototype.options.arr, [ "testing" ], + "base class option array not overridden"); + + same( $.ui.testWidgetExtension.prototype.options.obj, { + key1: "baz", + key2: "bar" + }, "extension class option object extends base"); + same( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], + "extension class option array overwrites base"); + + delete $.ui.testWidgetBase; + delete $.ui.testWidgetExtension; +}); + test( "._super()", function() { expect( 9 ); var instance; @@ -379,6 +420,7 @@ test( ".option() - getter", function() { var options = div.testWidget( "option" ); same( options, { + create: null, disabled: false, foo: "bar", baz: 5, @@ -795,6 +837,55 @@ test( "._trigger() - provide event and ui", function() { .testWidget( "testEvent" ); }); +test( "._trigger() - array as ui", function() { + // #6795 - Widget: handle array arguments to _trigger consistently + expect( 4 ); + + $.widget( "ui.testWidget", { + _create: function() {}, + testEvent: function() { + var ui = { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }; + var extra = { + bar: 5 + }; + this._trigger( "foo", null, [ ui, extra ] ); + } + }); + $( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) { + same( ui, { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }, "event: ui hash passed" ); + same( extra, { + bar: 5 + }, "event: extra argument passed" ); + }); + $( "#widget" ).testWidget({ + foo: function( event, ui, extra ) { + same( ui, { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }, "callback: ui hash passed" ); + same( extra, { + bar: 5 + }, "callback: extra argument passed" ); + } + }) + .testWidget( "testEvent" ); +}); + test( "._trigger() - instance as element", function() { expect( 4 ); $.widget( "ui.testWidget", { diff --git a/tests/unit/widget/widget_tickets.js b/tests/unit/widget/widget_tickets.js deleted file mode 100644 index 9c0bddf03..000000000 --- a/tests/unit/widget/widget_tickets.js +++ /dev/null @@ -1,91 +0,0 @@ -(function( $ ) { - -module( "widget: tickets" ); - -test( "#5830 - Widget: Using inheritance overwrites the base classes options", function() { - $.widget( "ui.testWidgetBase", { - options: { - obj: { - key1: "foo", - key2: "bar" - }, - arr: [ "testing" ] - } - }); - - $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { - options: { - obj: { - key1: "baz" - }, - arr: [ "alpha", "beta" ] - } - }); - - same( $.ui.testWidgetBase.prototype.options.obj, { - key1: "foo", - key2: "bar" - }, "base class option object not overridden"); - same( $.ui.testWidgetBase.prototype.options.arr, [ "testing" ], - "base class option array not overridden"); - - same( $.ui.testWidgetExtension.prototype.options.obj, { - key1: "baz", - key2: "bar" - }, "extension class option object extends base"); - same( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], - "extension class option array overwrites base"); - - delete $.ui.testWidgetBase; - delete $.ui.testWidgetExtension; -}); - -test( "#6795 - Widget: handle array arguments to _trigger consistently", function() { - expect( 4 ); - - $.widget( "ui.testWidget", { - _create: function() {}, - testEvent: function() { - var ui = { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }; - var extra = { - bar: 5 - }; - this._trigger( "foo", null, [ ui, extra ] ); - } - }); - $( "#widget" ).bind( "testwidgetfoo", function( event, ui, extra ) { - same( ui, { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }, "event: ui hash passed" ); - same( extra, { - bar: 5 - }, "event: extra argument passed" ); - }); - $( "#widget" ).testWidget({ - foo: function( event, ui, extra ) { - same( ui, { - foo: "bar", - baz: { - qux: 5, - quux: 20 - } - }, "callback: ui hash passed" ); - same( extra, { - bar: 5 - }, "callback: extra argument passed" ); - } - }) - .testWidget( "testEvent" ); -}); - -}( jQuery ) ); diff --git a/tests/visual/dialog/dialog.html b/tests/visual/dialog/dialog.html deleted file mode 100644 index 92f1bf510..000000000 --- a/tests/visual/dialog/dialog.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog(); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> - Dialog Content - </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_on_page_with_scrollbars.html b/tests/visual/dialog/dialog_on_page_with_scrollbars.html deleted file mode 100644 index ddd730a6a..000000000 --- a/tests/visual/dialog/dialog_on_page_with_scrollbars.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog on page with scrollbars</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog(); - }); - </script> -</head> -<body style="height:2000px;"> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html b/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html deleted file mode 100644 index 5ff5f45d0..000000000 --- a/tests/visual/dialog/dialog_option_buttons_OK_Cancel.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option buttons OK Cancel</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - buttons: { - "OK": function() { $(this).dialog('close'); }, - "Cancel": function() { $(this).dialog('close'); } - } - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> - Dialog Content - </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_closeOnEscape_false.html b/tests/visual/dialog/dialog_option_closeOnEscape_false.html deleted file mode 100644 index 14c525f29..000000000 --- a/tests/visual/dialog/dialog_option_closeOnEscape_false.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option closeOnEscape true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - closeOnEscape: false - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_closeOnEscape_true.html b/tests/visual/dialog/dialog_option_closeOnEscape_true.html deleted file mode 100644 index 06b1bc561..000000000 --- a/tests/visual/dialog/dialog_option_closeOnEscape_true.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option closeOnEscape true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - closeOnEscape: true - }); - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_modal_false.html b/tests/visual/dialog/dialog_option_modal_false.html deleted file mode 100644 index 80601d0d9..000000000 --- a/tests/visual/dialog/dialog_option_modal_false.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option modal false</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - modal: false - }); - }); - </script> -</head> -<body> -<input /> -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_modal_true.html b/tests/visual/dialog/dialog_option_modal_true.html deleted file mode 100644 index d3b487517..000000000 --- a/tests/visual/dialog/dialog_option_modal_true.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option modal true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - modal: true - }); - }); - </script> -</head> -<body> -<input /> -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_option_position_right_top.html b/tests/visual/dialog/dialog_option_position_right_top.html deleted file mode 100644 index 34ca3ad48..000000000 --- a/tests/visual/dialog/dialog_option_position_right_top.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog option position right top</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - - $("#dialog").dialog({ - position: ['right', 'top'] - }); - - }); - </script> -</head> -<body> - -<div id="dialog" title="Dialog Title"> - <p> Dialog Content </p> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_ticket_4350.html b/tests/visual/dialog/dialog_ticket_4350.html deleted file mode 100644 index 14925e925..000000000 --- a/tests/visual/dialog/dialog_ticket_4350.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog ticket #4350</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - $("#dialog").dialog({ - height: 200 - }); - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4350">#4350 - Dialog: No Scrollbars in IE in Quirksmode</a></h1> - -<input /> -<div id="dialog" title="Dialog Title"> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> - foo<p/> -</div> - -</body> -</html> diff --git a/tests/visual/dialog/dialog_ticket_4826.html b/tests/visual/dialog/dialog_ticket_4826.html deleted file mode 100644 index fb4814e16..000000000 --- a/tests/visual/dialog/dialog_ticket_4826.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Dialog Visual Test : Dialog ticket #4826</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript"> - $(function() { - - $('#dialog').dialog({ resizable: false }); - - $('#handle').click(function() { - $('#dialog') - .dialog('option', { - resizable: false - }) - .dialog('open'); - - return false; - }); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4826">#4826 - Setting resizable false toggles resizable on dialog</a></h1> - -<button id="handle">Click me!</button> -<div id="dialog" title="Dialog Title"> - <p id="msg">I should <strong>NEVER</strong> be resizable!</p> -</div> - -</body> -</html>
\ No newline at end of file diff --git a/tests/visual/index.html b/tests/visual/index.html deleted file mode 100644 index 4138e21ba..000000000 --- a/tests/visual/index.html +++ /dev/null @@ -1,62 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Visual Tests</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" /> -</head> - -<body> - -<h1>jQuery UI Visual Tests</h1> - -<h2>Composites</h2> -<ul> - <li><a href="all.html">All Widgets</a></li> - <li><a href="theme.html">All Widgets with Themes</a></li> - <li><a href="effects.all.html">Effects</a></li> - <li><a href="compound/accordion_tabs.html">Tabs contain Accordion</a></li> - <li><a href="compound/datepicker_dialog.html">Datepicker within a Dialog</a></li> - <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Draggable contains Tabs, contain Accordion, contain Draggables</a></li> - <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> - <li><a href="compound/sortable_accordion_sortable_tabs.html">Accordion within Tabs, both Sortable</a></li> - <li><a href="compound/tabs_tabs.html">Tabs contains Tabs</a></li> - <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> - <li><a href="compound/widgets_in_dialog.html">All Widgets within a Dialog</a></li> -</ul> - - -<h2>Interactions</h2> -<ul> - <li><a href="draggable/draggable.html">Draggable</a></li> - <li><a href="droppable/droppable.html">Droppable</a></li> - <li><a href="resizable/resizable.html">Resizable</a></li> - <li><a href="selectable/selectable.html">Selectable</a></li> - <li><a href="sortable/sortable.html">Sortable</a></li> -</ul> - -<h2>Widgets</h2> -<ul> - <li><a href="accordion/accordion.html">Accordion</a></li> - <li><a href="autocomplete/autocomplete.html">Autocomplete</a></li> - <li><a href="button/button.html">Button</a></li> - <li><a href="datepicker/datepicker.html">Datepicker</a></li> - <li><a href="dialog/dialog.html">Dialog</a></li> - <li> - <a href="menu/menu.html">Menu</a> - <ul> - <li><a href="menu/contextmenu.html">Context Menu</a></li> - <li><a href="menu/flyoutmenu.html">Flyout Menu</a></li> - <li><a href="menu/menubar.html">Menubar</a></li> - <li><a href="menu/drilldown.html">Drilldown Menu</a></li> - </ul> - </li> - <li><a href="progressbar/progressbar.html">Progressbar</a></li> - <li><a href="slider/slider.html">Slider</a></li> - <li><a href="spinner/spinner.html">Spinner</a></li> - <li><a href="tabs/tabs.html">Tabs</a></li> - <li><a href="tooltip/tooltip.html">Tooltip</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index cc1f4a939..1db12f25b 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -25,7 +25,7 @@ }); } - var menus = $("#menu1, #menu2, #menu3"); + var menus = $("#menu1, #menu2, #menu3, #menu4"); create(); $("#toggle-destroy").toggle(function() { @@ -41,7 +41,7 @@ <style> body { font-size:62.5%; } .ui-menu { width: 200px; margin-bottom: 2em; } - #menu3 { height: 200px; overflow: auto; } + #menu4 { height: 200px; overflow: auto; } </style> </head> <body> @@ -56,7 +56,7 @@ <li><a href="#">Salzburg</a></li> </ul> -<ul id="menu1"> +<ul id="menu2"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> @@ -95,6 +95,44 @@ </ul> <ul id="menu3"> + <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> + <li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> + <li><a href="#">Adamsville</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li><a href="#">Saarland</a></li> + <li> + <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> + <ul> + <li> + <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> + <ul> + <li><a href="#">Ada</a></li> + <li><a href="#">Saarland</a></li> + <li><a href="#">Salzburg</a></li> + </ul> + </li> + <li> + <a href="#">Delphi</a> + <ul> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> + <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> + </ul> + </li> + <li><a href="#">Perch</a></li> + </ul> + </li> +</ul> + +<ul id="menu4"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html index 5847c623f..d2185e97c 100644 --- a/tests/visual/menu/menubar.html +++ b/tests/visual/menu/menubar.html @@ -55,6 +55,16 @@ .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } + .ui-menubar { + list-style: none; + margin: 0; + padding-left: 0; + } + + .ui-menubar-item { + float: left; + } + table { border-collapse: collapse; } @@ -66,85 +76,97 @@ </head> <body> -<div id="bar1" class="menubar"> - <a href="#">File</a> - <ul> - <li><a href="#">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#">Save</a></li> - <li><a href="#">Save as...</a></li> - <li><a href="#">Close</a></li> - <li><a href="#">Quit</a></li> - </ul> - <a href="#">Edit</a> - <ul> - <li><a href="#">Copy</a></li> - <li><a href="#">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - <a href="#">View</a> - <ul> - <li><a href="#">Fullscreen</a></li> - <li><a href="#">Fit into view</a></li> - <li> - <a href="#">Encoding</a> - <ul> - <li><a href="#">Auto-detect</a></li> - <li><a href="#">UTF-8</a></li> - <li> - <a href="#">UTF-16</a> - <ul> - <li><a href="#">Option 1</a></li> - <li><a href="#">Option 2</a></li> - <li><a href="#">Option 3</a></li> - <li><a href="#">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#">Customize...</a></li> - </ul> -</div> +<ul id="bar1" class="menubar"> + <li> + <a href="#">File</a> + <ul> + <li><a href="#">Open...</a></li> + <li class="ui-state-disabled">Open recent...</li> + <li><a href="#">Save</a></li> + <li><a href="#">Save as...</a></li> + <li><a href="#">Close</a></li> + <li><a href="#">Quit</a></li> + </ul> + </li> + <li> + <a href="#">Edit</a> + <ul> + <li><a href="#">Copy</a></li> + <li><a href="#">Cut</a></li> + <li class="ui-state-disabled">Paste</li> + </ul> + </li> + <li> + <a href="#">View</a> + <ul> + <li><a href="#">Fullscreen</a></li> + <li><a href="#">Fit into view</a></li> + <li> + <a href="#">Encoding</a> + <ul> + <li><a href="#">Auto-detect</a></li> + <li><a href="#">UTF-8</a></li> + <li> + <a href="#">UTF-16</a> + <ul> + <li><a href="#">Option 1</a></li> + <li><a href="#">Option 2</a></li> + <li><a href="#">Option 3</a></li> + <li><a href="#">Option 4</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="#">Customize...</a></li> + </ul> + </li> +</ul> -<div id="bar2" class="menubar-icons"> - <a href="#">File</a> - <ul> - <li><a href="#">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#">Save</a></li> - <li><a href="#">Save as...</a></li> - <li><a href="#">Close</a></li> - <li><a href="#">Quit</a></li> - </ul> - <a href="#">Edit</a> - <ul> - <li><a href="#">Copy</a></li> - <li><a href="#">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - <a href="#">View</a> - <ul> - <li><a href="#">Fullscreen</a></li> - <li><a href="#">Fit into view</a></li> - <li> - <a href="#">Encoding</a> - <ul> - <li><a href="#">Auto-detect</a></li> - <li><a href="#">UTF-8</a></li> - <li> - <a href="#">UTF-16</a> - <ul> - <li><a href="#">Option 1</a></li> - <li><a href="#">Option 2</a></li> - <li><a href="#">Option 3</a></li> - <li><a href="#">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#">Customize...</a></li> - </ul> -</div> +<ul id="bar2" class="menubar-icons"> + <li> + <a href="#">File</a> + <ul> + <li><a href="#">Open...</a></li> + <li class="ui-state-disabled">Open recent...</li> + <li><a href="#">Save</a></li> + <li><a href="#">Save as...</a></li> + <li><a href="#">Close</a></li> + <li><a href="#">Quit</a></li> + </ul> + </li> + <li> + <a href="#">Edit</a> + <ul> + <li><a href="#">Copy</a></li> + <li><a href="#">Cut</a></li> + <li class="ui-state-disabled">Paste</li> + </ul> + </li> + <li> + <a href="#">View</a> + <ul> + <li><a href="#">Fullscreen</a></li> + <li><a href="#">Fit into view</a></li> + <li> + <a href="#">Encoding</a> + <ul> + <li><a href="#">Auto-detect</a></li> + <li><a href="#">UTF-8</a></li> + <li> + <a href="#">UTF-16</a> + <ul> + <li><a href="#">Option 1</a></li> + <li><a href="#">Option 2</a></li> + <li><a href="#">Option 3</a></li> + <li><a href="#">Option 4</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="#">Customize...</a></li> + </ul> + </li> +</ul> <table id="movies" class="ui-widget"> <thead> @@ -161,24 +183,26 @@ <td class="ui-widget-content">1993</td> <td class="ui-widget-content">3.6</td> <td class="ui-widget-content"> - <div class="menubar"> - <a href="#">Options</a> - <ul> - <li><a href="#">Order...</a></li> - <li class="ui-state-disabled">Write a Review...</li> - <li><a href="#">Find Similar Movies...</a></li> - <li> - <a href="#">Rate</a> - <ul> - <li><a href="#">5 stars</a></li> - <li><a href="#">4 stars</a></li> - <li><a href="#">3 stars</a></li> - <li><a href="#">2 stars</a></li> - <li><a href="#">1 stars</a></li> - </ul> - </li> - </ul> - </div> + <ul class="menubar"> + <li> + <a href="#">Options</a> + <ul> + <li><a href="#">Order...</a></li> + <li class="ui-state-disabled">Write a Review...</li> + <li><a href="#">Find Similar Movies...</a></li> + <li> + <a href="#">Rate</a> + <ul> + <li><a href="#">5 stars</a></li> + <li><a href="#">4 stars</a></li> + <li><a href="#">3 stars</a></li> + <li><a href="#">2 stars</a></li> + <li><a href="#">1 stars</a></li> + </ul> + </li> + </ul> + </li> + </ul> </td> </tr> <tr> diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 6c8173cd9..cc3258d4a 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -13,24 +13,31 @@ $.widget("ui.menubar", { }, _create: function() { var self = this; - var items = this.items = this.element.children("button, a"); + var items = this.items = this.element.children("li") + .addClass("ui-menubar-item") + .attr("role", "presentation") + .children("button, a"); items.slice(1).attr("tabIndex", -1); var o = this.options; - this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix'); + this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix').attr("role", "menubar"); this._focusable(items); this._hoverable(items); items.next("ul").each(function(i, elm) { $(elm).menu({ select: function(event, ui) { - ui.item.parents("ul:last").hide() - self.options.select.apply(this, arguments); + ui.item.parents("ul.ui-menu:last").hide(); + self._trigger( "select", event, ui ); + self._close(); + $(event.target).prev().focus(); } - }).hide().keydown(function(event) { + }).hide() + .attr("aria-hidden", "true") + .attr("aria-expanded", "false") + .keydown(function(event) { var menu = $(this); if (menu.is(":hidden")) return; - event.stopPropagation(); switch (event.keyCode) { case $.ui.keyCode.LEFT: self._left(event); @@ -41,9 +48,7 @@ $.widget("ui.menubar", { event.preventDefault(); break; }; - }).blur(function( event ) { - self._close( event ); - }); + }) }); items.each(function() { var input = $(this), @@ -55,12 +60,11 @@ $.widget("ui.menubar", { return; } event.preventDefault(); - event.stopPropagation(); if (event.type == "click" && menu.is(":visible") && self.active && self.active[0] == menu[0]) { self._close(); return; } - if (self.open || event.type == "click") { + if ((self.open && event.type == "mouseenter") || event.type == "click") { self._open(event, menu); } }) @@ -83,6 +87,8 @@ $.widget("ui.menubar", { } }) .addClass("ui-button ui-widget ui-button-text-only ui-menubar-link") + .attr("role", "menuitem") + .attr("aria-haspopup", "true") .wrapInner("<span class='ui-button-text'></span>"); if (o.menuIcon) { @@ -95,35 +101,66 @@ $.widget("ui.menubar", { }; }); - self._bind(document, { - click: function(event) { - if (self.open && !$(event.target).closest(".ui-menubar").length) { - self._close(); - } - } - }) self._bind({ - keyup: function(event) { - if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) { - if (self.active.menu("left", event) !== true) { + keydown: function(event) { + if (event.keyCode == $.ui.keyCode.ESCAPE) { + if (self.active && self.active.menu("left", event) !== true) { var active = self.active; self.active.blur(); + self._close( event ); active.prev().focus(); } } + }, + focusout : function( event ) { + self.closeTimer = setTimeout(function() { + self._close( event ); + }, 100); + }, + focusin :function( event ) { + clearTimeout(self.closeTimer); } }); }, + _destroy : function() { + var items = this.element.children("li") + .removeClass("ui-menubar-item") + .removeAttr("role", "presentation") + .children("button, a"); + + this.element.removeClass('ui-menubar ui-widget-header ui-helper-clearfix').removeAttr("role", "menubar").unbind(".menubar");; + items.unbind("focusin focusout click focus mouseenter keydown"); + + items + .removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default") + .removeAttr("role", "menuitem") + .removeAttr("aria-haspopup", "true") + .children("span.ui-button-text").each(function(i, e) { + var item = $(this); + item.parent().html(item.html()); + }) + .end() + .children(".ui-icon").remove(); + + $(document).unbind(".menubar"); + + this.element.find(":ui-menu").menu("destroy") + .show() + .removeAttr("aria-hidden", "true") + .removeAttr("aria-expanded", "false") + .removeAttr("tabindex") + .unbind("keydown", "blur") + ; + }, + _close: function() { - this.active.menu("closeAll").hide(); + if (!this.active || !this.active.length) + return; + this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false"); this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex"); this.active = null; - var self = this; - // delay for the next focus event to see it as still "open" - self.timer = setTimeout(function() { - self.open = false; - }, 13); + this.open = false; }, _open: function(event, menu) { @@ -133,55 +170,63 @@ $.widget("ui.menubar", { } // almost the same as _close above, but don't remove tabIndex if (this.active) { - this.active.menu("closeAll").hide(); + this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false"); this.active.prev().removeClass("ui-state-active"); } - clearTimeout(this.timer); - this.open = true; // set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus) var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1); this.active = menu.show().position({ my: "left top", at: "left bottom", of: button - }).focus(); + }) + .removeAttr("aria-hidden").attr("aria-expanded", "true") + .menu("focus", event, menu.children("li").first()) + .focus() + .focusin() + ; + this.open = true; }, _prev: function( event, button ) { button.attr("tabIndex", -1); - var prev = button.prevAll( ".ui-button" ).eq( 0 ); + var prev = button.parent().prevAll("li").children( ".ui-button" ).eq( 0 ); if (prev.length) { prev.removeAttr("tabIndex")[0].focus(); } else { - this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus(); + var lastItem = this.element.children("li:last").children(".ui-button:last"); + lastItem.removeAttr("tabIndex")[0].focus(); } }, _next: function( event, button ) { button.attr("tabIndex", -1); - var next = button.nextAll( ".ui-button" ).eq( 0 ); + var next = button.parent().nextAll("li").children( ".ui-button" ).eq( 0 ); if (next.length) { next.removeAttr("tabIndex")[0].focus(); } else { - this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus(); + var firstItem = this.element.children("li:first").children(".ui-button:first"); + firstItem.removeAttr("tabIndex")[0].focus(); } }, _left: function(event) { - var prev = this.active.prevAll( ".ui-menu" ).eq( 0 ); + var prev = this.active.parent().prevAll("li:eq(0)").children( ".ui-menu" ).eq( 0 ); if (prev.length) { this._open(event, prev); } else { - this._open(event, this.element.children(".ui-menu:last")); + var lastItem = this.element.children("li:last").children(".ui-menu:first"); + this._open(event, lastItem); } }, _right: function(event) { - var next = this.active.nextAll( ".ui-menu" ).eq( 0 ); + var next = this.active.parent().nextAll("li:eq(0)").children( ".ui-menu" ).eq( 0 ); if (next.length) { this._open(event, next); } else { - this._open(event, this.element.children(".ui-menu:first")); + var firstItem = this.element.children("li:first").children(".ui-menu:first"); + this._open(event, firstItem); } } }); diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html new file mode 100644 index 000000000..de9796133 --- /dev/null +++ b/tests/visual/menu/popup.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html> +<head> + <title>Visual Test for Popup Utility</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> + <script type="text/javascript" src="popup.js"></script> + <!-- + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + --> + <script type="text/javascript"> + $(function() { + $.fn.themeswitcher && $('<div/>').css({ + position: "absolute", + right: 10, + top: 10 + }).appendTo(document.body).themeswitcher(); + + var selected = { + select: function( event, ui ) { + $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); + $(this).hide(); + } + }; + + $("#button1").button(); + $("#menu1").menu(selected).popup(); + + $( "#rerun" ) + .button() + .click(function() { + alert( "Running the last action" ); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .parent() + .buttonset() + .next() + .menu(selected) + .popup({ + trigger: $("#select") + }); + + $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)"); + $("table .menubar > ul").menu(selected).popup().prev().button(); + }); + </script> + <style type="text/css"> + body { font-size:62.5%; } + + .ui-popup { position: absolute; z-index: 5000; } + .ui-menu { width: 200px; } + + table { + border-collapse: collapse; + } + th, td { + padding: 0.5em; + border: 1px solid black; + } + </style> +</head> +<body> + +<button id="button1">Show context menu 1</button> +<ul id="menu1"> + <li><a href="#">Amsterdam</a></li> + <li><a href="#">Anaheim</a></li> + <li><a href="#">Cologne</a></li> + <li><a href="#">Frankfurt</a></li> + <li><a href="#">Magdeburg</a></li> + <li><a href="#">Munich</a></li> + <li><a href="#">Utrecht</a></li> + <li><a href="#">Zurich</a></li> +</ul> + +<div> + <div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> + </div> + <ul> + <li><a href="#">Open...</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Delete</a></li> + </ul> +</div> + +<table id="movies" class="ui-widget"> + <thead> + <tr> + <th data-field="Name" class="ui-widget-header">Name</th> + <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th> + <th data-field="AverageRating" class="ui-widget-header">Average Rating</th> + <th class="ui-widget-header"></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td> + <td class="ui-widget-content">1993</td> + <td class="ui-widget-content">3.6</td> + <td class="ui-widget-content"> + <div class="menubar"> + <a href="#">Options</a> + <ul> + <li><a href="#">Order...</a></li> + <li class="ui-state-disabled">Write a Review...</li> + <li><a href="#">Find Similar Movies...</a></li> + <li> + <a href="#">Rate</a> + <ul> + <li><a href="#">5 stars</a></li> + <li><a href="#">4 stars</a></li> + <li><a href="#">3 stars</a></li> + <li><a href="#">2 stars</a></li> + <li><a href="#">1 stars</a></li> + </ul> + </li> + </ul> + </div> + </td> + </tr> + <tr> + <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.1</td> + </tr> + <tr> + <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.9</td> + </tr> + <tr> + <td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td> + <td class="ui-widget-content">1997</td> + <td class="ui-widget-content">2.6</td> + </tr> + </tbody> +</table> + +<div class="ui-widget" style="margin-top:2em; font-family:Arial"> + Log: + <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> +</div> + +</body> +</html> diff --git a/tests/visual/menu/popup.js b/tests/visual/menu/popup.js new file mode 100644 index 000000000..f57cba699 --- /dev/null +++ b/tests/visual/menu/popup.js @@ -0,0 +1,124 @@ +/* + * jQuery UI popup utility + */ +(function($) { + +var idIncrement = 0; + +$.widget( "ui.popup", { + options: { + position: { + my: "left top", + at: "left bottom" + } + }, + _create: function() { + if ( !this.options.trigger ) { + this.options.trigger = this.element.prev(); + } + + if ( !this.element.attr( "id" ) ) { + this.element.attr( "id", "ui-popup-" + idIncrement++ ); + this.generatedId = true; + } + + if ( !this.element.attr( "role" ) ) { + // TODO alternatives to tooltip are dialog and menu, all three aren't generic popups + this.element.attr( "role", "tooltip" ); + this.generatedRole = true; + } + + this.options.trigger + .attr( "aria-haspopup", true ) + .attr( "aria-owns", this.element.attr( "id" ) ); + + this.element + .addClass("ui-popup") + this._close(); + + this._bind(this.options.trigger, { + click: function( event ) { + event.preventDefault(); + var that = this; + setTimeout(function() { + that._open( event ); + }, 1); + } + }); + + this._bind(this.element, { + blur: "_close" + }); + + this._bind({ + keyup: function( event ) { + if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) { + this._close( event ); + this.options.trigger.focus(); + } + } + }); + + this._bind(document, { + click: function( event ) { + if (this.open && !$(event.target).closest(".ui-popup").length) { + this._close( event ); + } + } + }) + }, + + _destroy: function() { + this.element + .show() + .removeClass( "ui-popup" ) + .removeAttr( "aria-hidden" ) + .removeAttr( "aria-expanded" ); + + this.options.trigger + .removeAttr( "aria-haspopup" ) + .removeAttr( "aria-owns" ); + + if ( this.generatedId ) { + this.element.removeAttr( "id" ); + } + if ( this.generatedRole ) { + this.element.removeAttr( "role" ); + } + }, + + _open: function( event ) { + var position = $.extend( {}, { + of: this.options.trigger + }, this.options.position ); + + this.element + .show() + .attr( "aria-hidden", false ) + .attr( "aria-expanded", true ) + .position( position ) + .focus(); + + // take trigger out of tab order to allow shift-tab to skip trigger + this.options.trigger.attr("tabindex", -1); + + this.open = true; + this._trigger( "open", event ); + }, + + _close: function( event ) { + this.element + .hide() + .attr( "aria-hidden", true ) + .attr( "aria-expanded", false ); + + this.options.trigger.attr("tabindex", 0); + + this.open = false; + this._trigger( "close", event ); + } + + +}); + +}(jQuery)); diff --git a/tests/visual/sortable/sortable_ticket_4551.html b/tests/visual/sortable/sortable_ticket_4551.html deleted file mode 100644 index 2b83ae42e..000000000 --- a/tests/visual/sortable/sortable_ticket_4551.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Sortable Visual Test : Sortable ticket #4551</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript"> - $(function() { - $("#first, #second").sortable({ - connectWith: '.sortable' - }).disableSelection(); - }); - </script> - <style type="text/css"> - .sortable { margin: 0; padding: 0; } - .sortable div { margin: 3px 3px 3px 0; background: #ccc; padding: 1px; border: 1px solid black; float:left; width: 100px; height: 140px; font-size: 1em; text-align: center; } - #second div { background: #acc; } - </style> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4551">#4551 - Sortable connectWith fails if item is floated</a></h1> - -<div id="first" class="sortable"> - <div>1</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> - <div>6</div> - <div>7</div> - <div>8</div> - <div>9</div> - <div>10</div> - <div>11</div> - <div>12</div> -</div> - -<br style="clear:both;"> -<hr /> - -<div id="second" class="sortable"> - <div>12</div> - <div>14</div> -</div> - -</body> -</html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 538b43804..70c850b60 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -10,7 +10,9 @@ <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> + <!-- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + --> <script type="text/javascript"> $(function() { $.fn.themeswitcher && $('<div/>').css({ @@ -18,20 +20,22 @@ right: 10, top: 10 }).appendTo(document.body).themeswitcher(); - + function enable() { // default $("#context1, form, #childish").tooltip(); // custom class, replaces ui-widget-content - $("#context2").tooltip().each(function() { - $(this).tooltip("widget").addClass("ui-widget-header"); - }) - $("#right1").tooltip().tooltip("widget").addClass("ui-state-error"); + $("#context2").tooltip({ + tooltipClass: "ui-widget-header" + }); + $("#right1").tooltip({ + tooltipClass: "ui-state-error" + }); // synchronous content $("#footnotes").tooltip({ - items: "[href^=#]", + items: "[href^='#']", content: function() { return $($(this).attr("href")).html(); } @@ -64,12 +68,13 @@ // custom position $("#right2").tooltip({ + tooltipClass: "ui-state-highlight", position: { my: "center top", at: "center bottom", offset: "0 10" } - }).tooltip("widget").addClass("ui-state-highlight"); + }); $("#button1").button(); $("#button2").button({ @@ -94,12 +99,12 @@ enable(); $("#disable").toggle(function() { - $("*").tooltip("disable"); + $(":ui-tooltip").tooltip("disable"); }, function() { - $("*").tooltip("enable"); + $(":ui-tooltip").tooltip("enable"); }); $("#toggle").toggle(function() { - $("*").tooltip("destroy"); + $(":ui-tooltip").tooltip("destroy"); }, function() { enable(); }); diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css index 20fd2ce56..ed4b4a13a 100644 --- a/themes/base/jquery.ui.menu.css +++ b/themes/base/jquery.ui.menu.css @@ -26,11 +26,9 @@ .ui-menu .ui-menu-item a { text-decoration:none; display:block; - padding:.2em .4em; + padding: 2px .4em; line-height:1.5; zoom:1; -} -.ui-menu .ui-menu-item a { font-weight: normal; } .ui-menu .ui-menu-item a.ui-state-focus, @@ -39,6 +37,15 @@ margin: -1px; } -.ui-menu .ui-icon { float: right; } - +/* nested menus */ .ui-menu .ui-menu { position: absolute; } + +/* icon support */ +.ui-menu-icons { position: relative; } +.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; } + +/* left-aligned */ +.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } + +/* right-aligned */ +.ui-menu .ui-menu-icon { position: static; float: right; }
\ No newline at end of file diff --git a/themes/base/jquery.ui.resizable.css b/themes/base/jquery.ui.resizable.css index eeb547b9f..2c1de870e 100644 --- a/themes/base/jquery.ui.resizable.css +++ b/themes/base/jquery.ui.resizable.css @@ -8,7 +8,12 @@ * http://docs.jquery.com/UI/Resizable#theming */ .ui-resizable { position: relative;} -.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} +.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; + /* http://bugs.jqueryui.com/ticket/7233 + - Resizable: resizable handles fail to work in IE if transparent and content overlaps + */ + background-image:url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=); +} .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } diff --git a/themes/base/jquery.ui.tabs.css b/themes/base/jquery.ui.tabs.css index 12666facd..d4c039f30 100644 --- a/themes/base/jquery.ui.tabs.css +++ b/themes/base/jquery.ui.tabs.css @@ -11,8 +11,7 @@ .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } -.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } -.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } -.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: 0; padding-bottom: 1px; } +.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } -.ui-tabs .ui-tabs-hide { display: none !important; } diff --git a/ui/i18n/jquery.ui.datepicker-nl.js b/ui/i18n/jquery.ui.datepicker-nl.js index 663d6bb26..40be2cfa4 100644 --- a/ui/i18n/jquery.ui.datepicker-nl.js +++ b/ui/i18n/jquery.ui.datepicker-nl.js @@ -14,7 +14,7 @@ jQuery(function($){ dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'], dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'], weekHeader: 'Wk', - dateFormat: 'dd/mm/yy', + dateFormat: 'dd-mm-yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, diff --git a/ui/i18n/jquery.ui.datepicker-sk.js b/ui/i18n/jquery.ui.datepicker-sk.js index a9179c179..83ae8e811 100644 --- a/ui/i18n/jquery.ui.datepicker-sk.js +++ b/ui/i18n/jquery.ui.datepicker-sk.js @@ -10,7 +10,7 @@ jQuery(function($){ 'Júl','August','September','Október','November','December'], monthNamesShort: ['Jan','Feb','Mar','Apr','Máj','Jún', 'Júl','Aug','Sep','Okt','Nov','Dec'], - dayNames: ['Nedel\'a','Pondelok','Utorok','Streda','Štvrtok','Piatok','Sobota'], + dayNames: ['Nedeľa','Pondelok','Utorok','Streda','Štvrtok','Piatok','Sobota'], dayNamesShort: ['Ned','Pon','Uto','Str','Štv','Pia','Sob'], dayNamesMin: ['Ne','Po','Ut','St','Št','Pia','So'], weekHeader: 'Ty', diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 573cb2554..581fb0861 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -234,12 +234,12 @@ $.effects.animateClass = function( value, duration, easing, callback ) { easing = null; } - return this.queue( 'fx', function() { + return this.queue(function() { var that = $( this ), originalStyleAttr = that.attr( 'style' ) || ' ', originalStyle = filterStyles( getElementStyles.call( this ) ), newStyle, - className = that.attr( 'className' ); + className = that.attr( 'class' ); $.each( classAnimationActions, function(i, action) { if ( value[ action ] ) { @@ -247,32 +247,31 @@ $.effects.animateClass = function( value, duration, easing, callback ) { } }); newStyle = filterStyles( getElementStyles.call( this ) ); - that.attr( 'className', className ); - - that.animate( styleDifference( originalStyle, newStyle ), duration, easing, function() { - $.each( classAnimationActions, function( i, action ) { - if ( value[ action ] ) { - that[ action + 'Class' ]( value[ action ] ); + that.attr( 'class', className ); + + that.animate( styleDifference( originalStyle, newStyle ), { + queue: false, + duration: duration, + easing: easing, + complete: function() { + $.each( classAnimationActions, function( i, action ) { + if ( value[ action ] ) { + that[ action + 'Class' ]( value[ action ] ); + } + }); + // work around bug in IE by clearing the cssText before setting it + if ( typeof that.attr( 'style' ) == 'object' ) { + that.attr( 'style' ).cssText = ''; + that.attr( 'style' ).cssText = originalStyleAttr; + } else { + that.attr( 'style', originalStyleAttr ); } - }); - // work around bug in IE by clearing the cssText before setting it - if ( typeof that.attr( 'style' ) == 'object' ) { - that.attr( 'style' ).cssText = ''; - that.attr( 'style' ).cssText = originalStyleAttr; - } else { - that.attr( 'style', originalStyleAttr ); - } - if ( callback ) { - callback.apply( this, arguments ); + if ( callback ) { + callback.apply( this, arguments ); + } + $.dequeue( this ); } }); - - // $.animate adds a function to the end of the queue - // but we want it at the front - var queue = $.queue( this ), - anim = queue.splice( queue.length - 1, 1 )[ 0 ]; - queue.splice( 1, 0, anim ); - $.dequeue( this ); }); }; diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 95fa1d163..0cc1f9e2a 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -25,7 +25,11 @@ $.widget( "ui.accordion", { icons: { activeHeader: "ui-icon-triangle-1-s", header: "ui-icon-triangle-1-e" - } + }, + + // callbacks + activate: null, + beforeActivate: null }, _create: function() { @@ -275,7 +279,7 @@ $.widget( "ui.accordion", { } // trying to collapse, simulate a click on the currently active header - active = active || this.active; + active = active || this.active[ 0 ]; this._eventHandler({ target: active, @@ -319,7 +323,7 @@ $.widget( "ui.accordion", { // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation - ( this._trigger( "beforeActivate", null, eventData ) === false ) ) { + ( this._trigger( "beforeActivate", event, eventData ) === false ) ) { return; } @@ -649,6 +653,11 @@ if ( $.uiBackCompat !== false ) { // change events (function( $, prototype ) { + $.extend( prototype.options, { + change: null, + changestart: null + }); + var _trigger = prototype._trigger; prototype._trigger = function( type, event, data ) { var ret = _trigger.apply( this, arguments ); diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index ca06fff65..526eb3869 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -22,7 +22,7 @@ $.widget( "ui.autocomplete", { defaultElement: "<input>", options: { appendTo: "body", - autoFocus: true, + autoFocus: false, delay: 300, minLength: 1, position: { @@ -30,7 +30,16 @@ $.widget( "ui.autocomplete", { at: "left bottom", collision: "none" }, - source: null + source: null, + + // callbacks + change: null, + close: null, + focus: null, + open: null, + response: null, + search: null, + select: null }, pending: 0, diff --git a/ui/jquery.ui.core.js b/ui/jquery.ui.core.js index 9745419dc..8bcc4c441 100644 --- a/ui/jquery.ui.core.js +++ b/ui/jquery.ui.core.js @@ -141,12 +141,12 @@ $.each( [ "Width", "Height" ], function( i, name ) { function reduce( elem, size, border, margin ) { $.each( side, function() { - size -= parseFloat( $.curCSS( elem, "padding" + this, true) ) || 0; + size -= parseFloat( $.curCSS( elem, "padding" + this, true ) ) || 0; if ( border ) { - size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true) ) || 0; + size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true ) ) || 0; } if ( margin ) { - size -= parseFloat( $.curCSS( elem, "margin" + this, true) ) || 0; + size -= parseFloat( $.curCSS( elem, "margin" + this, true ) ) || 0; } }); return size; @@ -174,6 +174,27 @@ $.each( [ "Width", "Height" ], function( i, name ) { }); // selectors +function focusable( element, isTabIndexNotNaN ) { + var nodeName = element.nodeName.toLowerCase(); + if ( "area" === nodeName ) { + var map = element.parentNode, + mapName = map.name, + img; + if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { + return false; + } + img = $( "img[usemap=#" + mapName + "]" )[0]; + return !!img && visible( img ); + } + return ( /input|select|textarea|button|object/.test( nodeName ) + ? !element.disabled + : "a" == nodeName + ? element.href || isTabIndexNotNaN + : isTabIndexNotNaN) + // the element and all of its ancestors must be visible + && visible( element ); +} + function visible( element ) { return !$( element ).parents().andSelf().filter(function() { return $.curCSS( this, "visibility" ) === "hidden" || @@ -187,30 +208,13 @@ $.extend( $.expr[ ":" ], { }, focusable: function( element ) { - var nodeName = element.nodeName.toLowerCase(), - tabIndex = $.attr( element, "tabindex" ); - if ( "area" === nodeName ) { - var map = element.parentNode, - mapName = map.name, - img; - if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { - return false; - } - img = $( "img[usemap=#" + mapName + "]" )[0]; - return !!img && visible( img ); - } - return ( /input|select|textarea|button|object/.test( nodeName ) - ? !element.disabled - : "a" == nodeName - ? element.href || !isNaN( tabIndex ) - : !isNaN( tabIndex )) - // the element and all of its ancestors must be visible - && visible( element ); + return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); }, tabbable: function( element ) { - var tabIndex = $.attr( element, "tabindex" ); - return ( isNaN( tabIndex ) || tabIndex >= 0 ) && $( element ).is( ":focusable" ); + var tabIndex = $.attr( element, "tabindex" ), + isTabIndexNaN = isNaN( tabIndex ); + return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); } }); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index ed02335e5..cc27365d3 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -1579,40 +1579,42 @@ $.extend(Datepicker.prototype, { if (!showMonthAfterYear) html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : ''); // year selection - inst.yearshtml = ''; - if (secondary || !changeYear) - html += '<span class="ui-datepicker-year">' + drawYear + '</span>'; - else { - // determine range of years to display - var years = this._get(inst, 'yearRange').split(':'); - var thisYear = new Date().getFullYear(); - var determineYear = function(value) { - var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) : - (value.match(/[+-].*/) ? thisYear + parseInt(value, 10) : - parseInt(value, 10))); - return (isNaN(year) ? thisYear : year); - }; - var year = determineYear(years[0]); - var endYear = Math.max(year, determineYear(years[1] || '')); - year = (minDate ? Math.max(year, minDate.getFullYear()) : year); - endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear); - inst.yearshtml += '<select class="ui-datepicker-year" ' + - 'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' + - 'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' + - '>'; - for (; year <= endYear; year++) { - inst.yearshtml += '<option value="' + year + '"' + - (year == drawYear ? ' selected="selected"' : '') + - '>' + year + '</option>'; - } - inst.yearshtml += '</select>'; - //when showing there is no need for later update - if( ! $.browser.mozilla ){ - html += inst.yearshtml; - inst.yearshtml = null; - } else { - // will be replaced later with inst.yearshtml - html += '<select class="ui-datepicker-year"><option value="' + drawYear + '" selected="selected">' + drawYear + '</option></select>'; + if ( !inst.yearshtml ) { + inst.yearshtml = ''; + if (secondary || !changeYear) + html += '<span class="ui-datepicker-year">' + drawYear + '</span>'; + else { + // determine range of years to display + var years = this._get(inst, 'yearRange').split(':'); + var thisYear = new Date().getFullYear(); + var determineYear = function(value) { + var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) : + (value.match(/[+-].*/) ? thisYear + parseInt(value, 10) : + parseInt(value, 10))); + return (isNaN(year) ? thisYear : year); + }; + var year = determineYear(years[0]); + var endYear = Math.max(year, determineYear(years[1] || '')); + year = (minDate ? Math.max(year, minDate.getFullYear()) : year); + endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear); + inst.yearshtml += '<select class="ui-datepicker-year" ' + + 'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' + + 'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' + + '>'; + for (; year <= endYear; year++) { + inst.yearshtml += '<option value="' + year + '"' + + (year == drawYear ? ' selected="selected"' : '') + + '>' + year + '</option>'; + } + inst.yearshtml += '</select>'; + //when showing there is no need for later update + if( ! $.browser.mozilla ){ + html += inst.yearshtml; + inst.yearshtml = null; + } else { + // will be replaced later with inst.yearshtml + html += '<select class="ui-datepicker-year"><option value="' + drawYear + '" selected="selected">' + drawYear + '</option></select>'; + } } } html += this._get(inst, 'yearSuffix'); diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index af1101f73..0f585d976 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -28,11 +28,14 @@ $.widget("ui.menu", { var self = this; this.activeMenu = this.element; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; + if (this.element.find(".ui-icon").length) { + this.element.addClass("ui-menu-icons"); + } this.element .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .attr({ id: this.menuId, - role: "listbox" + role: "menu" }) .bind( "click.menu", function( event ) { var item = $( event.target ).closest( ".ui-menu-item:has(a)" ); @@ -108,9 +111,16 @@ $.widget("ui.menu", { event.preventDefault(); break; case $.ui.keyCode.ENTER: - self.select( event ); + if (self.active.children("a[aria-haspopup='true']").length) { + if (self.right( event )) { + event.stopImmediatePropagation(); + } + } + else { + self.select( event ); + event.stopImmediatePropagation(); + } event.preventDefault(); - event.stopImmediatePropagation(); break; case $.ui.keyCode.ESCAPE: if ( self.left( event ) ) { @@ -132,13 +142,13 @@ $.widget("ui.menu", { function escape(value) { return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); } - var match = self.widget().children(".ui-menu-item").filter(function() { + var match = self.activeMenu.children(".ui-menu-item").filter(function() { return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); }); var match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match; if (!match.length) { character = String.fromCharCode(event.keyCode); - match = self.widget().children(".ui-menu-item").filter(function() { + match = self.activeMenu.children(".ui-menu-item").filter(function() { return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); }); } @@ -160,41 +170,62 @@ $.widget("ui.menu", { }, _destroy: function() { + //destroy (sub)menus this.element + .removeAttr( "aria-activedescendant" ) + .find("ul") + .andSelf() .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) - .removeAttr( "tabIndex" ) .removeAttr( "role" ) - .removeAttr( "aria-activedescendant" ); + .removeAttr("id") + .removeAttr( "aria-labelledby" ) + .removeAttr( "aria-expanded" ) + .removeAttr( "aria-hidden" ) + .show(); - this.element.children( ".ui-menu-item" ) + //destroy menu items + this.element.find( ".ui-menu-item" ) + .unbind( ".menu" ) .removeClass( "ui-menu-item" ) .removeAttr( "role" ) .children( "a" ) .removeClass( "ui-corner-all ui-state-hover" ) .removeAttr( "tabIndex" ) - .unbind( ".menu" ); + .removeAttr( "role" ) + .removeAttr( "aria-haspopup" ) + .removeAttr( "id" ) + .children(".ui-icon").remove(); }, refresh: function() { + var self = this; // initialize nested menus - // TODO add role=listbox to these, too? or just the top level menu? var submenus = this.element.find("ul:not(.ui-menu)") .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) + .attr("role", "menu") .hide() - - submenus - .prev("a") - .prepend('<span class="ui-icon ui-icon-carat-1-e"></span>'); - + .attr("aria-hidden", "true") + .attr("aria-expanded", "false") + ; // don't refresh list items that are already adapted var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" ) .addClass( "ui-menu-item" ) - .attr( "role", "menuitem" ); + .attr( "role", "presentation" ); items.children( "a" ) .addClass( "ui-corner-all" ) - .attr( "tabIndex", -1 ); + .attr( "tabIndex", -1 ) + .attr( "role", "menuitem" ) + .attr("id", function(i) {return self.element.attr("id") + "-" + i}); + + submenus.each(function() { + var menu = $(this); + var item = menu.prev("a") + item.attr("aria-haspopup", "true") + .prepend('<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>'); + menu.attr("aria-labelledby", item.attr("id")); + }); }, focus: function( event, item ) { @@ -219,13 +250,11 @@ $.widget("ui.menu", { this.active = item.first() .children( "a" ) .addClass( "ui-state-focus" ) - .attr( "id", function(index, id) { - return (self.itemId = id || self.menuId + "-activedescendant"); - }) .end(); - // need to remove the attribute before adding it for the screenreader to pick up the change - // see http://groups.google.com/group/jquery-a11y/msg/929e0c1e8c5efc8f - this.element.removeAttr("aria-activedescendant").attr("aria-activedescendant", self.itemId) + self.element.attr("aria-activedescendant", self.active.children("a").attr("id")) + + // highlight active parent menu item, if any + this.active.parent().closest(".ui-menu-item").children("a:first").addClass("ui-state-active"); self.timer = setTimeout(function() { self._close(); @@ -247,10 +276,6 @@ $.widget("ui.menu", { clearTimeout(this.timer); this.active.children( "a" ).removeClass( "ui-state-focus" ); - // remove only generated id - $( "#" + this.menuId + "-activedescendant" ).removeAttr( "id" ); - this.element.removeAttr( "aria-activedescenant" ); - this._trigger( "blur", event ); this.active = null; }, @@ -264,23 +289,20 @@ $.widget("ui.menu", { }, _open: function(submenu) { - this.element.find(".ui-menu").not(submenu.parents()).hide(); - + clearTimeout(this.timer); + this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); var position = $.extend({}, { of: this.active }, $.type(this.options.position) == "function" ? this.options.position(this.active) : this.options.position ); - - submenu.show().position(position); - - this.active.find(">a:first").addClass("ui-state-active"); + submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position); }, closeAll: function() { this.element - .find("ul").hide().end() + .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() .find("a.ui-state-active").removeClass("ui-state-active"); this.blur(); this.activeMenu = this.element; @@ -288,25 +310,27 @@ $.widget("ui.menu", { _close: function() { this.active.parent() - .find("ul").hide().end() + .find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() .find("a.ui-state-active").removeClass("ui-state-active"); }, left: function(event) { - var newItem = this.active && this.active.parents("li").first(); + var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first(); if (newItem && newItem.length) { - this.active.parent().hide(); + this.active.parent().attr("aria-hidden", "true").attr("aria-expanded", "false").hide(); this.focus(event, newItem); return true; } }, right: function(event) { + var self= this; var newItem = this.active && this.active.children("ul").children("li").first(); if (newItem && newItem.length) { this._open(newItem.parent()); var current = this.active; - this.focus(event, newItem); + //timeout so Firefox will not hide activedescendant change in expanding submenu from AT + setTimeout(function(){self.focus(event, newItem)}, 20); return true; } }, diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js index cb89a1c39..e3b25cfd7 100644 --- a/ui/jquery.ui.progressbar.js +++ b/ui/jquery.ui.progressbar.js @@ -93,6 +93,7 @@ $.widget( "ui.progressbar", { } this.valueDiv + .toggle( value > this.min ) .toggleClass( "ui-corner-right", value === this.options.max ) .width( percentage.toFixed(0) + "%" ); this.element.attr( "aria-valuenow", value ); diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index 38c5996d0..eb6545f62 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -466,6 +466,7 @@ $.widget( "ui.slider", $.ui.mouse, { this.options.value = this._trimAlignValue( newValue ); this._refreshValue(); this._change( null, 0 ); + return; } return this._value(); @@ -480,6 +481,7 @@ $.widget( "ui.slider", $.ui.mouse, { this.options.values[ index ] = this._trimAlignValue( newValue ); this._refreshValue(); this._change( null, index ); + return; } if ( arguments.length ) { diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 8356eeb9f..131fb50d0 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -614,6 +614,10 @@ $.widget("ui.sortable", $.ui.mouse, { for (var i = this.items.length - 1; i >= 0; i--){ var item = this.items[i]; + //We ignore calculating positions of all connected containers when we're not over them + if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) + continue; + var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item; if (!fast) { diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index fcdf22c0e..7946cc667 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -26,56 +26,139 @@ function getNextListId() { $.widget( "ui.tabs", { options: { - add: null, - ajaxOptions: null, - cache: false, - cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } + active: null, collapsible: false, - disable: null, - disabled: false, - enable: null, event: "click", fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 } - idPrefix: "ui-tabs-", - load: null, - panelTemplate: "<div></div>", - remove: null, - select: null, - show: null, - spinner: "<em>Loading…</em>", - tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>" + + // callbacks + activate: null, + beforeActivate: null, + beforeLoad: null, + load: null }, _create: function() { - this._tabify( true ); - }, + var that = this, + options = that.options, + active = options.active; - _setOption: function( key, value ) { - if ( key == "selected" ) { - if (this.options.collapsible && value == this.options.selected ) { - return; + that.running = false; + + that.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ); + + that._processTabs(); + + if ( active === null ) { + // check the fragment identifier in the URL + if ( location.hash ) { + that.anchors.each(function( i, tab ) { + if ( tab.hash === location.hash ) { + active = i; + return false; + } + }); } - this.select( value ); + + // check for a tab marked active via a class + if ( active === null ) { + active = that.lis.filter( ".ui-tabs-active" ).index(); + } + + // no active tab, set to false + if ( active === null || active === -1 ) { + active = that.lis.length ? 0 : false; + } + } + + // handle numbers: negative, out of range + if ( active !== false ) { + active = this.lis.eq( active ).index(); + if ( active === -1 ) { + active = options.collapsible ? false : 0; + } + } + options.active = active; + + // don't allow collapsible: false and active: false + if ( !options.collapsible && options.active === false && this.anchors.length ) { + options.active = 0; + } + + // Take disabling tabs via class attribute from HTML + // into account and update option properly. + if ( $.isArray( options.disabled ) ) { + options.disabled = $.unique( options.disabled.concat( + $.map( this.lis.filter( ".ui-state-disabled" ), function( n, i ) { + return that.lis.index( n ); + }) + ) ).sort(); + } + + this._setupFx( options.fx ); + + this._refresh(); + + // highlight selected tab + this.panels.hide(); + this.lis.removeClass( "ui-tabs-active ui-state-active" ); + // check for length avoids error when initializing empty list + if ( options.active !== false && this.anchors.length ) { + this.active = this._findActive( options.active ); + var panel = that._getPanelForTab( this.active ); + + panel.show(); + + this.lis.eq( options.active ).addClass( "ui-tabs-active ui-state-active" ); + + // TODO: we need to remove this or add it to accordion + // seems to be expected behavior that the activate callback is fired + that.element.queue( "tabs", function() { + that._trigger( "activate", null, that._ui( that.active[ 0 ], panel[ 0 ] ) ); + }); + + this.load( options.active ); } else { - this.options[ key ] = value; - this._tabify(); + this.active = $(); + } + }, + + _setOption: function( key, value ) { + if ( key == "active" ) { + // _activate() will handle invalid values and update this.options + this._activate( value ); + return; + } + + if ( key === "disabled" ) { + // don't use the widget factory's disabled handling + this._setupDisabled( value ); + return; + } + + this._super( "_setOption", key, value); + + // setting collapsible: false while collapsed; open first panel + if ( key === "collapsible" && !value && this.options.active === false ) { + this._activate( 0 ); + } + + if ( key === "event" ) { + this._setupEvents( value ); + } + + if ( key === "fx" ) { + this._setupFx( value ); } }, _tabId: function( a ) { - return a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) || - this.options.idPrefix + getNextTabId(); + return $( a ).attr( "aria-controls" ) || "ui-tabs-" + getNextTabId(); }, _sanitizeSelector: function( hash ) { // we need this because an id may contain a ":" - return hash.replace( /:/g, "\\:" ); - }, - - _cookie: function() { - var cookie = this.cookie || - ( this.cookie = this.options.cookie.name || "ui-tabs-" + getNextListId() ); - return $.cookie.apply( null, [ cookie ].concat( $.makeArray( arguments ) ) ); + return hash ? hash.replace( /:/g, "\\:" ) : ""; }, _ui: function( tab, panel ) { @@ -86,20 +169,56 @@ $.widget( "ui.tabs", { }; }, - _cleanup: function() { - // restore all former loading tabs labels - this.lis.filter( ".ui-state-processing" ) - .removeClass( "ui-state-processing" ) - .find( "span:data(label.tabs)" ) - .each(function() { - var el = $( this ); - el.html( el.data( "label.tabs" ) ).removeData( "label.tabs" ); - }); + refresh: function() { + var self = this, + options = this.options, + lis = this.list.children( ":has(a[href])" ); + + // get disabled tabs from class attribute from HTML + // this will get converted to a boolean if needed in _refresh() + options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( tab ) { + return lis.index( tab ); + }); + + this._processTabs(); + this._refresh(); + this.panels.not( this._getPanelForTab( this.active ) ).hide(); + + // was collapsed or no tabs + if ( options.active === false || !this.anchors.length ) { + options.active = false; + this.active = $(); + // was active, but active tab is gone + } else if ( this.active.length && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) { + // activate previous tab + var next = options.active - 1; + this._activate( next >= 0 ? next : 0 ); + // was active, active tab still exists + } else { + // make sure active index is correct + options.active = this.anchors.index( this.active ); + } + }, + + _refresh: function() { + var options = this.options; + + this.element.toggleClass( "ui-tabs-collapsible", options.collapsible ); + this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); + this.lis.addClass( "ui-state-default ui-corner-top" ); + this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ); + + this._setupDisabled( options.disabled ); + this._setupEvents( options.event ); + + // remove all handlers, may run on existing tabs + this.lis.unbind( ".tabs" ); + this._focusable( this.lis ); + this._hoverable( this.lis ); }, - _tabify: function( init ) { + _processTabs: function() { var self = this, - o = this.options, fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash this.list = this.element.find( "ol,ul" ).eq( 0 ); @@ -110,14 +229,17 @@ $.widget( "ui.tabs", { this.panels = $( [] ); this.anchors.each(function( i, a ) { - var href = $( a ).attr( "href" ); + var href = $( a ).attr( "href" ), + hrefBase = href.split( "#" )[ 0 ], + selector, + panel, + baseEl; + // For dynamically created HTML that contains a hash as href IE < 8 expands // such href to the full page url with hash and then misinterprets tab as ajax. // Same consideration applies for an added tab with a fragment identifier // since a[href=#fragment-identifier] does unexpectedly not match. // Thus normalize href attribute... - var hrefBase = href.split( "#" )[ 0 ], - baseEl; if ( hrefBase && ( hrefBase === location.toString().split( "#" )[ 0 ] || ( baseEl = $( "base" )[ 0 ]) && hrefBase === baseEl.href ) ) { href = a.hash; @@ -126,281 +248,247 @@ $.widget( "ui.tabs", { // inline tab if ( fragmentId.test( href ) ) { - self.panels = self.panels.add( self.element.find( self._sanitizeSelector( href ) ) ); + selector = href; + panel = self.element.find( self._sanitizeSelector( selector ) ); // remote tab // prevent loading the page itself if href is just "#" } else if ( href && href !== "#" ) { - // required for restore on destroy - $.data( a, "href.tabs", href ); - - // TODO until #3808 is fixed strip fragment identifier from url - // (IE fails to load from such url) - $.data( a, "load.tabs", href.replace( /#.*$/, "" ) ); - var id = self._tabId( a ); - a.href = "#" + id; - var $panel = self.element.find( "#" + id ); - if ( !$panel.length ) { - $panel = $( o.panelTemplate ) - .attr( "id", id ) - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) - .insertAfter( self.panels[ i - 1 ] || self.list ); - $panel.data( "destroy.tabs", true ); + selector = "#" + id; + panel = self.element.find( selector ); + if ( !panel.length ) { + panel = self._createPanel( id ); + panel.insertAfter( self.panels[ i - 1 ] || self.list ); } - self.panels = self.panels.add( $panel ); // invalid tab href } else { - o.disabled.push( i ); + self.options.disabled.push( i ); } - }); - // initialization from scratch - if ( init ) { - // attach necessary classes for styling - this.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ); - this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); - this.lis.addClass( "ui-state-default ui-corner-top" ); - this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ); - - // Selected tab - // use "selected" option or try to retrieve: - // 1. from fragment identifier in url - // 2. from cookie - // 3. from selected class attribute on <li> - if ( o.selected === undefined ) { - if ( location.hash ) { - this.anchors.each(function( i, a ) { - if ( a.hash == location.hash ) { - o.selected = i; - return false; - } - }); - } - if ( typeof o.selected !== "number" && o.cookie ) { - o.selected = parseInt( self._cookie(), 10 ); - } - if ( typeof o.selected !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) { - o.selected = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) ); - } - o.selected = o.selected || ( this.lis.length ? 0 : -1 ); - } else if ( o.selected === null ) { // usage of null is deprecated, TODO remove in next release - o.selected = -1; - } - - // sanity check - default to first tab... - o.selected = ( ( o.selected >= 0 && this.anchors[ o.selected ] ) || o.selected < 0 ) - ? o.selected - : 0; - - // Take disabling tabs via class attribute from HTML - // into account and update option properly. - if ( $.isArray( o.disabled ) ) { - o.disabled = $.unique( o.disabled.concat( - $.map( this.lis.filter( ".ui-state-disabled" ), function( n, i ) { - return self.lis.index( n ); - }) - ) ).sort(); - } - - // highlight selected tab - this.panels.addClass( "ui-tabs-hide" ); - this.lis.removeClass( "ui-tabs-selected ui-state-active" ); - // check for length avoids error when initializing empty list - if ( o.selected >= 0 && this.anchors.length ) { - self.element.find( self._sanitizeSelector( self.anchors[ o.selected ].hash ) ).removeClass( "ui-tabs-hide" ); - this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" ); - - // seems to be expected behavior that the show callback is fired - self.element.queue( "tabs", function() { - self._trigger( "show", null, - self._ui( self.anchors[ o.selected ], self.element.find( self._sanitizeSelector( self.anchors[ o.selected ].hash ) )[ 0 ] ) ); - }); - - this.load( o.selected ); + if ( panel.length) { + self.panels = self.panels.add( panel ); } + $( a ).attr( "aria-controls", selector.substring( 1 ) ); + }); + }, - // clean up to avoid memory leaks in certain versions of IE 6 - // TODO: namespace this event - $( window ).bind( "unload", function() { - self.lis.add( self.anchors ).unbind( ".tabs" ); - self.lis = self.anchors = self.panels = null; - }); - // update selected after add/remove - } else { - o.selected = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) ); - } - - if ( !o.disabled.length ) { - o.disabled = false; - } - - this.element.toggleClass( "ui-tabs-collapsible", o.collapsible ); + _createPanel: function( id ) { + return $( "<div></div>" ) + .attr( "id", id ) + .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) + .data( "destroy.tabs", true ); + }, - // set or update cookie after init and add/remove respectively - if ( o.cookie ) { - this._cookie( o.selected, o.cookie ); + _setupDisabled: function( disabled ) { + if ( $.isArray( disabled ) ) { + if ( !disabled.length ) { + disabled = false; + } else if ( disabled.length === this.anchors.length ) { + disabled = true; + } } // disable tabs for ( var i = 0, li; ( li = this.lis[ i ] ); i++ ) { - $( li ).toggleClass( "ui-state-disabled", $.inArray( i, o.disabled ) != -1 ); + $( li ).toggleClass( "ui-state-disabled", ( disabled === true || $.inArray( i, disabled ) !== -1 ) ); } - // reset cache if switching from cached to not cached - if ( o.cache === false ) { - this.anchors.removeData( "cache.tabs" ); - } - - // remove all handlers before, tabify may run on existing tabs after add or option change - this.lis.add( this.anchors ).unbind( ".tabs" ); - - this._focusable( this.lis ); - this._hoverable( this.lis ); + this.options.disabled = disabled; + }, + _setupFx: function( fx ) { // set up animations - var hideFx, showFx; - if ( o.fx ) { - if ( $.isArray( o.fx ) ) { - hideFx = o.fx[ 0 ]; - showFx = o.fx[ 1 ]; + if ( fx ) { + if ( $.isArray( fx ) ) { + this.hideFx = fx[ 0 ]; + this.showFx = fx[ 1 ]; } else { - hideFx = showFx = o.fx; + this.hideFx = this.showFx = fx; } } + }, - // Reset certain styles left over from animation - // and prevent IE's ClearType bug... - function resetStyle( $el, fx ) { - $el.css( "display", "" ); - if ( !$.support.opacity && fx.opacity ) { - $el[ 0 ].style.removeAttribute( "filter" ); - } + // Reset certain styles left over from animation + // and prevent IE's ClearType bug... + _resetStyle: function ( $el, fx ) { + $el.css( "display", "" ); + if ( !$.support.opacity && fx.opacity ) { + $el[ 0 ].style.removeAttribute( "filter" ); } + }, - // Show a tab... - var showTab = showFx - ? function( clicked, $show, event ) { - $( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" ); - $show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way - .animate( showFx, showFx.duration || "normal", function() { - resetStyle( $show, showFx ); - self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) ); - }); - } - : function( clicked, $show, event ) { - $( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" ); - $show.removeClass( "ui-tabs-hide" ); - self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) ); - }; + _showTab: function( event, eventData ) { + var that = this; + + $( eventData.newTab ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); - // Hide a tab, $show is optional... - var hideTab = hideFx - ? function( clicked, $hide ) { - $hide.animate( hideFx, hideFx.duration || "normal", function() { - self.lis.removeClass( "ui-tabs-selected ui-state-active" ); - $hide.addClass( "ui-tabs-hide" ); - resetStyle( $hide, hideFx ); - self.element.dequeue( "tabs" ); + if ( that.showFx ) { + that.running = true; + eventData.newPanel + // TODO: why are we hiding? old code? + .hide() + .animate( that.showFx, that.showFx.duration || "normal", function() { + that._resetStyle( $( this ), that.showFx ); + that.running = false; + that._trigger( "activate", event, eventData ); }); + } else { + eventData.newPanel.show(); + that._trigger( "activate", event, eventData ); + } + }, + + // TODO: combine with _showTab() + _hideTab: function( event, eventData ) { + var that = this; + + if ( that.hideFx ) { + that.running = true; + eventData.oldPanel.animate( that.hideFx, that.hideFx.duration || "normal", function() { + that.running = false; + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + that._resetStyle( $( this ), that.hideFx ); + that.element.dequeue( "tabs" ); + if ( !eventData.newPanel.length ) { + that._trigger( "activate", event, eventData ); + } + }); + } else { + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + eventData.oldPanel.hide(); + that.element.dequeue( "tabs" ); + if ( !eventData.newPanel.length ) { + that._trigger( "activate", event, eventData ); } - : function( clicked, $hide, $show ) { - self.lis.removeClass( "ui-tabs-selected ui-state-active" ); - $hide.addClass( "ui-tabs-hide" ); - self.element.dequeue( "tabs" ); - }; + } + }, + _setupEvents: function( event ) { // attach tab event handler, unbind to avoid duplicates from former tabifying... - this.anchors.bind( o.event + ".tabs", function( event ) { + this.anchors.unbind( ".tabs" ); + + if ( event ) { + this.anchors.bind( event.split( " " ).join( ".tabs " ) + ".tabs", + $.proxy( this, "_eventHandler" ) ); + } + + // disable click in any case + this.anchors.bind( "click.tabs", function( event ){ event.preventDefault(); - var el = this, - $li = $(el).closest( "li" ), - $hide = self.panels.filter( ":not(.ui-tabs-hide)" ), - $show = self.element.find( self._sanitizeSelector( el.hash ) ); - - // If tab is already selected and not collapsible or tab disabled or - // or is already loading or click callback returns false stop here. - // Check if click handler returns false last so that it is not executed - // for a disabled or loading tab! - if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) || - $li.hasClass( "ui-state-disabled" ) || - $li.hasClass( "ui-state-processing" ) || - self.panels.filter( ":animated" ).length || - self._trigger( "select", event, self._ui( this, $show[ 0 ] ) ) === false ) { - this.blur(); - return; - } + }); + }, - o.selected = self.anchors.index( this ); + _eventHandler: function( event ) { + var that = this, + options = that.options, + active = that.active, + clicked = $( event.currentTarget ), + clickedIsActive = clicked[ 0 ] === active[ 0 ], + collapsing = clickedIsActive && options.collapsible, + toShow = collapsing ? $() : that._getPanelForTab( clicked ), + toHide = !active.length ? $() : that._getPanelForTab( active ), + tab = clicked.closest( "li" ), + eventData = { + oldTab: active, + oldPanel: toHide, + newTab: collapsing ? $() : clicked, + newPanel: toShow + }; - self.abort(); + event.preventDefault(); + + if ( tab.hasClass( "ui-state-disabled" ) || + // tab is already loading + tab.hasClass( "ui-tabs-loading" ) || + // can't switch durning an animation + that.running || + // click on active header, but not collapsible + ( clickedIsActive && !options.collapsible ) || + // allow canceling activation + ( that._trigger( "beforeActivate", event, eventData ) === false ) ) { + clicked[ 0 ].blur(); + return; + } - // if tab may be closed - if ( o.collapsible ) { - if ( $li.hasClass( "ui-tabs-selected" ) ) { - o.selected = -1; + options.active = collapsing ? false : that.anchors.index( clicked ); - if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); - } + that.active = clickedIsActive ? $() : clicked; + if ( that.xhr ) { + that.xhr.abort(); + } - self.element.queue( "tabs", function() { - hideTab( el, $hide ); - }).dequeue( "tabs" ); + // if tab may be closed + if ( options.collapsible ) { + if ( collapsing ) { + options.active = false; - this.blur(); - return; - } else if ( !$hide.length ) { - if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); - } + that.element.queue( "tabs", function() { + that._hideTab( event, eventData ); + }).dequeue( "tabs" ); - self.element.queue( "tabs", function() { - showTab( el, $show, event ); - }); + clicked[ 0 ].blur(); + return; + } else if ( !toHide.length ) { + that.element.queue( "tabs", function() { + that._showTab( event, eventData ); + }); - // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171 - self.load( self.anchors.index( this ) ); + // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171 + that.load( that.anchors.index( clicked ), event ); - this.blur(); - return; - } + clicked[ 0 ].blur(); + return; } + } - if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); + // show new tab + if ( toShow.length ) { + if ( toHide.length ) { + that.element.queue( "tabs", function() { + that._hideTab( event, eventData ); + }); } + that.element.queue( "tabs", function() { + that._showTab( event, eventData ); + }); - // show new tab - if ( $show.length ) { - if ( $hide.length ) { - self.element.queue( "tabs", function() { - hideTab( el, $hide ); - }); - } - self.element.queue( "tabs", function() { - showTab( el, $show, event ); - }); + that.load( that.anchors.index( clicked ), event ); + } else { + throw "jQuery UI Tabs: Mismatching fragment identifier."; + } - self.load( self.anchors.index( this ) ); - } else { - throw "jQuery UI Tabs: Mismatching fragment identifier."; - } + // Prevent IE from keeping other link focussed when using the back button + // and remove dotted border from clicked link. This is controlled via CSS + // in modern browsers; blur() removes focus from address bar in Firefox + // which can become a usability + if ( $.browser.msie ) { + clicked[ 0 ].blur(); + } + }, - // Prevent IE from keeping other link focussed when using the back button - // and remove dotted border from clicked link. This is controlled via CSS - // in modern browsers; blur() removes focus from address bar in Firefox - // which can become a usability - if ( $.browser.msie ) { - this.blur(); - } - }); + _activate: function( index ) { + var active = this._findActive( index )[ 0 ]; - // disable click in any case - this.anchors.bind( "click.tabs", function( event ){ - event.preventDefault(); + // trying to activate the already active panel + if ( active === this.active[ 0 ] ) { + return; + } + + // trying to collapse, simulate a click on the current active header + active = active || this.active[ 0 ]; + + this._eventHandler({ + target: active, + currentTarget: active, + preventDefault: $.noop }); }, + _findActive: function( selector ) { + return typeof selector === "number" ? this.anchors.eq( selector ) : + typeof selector === "string" ? this.anchors.filter( "[href$='" + selector + "']" ) : $(); + }, + _getIndex: function( index ) { // meta-function to give users option to provide a href string instead of a numerical index. // also sanitizes numerical indexes to valid values. @@ -414,19 +502,17 @@ $.widget( "ui.tabs", { _destroy: function() { var o = this.options; - this.abort(); + if ( this.xhr ) { + this.xhr.abort(); + } this.element.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" ); this.list.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); this.anchors.each(function() { - var href = $.data( this, "href.tabs" ); - if ( href ) { - this.href = href; - } var $this = $( this ).unbind( ".tabs" ); - $.each( [ "href", "load", "cache" ], function( i, prefix ) { + $.each( [ "href", "load" ], function( i, prefix ) { $this.removeData( prefix + ".tabs" ); }); }); @@ -438,260 +524,545 @@ $.widget( "ui.tabs", { $( this ).removeClass([ "ui-state-default", "ui-corner-top", - "ui-tabs-selected", + "ui-tabs-active", "ui-state-active", "ui-state-disabled", "ui-tabs-panel", "ui-widget-content", - "ui-corner-bottom", - "ui-tabs-hide" + "ui-corner-bottom" ].join( " " ) ); } }); - if ( o.cookie ) { - this._cookie( null, o.cookie ); + return this; + }, + + enable: function( index ) { + var disabled = this.options.disabled; + if ( disabled === false ) { + return; } - return this; + if ( index === undefined ) { + disabled = false; + } else { + index = this._getIndex( index ); + if ( $.isArray( disabled ) ) { + disabled = $.map( disabled, function( num ) { + return num !== index ? num : null; + }); + } else { + disabled = $.map( this.lis, function( li, num ) { + return num !== index ? num : null; + }); + } + } + this._setupDisabled( disabled ); }, - add: function( url, label, index ) { + disable: function( index ) { + var disabled = this.options.disabled; + if ( disabled === true ) { + return; + } + if ( index === undefined ) { - index = this.anchors.length; + disabled = true; + } else { + index = this._getIndex( index ); + if ( $.inArray( index, disabled ) !== -1 ) { + return; + } + if ( $.isArray( disabled ) ) { + disabled = $.merge( [ index ], disabled ).sort(); + } else { + disabled = [ index ]; + } } + this._setupDisabled( disabled ); + }, + load: function( index, event ) { + index = this._getIndex( index ); var self = this, o = this.options, - $li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ), - id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] ); - - $li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true ); + a = this.anchors.eq( index )[ 0 ], + panel = self._getPanelForTab( a ), + // TODO until #3808 is fixed strip fragment identifier from url + // (IE fails to load from such url) + url = $( a ).attr( "href" ).replace( /#.*$/, "" ), + eventData = { + tab: $( a ), + panel: panel + }; - // try to find an existing element before creating a new one - var $panel = self.element.find( "#" + id ); - if ( !$panel.length ) { - $panel = $( o.panelTemplate ) - .attr( "id", id ) - .data( "destroy.tabs", true ); + if ( this.xhr ) { + this.xhr.abort(); } - $panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" ); - if ( index >= this.lis.length ) { - $li.appendTo( this.list ); - $panel.appendTo( this.list[ 0 ].parentNode ); - } else { - $li.insertBefore( this.lis[ index ] ); - $panel.insertBefore( this.panels[ index ] ); + // not remote + if ( !url ) { + this.element.dequeue( "tabs" ); + return; } - o.disabled = $.map( o.disabled, function( n, i ) { - return n >= index ? ++n : n; + this.xhr = $.ajax({ + url: url, + beforeSend: function( jqXHR, settings ) { + return self._trigger( "beforeLoad", event, + $.extend( { jqXHR : jqXHR, ajaxSettings: settings }, eventData ) ); + } }); - this._tabify(); + if ( this.xhr ) { + // load remote from here on + this.lis.eq( index ).addClass( "ui-tabs-loading" ); + + this.xhr + .success(function( response ) { + panel.html( response ); + }) + .complete(function( jqXHR, status ) { + if ( status === "abort" ) { + // stop possibly running animations + self.element.queue( [] ); + self.panels.stop( false, true ); + + // "tabs" queue must not contain more than two elements, + // which are the callbacks for the latest clicked tab... + self.element.queue( "tabs", self.element.queue( "tabs" ).splice( -2, 2 ) ); + + delete this.xhr; + } - if ( this.anchors.length == 1 ) { - o.selected = 0; - $li.addClass( "ui-tabs-selected ui-state-active" ); - $panel.removeClass( "ui-tabs-hide" ); - this.element.queue( "tabs", function() { - self._trigger( "show", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) ); - }); + self.lis.eq( index ).removeClass( "ui-tabs-loading" ); - this.load( 0 ); + self._trigger( "load", event, eventData ); + }); } - this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); + // last, so that load event is fired before show... + self.element.dequeue( "tabs" ); + return this; }, - remove: function( index ) { - index = this._getIndex( index ); - var o = this.options, - $li = this.lis.eq( index ).remove(), - $panel = this.panels.eq( index ).remove(); - - // If selected tab was removed focus tab to the right or - // in case the last tab was removed the tab to the left. - if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) { - this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) ); - } - - o.disabled = $.map( - $.grep( o.disabled, function(n, i) { - return n != index; - }), - function( n, i ) { - return n >= index ? --n : n; + _getPanelForTab: function( tab ) { + var id = $( tab ).attr( "aria-controls" ); + return this.element.find( this._sanitizeSelector( "#" + id ) ); + } +}); + +$.extend( $.ui.tabs, { + version: "@VERSION" +}); + +// DEPRECATED +if ( $.uiBackCompat !== false ) { + + // url method + (function( $, prototype ) { + prototype.url = function( index, url ) { + this.anchors.eq( index ).attr( "href", url ); + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // ajaxOptions and cache options + (function( $, prototype ) { + $.extend( prototype.options, { + ajaxOptions: null, + cache: false + }); + + var _create = prototype._create, + _setOption = prototype._setOption, + _destroy = prototype._destroy, + oldurl = prototype.url || $.noop; + + $.extend( prototype, { + _create: function() { + _create.call( this ); + + var self = this; + + this.element.bind( "tabsbeforeload", function( event, ui ) { + // tab is already cached + if ( $.data( ui.tab[ 0 ], "cache.tabs" ) ) { + event.preventDefault(); + return; + } + + $.extend( ui.ajaxSettings, self.options.ajaxOptions, { + error: function( xhr, s, e ) { + try { + // Passing index avoid a race condition when this method is + // called after the user has selected another tab. + // Pass the anchor that initiated this request allows + // loadError to manipulate the tab content panel via $(a.hash) + self.options.ajaxOptions.error( xhr, s, ui.tab.closest( "li" ).index(), ui.tab[ 0 ] ); + } + catch ( e ) {} + } + }); + + ui.jqXHR.success( function() { + if ( self.options.cache ) { + $.data( ui.tab[ 0 ], "cache.tabs", true ); + } + }); + }); + }, + + _setOption: function( key, value ) { + // reset cache if switching from cached to not cached + if ( key === "cache" && value === false ) { + this.anchors.removeData( "cache.tabs" ); + } + _setOption.apply( this, arguments ); + }, + + _destroy: function() { + this.anchors.removeData( "cache.tabs" ); + _destroy.call( this ); + }, + + url: function( index, url ){ + this.anchors.eq( index ).removeData( "cache.tabs" ); + oldurl.apply( this, arguments ); + } + }); + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // abort method + (function( $, prototype ) { + prototype.abort = function() { + if ( this.xhr ) { + this.xhr.abort(); + } + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // spinner + (function( $, prototype ) { + $.extend( prototype.options, { + spinner: "<em>Loading…</em>" + }); + + var _create = prototype._create; + prototype._create = function() { + _create.call( this ); + var self = this; + + this.element.bind( "tabsbeforeload", function( event, ui ) { + if ( self.options.spinner ) { + var span = $( "span", ui.tab ); + if ( span.length ) { + span.data( "label.tabs", span.html() ).html( self.options.spinner ); + } + } + ui.jqXHR.complete( function() { + if ( self.options.spinner ) { + var span = $( "span", ui.tab ); + if ( span.length ) { + span.html( span.data( "label.tabs" ) ).removeData( "label.tabs" ); + } + } + }); }); + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // enable/disable events + (function( $, prototype ) { + $.extend( prototype.options, { + enable: null, + disable: null + }); - this._tabify(); + var enable = prototype.enable, + disable = prototype.disable; - this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) ); - return this; - }, + prototype.enable = function( index ) { + var o = this.options, + trigger; - enable: function( index ) { - if ( index === undefined ) { - for ( var i = 0, len = this.lis.length; i < len; i++ ) { - this.enable( i ); + if ( index && o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) !== -1 ) ) { + trigger = true; } - return this; - } - index = this._getIndex( index ); - var o = this.options; - if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) { - return; - } - this.lis.eq( index ).removeClass( "ui-state-disabled" ); - o.disabled = this.lis.map( function( i ) { - return $(this).is( ".ui-state-disabled" ) ? i : null; - }).get(); + enable.apply( this, arguments ); - if ( !o.disabled.length ) { - o.disabled = false; - } + if ( trigger ) { + this._trigger( "enable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); + } + }; - this._trigger( "enable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); - return this; - }, + prototype.disable = function( index ) { + var o = this.options, + trigger; - disable: function( index ) { - if ( index === undefined ) { - for ( var i = 0, len = this.lis.length; i < len; i++ ) { - this.disable( i ); + if ( index && !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) { + trigger = true; } - return this; - } - index = this._getIndex( index ); - var o = this.options; - if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) { - this.lis.eq( index ).addClass( "ui-state-disabled" ); - o.disabled = this.lis.map( function( i ) { - return $(this).is( ".ui-state-disabled" ) ? i : null; - }).get(); - - if ( o.disabled.length === this.anchors.length ) { - o.disabled = true; + disable.apply( this, arguments ); + + if ( trigger ) { + this._trigger( "disable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); } + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // add/remove methods and events + (function( $, prototype ) { + $.extend( prototype.options, { + add: null, + remove: null, + tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>" + }); - this._trigger( "disable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); - } + prototype.add = function( url, label, index ) { + if ( index === undefined ) { + index = this.anchors.length; + } - return this; - }, + var options = this.options, + li = $( options.tabTemplate + .replace( /#\{href\}/g, url ) + .replace( /#\{label\}/g, label ) ), + id = !url.indexOf( "#" ) ? + url.replace( "#", "" ) : + this._tabId( li.find( "a" )[ 0 ] ); + + li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true ); + li.find( "a" ).attr( "aria-controls", id ); + + // try to find an existing element before creating a new one + var panel = this.element.find( "#" + id ); + if ( !panel.length ) { + panel = this._createPanel( id ); + } + panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide(); - select: function( index ) { - index = this._getIndex( index ); - if ( index == -1 ) { - if ( this.options.collapsible && this.options.selected != -1 ) { - index = this.options.selected; + if ( index >= this.lis.length ) { + li.appendTo( this.list ); + panel.appendTo( this.list[ 0 ].parentNode ); } else { - return this; + li.insertBefore( this.lis[ index ] ); + panel.insertBefore( this.panels[ index ] ); } - } - this.anchors.eq( index ).trigger( this.options.event + ".tabs" ); - return this; - }, + options.disabled = $.map( options.disabled, function( n ) { + return n >= index ? ++n : n; + }); - load: function( index ) { - index = this._getIndex( index ); - var self = this, - o = this.options, - a = this.anchors.eq( index )[ 0 ], - url = $.data( a, "load.tabs" ); + this.refresh(); + if ( this.lis.length === 1 && options.active === false ) { + this.option( "active", 0 ); + } - this.abort(); + this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); + return this; + }; - // not remote or from cache - if ( !url || this.element.queue( "tabs" ).length !== 0 && $.data( a, "cache.tabs" ) ) { - this.element.dequeue( "tabs" ); - return; - } + prototype.remove = function( index ) { + index = this._getIndex( index ); + var options = this.options, + tab = this.lis.eq( index ).remove(), + panel = this.panels.eq( index ).remove(); - // load remote from here on - this.lis.eq( index ).addClass( "ui-state-processing" ); + // If selected tab was removed focus tab to the right or + // in case the last tab was removed the tab to the left. + if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) { + this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) ); + } - if ( o.spinner ) { - var span = $( "span", a ); - span.data( "label.tabs", span.html() ).html( o.spinner ); - } + options.disabled = $.map( + $.grep( options.disabled, function( n ) { + return n !== index; + }), + function( n ) { + return n >= index ? --n : n; + }); - this.xhr = $.ajax( $.extend( {}, o.ajaxOptions, { - url: url, - success: function( r, s ) { - self.element.find( self._sanitizeSelector( a.hash ) ).html( r ); + this.refresh(); - // take care of tab labels - self._cleanup(); + this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) ); + return this; + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); - if ( o.cache ) { - $.data( a, "cache.tabs", true ); - } + // length method + (function( $, prototype ) { + prototype.length = function() { + return this.anchors.length; + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // panel ids (idPrefix option + title attribute) + (function( $, prototype ) { + $.extend( prototype.options, { + idPrefix: "ui-tabs-" + }); - self._trigger( "load", null, self._ui( self.anchors[ index ], self.panels[ index ] ) ); - try { - o.ajaxOptions.success( r, s ); + var _tabId = prototype._tabId; + prototype._tabId = function( a ) { + return $( a ).attr( "aria-controls" ) || + a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) || + this.options.idPrefix + getNextTabId(); + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // _createPanel method + (function( $, prototype ) { + $.extend( prototype.options, { + panelTemplate: "<div></div>" + }); + + var _createPanel = prototype._createPanel; + prototype._createPanel = function( id ) { + return $( this.options.panelTemplate ) + .attr( "id", id ) + .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) + .data( "destroy.tabs", true ); + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // selected option + (function( $, prototype ) { + var _create = prototype._create, + _setOption = prototype._setOption, + _eventHandler = prototype._eventHandler; + + prototype._create = function() { + var options = this.options; + if ( options.active === null && options.selected !== undefined ) { + options.active = options.selected === -1 ? false : options.selected; + } + _create.call( this ); + options.selected = options.active; + if ( options.selected === false ) { + options.selected = -1; + } + }; + + prototype._setOption = function( key, value ) { + var options = this.options; + if ( key === "selected" ) { + key = "active"; + } + _setOption.apply( this, arguments ); + if ( key === "active" ) { + if ( key === - 1 ) { + key = false; } - catch ( e ) {} - }, - error: function( xhr, s, e ) { - // take care of tab labels - self._cleanup(); - - self._trigger( "load", null, self._ui( self.anchors[ index ], self.panels[ index ] ) ); - try { - // Passing index avoid a race condition when this method is - // called after the user has selected another tab. - // Pass the anchor that initiated this request allows - // loadError to manipulate the tab content panel via $(a.hash) - o.ajaxOptions.error( xhr, s, index, a ); + options.selected = options.active; + if ( options.selected === false ) { + options.selected = -1; } - catch ( e ) {} } - } ) ); + }; - // last, so that load event is fired before show... - self.element.dequeue( "tabs" ); + prototype._eventHandler = function( event ) { + _eventHandler.apply( this, arguments ); + this.options.selected = this.options.active; + if ( this.options.selected === false ) { + this.options.selected = -1; + } + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); - return this; - }, + // show and select event + (function( $, prototype ) { + $.extend( prototype.options, { + show: null, + select: null + }); + var _trigger = prototype._trigger; - abort: function() { - // stop possibly running animations - this.element.queue( [] ); - this.panels.stop( false, true ); + prototype._trigger = function( type, event, data ) { + var ret = _trigger.apply( this, arguments ); + if ( !ret ) { + return false; + } + if ( type === "beforeActivate" ) { + ret = _trigger.call( this, "select", event, { + tab: data.newTab[ 0], + panel: data.newPanel[ 0 ], + index: data.newTab.closest( "li" ).index() + }); + } else if ( type === "activate" ) { + ret = _trigger.call( this, "show", event, data ); + } + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); + + // select method + (function( $, prototype ) { + prototype.select = function( index ) { + index = this._getIndex( index ); + if ( index == -1 ) { + if ( this.options.collapsible && this.options.selected != -1 ) { + index = this.options.selected; + } else { + return; + } + } + this.anchors.eq( index ).trigger( this.options.event + ".tabs" ); + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); - // "tabs" queue must not contain more than two elements, - // which are the callbacks for the latest clicked tab... - this.element.queue( "tabs", this.element.queue( "tabs" ).splice( -2, 2 ) ); + // cookie option + (function( $, prototype ) { + $.extend( prototype.options, { + cookie: null // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } + }); - // terminate pending requests from other tabs - if ( this.xhr ) { - this.xhr.abort(); - delete this.xhr; - } + var _create = prototype._create, + _refresh = prototype._refresh, + _eventHandler = prototype._eventHandler, + _destroy = prototype._destroy; - // take care of tab labels - this._cleanup(); - return this; - }, + prototype._create = function() { + var o = this.options; + if ( o.active === undefined ) { + if ( typeof o.active !== "number" && o.cookie ) { + o.active = parseInt( this._cookie(), 10 ); + } + } + _create.call( this ); + }; - url: function( index, url ) { - this.anchors.eq( index ).removeData( "cache.tabs" ).data( "load.tabs", url ); - return this; - }, + prototype._cookie = function() { + var cookie = this.cookie || + ( this.cookie = this.options.cookie.name || "ui-tabs-" + getNextListId() ); + return $.cookie.apply( null, [ cookie ].concat( $.makeArray( arguments ) ) ); + }; - length: function() { - return this.anchors.length; - } -}); + prototype._refresh = function() { + _refresh.call( this ); -$.extend( $.ui.tabs, { - version: "@VERSION" -}); + // set or update cookie after init and add/remove respectively + if ( this.options.cookie ) { + this._cookie( this.options.active, this.options.cookie ); + } + }; + + prototype._eventHandler = function( event ) { + _eventHandler.apply( this, arguments ); + + if ( this.options.cookie ) { + this._cookie( this.options.active, this.options.cookie ); + } + }; + + prototype._destroy = function() { + _destroy.call( this ); + + if ( this.options.cookie ) { + this._cookie( null, this.options.cookie ); + } + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); +} })( jQuery ); diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 9b4d52bd1..534b3c947 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -18,9 +18,10 @@ var increments = 0; $.widget("ui.tooltip", { options: { + tooltipClass: null, items: "[title]", content: function() { - return $(this).attr("title"); + return $( this ).attr( "title" ); }, position: { my: "left center", @@ -29,25 +30,10 @@ $.widget("ui.tooltip", { } }, _create: function() { - var self = this; - this.tooltip = $("<div></div>") - .attr("id", "ui-tooltip-" + increments++) - .attr("role", "tooltip") - .attr("aria-hidden", "true") - .addClass("ui-tooltip ui-widget ui-corner-all ui-widget-content") - .appendTo(document.body) - .hide(); - this.tooltipContent = $("<div></div>") - .addClass("ui-tooltip-content") - .appendTo(this.tooltip); - this.opacity = this.tooltip.css("opacity"); - this.element - .bind("focus.tooltip mouseover.tooltip", function(event) { - self.open( event ); - }) - .bind("blur.tooltip mouseout.tooltip", function(event) { - self.close( event ); - }); + this._bind( { + mouseover: "open", + focusin: "open" + }); }, enable: function() { @@ -55,34 +41,28 @@ $.widget("ui.tooltip", { }, disable: function() { + // only set option, disable element style changes this.options.disabled = true; }, - _destroy: function() { - this.tooltip.remove(); - }, - - widget: function() { - return this.element.pushStack(this.tooltip.get()); - }, - open: function(event) { var target = $(event && event.target || this.element).closest(this.options.items); if ( !target.length ) { return; } - // already visible? possible when both focus and mouseover events occur - if (this.current && this.current[0] == target[0]) - return; var self = this; - this.current = target; - this.currentTitle = target.attr("title"); + if ( !target.data("tooltip-title") ) { + target.data("tooltip-title", target.attr("title")); + } var content = this.options.content.call(target[0], function(response) { // IE may instantly serve a cached response, need to give it a chance to finish with _open before that setTimeout(function() { - // ignore async responses that come in after the tooltip is already hidden - if (self.current == target) + // when undefined, it got removeAttr, then ignore (ajax response) + // intially its an empty string, so not undefined + // TODO is there a better approach to enable ajax tooltips to have two updates? + if (target.attr( "aria-describedby" ) !== undefined) { self._open(event, target, response); + } }, 13); }); if (content) { @@ -90,48 +70,74 @@ $.widget("ui.tooltip", { } }, - _open: function(event, target, content) { - if (!content) + _open: function( event, target, content ) { + if ( !content ) return; - + target.attr("title", ""); - - if (this.options.disabled) + + if ( this.options.disabled ) return; - - this.tooltipContent.html(content); - this.tooltip.css({ - top: 0, - left: 0 - }).show().position( $.extend({ + + // ajaxy tooltip can update an existing one + var tooltip = this._find( target ); + if (!tooltip.length) { + tooltip = this._tooltip(); + target.attr( "aria-describedby", tooltip.attr( "id" ) ); + } + tooltip.find(".ui-tooltip-content").html( content ); + tooltip.position( $.extend({ of: target - }, this.options.position )).hide(); - - this.tooltip.attr("aria-hidden", "false"); - target.attr("aria-describedby", this.tooltip.attr("id")); + }, this.options.position ) ).hide(); + - this.tooltip.stop(false, true).fadeIn(); + tooltip.fadeIn(); this._trigger( "open", event ); + + this._bind( target, { + mouseleave: "close", + blur: "close" + }); }, - close: function(event) { - if (!this.current) - return; - - var current = this.current; - this.current = null; - current.attr("title", this.currentTitle); + close: function( event ) { + var target = $( event && event.currentTarget || this.element ); + target.attr( "title", target.data( "tooltip-title" ) ); - if (this.options.disabled) + if ( this.options.disabled ) return; + + var tooltip = this._find( target ); + target.removeAttr( "aria-describedby" ); - current.removeAttr("aria-describedby"); - this.tooltip.attr("aria-hidden", "true"); + tooltip.fadeOut( function() { + $( this ).remove(); + }); - this.tooltip.stop(false, true).fadeOut(); + target.unbind( "mouseleave.tooltip blur.tooltip" ); this._trigger( "close", event ); + }, + + _tooltip: function() { + var tooltip = $( "<div></div>" ) + .attr( "id", "ui-tooltip-" + increments++ ) + .attr( "role", "tooltip" ) + .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content" ); + if (this.options.tooltipClass) { + tooltip.addClass(this.options.tooltipClass); + } + $( "<div></div>" ) + .addClass( "ui-tooltip-content" ) + .appendTo( tooltip ); + tooltip.appendTo( document.body ); + return tooltip; + }, + + _find: function( target ) { + var id = target.attr( "aria-describedby" ); + return id ? $( document.getElementById( id ) ) : $(); } }); diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 27d08ccd2..55b9f7984 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -155,7 +155,10 @@ $.Widget.prototype = { widgetEventPrefix: "", defaultElement: "<div>", options: { - disabled: false + disabled: false, + + // callbacks + create: null }, _createWidget: function( options, element ) { element = $( element || this.defaultElement || this )[ 0 ]; |