Tabs: Pass appropriate data for activate event. Fixes #7137 - Tabs: Rename show event...

diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js
index d5e2b04c31e493a10063cf5b0b21432add8edd26..c578e5db784bede1db7208836f3759821e4c35ba 100644 (file)
--- a/tests/unit/tabs/tabs_events.js
+++ b/tests/unit/tabs/tabs_events.js
@@ -73,6 +73,72 @@ test( "beforeActivate", function() {
        tabs_state( element, 0, 0, 0 );
 });
 
+test( "activate", function() {
+       expect( 30 );
+
+       var element = $( "#tabs1" ).tabs({
+                       // TODO: should be false
+                       active: -1,
+                       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 ) );
+               equals( ui.oldTab.size(), 0 );
+               equals( ui.oldPanel.size(), 0 );
+               equals( ui.newTab.size(), 1 );
+               strictEqual( ui.newTab[ 0 ], tabs[ 0 ] );
+               equals( ui.newPanel.size(), 1 );
+               strictEqual( ui.newPanel[ 0 ], panels[ 0 ] );
+               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" );
+               equals( ui.oldTab.size(), 1 );
+               strictEqual( ui.oldTab[ 0 ], tabs[ 0 ] );
+               equals( ui.oldPanel.size(), 1 );
+               strictEqual( ui.oldPanel[ 0 ], panels[ 0 ] );
+               equals( ui.newTab.size(), 1 );
+               strictEqual( ui.newTab[ 0 ], tabs[ 1 ] );
+               equals( ui.newPanel.size(), 1 );
+               strictEqual( ui.newPanel[ 0 ], panels[ 1 ] );
+               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 ) );
+               equals( ui.oldTab.size(), 1 );
+               strictEqual( ui.oldTab[ 0 ], tabs[ 1 ] );
+               equals( ui.oldPanel.size(), 1 );
+               strictEqual( ui.oldPanel[ 0 ], panels[ 1 ] );
+               equals( ui.newTab.size(), 0 );
+               equals( ui.newPanel.size(), 0 );
+               tabs_state( element, 0, 0, 0 );
+       });
+       element.tabs( "option", "active", false );
+       tabs_state( element, 0, 0, 0 );
+
+       // prevent activation
+       element.one( "tabsbeforeactivate", function( event ) {
+               ok( true );
+               event.preventDefault();
+       });
+       element.one( "tabsactivate", function() {
+               ok( false );
+       });
+       element.tabs( "option", "active", 1 );
+});
+
 test('beforeload', function() {
        expect( 5 );
 
@@ -96,24 +162,4 @@ test('load', function() {
        ok(false, "missing test - untested code is broken code.");
 });
 
-test('activate', function() {
-       expect(5);
-
-       var uiObj, eventObj;
-       el = $('#tabs1').tabs({
-               activate: 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" );
-
-});
-
 })(jQuery);

diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
index 99c561607c347524675ce2ac32321702e494e241..7544d0302f25cea2424d9a2ecf6961331f0c2ad2 100755 (executable)
--- a/ui/jquery.ui.tabs.js
+++ b/ui/jquery.ui.tabs.js
@@ -98,6 +98,7 @@ $.widget( "ui.tabs", {
 
                        this.lis.eq( o.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
                        self.element.queue( "tabs", function() {
                                self._trigger( "activate", null, self._ui( self.active[ 0 ], panel[ 0 ] ) );
@@ -278,40 +279,49 @@ $.widget( "ui.tabs", {
                }
        },
 
-       _showTab: function( clicked, show, event ) {
-               var self = this;
+       _showTab: function( event, eventData ) {
+               var that = this;
 
-               $( clicked ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
+               $( eventData.newTab ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
 
-               if ( this.showFx ) {
-                       self.running = true;
-                       show.hide()
-                               .animate( showFx, showFx.duration || "normal", function() {
-                                       self._resetStyle( show, showFx );
-                                       self.running = false;
-                                       self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
+               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 {
-                       show.show();
-                       self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
+                       eventData.newPanel.show();
+                       that._trigger( "activate", event, eventData );
                }
        },
 
-       _hideTab: function( clicked, $hide ) {
-               var self = this;
-
-               if ( this.hideFx ) {
-                       self.running = true;
-                       $hide.animate( hideFx, hideFx.duration || "normal", function() {
-                               self.running = false;
-                               self.lis.removeClass( "ui-tabs-active ui-state-active" );
-                               self._resetStyle( $hide, hideFx );
-                               self.element.dequeue( "tabs" );
+       // 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 {
-                       self.lis.removeClass( "ui-tabs-active ui-state-active" );
-                       $hide.hide();
-                       self.element.dequeue( "tabs" );
+                       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 );
+                       }
                }
        },
 
@@ -375,14 +385,14 @@ $.widget( "ui.tabs", {
                                options.active = false;
 
                                that.element.queue( "tabs", function() {
-                                       that._hideTab( clicked, toHide );
+                                       that._hideTab( event, eventData );
                                }).dequeue( "tabs" );
 
                                clicked[ 0 ].blur();
                                return;
                        } else if ( !toHide.length ) {
                                that.element.queue( "tabs", function() {
-                                       that._showTab( clicked, toShow, event );
+                                       that._showTab( event, eventData );
                                });
 
                                // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
@@ -397,11 +407,11 @@ $.widget( "ui.tabs", {
                if ( toShow.length ) {
                        if ( toHide.length ) {
                                that.element.queue( "tabs", function() {
-                                       that._hideTab( clicked, toHide );
+                                       that._hideTab( event, eventData );
                                });
                        }
                        that.element.queue( "tabs", function() {
-                               that._showTab( clicked, toShow, event );
+                               that._showTab( event, eventData );
                        });
 
                        that.load( that.anchors.index( clicked ) );