diff options
| -rw-r--r-- | tests/unit/accordion/accordion_methods.js | 63 | ||||
| -rw-r--r-- | tests/unit/button/button_tickets.js | 11 | ||||
| -rw-r--r-- | tests/unit/testsuite.js | 17 | ||||
| -rw-r--r-- | ui/jquery.ui.accordion.js | 213 | ||||
| -rw-r--r-- | ui/jquery.ui.button.js | 7 | ||||
| -rw-r--r-- | ui/jquery.ui.progressbar.js | 14 |
6 files changed, 221 insertions, 104 deletions
diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index f8f556fa7..b1123b828 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -30,7 +30,7 @@ test( "enable/disable", function() { }); test( "refresh", function() { - expect( 6 ); + expect( 17 ); var element = $( "#navigation" ) .parent() .height( 300 ) @@ -43,6 +43,67 @@ test( "refresh", function() { element.parent().height( 500 ); element.accordion( "refresh" ); equalHeight( element, 455 ); + + element = $( "#list1" ); + element.accordion(); + state( element, 1, 0, 0 ); + + // disable panel via markup + element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" ); + element.accordion( "refresh" ); + state( element, 1, 0, 0 ); + + // don't add multiple icons + element.accordion( "refresh" ); + equal( element.find( ".ui-accordion-header-icon" ).length, 3 ); + + // add a panel + element + .append("<h3 class='bar' id='new_1'>new 1</h3>") + .append("<div class='foo' id='new_1_panel'>new 1</div>"); + element.accordion( "refresh" ); + state( element, 1, 0, 0, 0 ); + + // remove all tabs + element.find( "h3.bar, div.foo" ).remove(); + element.accordion( "refresh" ); + state( element ); + equal( element.accordion( "option", "active" ), false, "no active accordion panel" ); + + // add panels + element + .append("<h3 class='bar' id='new_2'>new 2</h3>") + .append("<div class='foo' id='new_2_panel'>new 2</div>") + .append("<h3 class='bar' id='new_3'>new 3</h3>") + .append("<div class='foo' id='new_3_panel'>new 3</div>") + .append("<h3 class='bar' id='new_4'>new 4</h3>") + .append("<div class='foo' id='new_4_panel'>new 4</div>") + .append("<h3 class='bar' id='new_5'>new 5</h3>") + .append("<div class='foo' id='new_5_panel'>new 5</div>"); + element.accordion( "refresh" ); + state( element, 1, 0, 0, 0 ); + + // activate third tab + element.accordion( "option", "active", 2 ); + state( element, 0, 0, 1, 0 ); + + // remove fourth panel, third panel should stay active + element.find( "h3.bar" ).eq( 3 ).remove(); + element.find( "div.foo" ).eq( 3 ).remove(); + element.accordion( "refresh" ); + state( element, 0, 0, 1 ); + + // remove third (active) panel, second panel should become active + element.find( "h3.bar" ).eq( 2 ).remove(); + element.find( "div.foo" ).eq( 2 ).remove(); + element.accordion( "refresh" ); + state( element, 0, 1 ); + + // remove first panel, previously active panel (now first) should stay active + element.find( "h3.bar" ).eq( 0 ).remove(); + element.find( "div.foo" ).eq( 0 ).remove(); + element.accordion( "refresh" ); + state( element, 1 ); }); test( "widget", function() { diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js index eb70181ec..1e901f9d1 100644 --- a/tests/unit/button/button_tickets.js +++ b/tests/unit/button/button_tickets.js @@ -5,6 +5,17 @@ module( "button: tickets" ); +test( "#5295 - button does not remove hoverstate if disabled" , function() { + expect( 1 ); + var btn = $("#button").button(); + btn.hover( function() { + btn.button( "disable" ); + }); + btn.trigger( "mouseenter" ); + btn.trigger( "mouseleave" ); + ok( !btn.is( ".ui-state-hover") ); +}); + test( "#5946 - buttonset should ignore buttons that are not :visible", function() { expect( 2 ); $( "#radio01" ).next().andSelf().hide(); diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index f3c0982fb..42fdf4f9e 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -271,11 +271,22 @@ window.domEqual = function( selector, modifier, message ) { } return result; } + + function done() { + actual = extract( $( selector ) ); + QUnit.push( QUnit.equiv(actual, expected), actual, expected, message ); + } + + // Get current state prior to modifier expected = extract( $( selector ) ); - modifier( $( selector ) ); - actual = extract( $( selector ) ); - QUnit.push( QUnit.equiv(actual, expected), actual, expected, message ); + // Run modifier (async or sync), then compare state via done() + if ( modifier.length ) { + modifier( done ); + } else { + modifier(); + done(); + } }; }( jQuery )); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 17ce155a8..4ebc5b549 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -43,95 +43,23 @@ $.widget( "ui.accordion", { }, _create: function() { - var accordionId = this.accordionId = "ui-accordion-" + - (this.element.attr( "id" ) || ++uid), - options = this.options; - + var options = this.options; this.prevShow = this.prevHide = $(); - this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); - - this.headers = this.element.find( options.header ) - .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); - this._hoverable( this.headers ); - this._focusable( this.headers ); - - this.headers.next() - .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ) - .hide(); + this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ) + // ARIA + .attr( "role", "tablist" ); // don't allow collapsible: false and active: false / null if ( !options.collapsible && (options.active === false || options.active == null) ) { options.active = 0; } + + this._processPanels(); // handle negative values if ( options.active < 0 ) { options.active += this.headers.length; } - this.active = this._findActive( options.active ) - .addClass( "ui-accordion-header-active ui-state-active" ) - .toggleClass( "ui-corner-all ui-corner-top" ); - this.active.next() - .addClass( "ui-accordion-content-active" ) - .show(); - - this._createIcons(); - this.refresh(); - - // ARIA - this.element.attr( "role", "tablist" ); - - this.headers - .attr( "role", "tab" ) - .each(function( i ) { - var header = $( this ), - headerId = header.attr( "id" ), - panel = header.next(), - panelId = panel.attr( "id" ); - if ( !headerId ) { - headerId = accordionId + "-header-" + i; - header.attr( "id", headerId ); - } - if ( !panelId ) { - panelId = accordionId + "-panel-" + i; - panel.attr( "id", panelId ); - } - header.attr( "aria-controls", panelId ); - panel.attr( "aria-labelledby", headerId ); - }) - .next() - .attr( "role", "tabpanel" ); - - this.headers - .not( this.active ) - .attr({ - "aria-selected": "false", - tabIndex: -1 - }) - .next() - .attr({ - "aria-expanded": "false", - "aria-hidden": "true" - }) - .hide(); - - // make sure at least one header is in the tab order - if ( !this.active.length ) { - this.headers.eq( 0 ).attr( "tabIndex", 0 ); - } else { - this.active.attr({ - "aria-selected": "true", - tabIndex: 0 - }) - .next() - .attr({ - "aria-expanded": "true", - "aria-hidden": "false" - }); - } - - this._on( this.headers, { keydown: "_keydown" }); - this._on( this.headers.next(), { keydown: "_panelKeyDown" }); - this._setupEvents( options.event ); + this._refresh(); }, _getCreateEventData: function() { @@ -283,9 +211,114 @@ $.widget( "ui.accordion", { }, refresh: function() { + var options = this.options; + this._processPanels(); + + // was collapsed or no panel + if ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) { + options.active = false; + this.active = $(); + // active false only when collapsible is true + } if ( options.active === false ) { + this._activate( 0 ); + // was active, but active panel is gone + } else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) { + // all remaining panel are disabled + if ( this.headers.length === this.headers.find(".ui-state-disabled").length ) { + options.active = false; + this.active = $(); + // activate previous panel + } else { + this._activate( Math.max( 0, options.active - 1 ) ); + } + // was active, active panel still exists + } else { + // make sure active index is correct + options.active = this.headers.index( this.active ); + } + + this._destroyIcons(); + + this._refresh(); + }, + + _processPanels: function() { + this.headers = this.element.find( this.options.header ) + .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); + + this.headers.next() + .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ) + .filter(":not(.ui-accordion-content-active)") + .hide(); + }, + + _refresh: function() { var maxHeight, - heightStyle = this.options.heightStyle, - parent = this.element.parent(); + options = this.options, + heightStyle = options.heightStyle, + parent = this.element.parent(), + accordionId = this.accordionId = "ui-accordion-" + + (this.element.attr( "id" ) || ++uid); + + this.active = this._findActive( options.active ) + .addClass( "ui-accordion-header-active ui-state-active" ) + .toggleClass( "ui-corner-all ui-corner-top" ); + this.active.next() + .addClass( "ui-accordion-content-active" ) + .show(); + + this.headers + .attr( "role", "tab" ) + .each(function( i ) { + var header = $( this ), + headerId = header.attr( "id" ), + panel = header.next(), + panelId = panel.attr( "id" ); + if ( !headerId ) { + headerId = accordionId + "-header-" + i; + header.attr( "id", headerId ); + } + if ( !panelId ) { + panelId = accordionId + "-panel-" + i; + panel.attr( "id", panelId ); + } + header.attr( "aria-controls", panelId ); + panel.attr( "aria-labelledby", headerId ); + }) + .next() + .attr( "role", "tabpanel" ); + + this.headers + .not( this.active ) + .attr({ + "aria-selected": "false", + tabIndex: -1 + }) + .next() + .attr({ + "aria-expanded": "false", + "aria-hidden": "true" + }) + .hide(); + + // make sure at least one header is in the tab order + if ( !this.active.length ) { + this.headers.eq( 0 ).attr( "tabIndex", 0 ); + } else { + this.active.attr({ + "aria-selected": "true", + tabIndex: 0 + }) + .next() + .attr({ + "aria-expanded": "true", + "aria-hidden": "false" + }); + } + + this._createIcons(); + + this._setupEvents( options.event ); if ( heightStyle === "fill" ) { maxHeight = parent.height(); @@ -342,14 +375,20 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { - var events = {}; - if ( !event ) { - return; + var events = { + keydown: "_keydown" + }; + if ( event ) { + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; + }); } - $.each( event.split(" "), function( index, eventName ) { - events[ eventName ] = "_eventHandler"; - }); + + this._off( this.headers.add( this.headers.next() ) ); this._on( this.headers, events ); + this._on( this.headers.next(), { keydown: "_panelKeyDown" }); + this._hoverable( this.headers ); + this._focusable( this.headers ); }, _eventHandler: function( event ) { diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index 6d7b94a38..db04b63b8 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -70,13 +70,15 @@ $.widget( "ui.button", { var that = this, options = this.options, toggleButton = this.type === "checkbox" || this.type === "radio", - hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ), + activeClass = !toggleButton ? "ui-state-active" : "", focusClass = "ui-state-focus"; if ( options.label === null ) { options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html()); } + this._hoverable( this.buttonElement ); + this.buttonElement .addClass( baseClasses ) .attr( "role", "button" ) @@ -84,7 +86,6 @@ $.widget( "ui.button", { if ( options.disabled ) { return; } - $( this ).addClass( "ui-state-hover" ); if ( this === lastActive ) { $( this ).addClass( "ui-state-active" ); } @@ -93,7 +94,7 @@ $.widget( "ui.button", { if ( options.disabled ) { return; } - $( this ).removeClass( hoverClass ); + $( this ).removeClass( activeClass ); }) .bind( "click" + this.eventNamespace, function( event ) { if ( options.disabled ) { diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js index 5a7fd87d3..6c3d7dadd 100644 --- a/ui/jquery.ui.progressbar.js +++ b/ui/jquery.ui.progressbar.js @@ -79,16 +79,10 @@ $.widget( "ui.progressbar", { }, _setOptions: function( options ) { - var key, val; - - for ( key in options ) { - if ( key === "value" ) { - // Store value to update last in case max is being updated at the same time - val = options[ key ]; - } else { - this._setOption( key, options[ key ] ); - } - } + var val = options.value; + + delete options.value; + this._super( options ); if ( val !== undefined ) { this._setOption( "value", val ); |