diff options
author | Scott González <scott.gonzalez@gmail.com> | 2012-10-25 06:10:00 -0400 |
---|---|---|
committer | Scott González <scott.gonzalez@gmail.com> | 2012-10-25 06:10:00 -0400 |
commit | 054b208a9990fd71d30285e707ad53dae5a48247 (patch) | |
tree | 257e0b2a2139fb1c584f43c8ec43e2a405916a6f | |
parent | 056f83fb0124fef9cbcad7a95b6bb517294a8ea0 (diff) | |
download | jquery-ui-054b208a9990fd71d30285e707ad53dae5a48247.tar.gz jquery-ui-054b208a9990fd71d30285e707ad53dae5a48247.zip |
Tabs: Removed all templating features. Fixes #7158 - Tabs: Remove add and remove methods. Fixes #7157 - Tabs: Remove templating (idPrefix, tabTemplate, panelTemplate options). Fixes #7149 - Tabs: Remove use of title attribute.
-rw-r--r-- | build/tasks/testswarm.js | 1 | ||||
-rw-r--r-- | grunt.js | 2 | ||||
-rw-r--r-- | tests/unit/all-active.html | 1 | ||||
-rw-r--r-- | tests/unit/all.html | 1 | ||||
-rw-r--r-- | tests/unit/subsuite.js | 3 | ||||
-rw-r--r-- | tests/unit/tabs/tabs.html | 3 | ||||
-rw-r--r-- | tests/unit/tabs/tabs_common_deprecated.js | 23 | ||||
-rw-r--r-- | tests/unit/tabs/tabs_deprecated.html | 156 | ||||
-rw-r--r-- | tests/unit/tabs/tabs_deprecated.js | 182 | ||||
-rw-r--r-- | ui/jquery.ui.tabs.js | 134 |
10 files changed, 2 insertions, 504 deletions
diff --git a/build/tasks/testswarm.js b/build/tasks/testswarm.js index 244113786..7219bcf0c 100644 --- a/build/tasks/testswarm.js +++ b/build/tasks/testswarm.js @@ -29,7 +29,6 @@ var versions = { //"sortable/sortable.html", "Spinner": "spinner/spinner.html", "Tabs": "tabs/tabs.html", - "Tabs_deprecated": "tabs/tabs_deprecated.html", "Tooltip": "tooltip/tooltip.html", "Widget": "widget/widget.html" }; @@ -281,7 +281,7 @@ grunt.initConfig({ files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) { // disabling everything that doesn't (quite) work with PhantomJS for now // TODO except for all|index|test, try to include more as we go - return !( /(all|all-active|index|test|draggable|droppable|selectable|resizable|sortable|dialog|slider|datepicker|tabs|tabs_deprecated|tooltip)\.html$/ ).test( file ); + return !( /(all|all-active|index|test|draggable|droppable|selectable|resizable|sortable|dialog|slider|datepicker|tabs|tooltip)\.html$/ ).test( file ); }) }, lint: { diff --git a/tests/unit/all-active.html b/tests/unit/all-active.html index 36719acdf..f842aa5cc 100644 --- a/tests/unit/all-active.html +++ b/tests/unit/all-active.html @@ -36,7 +36,6 @@ //"sortable/sortable.html", "spinner/spinner.html", "tabs/tabs.html", - "tabs/tabs_deprecated.html", "tooltip/tooltip.html", "widget/widget.html" ]; diff --git a/tests/unit/all.html b/tests/unit/all.html index c1b5d0383..bc204c976 100644 --- a/tests/unit/all.html +++ b/tests/unit/all.html @@ -36,7 +36,6 @@ //"sortable/sortable.html", "spinner/spinner.html", "tabs/tabs.html", - "tabs/tabs_deprecated.html", "tooltip/tooltip.html", "widget/widget.html" ]; diff --git a/tests/unit/subsuite.js b/tests/unit/subsuite.js index 1a16a9e94..6238cb2b1 100644 --- a/tests/unit/subsuite.js +++ b/tests/unit/subsuite.js @@ -8,8 +8,7 @@ var versions = [ ], additionalTests = { accordion: [ "accordion_deprecated.html" ], - position: [ "position_deprecated.html" ], - tabs: [ "tabs_deprecated.html" ] + position: [ "position_deprecated.html" ] }; window.testAllVersions = function( widget ) { diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index e6c954727..7c7982303 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -5,9 +5,6 @@ <title>jQuery UI Tabs Test Suite</title> <script src="../../jquery.js"></script> - <script> - $.uiBackCompat = false; - </script> <link rel="stylesheet" href="../../../external/qunit.css"> <script src="../../../external/qunit.js"></script> <script src="../../jquery.simulate.js"></script> diff --git a/tests/unit/tabs/tabs_common_deprecated.js b/tests/unit/tabs/tabs_common_deprecated.js deleted file mode 100644 index a21489cda..000000000 --- a/tests/unit/tabs/tabs_common_deprecated.js +++ /dev/null @@ -1,23 +0,0 @@ -TestHelpers.commonWidgetTests( "tabs", { - defaults: { - active: null, - collapsible: false, - disabled: false, - event: "click", - heightStyle: "content", - hide: null, - idPrefix: "ui-tabs-", - panelTemplate: "<div></div>", - show: null, - tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>", - - // callbacks - activate: null, - add: null, - beforeActivate: null, - beforeLoad: null, - create: null, - load: null, - remove: null - } -}); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html deleted file mode 100644 index 3c476d0b4..000000000 --- a/tests/unit/tabs/tabs_deprecated.html +++ /dev/null @@ -1,156 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Tabs Test Suite</title> - - <script src="../../jquery.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> - TestHelpers.loadResources({ - css: [ "ui.core", "ui.tabs" ], - js: [ - "ui/jquery.ui.core.js", - "ui/jquery.ui.widget.js", - "ui/jquery.ui.tabs.js" - ] - }); - </script> - - <script src="tabs_test_helpers.js"></script> - <script src="tabs_common_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_deprecated.js"></script> - - <script src="../swarminject.js"></script> - <style> - #tabs8, #tabs8 * { - margin: 0; - padding: 0; - font-size: 12px; - line-height: 15px; - } - </style> -</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 aria-controls="custom-id"><a href="data/test.html"><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 id="custom-id"></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 id="tabs8Wrapper"> - <div id="tabs8"> - <ul id="tabs8-list"> - <li><a href="#tabs8-1">1</a></li> - <li><a href="#tabs8-2">2</a></li> - </ul> - <div id="tabs8-1"> - <p>Lorem ipsum</p> - <p>Lorem ipsum</p> - <p>Lorem ipsum</p> - </div> - <div id="tabs8-2"> - <p>Lorem ipsum</p> - </div> - </div> -</div> - -<div id="tabs9"> - <ul> - <li>not a tab</li> - <li><a href="#tabs9-1">tab</a></li> - </ul> - <div id="tabs9-1"></div> -</div> - -</div> -</body> -</html> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js deleted file mode 100644 index 9d3599494..000000000 --- a/tests/unit/tabs/tabs_deprecated.js +++ /dev/null @@ -1,182 +0,0 @@ -(function( $ ) { - -var state = TestHelpers.tabs.state; - -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( "idPrefix", function() { - expect( 1 ); - - $( "#tabs2" ) - .one( "tabsbeforeload", function( event, ui ) { - ok( /^testing-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" ); - event.preventDefault(); - }) - .tabs({ - idPrefix: "testing-", - active: 2 - }); -}); - -test( "tabTemplate + panelTemplate", function() { - // defaults are tested in the add method test - expect( 11 ); - - var tab, anchor, - element = $( "#tabs2" ).tabs({ - tabTemplate: "<li class='customTab'><a href='http://example.com/#{href}'>#{label}</a></li>", - panelTemplate: "<div class='customPanel'></div>" - }); - element.one( "tabsadd", function( event, ui ) { - var anchor = $( ui.tab ); - equal( ui.index, 5, "ui.index" ); - equal( anchor.text(), "New", "ui.tab" ); - equal( anchor.attr( "href" ), "http://example.com/#new", "tab href" ); - ok( anchor.parent().hasClass( "customTab" ), "tab custom class" ); - equal( ui.panel.id, "new", "ui.panel" ); - ok( $( ui.panel ).hasClass( "customPanel" ), "panel custom class" ); - }); - element.tabs( "add", "#new", "New" ); - tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( ".ui-tabs-anchor" ); - equal( tab.text(), "New", "label" ); - ok( tab.hasClass( "customTab" ), "tab custom class" ); - equal( anchor.attr( "href" ), "http://example.com/#new", "href" ); - equal( tab.attr( "aria-controls" ), "new", "aria-controls" ); - ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" ); -}); - -module( "tabs (deprecated): methods" ); - -test( "add", function() { - expect( 28 ); - - var tab, anchor, - element = $( "#tabs1" ).tabs(); - - function stripLeadingSlash( str ) { - return str.substr( str.charAt( 0 ) === "/" ? 1 : 0 ); - } - - 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" ); - state( element, 1, 0, 0, 0 ); - tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( ".ui-tabs-anchor" ); - equal( tab.text(), "New", "label" ); - equal( stripLeadingSlash( anchor[0].pathname ), stripLeadingSlash( location.pathname ), "href pathname" ); - equal( anchor[0].hash, "#new", "href hash" ); - equal( tab.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" ); - 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 ).closest( "li" ).attr( "aria-controls" ), "ui.panel" ); - }); - element.tabs( "add", "data/test.html", "New Remote", 1 ); - state( element, 0, 0, 0, 0, 1 ); - tab = element.find( ".ui-tabs-nav li" ).eq( 1 ); - anchor = tab.find( ".ui-tabs-anchor" ); - equal( tab.text(), "New Remote", "label" ); - equal( stripLeadingSlash( stripLeadingSlash( - anchor[0].pathname.replace( stripLeadingSlash( location.pathname ).split( "/" ).slice( 0, -1 ).join( "/" ), "" ) - ) ), "data/test.html", "href" ); - ok( /^ui-tabs-\d+$/.test( tab.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" ); - state( element, 0, 1, 0, 0, 0 ); - - // add to empty tab set - element = $( "<div><ul></ul></div>" ).tabs(); - equal( 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" ); - state( element, 1 ); - equal( 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(); - equal( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); - element.tabs( "add", "/new", "New" ); - equal( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length ); -}); - -test( "remove", function() { - expect( 17 ); - - var element = $( "#tabs1" ).tabs({ active: 1 }); - 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 ); - state( element, 0, 1 ); - equal( element.tabs( "option", "active" ), 1 ); - equal( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0, - "remove correct list item" ); - equal( 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 ); - state( element, 1 ); - equal( 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 ); - equal( element.tabs( "option", "active" ), false ); -}); - -}( jQuery ) ); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 70a827ace..9918d6de2 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -842,138 +842,4 @@ $.widget( "ui.tabs", { } }); -// DEPRECATED -if ( $.uiBackCompat !== false ) { - - // helper method for a lot of the back compat extensions - $.ui.tabs.prototype._ui = function( tab, panel ) { - return { - tab: tab, - panel: panel, - index: this.anchors.index( tab ) - }; - }; - - // add/remove methods and events - $.widget( "ui.tabs", $.ui.tabs, { - options: { - add: null, - remove: null, - tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>" - }, - - add: function( url, label, index ) { - if ( index === undefined ) { - index = this.anchors.length; - } - - var doInsertAfter, panel, - options = this.options, - li = $( options.tabTemplate - .replace( /#\{href\}/g, url ) - .replace( /#\{label\}/g, label ) ), - id = !url.indexOf( "#" ) ? - url.replace( "#", "" ) : - this._tabId( li ); - - li.addClass( "ui-state-default ui-corner-top" ).data( "ui-tabs-destroy", true ); - li.attr( "aria-controls", id ); - - doInsertAfter = index >= this.tabs.length; - - // try to find an existing element before creating a new one - panel = this.element.find( "#" + id ); - if ( !panel.length ) { - panel = this._createPanel( id ); - if ( doInsertAfter ) { - if ( index > 0 ) { - panel.insertAfter( this.panels.eq( -1 ) ); - } else { - panel.appendTo( this.element ); - } - } else { - panel.insertBefore( this.panels[ index ] ); - } - } - panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide(); - - if ( doInsertAfter ) { - li.appendTo( this.tablist ); - } else { - li.insertBefore( this.tabs[ index ] ); - } - - options.disabled = $.map( options.disabled, function( n ) { - return n >= index ? ++n : n; - }); - - this.refresh(); - if ( this.tabs.length === 1 && options.active === false ) { - this.option( "active", 0 ); - } - - this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) ); - return this; - }, - - remove: function( index ) { - index = this._getIndex( index ); - var options = this.options, - tab = this.tabs.eq( index ).remove(), - panel = this._getPanelForTab( tab ).remove(); - - // If selected tab was removed focus tab to the right or - // in case the last tab was removed the tab to the left. - // We check for more than 2 tabs, because if there are only 2, - // then when we remove this tab, there will only be one tab left - // so we don't need to detect which tab to activate. - if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 2 ) { - this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) ); - } - - options.disabled = $.map( - $.grep( options.disabled, function( n ) { - return n !== index; - }), - function( n ) { - return n >= index ? --n : n; - }); - - this.refresh(); - - this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) ); - return this; - } - }); - - // panel ids (idPrefix option + title attribute) - $.widget( "ui.tabs", $.ui.tabs, { - options: { - idPrefix: "ui-tabs-" - }, - - _tabId: function( tab ) { - var a = tab.is( "li" ) ? tab.find( "a[href]" ) : tab; - a = a[0]; - return $( a ).closest( "li" ).attr( "aria-controls" ) || - a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF\-]/g, "" ) || - this.options.idPrefix + getNextTabId(); - } - }); - - // _createPanel method - $.widget( "ui.tabs", $.ui.tabs, { - options: { - panelTemplate: "<div></div>" - }, - - _createPanel: function( id ) { - return $( this.options.panelTemplate ) - .attr( "id", id ) - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) - .data( "ui-tabs-destroy", true ); - } - }); -} - })( jQuery ); |