From 9a00fd4c5ef637f29afc6debda4db136f1fcb3fb Mon Sep 17 00:00:00 2001 From: David Petersen Date: Sun, 27 Mar 2011 16:37:43 -0400 Subject: [PATCH] Tabs: Rename selected option to active. Fixes #7135 Tabs: Rename selected option to active --- tests/unit/tabs/tabs_deprecated.js | 49 +++++++++++++++++ tests/unit/tabs/tabs_events.js | 2 +- tests/unit/tabs/tabs_methods.js | 24 ++++----- tests/unit/tabs/tabs_options.js | 30 +++++------ tests/unit/tabs/tabs_tickets.js | 2 +- ui/jquery.ui.tabs.js | 84 +++++++++++++++++++++--------- 6 files changed, 136 insertions(+), 55 deletions(-) diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 7e4816793..8b6b50d7e 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -65,6 +65,55 @@ test('spinner', function() { }); }); +test('selected', function() { + expect(11); + + 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-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'); + + 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() { diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index b3f8653a2..04f282157 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -32,7 +32,7 @@ test('beforeload', function() { el = $('#tabs2'); el.tabs({ - selected: 2, + active: 2, beforeload: function( event, ui ) { ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object'); equals( ui.settings.url, "data/test.html", 'contain ajax settings url'); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index e00a95a3e..dbb5c2d15 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -16,7 +16,7 @@ test('init', function() { 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( el.tabs('option', 'active'), 0, 'active 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' ); }); @@ -30,7 +30,7 @@ test('init with hash', function() { //selection of tab with divs ordered differently than list el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + equals(el.tabs('option', 'active'), 1, 'second tab should be active'); 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'); @@ -48,7 +48,7 @@ test('init mismatched order with hash', function() { //selection of tab with divs ordered differently than list el = $('#tabs7').tabs(); - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + equals(el.tabs('option', 'active'), 1, 'second tab should be active'); 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'); @@ -136,27 +136,27 @@ test('select', function() { el = $('#tabs1').tabs(); el.tabs('select', 1); - equals(el.tabs('option', 'selected'), 1, 'should select tab'); + equals(el.tabs('option', 'active'), 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'); + 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', 'selected'), -1, 'should collapse tab passing in -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', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); + 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', 'selected'), 0, 'should not collapse tab if collapsible is not set to true'); + 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', 'selected'), 1, 'should select tab by id'); + equals(el.tabs('option', 'active'), 1, 'should select tab by id'); }); test('refresh', function() { @@ -165,7 +165,7 @@ test('refresh', function() { var el = $('
').tabs(), ul = el.find('ul'); - equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab'); + equals(el.tabs('option', 'active'), -1, 'Initially empty, no active tab'); ul.append('
  • Test 1
    • '); el.tabs('refresh'); @@ -179,12 +179,12 @@ test('refresh', function() { $('
    Test Panel 1
    ').insertAfter( ul ); el.tabs('refresh'); el.tabs('select', 0); - equals( el.tabs('option', 'selected'), 0, 'First tab added should be auto selected'); + equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active'); ul.append('
  • Test 2
    • '); $('
    Test Panel 2
    ').insertAfter( ul ); el.tabs('refresh'); - equals( el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected'); + equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active'); }); test('load', function() { diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index de6d7e74e..b1a7a5e78 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -34,8 +34,8 @@ test('cookie', function() { equals(cookie(), 0, 'initial cookie value'); el.tabs('destroy'); - el.tabs({ selected: 1, cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from selected property'); + el.tabs({ active: 1, cookie: cookieObj }); + equals(cookie(), 1, 'initial cookie value, from active property'); el.tabs('select', 2); equals(cookie(), 2, 'cookie value updated after select'); @@ -79,34 +79,34 @@ test('fx', function() { ok(false, "missing test - untested code is broken code."); }); -test('selected', function() { +test('active', function() { expect(8); el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); + equals(el.tabs('option', 'active'), 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' ); + el.tabs({ active: -1 }); + equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive'); + equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be active' ); 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({ active: null }); + equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive with value null (deprecated)'); el.tabs('destroy'); - el.tabs({ selected: 1 }); - equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); + el.tabs({ active: 1 }); + equals(el.tabs('option', 'active'), 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({ active: 99 }); + equals(el.tabs('option', 'active'), 0, 'active 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('option', 'active', 0); + equals(el.tabs('option', 'active'), 0, 'should not collapse tab if value is same as active'); }); })(jQuery); diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js index 9df72a6f7..486d3b6d2 100644 --- a/tests/unit/tabs/tabs_tickets.js +++ b/tests/unit/tabs/tabs_tickets.js @@ -43,7 +43,7 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load', expect(1); el = $('#tabs2').tabs({ - selected: 2, + active: 2, beforeload: function( event, ui ) { event.preventDefault(); ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier'); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 4a7ae3981..d76565a2a 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -52,29 +52,29 @@ $.widget( "ui.tabs", { // 1. from fragment identifier in url // 2. from cookie // 3. from selected class attribute on
  • - if ( o.selected === undefined ) { + if ( o.active === undefined ) { if ( location.hash ) { this.anchors.each(function( i, a ) { if ( a.hash == location.hash ) { - o.selected = i; + o.active = i; return false; } }); } - if ( typeof o.selected !== "number" && o.cookie ) { - o.selected = parseInt( self._cookie(), 10 ); + if ( typeof o.active !== "number" && o.cookie ) { + o.active = 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" ) ); + if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) { + o.active = 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; + o.active = o.active || ( this.lis.length ? 0 : -1 ); + } else if ( o.active === null ) { // usage of null is deprecated, TODO remove in next release + o.active = -1; } // sanity check - default to first tab... - o.selected = ( ( o.selected >= 0 && this.anchors[ o.selected ] ) || o.selected < 0 ) - ? o.selected + o.active = ( ( o.active >= 0 && this.anchors[ o.active ] ) || o.active < 0 ) + ? o.active : 0; // Take disabling tabs via class attribute from HTML @@ -95,20 +95,20 @@ $.widget( "ui.tabs", { 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 ) { - var tab = self.anchors[ o.selected ], + if ( o.active >= 0 && this.anchors.length ) { + var tab = self.anchors[ o.active ], panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) ); panel.removeClass( "ui-tabs-hide" ); - this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" ); + this.lis.eq( o.active ).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( tab, panel[ 0 ] ) ); }); - this.load( o.selected ); + this.load( o.active ); } // clean up to avoid memory leaks in certain versions of IE 6 @@ -119,8 +119,8 @@ $.widget( "ui.tabs", { }, _setOption: function( key, value ) { - if ( key == "selected" ) { - if (this.options.collapsible && value == this.options.selected ) { + if ( key == "active" ) { + if (this.options.collapsible && value == this.options.active ) { return; } this.select( value ); @@ -192,7 +192,7 @@ $.widget( "ui.tabs", { // set or update cookie after init and add/remove respectively if ( o.cookie ) { - this._cookie( o.selected, o.cookie ); + this._cookie( o.active, o.cookie ); } // disable tabs @@ -369,7 +369,7 @@ $.widget( "ui.tabs", { return; } - o.selected = self.anchors.index( el ); + o.active = self.anchors.index( el ); if ( self.xhr ) { self.xhr.abort(); @@ -378,10 +378,10 @@ $.widget( "ui.tabs", { // if tab may be closed if ( o.collapsible ) { if ( $li.hasClass( "ui-tabs-selected" ) ) { - o.selected = -1; + o.active = -1; if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); + self._cookie( o.active, o.cookie ); } self.element.queue( "tabs", function() { @@ -392,7 +392,7 @@ $.widget( "ui.tabs", { return; } else if ( !$hide.length ) { if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); + self._cookie( o.active, o.cookie ); } self.element.queue( "tabs", function() { @@ -408,7 +408,7 @@ $.widget( "ui.tabs", { } if ( o.cookie ) { - self._cookie( o.selected, o.cookie ); + self._cookie( o.active, o.cookie ); } // show new tab @@ -542,8 +542,8 @@ $.widget( "ui.tabs", { select: function( index ) { index = this._getIndex( index ); if ( index == -1 ) { - if ( this.options.collapsible && this.options.selected != -1 ) { - index = this.options.selected; + if ( this.options.collapsible && this.options.active != -1 ) { + index = this.options.active; } else { return this; } @@ -811,7 +811,7 @@ if ( $.uiBackCompat !== false ) { this.refresh(); if ( this.anchors.length == 1 ) { - o.selected = 0; + o.active = o.selected = 0; $li.addClass( "ui-tabs-selected ui-state-active" ); $panel.removeClass( "ui-tabs-hide" ); this.element.queue( "tabs", function() { @@ -894,6 +894,38 @@ if ( $.uiBackCompat !== false ) { .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 === undefined && options.selected !== undefined ) { + options.active = options.selected; + } + _create.call( this ); + options.selected = options.active; + }; + + prototype._setOption = function( key, value ) { + var options = this.options; + if ( key === "selected" ) { + key = "active"; + } + _setOption.apply( this, arguments ); + if ( key === "active" ) { + options.selected = options.active ; + } + }; + + prototype._eventHandler = function( event ) { + _eventHandler.apply( this, arguments ); + this.options.selected = this.options.active ; + }; + }( jQuery, jQuery.ui.tabs.prototype ) ); } })( jQuery );