diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 437e52ab1d2..f8898094dc8 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -58,7 +58,9 @@ source: $.proxy( this, "_source" ) }) .tooltip({ - tooltipClass: "ui-state-highlight" + classes: { + "ui-tooltip": "ui-state-highlight" + } }); this._on( this.input, { diff --git a/tests/unit/accordion/accordion_common.js b/tests/unit/accordion/accordion_common.js index ef24cf25ec5..dc2d5395f06 100644 --- a/tests/unit/accordion/accordion_common.js +++ b/tests/unit/accordion/accordion_common.js @@ -2,6 +2,16 @@ TestHelpers.commonWidgetTests( "accordion", { defaults: { active: 0, animate: {}, + classes: { + "ui-accordion": "", + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": "", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": "", + "ui-accordion-header-icon": "", + "ui-accordion-icons": "" + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 8e0175aeb93..0674275b0a1 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() ); $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { test( "markup structure: " + type, function() { - expect( 4 ); - var element = $( selector ).accordion(); - ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( element.find( ".ui-accordion-header" ).length, 3, + expect( 8 ); + var element = $( selector ).accordion(), + headers = element.find( ".ui-accordion-header" ), + panels = element.find( ".ui-accordion-content" ); + + ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" ); + ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" ); + ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" ); + ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" ); + ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ), + "panel has proper classes" ); + + equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" ); - equal( element.find( ".ui-accordion-content" ).length, 3, + equal( panels.length, 3, ".ui-accordion-content elements exist, correct number" ); - deepEqual( element.find( ".ui-accordion-header" ).next().get(), - element.find( ".ui-accordion-content" ).get(), + deepEqual( headers.next().get(), panels.get(), "content panels come immediately after headers" ); }); }); diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index 1e809b310c2..643a20123cc 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -7,10 +7,16 @@ var equalHeight = TestHelpers.accordion.equalHeight, module( "accordion: methods", setupTeardown() ); test( "destroy", function() { - expect( 1 ); + expect( 2 ); domEqual( "#list1", function() { $( "#list1" ).accordion().accordion( "destroy" ); }); + // Animate + domEqual( "#list1", function() { + $( "#list1" ).accordion() + .accordion( "option", "active", 1 ) + .accordion( "destroy" ); + }); }); test( "enable/disable", function() { diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index 63b24d384b9..4e3fbb7c7d1 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", { defaults: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, disabled: false, messages: { diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index fa3f9abb072..ffdc737acee 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -2,6 +2,15 @@ module( "autocomplete: core" ); +test( "markup structure", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete(), + menu = element.autocomplete( "widget" ); + + ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" ); + ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" ); +}); + test( "prevent form submit on enter when menu is active", function() { expect( 2 ); var event, diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index 6f39f7b8afd..adf8d5440e6 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -5,6 +5,9 @@ jQuery UI Dialog Test Suite + diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index fc10fabaab6..6935c8d7545 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/dialog_common.js @@ -3,10 +3,22 @@ TestHelpers.commonWidgetTests( "dialog", { appendTo: "body", autoOpen: true, buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-content": "", + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": "", + "ui-dialog-title": "", + "ui-dialog-buttons": "", + "ui-dialog-buttonpane": "", + "ui-dialog-buttonset": "", + "ui-dialog-dragging": "", + "ui-dialog-resizing": "", + "ui-widget-overlay": "" + }, closeOnEscape: true, closeText: "Close", disabled: false, - dialogClass: "", draggable: true, height: "auto", hide: null, diff --git a/tests/unit/dialog/dialog_common_deprecated.js b/tests/unit/dialog/dialog_common_deprecated.js new file mode 100644 index 00000000000..8a21043ca4b --- /dev/null +++ b/tests/unit/dialog/dialog_common_deprecated.js @@ -0,0 +1,56 @@ +TestHelpers.commonWidgetTests( "dialog", { + defaults: { + appendTo: "body", + autoOpen: true, + buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-content": "", + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": "", + "ui-dialog-title": "", + "ui-dialog-buttons": "", + "ui-dialog-buttonpane": "", + "ui-dialog-buttonset": "", + "ui-dialog-dragging": "", + "ui-dialog-resizing": "", + "ui-widget-overlay": "" + }, + closeOnEscape: true, + closeText: "close", + dialogClass: "", + disabled: false, + draggable: true, + height: "auto", + hide: null, + maxHeight: null, + maxWidth: null, + minHeight: 150, + minWidth: 150, + modal: false, + position: { + my: "center", + at: "center", + of: window, + collision: "fit", + using: $.ui.dialog.prototype.options.position.using + }, + resizable: true, + show: null, + title: null, + width: 300, + + // callbacks + beforeClose: null, + close: null, + create: null, + drag: null, + dragStart: null, + dragStop: null, + focus: null, + open: null, + resize: null, + resizeStart: null, + resizeStop: null + } +}); diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index d72fef7b5bf..9b101dbb1cb 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -7,6 +7,37 @@ // TODO add teardown callback to remove dialogs module("dialog: core"); +test( "markup structure", function() { + expect( 7 ); + var element = $("
").dialog({ + buttons: [{ + text: "Ok", + click: $.noop + }] + }), + widget = element.dialog( "widget" ), + titlebar = widget.find( ".ui-dialog-titlebar" ), + close = titlebar.find( "button" ), + buttonpane = widget.find( ".ui-dialog-buttonpane" ); + + ok( widget.is( ".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-dialog-buttons" ), + "Widget has proper classes" ); + + ok( titlebar.is( ".ui-dialog-titlebar.ui-corner-all.ui-widget-header"), + "Titlebar has proper classes"); + + ok( titlebar.find( ".ui-dialog-title" ).length, "Title is .ui-dialog-title" ); + + ok( close.hasClass( "ui-dialog-titlebar-close" ), "Close button is .ui-dialog-titlebar-close" ); + + ok( element.is( ".ui-dialog-content.ui-widget-content" ), "Element is .ui-widget-content" ); + + ok( buttonpane.is( ".ui-dialog-buttonpane.ui-widget-content" ), + "Buttonpane is .ui-widget-content" ); + ok( buttonpane.find( ".ui-dialog-buttonset" ).length, "buttonset is .ui-dialog-buttonset" ); + +}); + test("title id", function() { expect(1); diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html new file mode 100644 index 00000000000..8cf1f5cf614 --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.html @@ -0,0 +1,65 @@ + + + + + jQuery UI Dialog Test Suite + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +
...
+
+ Please share some personal information + + +
+
+

Some more (optional) information

+ +
+
+
+
+
+ + diff --git a/tests/unit/dialog/dialog_deprecated.js b/tests/unit/dialog/dialog_deprecated.js new file mode 100644 index 00000000000..5e0093e05dc --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.js @@ -0,0 +1,31 @@ +/* + * dialog_deprecated.js + */ +(function( $ ) { + +module( "dialog (deprecated): options" ); + +test( "dialogClass", function() { + expect( 6 ); + + var element = $( "
" ).dialog(), + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" ); + element.remove(); + + element = $( "
" ).dialog({ dialogClass: "foo" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init. foo class added"); + element.dialog( "option", "dialogClass", "foobar" ); + equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" ); + equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" ); + element.remove(); + + element = $( "
" ).dialog({ dialogClass: "foo bar" }); + widget = element.dialog( "widget" ); + equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" ); + equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" ); + element.remove(); +}); + +})( jQuery ); diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index c449ad0d413..1cdeebd0411 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -34,7 +34,7 @@ test("init", function() { }); test("destroy", function() { - expect( 17 ); + expect( 18 ); var element, element2; @@ -49,6 +49,14 @@ test("destroy", function() { equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.index(), 2 ); }); + domEqual( "#dialog2", function() { + $( "#dialog2" ).dialog({ + buttons: [{ + text: "Ok", + click: $.noop + }] + }).dialog( "destroy" ); + }, "Buttons"); // Ensure dimensions are restored (#8119) $( "#dialog1" ).show().css({ diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index 3e5444c67e2..77ca09703a7 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -224,26 +224,6 @@ test("closeText", function() { element.remove(); }); -test("dialogClass", function() { - expect( 6 ); - - var element = $("
").dialog(); - equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added"); - element.remove(); - - element = $("
").dialog({ dialogClass: "foo" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added"); - element.dialog( "option", "dialogClass", "foobar" ); - equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" ); - equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" ); - element.remove(); - - element = $("
").dialog({ dialogClass: "foo bar" }); - equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added"); - equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added"); - element.remove(); -}); - test("draggable", function() { expect(4); diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index ae0ab988785..2c11f239121 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -1,5 +1,13 @@ TestHelpers.commonWidgetTests( "menu", { defaults: { + classes: { + "ui-menu": "", + "ui-menu-icons": "", + "ui-menu-icon": "", + "ui-menu-item": "", + "ui-menu-item-wrapper": "", + "ui-menu-divider": "" + }, disabled: false, icons: { submenu: "ui-icon-caret-1-e" diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index f02f97fca50..68971549858 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -5,7 +5,7 @@ module( "menu: core" ); test( "markup structure", function() { expect( 6 ); var element = $( "#menu1" ).menu(); - ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" ); + ok( element.hasClass( "ui-menu" ), "main element has proper classes" ); element.children().each(function( index ) { ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" ); }); diff --git a/tests/unit/progressbar/progressbar_common.js b/tests/unit/progressbar/progressbar_common.js index 0768576f568..8bc1ab710cc 100644 --- a/tests/unit/progressbar/progressbar_common.js +++ b/tests/unit/progressbar/progressbar_common.js @@ -1,5 +1,12 @@ TestHelpers.commonWidgetTests( "progressbar", { defaults: { + classes: { + "ui-progressbar": "ui-corner-all", + "ui-progressbar-value": "ui-corner-left", + "ui-progressbar-overlay": "", + "ui-progressbar-indeterminate": "", + "ui-progressbar-complete": "ui-corner-right" + }, disabled: false, max: 100, value: 0, diff --git a/tests/unit/progressbar/progressbar_core.js b/tests/unit/progressbar/progressbar_core.js index 8f4a138ce9c..c762de1380b 100644 --- a/tests/unit/progressbar/progressbar_core.js +++ b/tests/unit/progressbar/progressbar_core.js @@ -1,23 +1,29 @@ module( "progressbar: core" ); test( "markup structure", function() { - expect( 5 ); - var element = $( "#progressbar" ).progressbar(); - ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); + expect( 7 ); + var element = $( "#progressbar" ).progressbar(), + value = element.children().eq( 0 ); + ok( element.is( ".ui-progressbar.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + ok( !value.is( ".ui-progressbar-complete.ui-corner-right" ), + "value does not have ui-corner-right or ui-progressbar-complete" ); + element.progressbar( "option", "value", 100 ); + ok( value.is( ".ui-progressbar-complete.ui-corner-right" ), "value has proper classes" ); + ok( !element.hasClass( "ui-progressbar-indeterminate" ), "main element is not .ui-progressbar-indeterminate" ); equal( element.children().length, 1, "main element contains one child" ); - ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ), + ok( element.children().eq( 0 ).is( ".ui-progressbar-value" ), "child is .ui-progressbar-value" ); equal( element.children().children().length, 0, "no overlay div" ); }); test( "markup structure - indeterminate", function() { - expect( 5 ); + expect( 4 ); var element = $( "#progressbar" ).progressbar({ value: false }); - ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); - ok( element.hasClass( "ui-progressbar-indeterminate" ), - "main element is .ui-progressbar-indeterminate" ); + ok( element.is( ".ui-progressbar.ui-progressbar-indeterminate" ), + "main element has proper classes" ); equal( element.children().length, 1, "main element contains one child" ); ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ), "child is .ui-progressbar-value" ); diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js index 10073fe97be..2d3e869fdee 100644 --- a/tests/unit/selectmenu/selectmenu_common.js +++ b/tests/unit/selectmenu/selectmenu_common.js @@ -1,6 +1,15 @@ TestHelpers.commonWidgetTests( "selectmenu", { defaults: { appendTo: null, + classes: { + "ui-selectmenu-button": "", + "ui-selectmenu-button-open": "ui-corner-top", + "ui-selectmenu-button-closed": "ui-corner-all", + "ui-selectmenu-text": "", + "ui-selectmenu-menu": "", + "ui-selectmenu-optgroup": "", + "ui-selectmenu-open": "" + }, disabled: null, icons: { button: "ui-icon-triangle-1-s" diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index b4efb80f2fb..a7620b028c1 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -2,6 +2,22 @@ module( "selectmenu: core" ); +test( "markup structure", function() { + var element = $( "#files" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + menuWrap = menu.parent(); + + expect( 4 ); + + ok( button.is( ".ui-selectmenu-button.ui-selectmenu-button-closed.ui-widget.ui-state-default" ), + "button has proper classes" ); + ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" ); + + ok( menuWrap.hasClass( "ui-selectmenu-menu" ), "menu is .ui-selectmenu-menu" ); + ok( !menuWrap.hasClass( "ui-selectmenu-menu-open" ), "menu is not .ui-selectmenu-menu-open" ); +}); + asyncTest( "accessibility", function() { var wrappers, button, menu, element = $( "#speed" ).attr( "title", "A demo title" ); diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 6d7278de6a2..5457631f08d 100644 --- a/tests/unit/slider/slider_common.js +++ b/tests/unit/slider/slider_common.js @@ -1,6 +1,15 @@ TestHelpers.commonWidgetTests( "slider", { defaults: { animate: false, + classes: { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + "ui-slider-range": "ui-corner-all", + "ui-slider-range-min": "", + "ui-slider-range-max": "", + "ui-slider-horizontal": "", + "ui-slider-vertical": "" + }, cancel: "input,textarea,button,select,option", delay: 0, disabled: false, diff --git a/tests/unit/slider/slider_core.js b/tests/unit/slider/slider_core.js index 3649bded038..597f6fefbca 100644 --- a/tests/unit/slider/slider_core.js +++ b/tests/unit/slider/slider_core.js @@ -12,6 +12,21 @@ function handle() { // Slider Tests module( "slider: core" ); +test( "markup structure", function() { + expect( 3 ); + var element = $( "
" ).slider({ range: true }), + handle = element.find( "span" ), + range = element.find( "div" ); + + ok( element.is( ".ui-slider.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + + ok( handle.is( ".ui-slider-handle.ui-corner-all" ), "handle has proper classes" ); + + ok( range.is( ".ui-slider-range.ui-widget-header.ui-corner-all" ), + "range has proper classes" ); +}); + test( "keydown HOME on handle sets value to min", function() { expect( 2 ); element = $( "
" ); diff --git a/tests/unit/spinner/spinner_common.js b/tests/unit/spinner/spinner_common.js index b494e3ca34d..bac05074966 100644 --- a/tests/unit/spinner/spinner_common.js +++ b/tests/unit/spinner/spinner_common.js @@ -1,5 +1,12 @@ TestHelpers.commonWidgetTests( "spinner", { defaults: { + classes: { + "ui-spinner-input": "", + "ui-spinner": "ui-corner-all", + "ui-spinner-button": "", + "ui-spinner-up": "ui-corner-tr", + "ui-spinner-down": "ui-corner-br" + }, culture: null, disabled: false, icons: { diff --git a/tests/unit/spinner/spinner_core.js b/tests/unit/spinner/spinner_core.js index 03088fecdca..076b3b8cfdd 100644 --- a/tests/unit/spinner/spinner_core.js +++ b/tests/unit/spinner/spinner_core.js @@ -4,6 +4,27 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp; module( "spinner: core" ); +test( "markup structure", function() { + expect( 9 ); + var element = $( "#spin" ).spinner(), + spinner = element.spinner( "widget" ), + up = spinner.find( ".ui-spinner-up" ), + down = spinner.find( ".ui-spinner-down" ); + + ok( element.hasClass( "ui-spinner-input" ), "input is .ui-spinner-input" ); + + ok( spinner.hasClass( "ui-spinner" ), "main element is .ui-spinner" ); + ok( spinner.hasClass( "ui-widget" ), "main element is .ui-widget" ); + ok( spinner.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" ); + ok( spinner.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); + + ok( up.hasClass( "ui-spinner-button" ), "up button is .ui-spinner-button" ); + ok( up.hasClass( "ui-corner-tr" ), "up button is .ui-corner-tr" ); + + ok( down.hasClass( "ui-spinner-button" ), "down button is .ui-spinner-button" ); + ok( down.hasClass( "ui-corner-br" ), "down button is .ui-corner-br" ); +}); + test( "keydown UP on input, increases value not greater than max", function() { expect( 5 ); var element = $( "#spin" ).val( 70 ).spinner({ diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index a589515f806..e75ea420a3d 100644 --- a/tests/unit/tabs/tabs_common.js +++ b/tests/unit/tabs/tabs_common.js @@ -1,6 +1,16 @@ TestHelpers.commonWidgetTests( "tabs", { defaults: { active: null, + classes: { + "ui-tabs": "ui-corner-all", + "ui-tabs-collapsible": "", + "ui-tabs-active": "", + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-anchor": "", + "ui-tabs-panel": "ui-corner-bottom", + "ui-tabs-loading": "" + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 2d18a6f1ab7..6ff3445e50d 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -5,11 +5,25 @@ var state = TestHelpers.tabs.state; module( "tabs: core" ); test( "markup structure", function() { - expect( 3 ); - var element = $( "#tabs1" ).tabs(); - ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" ); - ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" ); - equal( element.find( ".ui-tabs-panel" ).length, 3, + expect( 7 ); + var element = $( "#tabs1" ).tabs(), + ul = element.find( "ul.ui-tabs-nav" ), + tabs = ul.find( "li" ), + active = tabs.eq( 0 ); + + ok( element.is( ".ui-tabs.ui-widget.ui-widget-content.ui-corner-all" ), + "main element has proper classes" ); + ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" ); + + ok( ul.is( ".ui-tabs-nav.ui-widget-header.ui-corner-all" ), "list has proper classes" ); + + ok( tabs.is( ".ui-tab.ui-corner-top.ui-state-default" ), "list has proper classes" ); + + ok( element.find( "a" ).hasClass( "ui-tabs-anchor" ), "link item is .ui-tabs-anchor" ); + + ok( active.is( ".ui-tabs-active.ui-state-active" ), "active item has proper classes" ); + + equal( element.find( ".ui-tabs-panel.ui-widget-content.ui-corner-bottom" ).length, 3, ".ui-tabs-panel elements exist, correct number" ); }); @@ -130,17 +144,21 @@ test( "accessibility", function() { }); asyncTest( "accessibility - ajax", function() { - expect( 4 ); + expect( 6 ); var element = $( "#tabs2" ).tabs(), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panel = $( "#custom-id" ); equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" ); equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" ); element.tabs( "option", "active", 3 ); equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" ); + ok( tab.hasClass( "ui-tabs-loading" ), "tab is .ui-tabs-loading during load" ); + element.one( "tabsload", function() { setTimeout(function() { equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" ); + ok( !tab.hasClass( "ui-tabs-loading" ), "tab is not .ui-tabs-loading after load" ); start(); }, 1 ); }); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index a3d663f272d..c08e9c049fe 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -15,6 +15,22 @@ test( "destroy", function() { }); }); +asyncTest( "destroy - ajax", function() { + expect( 1 ); + domEqual( "#tabs2", function( done ) { + var element = $( "#tabs2" ).tabs({ + load: function() { + setTimeout(function() { + element.tabs( "destroy" ); + done(); + start(); + }); + } + }); + element.tabs( "option", "active", 2 ); + }); +}); + test( "enable", function() { expect( 8 ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index a9632481e8f..8d35eba9357 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -123,12 +123,13 @@ test( "{ collapsible: false }", function() { }); test( "{ collapsible: true }", function() { - expect( 6 ); + expect( 9 ); var element = $( "#tabs1" ).tabs({ active: 1, collapsible: true }); + ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" ); element.tabs( "option", "active", false ); equal( element.tabs( "option", "active" ), false ); @@ -141,6 +142,12 @@ test( "{ collapsible: true }", function() { element.find( ".ui-state-active .ui-tabs-anchor" ).click(); equal( element.tabs( "option", "active" ), false ); state( element, 0, 0, 0 ); + + element.tabs( "option", "collapsible", false ); + ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" ); + + element.tabs( "option", "collapsible", true ); + ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" ); }); test( "disabled", function() { diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index 18bd88c2c98..41babc0a004 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -5,6 +5,9 @@ jQuery UI Tooltip Test Suite + diff --git a/tests/unit/tooltip/tooltip_common.js b/tests/unit/tooltip/tooltip_common.js index 2d6ea91eccd..ab02d25cbf2 100644 --- a/tests/unit/tooltip/tooltip_common.js +++ b/tests/unit/tooltip/tooltip_common.js @@ -1,5 +1,9 @@ TestHelpers.commonWidgetTests( "tooltip", { defaults: { + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, content: function() {}, disabled: false, hide: true, @@ -10,7 +14,6 @@ TestHelpers.commonWidgetTests( "tooltip", { collision: "flipfit flip" }, show: true, - tooltipClass: null, track: false, // callbacks diff --git a/tests/unit/tooltip/tooltip_common_deprecated.js b/tests/unit/tooltip/tooltip_common_deprecated.js new file mode 100644 index 00000000000..49dafd7c61b --- /dev/null +++ b/tests/unit/tooltip/tooltip_common_deprecated.js @@ -0,0 +1,25 @@ +TestHelpers.commonWidgetTests( "tooltip", { + defaults: { + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, + content: function() {}, + disabled: false, + hide: true, + items: "[title]:not([disabled])", + position: { + my: "left top+15", + at: "left bottom", + collision: "flipfit flip" + }, + show: true, + tooltipClass: null, + track: false, + + // callbacks + close: null, + create: null, + open: null + } +}); diff --git a/tests/unit/tooltip/tooltip_deprecated.html b/tests/unit/tooltip/tooltip_deprecated.html new file mode 100644 index 00000000000..20ff3d83bb3 --- /dev/null +++ b/tests/unit/tooltip/tooltip_deprecated.html @@ -0,0 +1,52 @@ + + + + + jQuery UI Tooltip Test Suite + + + + + + + + + + + + + + + + + + + +
+
+ +
+ anchor + + aria-describedby + span + baz +
+ +
+ +
+ +
+ + diff --git a/tests/unit/tooltip/tooltip_deprecated.js b/tests/unit/tooltip/tooltip_deprecated.js new file mode 100644 index 00000000000..abd24f2e61a --- /dev/null +++ b/tests/unit/tooltip/tooltip_deprecated.js @@ -0,0 +1,16 @@ +/* + * dialog_deprecated.js + */ +(function( $ ) { + +module( "tooltip: (deprecated) options" ); + +test( "tooltipClass", function() { + expect( 1 ); + var element = $( "#tooltipped1" ).tooltip({ + tooltipClass: "custom" + }).tooltip( "open" ); + ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); +}); + +}( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index 17f0a423775..4b9d64830a7 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -120,14 +120,6 @@ test( "items", function() { element.tooltip( "destroy" ); }); -test( "tooltipClass", function() { - expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ - tooltipClass: "custom" - }).tooltip( "open" ); - ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); -}); - test( "track + show delay", function() { expect( 2 ); var event, diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index feafca9428c..d38f666df60 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -607,6 +607,94 @@ test( ".option() - deep option setter", function() { div.testWidget( "option", "foo.qux.newOpt", "newVal" ); }); +test( ".option() - classes setter", function(){ + expect( 6 ); + $.widget( "ui.testWidget", { + options: { + classes: { + "test-span": "", + "test-wrapper": "self-wrapper", + "test-self": "self-class self-class-2" + } + }, + defaultElement: "
", + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "test-span": + return this.span; + case "test-wrapper": + return this.widget(); + default: + return this._superApply( arguments ); + } + }, + _create: function() { + this.span = $( "" ) + .addClass( this._classes( "test-span" ) ) + .appendTo( this.element ); + + this.element.wrap( "
" ); + + this.element.addClass( this._classes( "test-self" ) ); + + this.wrapper = this.element.parent(); + + this.wrapper.addClass( this._classes( "test-wrapper" ) ); + + }, + widget: function() { + return this.wrapper; + } + }); + + var testWidget = $.ui.testWidget(), + currentWrapperClass = testWidget.option( "classes.test-wrapper" ); + + testWidget.option({ + classes: { + "test-span": "self-span-new", + "test-wrapper": currentWrapperClass + " self-wrapper-new", + "test-self": "self-class-2" + } + }); + + equal( testWidget.element.is( ".test-self.self-class-2" ), true, + "Removing a class leaves the structure and other classes in value" ); + equal( !testWidget.element.is( ".self-class" ), true, + "Removing a class from the value removes the class" ); + testWidget.option( "classes.test-self", "" ); + equal( testWidget.element.is( ".test-self" ), true, + "Setting to empty value leaves structure class" ); + equal( !testWidget.element.is( ".self-class-2" ), true, + "Setting empty value removes previous value classes" ); + equal( testWidget.span.is( ".test-span.self-span-new" ), true, + "Adding a class to an empty value works as expected" ); + equal( testWidget.wrapper.is( ".test-wrapper.self-wrapper-new" ), true, + "Appending a class to the current value works as expected" ); +}); + +test( "_classes", function(){ + expect( 4 ); + $.widget( "ui.testWidget", { + options: { + classes: { + "test": "class1 class2", + "testEmpty": "", + "test2": "class3" + } + }, + defaultElement: "
", + _create: function() { + equal( this._classes( "test" ), "test class1 class2" ); + equal( this._classes( "test2" ), "test2 class3" ); + equal( this._classes( "testEmpty" ), "testEmpty", + "Computed value of empty-string-valued class key has no extra spaces" ); + equal( this._classes( "test test2" ), "test2 class3 test class1 class2" ); + } + }); + $.ui.testWidget(); +}); + test( ".enable()", function() { expect( 2 ); $.widget( "ui.testWidget", { diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 8d5364d783c..5a769b9a520 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -22,10 +22,14 @@ // custom class, replaces ui-widget-content $( "#context2" ).tooltip({ - tooltipClass: "ui-widget-header" + classes: { + "ui-tooltip": "ui-widget-header" + } }); $( "#right1" ).tooltip({ - tooltipClass: "ui-state-error" + classes: { + "ui-tooltip": "ui-state-error" + } }); // synchronous content @@ -63,7 +67,8 @@ // custom position $( "#right2" ).tooltip({ - tooltipClass: "ui-state-highlight", + classes: { + "ui-tooltip" : "ui-corner-all ui-state-highlight", position: { my: "center top", at: "center bottom+10" diff --git a/ui/accordion.js b/ui/accordion.js index 94643719731..8fd2c638ab7 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -29,6 +29,16 @@ return $.widget( "ui.accordion", { options: { active: 0, animate: {}, + classes: { + "ui-accordion": "", + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": "", + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": "", + "ui-accordion-header-icon": "", + "ui-accordion-icons": "" + }, collapsible: false, event: "click", header: "> li > :first-child,> :not(li):even", @@ -62,7 +72,7 @@ return $.widget( "ui.accordion", { _create: function() { var options = this.options; this.prevShow = this.prevHide = $(); - this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ) + this.element.addClass( this._classes( "ui-accordion" ) + " ui-widget ui-helper-reset" ) // ARIA .attr( "role", "tablist" ); @@ -90,18 +100,38 @@ return $.widget( "ui.accordion", { var icons = this.options.icons; if ( icons ) { $( "" ) - .addClass( "ui-accordion-header-icon ui-icon " + icons.header ) + .addClass( this._classes( "ui-accordion-header-icon" ) + " ui-icon " + icons.header ) .prependTo( this.headers ); this.active.children( ".ui-accordion-header-icon" ) .removeClass( icons.header ) .addClass( icons.activeHeader ); - this.headers.addClass( "ui-accordion-icons" ); + this.headers.addClass( this._classes( "ui-accordion-icons" ) ); + } + }, + + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-accordion-header": + return this.headers; + case "ui-accordion-icons": + case "ui-accordion-header-collapsed": + return this.headers.filter( "." + classKey ); + case "ui-accordion-header-icon": + return this.headers.children( ".ui-accordion-header-icon" ); + case "ui-accordion-content": + return this.panels; + case "ui-accordion-header-active": + return this.active; + case "ui-accordion-content-active": + return this.active.next(); + default: + return this._superApply( arguments ); } }, _destroyIcons: function() { this.headers - .removeClass( "ui-accordion-icons" ) + .removeClass( this._classes( "ui-accordion-icons" ) ) .children( ".ui-accordion-header-icon" ) .remove(); }, @@ -111,13 +141,13 @@ return $.widget( "ui.accordion", { // clean up main element this.element - .removeClass( "ui-accordion ui-widget ui-helper-reset" ) + .removeClass( this._classes( "ui-accordion" ) + " ui-widget ui-helper-reset" ) .removeAttr( "role" ); // clean up headers this.headers - .removeClass( "ui-accordion-header ui-accordion-header-active ui-state-default " + - "ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ) + .removeClass( this._classes( "ui-accordion-header ui-accordion-header-active ui-accordion-header-collapsed" ) + + " ui-state-default ui-state-active ui-state-disabled" ) .removeAttr( "role" ) .removeAttr( "aria-expanded" ) .removeAttr( "aria-selected" ) @@ -129,8 +159,8 @@ return $.widget( "ui.accordion", { // clean up content panels contents = this.headers.next() - .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom " + - "ui-accordion-content ui-accordion-content-active ui-state-disabled" ) + .removeClass( this._classes( "ui-accordion-content ui-accordion-content-active" ) + + " ui-helper-reset ui-widget-content ui-state-disabled" ) .css( "display", "" ) .removeAttr( "role" ) .removeAttr( "aria-hidden" ) @@ -263,10 +293,10 @@ return $.widget( "ui.accordion", { prevPanels = this.panels; this.headers = this.element.find( this.options.header ) - .addClass( "ui-accordion-header ui-state-default ui-corner-all" ); + .addClass( this._classes( "ui-accordion-header ui-accordion-header-collapsed" ) + " ui-state-default" ); this.panels = this.headers.next() - .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ) + .addClass( this._classes( "ui-accordion-content" ) + " ui-helper-reset ui-widget-content" ) .filter( ":not(.ui-accordion-content-active)" ) .hide(); @@ -284,10 +314,10 @@ return $.widget( "ui.accordion", { parent = this.element.parent(); this.active = this._findActive( options.active ) - .addClass( "ui-accordion-header-active ui-state-active ui-corner-top" ) - .removeClass( "ui-corner-all" ); + .addClass( this._classes( "ui-accordion-header-active" ) + " ui-state-active" ) + .removeClass( this._classes( "ui-accordion-header-collapsed" ) ); this.active.next() - .addClass( "ui-accordion-content-active" ) + .addClass( this._classes( "ui-accordion-content-active" ) ) .show(); this.headers @@ -440,7 +470,7 @@ return $.widget( "ui.accordion", { // switch classes // corner classes on the previously active header stay after the animation - active.removeClass( "ui-accordion-header-active ui-state-active" ); + active.removeClass( this._classes( "ui-accordion-header-active" ) + " ui-state-active" ); if ( options.icons ) { active.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.activeHeader ) @@ -449,8 +479,8 @@ return $.widget( "ui.accordion", { if ( !clickedIsActive ) { clicked - .removeClass( "ui-corner-all" ) - .addClass( "ui-accordion-header-active ui-state-active ui-corner-top" ); + .removeClass( this._classes( "ui-accordion-header-collapsed" ) ) + .addClass( this._classes( "ui-accordion-header-active" ) + " ui-state-active" ); if ( options.icons ) { clicked.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.header ) @@ -459,7 +489,7 @@ return $.widget( "ui.accordion", { clicked .next() - .addClass( "ui-accordion-content-active" ); + .addClass( this._classes( "ui-accordion-content-active" ) ); } }, @@ -568,10 +598,10 @@ return $.widget( "ui.accordion", { var toHide = data.oldPanel; toHide - .removeClass( "ui-accordion-content-active" ) + .removeClass( this._classes( "ui-accordion-content-active" ) ) .prev() - .removeClass( "ui-corner-top" ) - .addClass( "ui-corner-all" ); + .removeClass( this._classes( "ui-accordion-header-active" ) ) + .addClass( this._classes( "ui-accordion-header-collapsed" ) ); // Work around for rendering bug in IE (#5421) if ( toHide.length ) { diff --git a/ui/autocomplete.js b/ui/autocomplete.js index aa0e546334e..6ed910b3779 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -32,6 +32,11 @@ $.widget( "ui.autocomplete", { options: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, minLength: 1, position: { @@ -80,7 +85,7 @@ $.widget( "ui.autocomplete", { this.isNewMenu = true; this.element - .addClass( "ui-autocomplete-input" ) + .addClass( this._classes( "ui-autocomplete-input" ) ) .attr( "autocomplete", "off" ); this._on( this.element, { @@ -202,7 +207,7 @@ $.widget( "ui.autocomplete", { this._initSource(); this.menu = $( "
    " ) - .addClass( "ui-autocomplete ui-front" ) + .addClass( this._classes( "ui-autocomplete" ) + " ui-front" ) .appendTo( this._appendTo() ) .menu({ // disable ARIA support, the live region takes care of that @@ -323,12 +328,26 @@ $.widget( "ui.autocomplete", { _destroy: function() { clearTimeout( this.searching ); this.element - .removeClass( "ui-autocomplete-input" ) + .removeClass( this._classes( "ui-autocomplete-input" ) ) .removeAttr( "autocomplete" ); this.menu.element.remove(); this.liveRegion.remove(); }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-autocomplete": + return this.menu.element; + case "ui-autocomplete-loading": + if ( !this.element.hasClass( "ui-autocomplete-loading" ) ) { + return $(); + } + break; + default: + return this._superApply( arguments ); + } + }, + _setOption: function( key, value ) { this._super( key, value ); if ( key === "source" ) { @@ -428,7 +447,7 @@ $.widget( "ui.autocomplete", { _search: function( value ) { this.pending++; - this.element.addClass( "ui-autocomplete-loading" ); + this.element.addClass( this._classes( "ui-autocomplete-loading" ) ); this.cancelSearch = false; this.source( { term: value }, this._response() ); @@ -444,7 +463,7 @@ $.widget( "ui.autocomplete", { this.pending--; if ( !this.pending ) { - this.element.removeClass( "ui-autocomplete-loading" ); + this.element.removeClass( this._classes( "ui-autocomplete-loading" ) ); } }, this ); }, diff --git a/ui/dialog.js b/ui/dialog.js index 5561a96cde3..f9f8e412477 100644 --- a/ui/dialog.js +++ b/ui/dialog.js @@ -29,15 +29,27 @@ } }(function( $ ) { -return $.widget( "ui.dialog", { +$.widget( "ui.dialog", { version: "@VERSION", options: { appendTo: "body", autoOpen: true, buttons: [], + classes: { + "ui-dialog": "ui-corner-all", + "ui-dialog-content": "", + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": "", + "ui-dialog-title": "", + "ui-dialog-buttons": "", + "ui-dialog-buttonpane": "", + "ui-dialog-buttonset": "", + "ui-dialog-dragging": "", + "ui-dialog-resizing": "", + "ui-widget-overlay": "" + }, closeOnEscape: true, closeText: "Close", - dialogClass: "", draggable: true, hide: null, height: "auto", @@ -114,7 +126,7 @@ return $.widget( "ui.dialog", { this.element .show() .removeAttr( "title" ) - .addClass( "ui-dialog-content ui-widget-content" ) + .addClass( this._classes( "ui-dialog-content" ) + " ui-widget-content" ) .appendTo( this.uiDialog ); this._createTitlebar(); @@ -154,7 +166,7 @@ return $.widget( "ui.dialog", { this.element .removeUniqueId() - .removeClass( "ui-dialog-content ui-widget-content" ) + .removeClass( this._classes( "ui-dialog-content" ) + " ui-widget-content" ) .css( this.originalCss ) // Without detaching first, the following becomes really slow .detach(); @@ -327,8 +339,7 @@ return $.widget( "ui.dialog", { _createWrapper: function() { this.uiDialog = $("
    ") - .addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " + - this.options.dialogClass ) + .addClass( this._classes( "ui-dialog" ) + " ui-widget ui-widget-content ui-front " ) .hide() .attr({ // Setting tabIndex makes the div focusable @@ -384,10 +395,8 @@ return $.widget( "ui.dialog", { }, _createTitlebar: function() { - var uiDialogTitle; - this.uiDialogTitlebar = $( "
    " ) - .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) + .addClass( this._classes( "ui-dialog-titlebar") + " ui-widget-header ui-helper-clearfix" ) .prependTo( this.uiDialog ); this._on( this.uiDialogTitlebar, { mousedown: function( event ) { @@ -412,7 +421,7 @@ return $.widget( "ui.dialog", { }, text: false }) - .addClass( "ui-dialog-titlebar-close" ) + .addClass( this._classes( "ui-dialog-titlebar-close" ) ) .appendTo( this.uiDialogTitlebar ); this._on( this.uiDialogTitlebarClose, { click: function( event ) { @@ -421,14 +430,14 @@ return $.widget( "ui.dialog", { } }); - uiDialogTitle = $( "" ) + this.uiDialogTitle = $( "" ) .uniqueId() - .addClass( "ui-dialog-title" ) + .addClass( this._classes( "ui-dialog-title" ) ) .prependTo( this.uiDialogTitlebar ); - this._title( uiDialogTitle ); + this._title( this.uiDialogTitle ); this.uiDialog.attr({ - "aria-labelledby": uiDialogTitle.attr( "id" ) + "aria-labelledby": this.uiDialogTitle.attr( "id" ) }); }, @@ -441,10 +450,10 @@ return $.widget( "ui.dialog", { _createButtonPane: function() { this.uiDialogButtonPane = $( "
    " ) - .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); + .addClass( this._classes( "ui-dialog-buttonpane" ) + " ui-widget-content ui-helper-clearfix"); this.uiButtonSet = $( "
    " ) - .addClass( "ui-dialog-buttonset" ) + .addClass( this._classes( "ui-dialog-buttonset" ) ) .appendTo( this.uiDialogButtonPane ); this._createButtons(); @@ -459,7 +468,7 @@ return $.widget( "ui.dialog", { this.uiButtonSet.empty(); if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) { - this.uiDialog.removeClass( "ui-dialog-buttons" ); + this.uiDialog.removeClass( this._classes( "ui-dialog-buttons" ) ); return; } @@ -485,7 +494,7 @@ return $.widget( "ui.dialog", { .button( buttonOptions ) .appendTo( that.uiButtonSet ); }); - this.uiDialog.addClass( "ui-dialog-buttons" ); + this.uiDialog.addClass( this._classes( "ui-dialog-buttons" ) ); this.uiDialogButtonPane.appendTo( this.uiDialog ); }, @@ -505,7 +514,7 @@ return $.widget( "ui.dialog", { handle: ".ui-dialog-titlebar", containment: "document", start: function( event, ui ) { - $( this ).addClass( "ui-dialog-dragging" ); + $( this ).addClass( that._classes( "ui-dialog-dragging" ) ); that._blockFrames(); that._trigger( "dragStart", event, filteredUi( ui ) ); }, @@ -522,7 +531,7 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-dragging" ); + $( this ).removeClass( that._classes( "ui-dialog-dragging" ) ); that._unblockFrames(); that._trigger( "dragStop", event, filteredUi( ui ) ); } @@ -559,7 +568,7 @@ return $.widget( "ui.dialog", { minHeight: this._minHeight(), handles: resizeHandles, start: function( event, ui ) { - $( this ).addClass( "ui-dialog-resizing" ); + $( this ).addClass( that._classes( "ui-dialog-resizing" ) ); that._blockFrames(); that._trigger( "resizeStart", event, filteredUi( ui ) ); }, @@ -579,7 +588,6 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-resizing" ); that._unblockFrames(); that._trigger( "resizeStop", event, filteredUi( ui ) ); } @@ -638,6 +646,39 @@ return $.widget( "ui.dialog", { } }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-dialog": + return this.uiDialog; + case "ui-dialog-resizing": + if ( this.uiDialog.hasClass( classKey ) ) { + return this.uiDialog; + } + return $(); + case "ui-dialog-titlebar": + return this.uiDialogTitlebar; + case "ui-dialog-titlebar-close": + if ( this.uiDialogTitlebar.hasClass( classKey ) ) { + return this.uiDialogTitlebar; + } + return $(); + case "ui-dialog-title": + return this.uiDialogTitle; + case "ui-dialog-buttons": + case "ui-dialog-dragging": + case "ui-dialog-buttonset": + return this.uiButtonSet; + case "ui-dialog-buttonpane": + return this.uiDialogButtonPane; + case "ui-dialog-overlay": + if ( this.overlay ) { + return this.overlay; + } + return $(); + } + return this._superApply( arguments ); + }, + _setOptions: function( options ) { var that = this, resize = false, @@ -667,12 +708,6 @@ return $.widget( "ui.dialog", { var isDraggable, isResizable, uiDialog = this.uiDialog; - if ( key === "dialogClass" ) { - uiDialog - .removeClass( this.options.dialogClass ) - .addClass( value ); - } - if ( key === "disabled" ) { return; } @@ -841,7 +876,7 @@ return $.widget( "ui.dialog", { } this.overlay = $( "
    " ) - .addClass( "ui-widget-overlay ui-front" ) + .addClass( this._classes( "ui-widget-overlay" ) + " ui-front") .appendTo( this._appendTo() ); this._on( this.overlay, { mousedown: "_keepFocus" @@ -872,4 +907,29 @@ return $.widget( "ui.dialog", { } }); +// DEPRECATED +if ( $.uiBackCompat !== false ) { + + // DialogClass option + $.widget( "ui.dialog", $.ui.dialog, { + options: { + dialogClass: "" + }, + _createWrapper: function() { + this._super(); + this.uiDialog.addClass( this.options.dialogClass ); + }, + _setOption: function( key, value ) { + if ( key === "dialogClass" ) { + this.uiDialog + .removeClass( this.options.dialogClass ) + .addClass( value ); + } + this._superApply( arguments ); + } + }); +} + +return $.ui.dialog; + })); diff --git a/ui/menu.js b/ui/menu.js index 6d60e12a5bf..5877f3bc5fd 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -30,6 +30,14 @@ return $.widget( "ui.menu", { defaultElement: "
      ", delay: 300, options: { + classes: { + "ui-menu": "", + "ui-menu-icons": "", + "ui-menu-icon": "", + "ui-menu-item": "", + "ui-menu-divider": "", + "ui-menu-item-wrapper": "" + }, icons: { submenu: "ui-icon-caret-1-e" }, @@ -55,8 +63,8 @@ return $.widget( "ui.menu", { this.mouseHandled = false; this.element .uniqueId() - .addClass( "ui-menu ui-widget ui-widget-content" ) - .toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length ) + .addClass( this._classes( "ui-menu" ) + " ui-widget ui-widget-content" ) + .toggleClass( this._classes( "ui-menu-icons" ), !!this.element.find( ".ui-icon" ).length ) .attr({ role: this.options.role, tabIndex: 0 @@ -155,7 +163,7 @@ return $.widget( "ui.menu", { this.element .removeAttr( "aria-activedescendant" ) .find( ".ui-menu" ).addBack() - .removeClass( "ui-menu ui-widget ui-widget-content ui-menu-icons ui-front" ) + .removeClass( this._classes( "ui-menu ui-menu-icons" ) + " ui-widget ui-widget-content ui-front" ) .removeAttr( "role" ) .removeAttr( "tabIndex" ) .removeAttr( "aria-labelledby" ) @@ -167,12 +175,12 @@ return $.widget( "ui.menu", { // Destroy menu items this.element.find( ".ui-menu-item" ) - .removeClass( "ui-menu-item" ) + .removeClass( this._classes( "ui-menu-item" ) ) .removeAttr( "role" ) .removeAttr( "aria-disabled" ) - .children( ".ui-menu-item-wrapper" ) + .find( ".ui-menu-item-wrapper" ) .removeUniqueId() - .removeClass( "ui-menu-item-wrapper ui-state-hover" ) + .removeClass( this._classes( "ui-menu-item-wrapper" ) + " ui-state-hover" ) .removeAttr( "tabIndex" ) .removeAttr( "role" ) .removeAttr( "aria-haspopup" ) @@ -184,7 +192,8 @@ return $.widget( "ui.menu", { }); // Destroy menu dividers - this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" ); + this.element.find( ".ui-menu-divider" ) + .removeClass( this._classes( "ui-menu-divider" ) + " ui-widget-content" ); }, _keydown: function( event ) { @@ -287,7 +296,7 @@ return $.widget( "ui.menu", { // Initialize nested menus submenus.filter( ":not(.ui-menu)" ) - .addClass( "ui-menu ui-widget ui-widget-content ui-front" ) + .addClass( this._classes( "ui-menu" ) + " ui-widget ui-widget-content ui-front" ) .hide() .attr({ role: this.options.role, @@ -298,7 +307,7 @@ return $.widget( "ui.menu", { var menu = $( this ), item = menu.prev(), submenuCaret = $( "" ) - .addClass( "ui-menu-icon ui-icon " + icon ) + .addClass( that._classes( "ui-menu-icon" ) + " ui-icon " + icon ) .data( "ui-menu-submenu-caret", true ); item @@ -314,16 +323,16 @@ return $.widget( "ui.menu", { items.not( ".ui-menu-item" ).each(function() { var item = $( this ); if ( that._isDivider( item ) ) { - item.addClass( "ui-widget-content ui-menu-divider" ); + item.addClass( that._classes( "ui-menu-divider" ) + " ui-widget-content" ); } }); // Don't refresh list items that are already adapted items.not( ".ui-menu-item, .ui-menu-divider" ) - .addClass( "ui-menu-item" ) + .addClass( this._classes( "ui-menu-item" ) ) .children() .not( ".ui-menu" ) - .addClass( "ui-menu-item-wrapper" ) + .addClass( this._classes( "ui-menu-item-wrapper" ) ) .uniqueId() .attr({ tabIndex: -1, @@ -346,6 +355,22 @@ return $.widget( "ui.menu", { }[ this.options.role ]; }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-menu-icons": + if ( !this.element.hasClass( "ui-menu-icons" ) ) { + return $(); + } + break; + case "ui-menu-icon": + case "ui-menu-item": + case "ui-menu-item-wrapper": + case "ui-menu-divider": + return this.element.find( classKey ); + } + return this._superApply( arguments ); + }, + _setOption: function( key, value ) { if ( key === "icons" ) { this.element.find( ".ui-menu-icon" ) diff --git a/ui/progressbar.js b/ui/progressbar.js index ac8144d7361..2535cd92e5d 100644 --- a/ui/progressbar.js +++ b/ui/progressbar.js @@ -27,6 +27,13 @@ return $.widget( "ui.progressbar", { version: "@VERSION", options: { + classes: { + "ui-progressbar": "ui-corner-all", + "ui-progressbar-value": "ui-corner-left", + "ui-progressbar-overlay": "", + "ui-progressbar-indeterminate": "", + "ui-progressbar-complete": "ui-corner-right" + }, max: 100, value: 0, @@ -41,7 +48,7 @@ return $.widget( "ui.progressbar", { this.oldValue = this.options.value = this._constrainedValue(); this.element - .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) + .addClass( this._classes( "ui-progressbar" ) + " ui-widget ui-widget-content" ) .attr({ // Only set static values, aria-valuenow and aria-valuemax are // set inside _refreshValue() @@ -49,7 +56,8 @@ return $.widget( "ui.progressbar", { "aria-valuemin": this.min }); - this.valueDiv = $( "
      " ) + this.valueDiv = $( "
      " ) + .addClass( this._classes( "ui-progressbar-value" ) + " ui-widget-header" ) .appendTo( this.element ); this._refreshValue(); @@ -57,7 +65,7 @@ return $.widget( "ui.progressbar", { _destroy: function() { this.element - .removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) + .removeClass( this._classes( "ui-progressbar" ) + " ui-widget ui-widget-content" ) .removeAttr( "role" ) .removeAttr( "aria-valuemin" ) .removeAttr( "aria-valuemax" ) @@ -91,6 +99,29 @@ return $.widget( "ui.progressbar", { Math.min( this.options.max, Math.max( this.min, newValue ) ); }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-progressbar-value": + return this.valueDiv; + case "ui-progressbar-complete": + if ( this.valueDiv.hasClass( classKey ) ) { + return this.valueDiv; + } + break; + case "ui-progressbar-overlay": + if ( this.overlay ) { + return this.overlay; + } + break; + case "ui-progressbar-indeterminate": + if ( this.value ) { + return $(); + } + break; + } + return this._superApply( arguments ); + }, + _setOptions: function( options ) { // Ensure "value" option is set after other values (like max) var value = options.value; @@ -125,15 +156,17 @@ return $.widget( "ui.progressbar", { this.valueDiv .toggle( this.indeterminate || value > this.min ) - .toggleClass( "ui-corner-right", value === this.options.max ) + .toggleClass( this._classes( "ui-progressbar-complete" ), value === this.options.max ) .width( percentage.toFixed(0) + "%" ); - this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate ); + this.element.toggleClass( this._classes( "ui-progressbar-indeterminate" ), this.indeterminate ); if ( this.indeterminate ) { this.element.removeAttr( "aria-valuenow" ); if ( !this.overlayDiv ) { - this.overlayDiv = $( "
      " ).appendTo( this.valueDiv ); + this.overlayDiv = $( "
      " ) + .addClass( this._classes( "ui-progressbar-overlay" ) ) + .appendTo( this.valueDiv ); } } else { this.element.attr({ diff --git a/ui/selectmenu.js b/ui/selectmenu.js index 0859a2c2c1c..8ea15cfe2b5 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", { defaultElement: "", widgetEventPrefix: "spin", options: { + classes: { + "ui-spinner-input": "", + "ui-spinner": "ui-corner-all", + "ui-spinner-button": "", + "ui-spinner-up": "ui-corner-tr", + "ui-spinner-down": "ui-corner-br" + }, culture: null, icons: { down: "ui-icon-triangle-1-s", @@ -203,7 +210,7 @@ return $.widget( "ui.spinner", { _draw: function() { var uiSpinner = this.uiSpinner = this.element - .addClass( "ui-spinner-input" ) + .addClass( this._classes( "ui-spinner-input" ) ) .attr( "autocomplete", "off" ) .wrap( this._uiSpinnerHtml() ) .parent() @@ -254,15 +261,15 @@ return $.widget( "ui.spinner", { }, _uiSpinnerHtml: function() { - return ""; + return ""; }, _buttonHtml: function() { return "" + - "" + - ""; }, @@ -370,6 +377,18 @@ return $.widget( "ui.spinner", { this._trigger( "stop", event ); }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-spinner": + return this.uiSpinner; + case "ui-spinner-up": + case "ui-spinner-down": + return this.element.find( classKey ); + default: + return this._superApply( arguments ); + } + }, + _setOption: function( key, value ) { if ( key === "culture" || key === "numberFormat" ) { var prevValue = this._parse( this.element.val() ); @@ -461,7 +480,7 @@ return $.widget( "ui.spinner", { _destroy: function() { this.element - .removeClass( "ui-spinner-input" ) + .removeClass( this._classes( "ui-spinner-input" ) ) .prop( "disabled", false ) .removeAttr( "autocomplete" ) .removeAttr( "role" ) diff --git a/ui/tabs.js b/ui/tabs.js index c0b24e74374..e0adaf64b3f 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -29,6 +29,16 @@ return $.widget( "ui.tabs", { delay: 300, options: { active: null, + classes: { + "ui-tabs": "ui-corner-all", + "ui-tabs-collapsible": "", + "ui-tabs-active": "", + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-anchor": "", + "ui-tabs-panel": "ui-corner-bottom", + "ui-tabs-loading": "" + }, collapsible: false, event: "click", heightStyle: "content", @@ -70,8 +80,8 @@ return $.widget( "ui.tabs", { this.running = false; this.element - .addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ) - .toggleClass( "ui-tabs-collapsible", options.collapsible ); + .addClass( this._classes( "ui-tabs" ) + " ui-widget ui-widget-content" ) + .toggleClass( this._classes( "ui-tabs-collapsible" ), options.collapsible ); this._processTabs(); options.active = this._initialActive(); @@ -262,6 +272,32 @@ return $.widget( "ui.tabs", { return index; }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-tabs-collapsible": + if ( !this.options.collapsible ) { + return $(); + } + break; + case "ui-tabs-active": + return this.active; + case "ui-tabs-nav": + return this.tablist; + case "ui-tab": + return this.tabs; + case "ui-tabs-anchor": + return this.anchors; + case "ui-tabs-panel": + return this.panels; + case "ui-tabs-loading": + if ( this.tab.hasClass( classKey ) ) { + return this.tab; + } + return $(); + } + return this._superApply( arguments ); + }, + _setOption: function( key, value ) { if ( key === "active" ) { // _activate() will handle invalid values and update this.options @@ -278,7 +314,7 @@ return $.widget( "ui.tabs", { this._super( key, value); if ( key === "collapsible" ) { - this.element.toggleClass( "ui-tabs-collapsible", value ); + this.element.toggleClass( this._classes( "ui-tabs-collapsible" ), value ); // Setting collapsible: false while collapsed; open first panel if ( !value && this.options.active === false ) { this._activate( 0 ); @@ -354,7 +390,7 @@ return $.widget( "ui.tabs", { this.tabs.eq( 0 ).attr( "tabIndex", 0 ); } else { this.active - .addClass( "ui-tabs-active ui-state-active" ) + .addClass( this._classes( "ui-tabs-active" ) + " ui-state-active" ) .attr({ "aria-selected": "true", "aria-expanded": "true", @@ -375,7 +411,7 @@ return $.widget( "ui.tabs", { prevPanels = this.panels; this.tablist = this._getList() - .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) + .addClass( this._classes( "ui-tabs-nav" ) + " ui-helper-reset ui-helper-clearfix ui-widget-header" ) .attr( "role", "tablist" ) // Prevent users from focusing disabled tabs via click @@ -398,7 +434,7 @@ return $.widget( "ui.tabs", { }); this.tabs = this.tablist.find( "> li:has(a[href])" ) - .addClass( "ui-state-default ui-corner-top" ) + .addClass( this._classes( "ui-tab" ) + " ui-state-default" ) .attr({ role: "tab", tabIndex: -1 @@ -407,7 +443,7 @@ return $.widget( "ui.tabs", { this.anchors = this.tabs.map(function() { return $( "a", this )[ 0 ]; }) - .addClass( "ui-tabs-anchor" ) + .addClass( that._classes( "ui-tabs-anchor" ) ) .attr({ role: "presentation", tabIndex: -1 @@ -454,7 +490,7 @@ return $.widget( "ui.tabs", { }); this.panels - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) + .addClass( this._classes( "ui-tabs-panel" ) + " ui-widget-content" ) .attr( "role", "tabpanel" ); // Avoid memory leaks (#10056) @@ -473,7 +509,7 @@ return $.widget( "ui.tabs", { _createPanel: function( id ) { return $( "
      " ) .attr( "id", id ) - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) + .addClass( this._classes( "ui-tabs-panel" ) + " ui-widget-content" ) .data( "ui-tabs-destroy", true ); }, @@ -621,7 +657,7 @@ return $.widget( "ui.tabs", { } function show() { - eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); + eventData.newTab.closest( "li" ).addClass( that._classes( "ui-tabs-active" ) + " ui-state-active" ); if ( toShow.length && that.options.show ) { that._show( toShow, that.options.show, complete ); @@ -634,11 +670,11 @@ return $.widget( "ui.tabs", { // start out by hiding, then showing, then completing if ( toHide.length && this.options.hide ) { this._hide( toHide, this.options.hide, function() { - eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + eventData.oldTab.closest( "li" ).removeClass( that._classes( "ui-tabs-active" ) + " ui-state-active" ); show(); }); } else { - eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + eventData.oldTab.closest( "li" ).removeClass( this._classes( "ui-tabs-active" ) + " ui-state-active" ); toHide.hide(); show(); } @@ -704,18 +740,19 @@ return $.widget( "ui.tabs", { }, _destroy: function() { + var that = this; if ( this.xhr ) { this.xhr.abort(); } - this.element.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" ); + this.element.removeClass( this._classes( "ui-tabs ui-tabs-collapsible" ) + " ui-widget ui-widget-content" ); this.tablist - .removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) + .removeClass( this._classes( "ui-tabs-nav" ) + " ui-helper-reset ui-helper-clearfix ui-widget-header" ) .removeAttr( "role" ); this.anchors - .removeClass( "ui-tabs-anchor" ) + .removeClass( this._classes( "ui-tabs-anchor" ) ) .removeAttr( "role" ) .removeAttr( "tabIndex" ) .removeUniqueId(); @@ -727,8 +764,8 @@ return $.widget( "ui.tabs", { $( this ).remove(); } else { $( this ) - .removeClass( "ui-state-default ui-state-active ui-state-disabled " + - "ui-corner-top ui-corner-bottom ui-widget-content ui-tabs-active ui-tabs-panel" ) + .removeClass( that._classes( "ui-tabs-active ui-tab ui-tabs-panel" ) + + " ui-helper-reset ui-helper-clearfix ui-widget-content ui-state-default ui-state-active ui-state-disabled" ) .removeAttr( "tabIndex" ) .removeAttr( "aria-live" ) .removeAttr( "aria-busy" ) @@ -826,7 +863,7 @@ return $.widget( "ui.tabs", { // jQuery <1.8 returns false if the request is canceled in beforeSend, // but as of 1.8, $.ajax() always returns a jqXHR object. if ( this.xhr && this.xhr.statusText !== "canceled" ) { - tab.addClass( "ui-tabs-loading" ); + tab.addClass( this._classes( "ui-tabs-loading" ) ); panel.attr( "aria-busy", "true" ); this.xhr @@ -846,7 +883,7 @@ return $.widget( "ui.tabs", { that.panels.stop( false, true ); } - tab.removeClass( "ui-tabs-loading" ); + tab.removeClass( that._classes( "ui-tabs-loading" ) ); panel.removeAttr( "aria-busy" ); if ( jqXHR === that.xhr ) { diff --git a/ui/tooltip.js b/ui/tooltip.js index 180c9f8e24c..02e8970f595 100644 --- a/ui/tooltip.js +++ b/ui/tooltip.js @@ -25,9 +25,13 @@ } }(function( $ ) { -return $.widget( "ui.tooltip", { +$.widget( "ui.tooltip", { version: "@VERSION", options: { + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, content: function() { // support: IE<9, Opera in jQuery <1.7 // .text() can't accept undefined, so coerce to a string @@ -44,7 +48,6 @@ return $.widget( "ui.tooltip", { collision: "flipfit flip" }, show: true, - tooltipClass: null, track: false, // callbacks @@ -105,6 +108,18 @@ return $.widget( "ui.tooltip", { .appendTo( this.document[ 0 ].body ); }, + _elementsFromClassKey: function( classKey ) { + switch ( classKey ) { + case "ui-tooltip": + return this.tooltips; + case "ui-tooltip-content": + return this.tooltips.map(function() { + return $( this ).find( classKey ); + }); + } + return $(); + }, + _setOption: function( key, value ) { var that = this; @@ -404,12 +419,11 @@ return $.widget( "ui.tooltip", { _tooltip: function( element ) { var tooltip = $( "
      " ) .attr( "role", "tooltip" ) - .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " + - ( this.options.tooltipClass || "" ) ), + .addClass( this._classes( "ui-tooltip" ) + " ui-widget ui-widget-content " ), id = tooltip.uniqueId().attr( "id" ); $( "
      " ) - .addClass( "ui-tooltip-content" ) + .addClass( this._classes( "ui-tooltip-content" ) ) .appendTo( tooltip ); tooltip.appendTo( this.document[0].body ); @@ -458,4 +472,22 @@ return $.widget( "ui.tooltip", { } }); +// DEPRECATED +if ( $.uiBackCompat !== false ) { + + // TooltipClass option + $.widget( "ui.tooltip", $.ui.tooltip, { + options: { + tooltipClass: null + }, + _tooltip: function() { + var tooltip = this._superApply( arguments ); + tooltip.tooltip.addClass( this.options.tooltipClass || "" ); + return tooltip; + } + }); +} + +return $.ui.tooltip; + })); diff --git a/ui/widget.js b/ui/widget.js index 41425b1a9d3..4ac503654ba 100644 --- a/ui/widget.js +++ b/ui/widget.js @@ -357,6 +357,7 @@ $.Widget.prototype = { return this; }, + _setOptions: function( options ) { var key; @@ -366,7 +367,26 @@ $.Widget.prototype = { return this; }, + + _elementsFromClassKey: function( classKey ) { + if ( this.options.classes[ classKey ] ) { + return this.element; + } else { + return $(); + } + }, + _setOption: function( key, value ) { + if ( key === "classes" ) { + for ( var classKey in value ) { + if ( value[ classKey ] !== this.options.classes[ classKey ] ) { + this._elementsFromClassKey( classKey ) + .removeClass( this._classesFromObject( classKey, this.options.classes ) ) + .addClass( this._classesFromObject( classKey, value ) ); + } + } + } + this.options[ key ] = value; if ( key === "disabled" ) { @@ -383,6 +403,27 @@ $.Widget.prototype = { return this; }, + _classesFromObject: function( key, classes ) { + var out = [], + parts = key.split( " " ), + i = parts.length; + + while ( i-- ) { + out.push( parts[ i ] ); + + // Avoid extra spaces in the return value resulting from pushing an empty classes value + if ( classes[ parts[ i ] ] ) { + out.push( classes[ parts[ i ] ] ); + } + } + + return out.join( " " ); + }, + + _classes: function( key ) { + return this._classesFromObject( key, this.options.classes ); + }, + enable: function() { return this._setOptions({ disabled: false }); },