UI Tabs: fixed removal of inline styles set for a tab panel

diff --git a/tests/tabs.html b/tests/tabs.html
index a659050fc7c6f43a05d45e3582bf464c142f6a4f..ad9b6847df5f20cb074e4bbea83c2e1d8fb485ec 100644 (file)
--- a/tests/tabs.html
+++ b/tests/tabs.html
@@ -36,35 +36,21 @@
                
                <div id="tabs1">
                        <ul>
-                               <li><a href="#fragment-1"><span>One</span></a></li>
-                               <li><a href="#fragment-2"><span>Two</span></a></li>
-                               <li><a href="#fragment-3"><span>Three</span></a></li>
+                               <li><a href="#fragment-1">1</a></li>
+                               <li><a href="#fragment-2">2</a></li>
+                               <li><a href="#fragment-3">3</a></li>
                        </ul>
-                       <div id="fragment-1">
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                       </div>
-                       <div id="fragment-2">
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                       </div>
-                       <div id="fragment-3">
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                       </div>
+                       <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>One</span></a></li>
-                               <li><a href="#inline-style"><span>Two</span></a></li>
+                               <li><a href="#colon:test">1</a></li>
+                               <li><a href="#inline-style">2</a></li>
                        </ul>
-                       <div id="colon:test">
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                       </div>
-                       <div style="height: 300px;" id="inline-style">
-                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-                       </div>
+                       <div id="colon:test"></div>
+                       <div style="height: 300px;" id="inline-style"></div>
                </div>
                
        </div>

diff --git a/tests/tabs.js b/tests/tabs.js
index 0be0be4f143d2bf57d530c7fc66edacafb4924d6..c08adcc42fc22ece0ce944674789ed0e74a75901 100644 (file)
--- a/tests/tabs.js
+++ b/tests/tabs.js
@@ -3,187 +3,216 @@
  */
 (function($) {
 
+function defer(defered, ms) {
+       // wait a bit for the pseudo animation...
+       stop();
+       setTimeout(function() {
+               defered();
+               start();
+       }, ms || 100);  
+}
 
 module('tabs');
 
-test('init', function() {
-       expect(4);
-
-       var el = $('#tabs1 > ul').tabs();
-       ok(true, '.tabs() called on element');
-       
-       el.tabs('destroy').tabs({ selected: 1 });
-       equals( el.data('selected.tabs'), 1, 'selected.tabs set' );
-       equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second tab active');
-       equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ), 0, 'first panel should be hidden' );
-       
-});
-
-test('destroy', function() {
-       expect(0);
-       
-});
-
-test("defaults", function() {
-       
-       var expected = {
-               unselect: false,
-               event: 'click',
-               disabled: [],
-               cookie: null,
-               spinner: 'Loading…',
-               cache: false,
-               idPrefix: 'ui-tabs-',
-               ajaxOptions: null,
-               fx: null,
-               tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
-               panelTemplate: '<div></div>',
-               navClass: 'ui-tabs-nav',
-               selectedClass: 'ui-tabs-selected',
-               unselectClass: 'ui-tabs-unselect',
-               disabledClass: 'ui-tabs-disabled',
-               panelClass: 'ui-tabs-panel',
-               hideClass: 'ui-tabs-hide',
-               loadingClass: 'ui-tabs-loading'
-       };
-
-       var el = $("#tabs1").tabs();
-
-       for (var optionName in expected) {
-               var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
-
-               if (optionName == 'disabled')
-                       ok(expects.constructor == Array && !expects.length, optionName);
-               else
-                       equals(actual, expects, optionName);
+       test('init', function() {
+               expect(4);
+
+               var el = $('#tabs1 > ul').tabs();
+               ok(true, '.tabs() called on element');
+       
+               el.tabs('destroy').tabs({ selected: 1 });
+               equals( el.data('selected.tabs'), 1, 'selected.tabs set' );
+               equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second tab active');
+               equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ), 0, 'first panel should be hidden' );
+       
+       });
+
+       test('destroy', function() {
+               expect(0);
+       
+       });
+
+       test("defaults", function() {
+       
+               var expected = {
+                       unselect: false,
+                       event: 'click',
+                       disabled: [],
+                       cookie: null,
+                       spinner: 'Loading&#8230;',
+                       cache: false,
+                       idPrefix: 'ui-tabs-',
+                       ajaxOptions: null,
+                       fx: null,
+                       tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
+                       panelTemplate: '<div></div>',
+                       navClass: 'ui-tabs-nav',
+                       selectedClass: 'ui-tabs-selected',
+                       unselectClass: 'ui-tabs-unselect',
+                       disabledClass: 'ui-tabs-disabled',
+                       panelClass: 'ui-tabs-panel',
+                       hideClass: 'ui-tabs-hide',
+                       loadingClass: 'ui-tabs-loading'
+               };
+
+               var el = $("#tabs1").tabs();
+
+               for (var optionName in expected) {
+                       var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
+
+                       if (optionName == 'disabled')
+                               compare(actual, expects, optionName);
+                       else
+                               equals(actual, expects, optionName);
                        
-       }
+               }
        
-});
+       });
 
-test('add', function() {
-       expect(0);
+       test('add', function() {
+               expect(0);
        
-});
+       });
 
-test('remove', function() {
-       expect(0);
+       test('remove', function() {
+               expect(0);
        
-});
+       });
 
-test('enable', function() {
-       expect(0);
+       test('enable', function() {
+               expect(0);
        
-});
+       });
 
-test('disable', function() {
-       expect(0);
+       test('disable', function() {
+               expect(0);
        
-});
+       });
 
-test('select', function() {
-       expect(0);
+       test('select', function() {
+               expect(0);
        
-});
+       });
 
-test('load', function() {
-       expect(0);
+       test('load', function() {
+               expect(0);
        
-});
+       });
 
-test('url', function() {
-       expect(0);
+       test('url', function() {
+               expect(0);
        
-});
-
+       });
 
-module('options');
 
-test('select: null', function() {
-       expect(3);
-       
-       var el = $('#tabs1 > ul');
-       
-       el.tabs({ selected: null });
-       equals( el.data('selected.tabs'), null, 'option set' );
-       equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
-       equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
-       
-       // TODO select == null with cookie
-       // TODO select == null with select method
-       
-});
+module('tabs: Options');
 
-test('unselect: true', function() {
-       expect(7);
-       
-       var el = $('#tabs1 > ul');
+       test('select: null', function() {
+               expect(3);
        
-       el.tabs({ unselect: true });
-       equals( el.data('unselect.tabs'), true, 'option set' );
-       equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
-       equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
+               var el = $('#tabs1 > ul');
        
-       el.tabs('select', 1);
-       equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
-       equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
-       
-       el.tabs('select', 1);
-       equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
-       // wait a bit for the fake animation...
-       stop();
-       setTimeout(function() {
+               el.tabs({ selected: null });
+               equals( el.data('selected.tabs'), null, 'option set' );
+               equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
                equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
-               start();
-       }, 100);
-
-});
-
-test('cookie', function() {
-       expect(5);
-       
-       var el = $('#tabs1 > ul');
-       var cookieName = 'ui-tabs-' + $.data(el[0]);
-       $.cookie(cookieName, null); // blank state
-       var cookie = function() {
-               return parseInt($.cookie(cookieName), 10);
-       };
-       
-       el.tabs({ cookie: {} });
-       equals(cookie(), 0, 'initial cookie value, no cookie given');
-       
-       el.tabs('destroy');
-       el.tabs({ selected: 1, cookie: {} });
-       equals(cookie(), 1, 'initial cookie value, given selected');
-
-       el.tabs('select', 2);
-       equals(cookie(), 2, 'cookie value after tabs select');
-       
-       el.tabs('destroy');
-       $.cookie(cookieName, 1);
-       el.tabs({ cookie: {} });
-       equals(cookie(), 1, 'initial cookie value, from existing cookie');
-       
-       el.tabs('destroy');
-       ok($.cookie(cookieName) === null, 'erase cookie after destroy');
-       
-});
-
-
-module('tickets');
-
-test('id containing colon #???', function() {
-       expect(4);
-
-       var el = $('#tabs2 > ul').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' );
        
-});
+               // TODO select == null with cookie
+               // TODO select == null with select method
+       
+       });
+
+       test('unselect: true', function() {
+               expect(7);
+       
+               var el = $('#tabs1 > ul');
+       
+               el.tabs({ unselect: true });
+               equals( el.data('unselect.tabs'), true, 'option set' );
+               equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
+               equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
+       
+               el.tabs('select', 1);
+               equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
+               equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
+       
+               el.tabs('select', 1);
+               equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
+               defer(function() {
+                       equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
+               });
+
+       });
+
+       test('cookie', function() {
+               expect(5);
+       
+               var el = $('#tabs1 > ul');
+               var cookieName = 'ui-tabs-' + $.data(el[0]);
+               $.cookie(cookieName, null); // blank state
+               var cookie = function() {
+                       return parseInt($.cookie(cookieName), 10);
+               };
+       
+               el.tabs({ cookie: {} });
+               equals(cookie(), 0, 'initial cookie value, no cookie given');
+       
+               el.tabs('destroy');
+               el.tabs({ selected: 1, cookie: {} });
+               equals(cookie(), 1, 'initial cookie value, given selected');
+
+               el.tabs('select', 2);
+               equals(cookie(), 2, 'cookie value after tabs select');
+       
+               el.tabs('destroy');
+               $.cookie(cookieName, 1);
+               el.tabs({ cookie: {} });
+               equals(cookie(), 1, 'initial cookie value, from existing cookie');
+       
+               el.tabs('destroy');
+               ok($.cookie(cookieName) === null, 'erase cookie after destroy');
+       
+       });
+
+
+module('tabs: Tickets');
+
+       test('id containing colon, #????', function() {
+               expect(4);
+
+               var el = $('#tabs2 > ul').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);
+               defer(function() {
+                       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(2);
+               
+               var inlineStyle = function(property) {
+                       return document.getElementById('inline-style').style[property];
+               };
+               var expected = inlineStyle('height');
+               
+               var el = $('#tabs2 > ul').tabs();
+               equals(inlineStyle('height'), expected, 'should not remove inline style after init');
+               
+               el.tabs('select', 1);
+               defer(function() {
+                       equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
+                       el.tabs('select', 0);
+                       defer(function() {
+                               equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
+                       });
+               });
+               
+       });
 
 // test('', function() {
 //     expect(0);

diff --git a/ui/ui.tabs.js b/ui/ui.tabs.js
index fedd16908d447387fca7638aee04318016186c3c..1052b51d54cd38a83509379382f4c17b06fcc257 100644 (file)
--- a/ui/ui.tabs.js
+++ b/ui/ui.tabs.js
@@ -181,34 +181,32 @@ $.widget("ui.tabs", {
                else
                        hideFx = showFx = o.fx || baseFx;
                
-               // reset some styles to maintain print style sheets etc.
-               var resetCSS = { display: '', overflow: '', height: '' };
-               if (!$.browser.msie) // not in IE to prevent ClearType font issue
-                       resetCSS.opacity = '';
+               // Reset certain styles left over from animation to
+               // maintain print style sheets and prevent IE's
+               // ClearType bug...
+               function resetStyle($el, fx) {
+                       $el.css({ display: '' });
+                       if ($.browser.msie && fx.opacity)
+                               $el[0].style.filter = '';
+               }
                
                // Hide a tab, animation prevents browser scrolling to fragment,
                // $show is optional.
                function hideTab(clicked, $hide, $show) {
                        $hide.animate(hideFx, hideFx.duration || baseDuration, function() { //
-                               $hide.addClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
-                               if ($.browser.msie && hideFx.opacity)
-                                       $hide[0].style.filter = '';
-                               if ($show)
-                                       showTab(clicked, $show, $hide);
+                               $hide.addClass(o.hideClass);
+                               resetStyle($hide, hideFx);
+                               if ($show) showTab(clicked, $show, $hide);
                        });
                }
                
                // Show a tab, animation prevents browser scrolling to fragment,
                // $hide is optional.
                function showTab(clicked, $show, $hide) {
-                       if (showFx === baseFx)
-                               $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab panels
+                       if (showFx === baseFx) $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox caused by gap between showing and hiding the tab panels
                        $show.animate(showFx, showFx.duration || baseDuration, function() {
-                               $show.removeClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
-                               if ($.browser.msie && showFx.opacity)
-                                       $show[0].style.filter = '';
-                               
-                               // callback
+                               $show.removeClass(o.hideClass);
+                               resetStyle($show, showFx);
                                self._trigger('show', null, self.ui(clicked, $show[0]));
                        });
                }