From 009850abbfb78e2334aaf9265abf5a7705a2abf0 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Fri, 21 Aug 2015 00:12:07 -0400 Subject: [PATCH] Accordion: Style updates Ref #14246 Ref gh-1588 --- tests/unit/accordion/common.js | 4 +- tests/unit/accordion/core.js | 22 ++-- tests/unit/accordion/events.js | 46 +++---- tests/unit/accordion/helper.js | 10 +- tests/unit/accordion/methods.js | 61 ++++----- tests/unit/accordion/options.js | 222 +++++++++++++++++--------------- ui/widgets/accordion.js | 26 ++-- 7 files changed, 200 insertions(+), 191 deletions(-) diff --git a/tests/unit/accordion/common.js b/tests/unit/accordion/common.js index 1a8ce55c4..453506dbd 100644 --- a/tests/unit/accordion/common.js +++ b/tests/unit/accordion/common.js @@ -22,11 +22,11 @@ common.testWidget( "accordion", { "header": "ui-icon-triangle-1-e" }, - // callbacks + // Callbacks activate: null, beforeActivate: null, create: null } -}); +} ); } ); diff --git a/tests/unit/accordion/core.js b/tests/unit/accordion/core.js index ed538c368..75f4b4ee3 100644 --- a/tests/unit/accordion/core.js +++ b/tests/unit/accordion/core.js @@ -32,33 +32,33 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ deepEqual( element.find( ".ui-accordion-header" ).next().get(), element.find( ".ui-accordion-content" ).get(), "content panels come immediately after headers" ); - }); -}); + } ); +} ); test( "handle click on header-descendant", function() { expect( 1 ); var element = $( "#navigation" ).accordion(); $( "#navigation h2:eq(1) a" ).trigger( "click" ); state( element, 0, 1, 0 ); -}); +} ); -test( "accessibility", function () { +test( "accessibility", function() { expect( 61 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 1, collapsible: true - }), + } ), headers = element.find( ".ui-accordion-header" ); equal( element.attr( "role" ), "tablist", "element role" ); - headers.each(function( i ) { + headers.each( function( i ) { var header = headers.eq( i ), panel = header.next(); equal( header.attr( "role" ), "tab", "header " + i + " role" ); equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" ); equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" ); equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" ); - }); + } ); equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" ); equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" ); @@ -115,7 +115,7 @@ test( "accessibility", function () { equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" ); equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" ); -}); +} ); asyncTest( "keyboard support", function( assert ) { expect( 13 ); @@ -180,7 +180,7 @@ asyncTest( "keyboard support", function( assert ) { } function step9() { - equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" ); + equal( element.accordion( "option", "active" ), 2, "ENTER activates panel" ); headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); setTimeout( step10 ); } @@ -202,6 +202,6 @@ asyncTest( "keyboard support", function( assert ) { assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "CTRL+UP moves focus to header" ); start(); } -}); +} ); } ); diff --git a/tests/unit/accordion/events.js b/tests/unit/accordion/events.js index 03aee3434..1634b402d 100644 --- a/tests/unit/accordion/events.js +++ b/tests/unit/accordion/events.js @@ -16,17 +16,17 @@ test( "create", function() { headers = element.children( "h3" ), contents = headers.next(); - element.accordion({ + element.accordion( { create: function( event, ui ) { equal( ui.header.length, 1, "header length" ); strictEqual( ui.header[ 0 ], headers[ 0 ], "header" ); equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], contents[ 0 ], "panel" ); } - }); + } ); element.accordion( "destroy" ); - element.accordion({ + element.accordion( { active: 2, create: function( event, ui ) { equal( ui.header.length, 1, "header length" ); @@ -34,26 +34,26 @@ test( "create", function() { equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], contents[ 2 ], "panel" ); } - }); + } ); element.accordion( "destroy" ); - element.accordion({ + element.accordion( { active: false, collapsible: true, create: function( event, ui ) { equal( ui.header.length, 0, "header length" ); equal( ui.panel.length, 0, "panel length" ); } - }); + } ); element.accordion( "destroy" ); -}); +} ); test( "beforeActivate", function() { expect( 38 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: false, collapsible: true - }), + } ), headers = element.find( ".ui-accordion-header" ), content = element.find( ".ui-accordion-content" ); @@ -66,7 +66,7 @@ test( "beforeActivate", function() { equal( ui.newPanel.length, 1 ); strictEqual( ui.newPanel[ 0 ], content[ 0 ] ); state( element, 0, 0, 0 ); - }); + } ); element.accordion( "option", "active", 0 ); state( element, 1, 0, 0 ); @@ -81,7 +81,7 @@ test( "beforeActivate", function() { equal( ui.newPanel.length, 1 ); strictEqual( ui.newPanel[ 0 ], content[ 1 ] ); state( element, 1, 0, 0 ); - }); + } ); headers.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); @@ -94,7 +94,7 @@ test( "beforeActivate", function() { equal( ui.newHeader.length, 0 ); equal( ui.newPanel.length, 0 ); state( element, 0, 1, 0 ); - }); + } ); element.accordion( "option", "active", false ); state( element, 0, 0, 0 ); @@ -108,17 +108,17 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], content[ 2 ] ); event.preventDefault(); state( element, 0, 0, 0 ); - }); + } ); element.accordion( "option", "active", 2 ); state( element, 0, 0, 0 ); -}); +} ); test( "activate", function() { expect( 21 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: false, collapsible: true - }), + } ), headers = element.find( ".ui-accordion-header" ), content = element.find( ".ui-accordion-content" ); @@ -129,7 +129,7 @@ test( "activate", function() { strictEqual( ui.newHeader[ 0 ], headers[ 0 ] ); equal( ui.newPanel.length, 1 ); strictEqual( ui.newPanel[ 0 ], content[ 0 ] ); - }); + } ); element.accordion( "option", "active", 0 ); element.one( "accordionactivate", function( event, ui ) { @@ -141,7 +141,7 @@ test( "activate", function() { strictEqual( ui.newHeader[ 0 ], headers[ 1 ] ); equal( ui.newPanel.length, 1 ); strictEqual( ui.newPanel[ 0 ], content[ 1 ] ); - }); + } ); headers.eq( 1 ).trigger( "click" ); element.one( "accordionactivate", function( event, ui ) { @@ -151,18 +151,18 @@ test( "activate", function() { strictEqual( ui.oldPanel[ 0 ], content[ 1 ] ); equal( ui.newHeader.length, 0 ); equal( ui.newPanel.length, 0 ); - }); + } ); element.accordion( "option", "active", false ); - // prevent activation + // Prevent activation element.one( "accordionbeforeactivate", function( event ) { ok( true ); event.preventDefault(); - }); + } ); element.one( "accordionactivate", function() { ok( false ); - }); + } ); element.accordion( "option", "active", 1 ); -}); +} ); } ); diff --git a/tests/unit/accordion/helper.js b/tests/unit/accordion/helper.js index ec9b7ecb8..b47510733 100644 --- a/tests/unit/accordion/helper.js +++ b/tests/unit/accordion/helper.js @@ -6,9 +6,9 @@ define( [ return $.extend( helper, { equalHeight: function( accordion, height ) { - accordion.find( ".ui-accordion-content" ).each(function() { + accordion.find( ".ui-accordion-content" ).each( function() { equal( $( this ).outerHeight(), height ); - }); + } ); }, setupTeardown: function() { @@ -25,10 +25,10 @@ return $.extend( helper, { state: function( accordion ) { var expected = $.makeArray( arguments ).slice( 1 ), - actual = accordion.find( ".ui-accordion-content" ).map(function() { + actual = accordion.find( ".ui-accordion-content" ).map( function() { return $( this ).css( "display" ) === "none" ? 0 : 1; - }).get(); - QUnit.push( QUnit.equiv(actual, expected), actual, expected ); + } ).get(); + QUnit.push( QUnit.equiv( actual, expected ), actual, expected ); } } ); diff --git a/tests/unit/accordion/methods.js b/tests/unit/accordion/methods.js index 455e80c58..3b1696e45 100644 --- a/tests/unit/accordion/methods.js +++ b/tests/unit/accordion/methods.js @@ -14,8 +14,8 @@ test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#list1", function() { $( "#list1" ).accordion().accordion( "destroy" ); - }); -}); + } ); +} ); test( "enable/disable", function( assert ) { expect( 7 ); @@ -28,16 +28,17 @@ test( "enable/disable", function( assert ) { equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" ); assert.hasClasses( element, "ui-accordion-disabled" ); - // event does nothing + // Event does nothing element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); state( element, 1, 0, 0 ); - // option still works + + // Option still works element.accordion( "option", "active", 1 ); state( element, 0, 1, 0 ); element.accordion( "enable" ); element.accordion( "option", "active", 2 ); state( element, 0, 0, 1 ); -}); +} ); test( "refresh", function() { expect( 19 ); @@ -45,9 +46,9 @@ test( "refresh", function() { .parent() .height( 300 ) .end() - .accordion({ + .accordion( { heightStyle: "fill" - }); + } ); equalHeight( element, 255 ); element.parent().height( 500 ); @@ -58,72 +59,72 @@ test( "refresh", function() { element.accordion(); state( element, 1, 0, 0 ); - // disable panel via markup + // 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 + // Don't add multiple icons element.accordion( "refresh" ); equal( element.find( ".ui-accordion-header-icon" ).length, 3 ); - // add a panel + // Add a panel element - .append("

new 1

") - .append("
new 1
"); + .append( "

new 1

" ) + .append( "
new 1
" ); element.accordion( "refresh" ); state( element, 1, 0, 0, 0 ); - // remove all tabs + // 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 + // Add panels element - .append("

new 2

") - .append("
new 2
") - .append("

new 3

") - .append("
new 3
") - .append("

new 4

") - .append("
new 4
") - .append("

new 5

") - .append("
new 5
"); + .append( "

new 2

" ) + .append( "
new 2
" ) + .append( "

new 3

" ) + .append( "
new 3
" ) + .append( "

new 4

" ) + .append( "
new 4
" ) + .append( "

new 5

" ) + .append( "
new 5
" ); element.accordion( "refresh" ); state( element, 1, 0, 0, 0 ); - // activate third tab + // Activate third tab element.accordion( "option", "active", 2 ); state( element, 0, 0, 1, 0 ); - // remove fourth panel, third panel should stay active + // 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 + // 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 + // 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 ); - // collapse all panels + // Collapse all panels element.accordion( "option", { collapsible: true, active: false - }); + } ); state( element, 0 ); element.accordion( "refresh" ); state( element, 0 ); -}); +} ); test( "widget", function() { expect( 2 ); @@ -131,6 +132,6 @@ test( "widget", function() { widgetElement = element.accordion( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); +} ); } ); diff --git a/tests/unit/accordion/options.js b/tests/unit/accordion/options.js index 06248d6cb..c9b2e3aaf 100644 --- a/tests/unit/accordion/options.js +++ b/tests/unit/accordion/options.js @@ -15,23 +15,23 @@ test( "{ active: default }", function() { var element = $( "#list1" ).accordion(); equal( element.accordion( "option", "active" ), 0 ); state( element, 1, 0, 0 ); -}); +} ); test( "{ active: null }", function() { expect( 2 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: null - }); + } ); equal( element.accordion( "option", "active" ), 0 ); state( element, 1, 0, 0 ); -}); +} ); test( "{ active: false }", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: false, collapsible: true - }); + } ); state( element, 0, 0, 0 ); equal( element.find( ".ui-accordion-header.ui-state-active" ).length, 0, "no headers selected" ); equal( element.accordion( "option", "active" ), false ); @@ -41,18 +41,18 @@ test( "{ active: false }", function() { equal( element.accordion( "option", "active" ), 0 ); element.accordion( "destroy" ); - element.accordion({ + element.accordion( { active: false - }); + } ); state( element, 1, 0, 0 ); strictEqual( element.accordion( "option", "active" ), 0 ); -}); +} ); test( "{ active: Number }", function() { expect( 8 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 2 - }); + } ); equal( element.accordion( "option", "active" ), 2 ); state( element, 0, 0, 1 ); @@ -67,13 +67,13 @@ test( "{ active: Number }", function() { element.accordion( "option", "active", 10 ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ active: -Number }", function() { expect( 8 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: -1 - }); + } ); equal( element.accordion( "option", "active" ), 2 ); state( element, 0, 0, 1 ); @@ -88,13 +88,13 @@ test( "{ active: -Number }", function() { element.accordion( "option", "active", -3 ); equal( element.accordion( "option", "active" ), 0 ); state( element, 1, 0, 0 ); -}); +} ); test( "{ animate: false }", function() { expect( 3 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { animate: false - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; $.fn.animate = function() { @@ -106,16 +106,17 @@ test( "{ animate: false }", function() { ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; -}); +} ); asyncTest( "{ animate: Number }", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { animate: 100 - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, 100, "correct duration" ); equal( options.easing, undefined, "default easing" ); @@ -124,22 +125,23 @@ asyncTest( "{ animate: Number }", function() { ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 1 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); asyncTest( "{ animate: String }", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { animate: "linear" - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, undefined, "default duration" ); equal( options.easing, "linear", "correct easing" ); @@ -148,22 +150,23 @@ asyncTest( "{ animate: String }", function() { ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 1 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); asyncTest( "{ animate: {} }", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { animate: {} - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, undefined, "default duration" ); equal( options.easing, undefined, "default easing" ); @@ -172,22 +175,23 @@ asyncTest( "{ animate: {} }", function() { ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 1 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); asyncTest( "{ animate: { duration, easing } }", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { animate: { duration: 100, easing: "linear" } - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, 100, "correct duration" ); equal( options.easing, "linear", "correct easing" ); @@ -196,23 +200,24 @@ asyncTest( "{ animate: { duration, easing } }", function() { ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 1 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); asyncTest( "{ animate: { duration, easing } }, animate down", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 1, animate: { duration: 100, easing: "linear" } - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, 100, "correct duration" ); equal( options.easing, "linear", "correct easing" ); @@ -221,17 +226,17 @@ asyncTest( "{ animate: { duration, easing } }, animate down", function() { ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 0 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); asyncTest( "{ animate: { duration, easing, down } }, animate down", function() { expect( 7 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 1, animate: { duration: 100, @@ -240,10 +245,11 @@ asyncTest( "{ animate: { duration, easing, down } }, animate down", function() { easing: "swing" } } - }), + } ), panels = element.find( ".ui-accordion-content" ), animate = $.fn.animate; - // called twice (both panels) + + // Called twice (both panels) $.fn.animate = function( props, options ) { equal( options.duration, 100, "correct duration" ); equal( options.easing, "swing", "correct easing" ); @@ -252,19 +258,19 @@ asyncTest( "{ animate: { duration, easing, down } }, animate down", function() { ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" ); element.accordion( "option", "active", 0 ); - panels.promise().done(function() { + panels.promise().done( function() { ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" ); $.fn.animate = animate; start(); - }); -}); + } ); +} ); test( "{ collapsible: false }", function() { expect( 4 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 1 - }); + } ); element.accordion( "option", "active", false ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -272,14 +278,14 @@ test( "{ collapsible: false }", function() { element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ collapsible: true }", function() { expect( 6 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { active: 1, collapsible: true - }); + } ); element.accordion( "option", "active", false ); equal( element.accordion( "option", "active" ), false ); @@ -292,37 +298,37 @@ test( "{ collapsible: true }", function() { element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" ); equal( element.accordion( "option", "active" ), false ); state( element, 0, 0, 0 ); -}); +} ); test( "{ event: null }", function() { expect( 5 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { event: null - }); + } ); state( element, 1, 0, 0 ); element.accordion( "option", "active", 1 ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - // ensure default click handler isn't bound + // Ensure default click handler isn't bound element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ event: custom }", function() { expect( 11 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { event: "custom1 custom2" - }); + } ); state( element, 1, 0, 0 ); element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - // ensure default click handler isn't bound + // Ensure default click handler isn't bound element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -333,7 +339,7 @@ test( "{ event: custom }", function() { element.accordion( "option", "event", "custom3" ); - // ensure old event handlers are unbound + // Ensure old event handlers are unbound element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" ); equal( element.accordion( "option", "active" ), 2 ); @@ -342,126 +348,128 @@ test( "{ event: custom }", function() { element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" ); equal( element.accordion( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ header: default }", function() { expect( 2 ); - // default: > li > :first-child,> :not(li):even + + // Default: > li > :first-child,> :not(li):even // > :not(li):even - state( $( "#list1" ).accordion(), 1, 0, 0); + state( $( "#list1" ).accordion(), 1, 0, 0 ); + // > li > :first-child - state( $( "#navigation" ).accordion(), 1, 0, 0); -}); + state( $( "#navigation" ).accordion(), 1, 0, 0 ); +} ); test( "{ header: custom }", function( assert ) { expect( 6 ); - var element = $( "#navigationWrapper" ).accordion({ + var element = $( "#navigationWrapper" ).accordion( { header: "h2" - }); - element.find( "h2" ).each(function() { + } ); + element.find( "h2" ).each( function() { assert.hasClasses( this, "ui-accordion-header" ); - }); + } ); equal( element.find( ".ui-accordion-header" ).length, 3 ); state( element, 1, 0, 0 ); element.accordion( "option", "active", 2 ); state( element, 0, 0, 1 ); -}); +} ); test( "{ heightStyle: 'auto' }", function() { expect( 3 ); - var element = $( "#navigation" ).accordion({ heightStyle: "auto" }); + var element = $( "#navigation" ).accordion( { heightStyle: "auto" } ); equalHeight( element, 105 ); -}); +} ); test( "{ heightStyle: 'content' }", function() { expect( 3 ); - var element = $( "#navigation" ).accordion({ heightStyle: "content" }), - sizes = element.find( ".ui-accordion-content" ).map(function() { + var element = $( "#navigation" ).accordion( { heightStyle: "content" } ), + sizes = element.find( ".ui-accordion-content" ).map( function() { return $( this ).height(); - }).get(); + } ).get(); equal( sizes[ 0 ], 75 ); equal( sizes[ 1 ], 105 ); equal( sizes[ 2 ], 45 ); -}); +} ); test( "{ heightStyle: 'fill' }", function() { expect( 3 ); $( "#navigationWrapper" ).height( 500 ); - var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + var element = $( "#navigation" ).accordion( { heightStyle: "fill" } ); equalHeight( element, 455 ); -}); +} ); test( "{ heightStyle: 'fill' } with sibling", function() { expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30 - }) + } ) .prependTo( "#navigationWrapper" ); - var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); - equalHeight( element , 355 ); -}); + var element = $( "#navigation" ).accordion( { heightStyle: "fill" } ); + equalHeight( element, 355 ); +} ); test( "{ heightStyle: 'fill' } with multiple siblings", function() { expect( 3 ); $( "#navigationWrapper" ).height( 500 ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30 - }) + } ) .prependTo( "#navigationWrapper" ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30, position: "absolute" - }) + } ) .prependTo( "#navigationWrapper" ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 25, marginTop: 10, marginBottom: 15 - }) + } ) .prependTo( "#navigationWrapper" ); - var element = $( "#navigation" ).accordion({ heightStyle: "fill" }); + var element = $( "#navigation" ).accordion( { heightStyle: "fill" } ); equalHeight( element, 305 ); -}); +} ); test( "{ icons: false }", function() { expect( 8 ); var element = $( "#list1" ); function icons( on ) { - deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 ); + deepEqual( element.find( "span.ui-icon" ).length, on ? 3 : 0 ); deepEqual( element.find( ".ui-accordion-header.ui-accordion-icons" ).length, on ? 3 : 0 ); } element.accordion(); icons( true ); - element.accordion( "destroy" ).accordion({ + element.accordion( "destroy" ).accordion( { icons: false - }); + } ); icons( false ); element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } ); icons( true ); element.accordion( "option", "icons", false ); icons( false ); -}); +} ); test( "{ icons: hash }", function( assert ) { expect( 3 ); - var element = $( "#list1" ).accordion({ + var element = $( "#list1" ).accordion( { icons: { activeHeader: "a1", header: "h1" } - }); + } ); assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1" ); element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } ); - assert.lacksClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1"); + assert.lacksClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1" ); assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a2" ); -}); +} ); } ); diff --git a/ui/widgets/accordion.js b/ui/widgets/accordion.js index 88e9bdb6f..8c16df38f 100644 --- a/ui/widgets/accordion.js +++ b/ui/widgets/accordion.js @@ -53,7 +53,7 @@ return $.widget( "ui.accordion", { header: "ui-icon-triangle-1-e" }, - // callbacks + // Callbacks activate: null, beforeActivate: null }, @@ -81,7 +81,7 @@ return $.widget( "ui.accordion", { this._addClass( "ui-accordion", "ui-widget ui-helper-reset" ); this.element.attr( "role", "tablist" ); - // don't allow collapsible: false and active: false / null + // Don't allow collapsible: false and active: false / null if ( !options.collapsible && ( options.active === false || options.active == null ) ) { options.active = 0; } @@ -124,17 +124,17 @@ return $.widget( "ui.accordion", { _destroy: function() { var contents; - // clean up main element + // Clean up main element this.element.removeAttr( "role" ); - // clean up headers + // Clean up headers this.headers .removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" ) .removeUniqueId(); this._destroyIcons(); - // clean up content panels + // Clean up content panels contents = this.headers.next() .css( "display", "" ) .removeAttr( "role aria-hidden aria-labelledby" ) @@ -161,7 +161,7 @@ return $.widget( "ui.accordion", { this._super( key, value ); - // setting collapsible: false while collapsed; open first panel + // Setting collapsible: false while collapsed; open first panel if ( key === "collapsible" && !value && this.options.active === false ) { this._activate( 0 ); } @@ -234,7 +234,7 @@ return $.widget( "ui.accordion", { var options = this.options; this._processPanels(); - // was collapsed or no panel + // Was collapsed or no panel if ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) { options.active = false; this.active = $(); @@ -318,7 +318,7 @@ return $.widget( "ui.accordion", { } ) .hide(); - // make sure at least one header is in the tab order + // Make sure at least one header is in the tab order if ( !this.active.length ) { this.headers.eq( 0 ).attr( "tabIndex", 0 ); } else { @@ -372,12 +372,12 @@ return $.widget( "ui.accordion", { _activate: function( index ) { var active = this._findActive( index )[ 0 ]; - // trying to activate the already active panel + // Trying to activate the already active panel if ( active === this.active[ 0 ] ) { return; } - // trying to collapse, simulate a click on the currently active header + // Trying to collapse, simulate a click on the currently active header active = active || this.active[ 0 ]; this._eventHandler( { @@ -436,12 +436,12 @@ return $.widget( "ui.accordion", { options.active = collapsing ? false : this.headers.index( clicked ); - // when the call to ._toggle() comes after the class changes + // When the call to ._toggle() comes after the class changes // it causes a very odd bug in IE 8 (see #6720) this.active = clickedIsActive ? $() : clicked; this._toggle( eventData ); - // switch classes + // Switch classes // corner classes on the previously active header stay after the animation this._removeClass( active, "ui-accordion-header-active", "ui-state-active" ); if ( options.icons ) { @@ -467,7 +467,7 @@ return $.widget( "ui.accordion", { var toShow = data.newPanel, toHide = this.prevShow.length ? this.prevShow : data.oldPanel; - // handle activating a panel during the animation for another activation + // Handle activating a panel during the animation for another activation this.prevShow.add( this.prevHide ).stop( true, true ); this.prevShow = toShow; this.prevHide = toHide; -- 2.39.5