Skip to content

Commit

Permalink
Tabs: Deprecate add and remove methods Fixes #7141 Tabs: Deprecate ad…
Browse files Browse the repository at this point in the history 
…d and remove methods
  • Loading branch information
@petersendidit
petersendidit committed Mar 27, 2011
1 parent e5f081b commit e378876
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 150 deletions.
2 changes: 0 additions & 2 deletions tests/unit/tabs/tabs_defaults.js
View file
Expand Up @@ -3,7 +3,6 @@
*/

var tabs_defaults = {
add: null,
beforeload: null,
collapsible: false,
cookie: null,
Expand All @@ -13,7 +12,6 @@ var tabs_defaults = {
idPrefix: "ui-tabs-",
load: null,
panelTemplate: "<div></div>",
remove: null,
select: null,
show: null,
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
Expand Down
74 changes: 70 additions & 4 deletions tests/unit/tabs/tabs_deprecated.js
View file
@@ -1,6 +1,6 @@
(function( $ ) {

module("tabs (deprecated): cache and ajaxoptions");
module("tabs (deprecated): options");

test('ajaxOptions', function() {
ok(false, "missing test - untested code is broken code.");
Expand All @@ -10,8 +10,6 @@ test('cache', function() {
ok(false, "missing test - untested code is broken code.");
});

module("tabs (deprecated): spinner");

test('spinner', function() {
expect(4);
stop();
Expand Down Expand Up @@ -41,7 +39,7 @@ test('spinner', function() {
});
});

module("tabs (deprecated): enable/disable events");
module("tabs (deprecated): events");

test('enable', function() {
expect(4);
Expand Down Expand Up @@ -76,4 +74,72 @@ test('disable', function() {
equals(uiObj.index, 1, 'contain index');
});

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('remove', function() {
ok(false, "missing test - untested code is broken code.");
});

module("tabs (deprecated): methods");

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');

equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');

ok(false, "missing test - untested code is broken code.");
});

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('#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');

});

}( jQuery ) );
19 changes: 0 additions & 19 deletions tests/unit/tabs/tabs_events.js
View file
Expand Up @@ -69,23 +69,4 @@ test('show', function() {

});

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('remove', function() {
ok(false, "missing test - untested code is broken code.");
});

})(jQuery);
36 changes: 0 additions & 36 deletions tests/unit/tabs/tabs_methods.js
View file
Expand Up @@ -130,42 +130,6 @@ test('disable', function() {
same(el.tabs('option', 'disabled'), true, 'set to true');
});

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');

equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');

ok(false, "missing test - untested code is broken code.");
});

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('select', function() {
expect(6);

Expand Down
11 changes: 0 additions & 11 deletions tests/unit/tabs/tabs_tickets.js
View file
Expand Up @@ -59,17 +59,6 @@ test('#4033 - IE expands hash to full url and misinterprets tab as ajax', functi

});

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);
Expand Down
163 changes: 85 additions & 78 deletions ui/jquery.ui.tabs.js
View file
Expand Up @@ -26,7 +26,6 @@ function getNextListId() {

$.widget( "ui.tabs", {
options: {
add: null,
beforeload: null,
cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
collapsible: false,
Expand All @@ -36,7 +35,6 @@ $.widget( "ui.tabs", {
idPrefix: "ui-tabs-",
load: null,
panelTemplate: "<div></div>",
remove: null,
select: null,
show: null,
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
Expand Down Expand Up @@ -445,82 +443,6 @@ $.widget( "ui.tabs", {
return this;
},

add: function( url, label, index ) {
if ( index === undefined ) {
index = this.anchors.length;
}

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 );

// 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 );
}
$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 ] );
}

o.disabled = $.map( o.disabled, function( n, i ) {
return n >= index ? ++n : n;
});

this._tabify();

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 ] ) );
});

this.load( 0 );
}

this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
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;
});

this._tabify();

this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
return this;
},

enable: function( index ) {
if ( index === undefined ) {
for ( var i = 0, len = this.lis.length; i < len; i++ ) {
Expand Down Expand Up @@ -805,6 +727,91 @@ if ( $.uiBackCompat !== false ) {
}
};
}( jQuery, jQuery.ui.tabs.prototype ) );

// add/remove methods and events
(function( $, prototype ) {
$.extend( prototype.options, {
add: null,
remove: null
});

prototype.add = function( url, label, index ) {
if ( index === undefined ) {
index = this.anchors.length;
}

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 );

// 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 );
}
$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 ] );
}

o.disabled = $.map( o.disabled, function( n, i ) {
return n >= index ? ++n : n;
});

this._tabify();

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 ] ) );
});

this.load( 0 );
}

this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
return this;
};

prototype.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;
});

this._tabify();

this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
return this;
};
}( jQuery, jQuery.ui.tabs.prototype ) );

}

})( jQuery );

0 comments on commit e378876

Please sign in to comment.