From 891a7d9c082e4fcf93f8427de7dda8dcc26e76e2 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Fri, 19 Oct 2012 15:38:56 -0500 Subject: [PATCH 01/47] Widget: add the _classes method. Fixes #7053 --- tests/unit/widget/widget_core.js | 18 ++++++++++++++++++ ui/widget.js | 13 +++++++++++++ 2 files changed, 31 insertions(+) diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index feafca9428c..49abaff24d1 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -607,6 +607,24 @@ test( ".option() - deep option setter", function() { div.testWidget( "option", "foo.qux.newOpt", "newVal" ); }); +test( "_classes", function(){ + expect( 3 ); + $.widget( "ui.testWidget", { + options: { + classes: { + "test": "class1 class2", + "test2": "class3" + } + }, + _create: function() { + equal( this._classes( "test" ), "test class1 class2" ); + equal( this._classes( "test2" ), "test2 class3" ); + equal( this._classes( "test test2" ), "test2 class3 test class1 class2" ); + } + }); + $( "
" ).testWidget(); +}); + test( ".enable()", function() { expect( 2 ); $.widget( "ui.testWidget", { diff --git a/ui/widget.js b/ui/widget.js index 41425b1a9d3..b421a1ed96b 100644 --- a/ui/widget.js +++ b/ui/widget.js @@ -383,6 +383,19 @@ $.Widget.prototype = { return this; }, + _classes: function( key ) { + var out = [], + parts = key.split( " " ), + i = parts.length; + + while ( i-- ) { + out.push( parts[ i ] ); + out.push( this.options.classes[ parts[ i ] ] ); + } + + return out.join( " " ); + }, + enable: function() { return this._setOptions({ disabled: false }); }, From 6a6446ba1df14acea298c5495eeadea0c1586431 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Fri, 19 Oct 2012 15:39:37 -0500 Subject: [PATCH 02/47] Tabs: use the _classes method. Fixes #7053 --- tests/unit/tabs/tabs_common.js | 10 +++++++ tests/unit/tabs/tabs_core.js | 35 +++++++++++++++++++---- tests/unit/tabs/tabs_methods.js | 16 +++++++++++ tests/unit/tabs/tabs_options.js | 9 +++++- ui/tabs.js | 49 ++++++++++++++++++++------------- 5 files changed, 94 insertions(+), 25 deletions(-) diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index a589515f806..743403e0630 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": null, + "ui-tabs-active": null, + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-anchor": null, + "ui-tabs-panel": "ui-corner-bottom", + "ui-tabs-loading": null + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 2d18a6f1ab7..dadbf1b8287 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -5,11 +5,32 @@ var state = TestHelpers.tabs.state; module( "tabs: core" ); test( "markup structure", function() { - expect( 3 ); - var element = $( "#tabs1" ).tabs(); + expect( 15 ); + var element = $( "#tabs1" ).tabs(), + ul = element.find( "ul.ui-tabs-nav" ), + tabs = ul.find( "li" ), + active = tabs.eq( 0 ); + 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, + ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" ); + ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" ); + ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); + ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" ); + + ok( ul.hasClass( "ui-tabs-nav" ), "list is .ui-tabs-nav" ); + ok( ul.hasClass( "ui-widget-header" ), "list is .ui-widget-header" ); + ok( ul.hasClass( "ui-corner-all" ), "list is .ui-corner-all" ); + + ok( tabs.hasClass( "ui-tab" ), "list item is .ui-tab" ); + ok( tabs.hasClass( "ui-corner-top" ), "list item is .ui-corner-top" ); + ok( tabs.hasClass( "ui-state-default" ), "list item is .ui-state-default" ); + + ok( element.find( "a" ).hasClass( "ui-tabs-anchor" ), "link item is .ui-tabs-anchor" ); + + ok( active.hasClass( "ui-tabs-active" ), "active item is .ui-tabs-active" ); + ok( active.hasClass( "ui-state-active" ), "active item is .ui-state-active" ); + + equal( element.find( ".ui-tabs-panel.ui-widget-content.ui-corner-bottom" ).length, 3, ".ui-tabs-panel elements exist, correct number" ); }); @@ -130,17 +151,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/ui/tabs.js b/ui/tabs.js index c0b24e74374..9cad6a94851 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": null, + "ui-tabs-active": null, + "ui-tabs-nav": "ui-corner-all", + "ui-tab": "ui-corner-top", + "ui-tabs-anchor": null, + "ui-tabs-panel": "ui-corner-bottom", + "ui-tabs-loading": null + }, 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(); @@ -278,7 +288,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 +364,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 +385,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 +408,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 +417,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 +464,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 +483,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 +631,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 +644,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 +714,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 +738,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 +837,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 +857,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 ) { From 07f52c131c57992f381704a24ed6a36e0a9cbbb7 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Tue, 23 Apr 2013 14:03:13 -0500 Subject: [PATCH 03/47] Dialog: use the _classes method. Deprecate dialogClass. Fixes #7053 --- tests/unit/dialog/dialog_common.js | 14 +++- tests/unit/dialog/dialog_common_deprecated.js | 56 ++++++++++++++ tests/unit/dialog/dialog_core.js | 35 +++++++++ tests/unit/dialog/dialog_deprecated.html | 68 ++++++++++++++++ tests/unit/dialog/dialog_deprecated.js | 31 ++++++++ tests/unit/dialog/dialog_methods.js | 10 ++- tests/unit/dialog/dialog_options.js | 20 ----- ui/dialog.js | 77 +++++++++++++------ 8 files changed, 265 insertions(+), 46 deletions(-) create mode 100644 tests/unit/dialog/dialog_common_deprecated.js create mode 100644 tests/unit/dialog/dialog_deprecated.html create mode 100644 tests/unit/dialog/dialog_deprecated.js diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index fc10fabaab6..fa53f302d47 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": null, + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": null, + "ui-dialog-title": null, + "ui-dialog-buttons": null, + "ui-dialog-buttonpane": null, + "ui-dialog-buttonset": null, + "ui-dialog-dragging": null, + "ui-dialog-resizing": null, + "ui-widget-overlay": null + }, 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..66ec7260a78 --- /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": null, + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": null, + "ui-dialog-title": null, + "ui-dialog-buttons": null, + "ui-dialog-buttonpane": null, + "ui-dialog-buttonset": null, + "ui-dialog-dragging": null, + "ui-dialog-resizing": null, + "ui-widget-overlay": null + }, + 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..94e22aef743 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -7,6 +7,41 @@ // TODO add teardown callback to remove dialogs module("dialog: core"); +test( "markup structure", function() { + expect( 15 ); + 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.hasClass( "ui-dialog" ), "widget is .ui-dialog" ); + ok( widget.hasClass( "ui-widget" ), "widget is .ui-widget" ); + ok( widget.hasClass( "ui-widget-content" ), "widget is .ui-widget-content" ); + ok( widget.hasClass( "ui-corner-all" ), "widget is .ui-corner-all" ); + ok( widget.hasClass( "ui-dialog-buttons" ), "widget is .ui-dialog-buttons" ); + + ok( titlebar.hasClass( "ui-dialog-titlebar" ), "titlebar is .ui-dialog-titlebar" ); + ok( titlebar.hasClass( "ui-corner-all" ), "titlebar is .ui-corner-all" ); + ok( titlebar.hasClass( "ui-widget-header" ), "titlebar is .ui-widget-header" ); + 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.hasClass( "ui-dialog-content" ), "element is .ui-dialog-content" ); + ok( element.hasClass( "ui-widget-content" ), "element is .ui-widget-content" ); + + ok( buttonpane.hasClass( "ui-dialog-buttonpane" ), "buttonpane is .ui-dialog-buttonpane" ); + ok( buttonpane.hasClass( "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..4a404c79e03 --- /dev/null +++ b/tests/unit/dialog/dialog_deprecated.html @@ -0,0 +1,68 @@ + + + + + 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/ui/dialog.js b/ui/dialog.js index 5561a96cde3..dc95ca7d064 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": null, + "ui-dialog-titlebar": "ui-corner-all", + "ui-dialog-titlebar-close": null, + "ui-dialog-title": null, + "ui-dialog-buttons": null, + "ui-dialog-buttonpane": null, + "ui-dialog-buttonset": null, + "ui-dialog-dragging": null, + "ui-dialog-resizing": null, + "ui-widget-overlay": null + }, 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 @@ -387,7 +398,7 @@ return $.widget( "ui.dialog", { 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 +423,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 ) { @@ -423,7 +434,7 @@ return $.widget( "ui.dialog", { uiDialogTitle = $( "" ) .uniqueId() - .addClass( "ui-dialog-title" ) + .addClass( this._classes( "ui-dialog-title" ) ) .prependTo( this.uiDialogTitlebar ); this._title( uiDialogTitle ); @@ -441,10 +452,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 +470,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 +496,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 +516,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 +533,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 +570,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 +590,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 ) ); } @@ -667,12 +677,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 +845,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 +876,29 @@ return $.widget( "ui.dialog", { } }); +// DEPRECATED +if ( $.uiBackCompat ) { + + // 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; + })); From f8c5aea9a37c484d0057b2c0fbce9df12ff022d1 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Tue, 23 Apr 2013 15:10:29 -0500 Subject: [PATCH 04/47] Accordion: use the _classes method. Fixes #7053 --- tests/unit/accordion/accordion_common.js | 10 +++++ tests/unit/accordion/accordion_core.js | 22 +++++++--- tests/unit/accordion/accordion_methods.js | 8 +++- ui/accordion.js | 52 ++++++++++++++--------- 4 files changed, 64 insertions(+), 28 deletions(-) diff --git a/tests/unit/accordion/accordion_common.js b/tests/unit/accordion/accordion_common.js index ef24cf25ec5..858c2e88b4f 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": null, + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": null, + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": null, + "ui-accordion-header-icon": null, + "ui-accordion-icons": null + }, collapsible: false, disabled: false, event: "click", diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 8e0175aeb93..c61b6e26e3e 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -7,15 +7,25 @@ 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(); + expect( 11 ); + var element = $( selector ).accordion(), + headers = element.find( ".ui-accordion-header" ), + panels = element.find( ".ui-accordion-content" ); + ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); - equal( element.find( ".ui-accordion-header" ).length, 3, + ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" ); + 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().hasClass( "ui-accordion-content" ), "panel is .ui-accordion-content" ); + ok( headers.next().hasClass( "ui-widget-content" ), "panel is .ui-widget-content" ); + ok( headers.next().hasClass( "ui-corner-bottom" ), "panel is .ui-corner-bottom" ); + + 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/ui/accordion.js b/ui/accordion.js index 94643719731..2c5d9c5d6da 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -29,6 +29,16 @@ return $.widget( "ui.accordion", { options: { active: 0, animate: {}, + classes: { + "ui-accordion": null, + "ui-accordion-header": "ui-corner-top", + "ui-accordion-header-active": null, + "ui-accordion-header-collapsed": "ui-corner-all", + "ui-accordion-content": "ui-corner-bottom", + "ui-accordion-content-active": null, + "ui-accordion-header-icon": null, + "ui-accordion-icons": null + }, 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,18 @@ 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" ) ); } }, _destroyIcons: function() { this.headers - .removeClass( "ui-accordion-icons" ) + .removeClass( this._classes( "ui-accordion-icons" ) ) .children( ".ui-accordion-header-icon" ) .remove(); }, @@ -111,13 +121,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 +139,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 +273,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 +294,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 +450,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 +459,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 +469,7 @@ return $.widget( "ui.accordion", { clicked .next() - .addClass( "ui-accordion-content-active" ); + .addClass( this._classes( "ui-accordion-content-active" ) ); } }, @@ -568,10 +578,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 ) { From 544f9ff814bc5111fb2e5435cea7a01d34b99f09 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Wed, 24 Apr 2013 09:35:38 -0500 Subject: [PATCH 05/47] Autocomplete: use the _classes method. Fixes #7053 --- tests/unit/autocomplete/autocomplete_common.js | 5 +++++ tests/unit/autocomplete/autocomplete_core.js | 9 +++++++++ ui/autocomplete.js | 15 ++++++++++----- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index 63b24d384b9..c1036388a64 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": null, + "ui-autocomplete-input": null, + "ui-autocomplete-loading": null + }, 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/ui/autocomplete.js b/ui/autocomplete.js index aa0e546334e..defd21f500e 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -32,6 +32,11 @@ $.widget( "ui.autocomplete", { options: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": null, + "ui-autocomplete-input": null, + "ui-autocomplete-loading": null + }, 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,7 +328,7 @@ $.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(); @@ -428,7 +433,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 +449,7 @@ $.widget( "ui.autocomplete", { this.pending--; if ( !this.pending ) { - this.element.removeClass( "ui-autocomplete-loading" ); + this.element.removeClass( this._classes( "ui-autocomplete-loading" ) ); } }, this ); }, From 3c52f199418c1a4708d8c96cb649bac93484012a Mon Sep 17 00:00:00 2001 From: David Petersen Date: Wed, 24 Apr 2013 13:30:48 -0500 Subject: [PATCH 06/47] Slider: use the _classes method. Fixes #7053 --- tests/unit/slider/slider_common.js | 9 ++++++ tests/unit/slider/slider_core.js | 19 +++++++++++++ ui/slider.js | 44 ++++++++++++++++-------------- 3 files changed, 52 insertions(+), 20 deletions(-) diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 6d7278de6a2..dda3f64d971 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": null, + "ui-slider-range-max": null, + "ui-slider-horizontal": null, + "ui-slider-vertical": null + }, 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..425c7bfc441 100644 --- a/tests/unit/slider/slider_core.js +++ b/tests/unit/slider/slider_core.js @@ -12,6 +12,25 @@ function handle() { // Slider Tests module( "slider: core" ); +test( "markup structure", function() { + expect( 9 ); + var element = $( "
    " ).slider({ range: true }), + handle = element.find( "span" ), + range = element.find( "div" ); + + ok( element.hasClass( "ui-slider" ), "main element is .ui-slider" ); + ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" ); + ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" ); + ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); + + ok( handle.hasClass( "ui-slider-handle" ), "handle is .ui-slider-handle" ); + ok( handle.hasClass( "ui-corner-all" ), "handle is .ui-corner-all" ); + + ok( range.hasClass( "ui-slider-range" ), "range is .ui-slider-range" ); + ok( range.hasClass( "ui-widget-header" ), "range is .ui-widget-header" ); + ok( range.hasClass( "ui-corner-all" ), "range is .ui-corner-all" ); +}); + test( "keydown HOME on handle sets value to min", function() { expect( 2 ); element = $( "
    " ); diff --git a/ui/slider.js b/ui/slider.js index 6d97f3c6939..0469022d3c6 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -31,6 +31,15 @@ return $.widget( "ui.slider", $.ui.mouse, { options: { animate: false, + classes: { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + "ui-slider-range": "ui-corner-all", + "ui-slider-range-min": null, + "ui-slider-range-max": null, + "ui-slider-horizontal": null, + "ui-slider-vertical": null + }, distance: 0, max: 100, min: 0, @@ -61,11 +70,9 @@ return $.widget( "ui.slider", $.ui.mouse, { this._calculateNewMax(); this.element - .addClass( "ui-slider" + - " ui-slider-" + this.orientation + + .addClass( this._classes( "ui-slider ui-slider-" + this.orientation ) + " ui-widget" + - " ui-widget-content" + - " ui-corner-all"); + " ui-widget-content" ); this._refresh(); this._setOption( "disabled", this.options.disabled ); @@ -83,8 +90,9 @@ return $.widget( "ui.slider", $.ui.mouse, { _createHandles: function() { var i, handleCount, options = this.options, - existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ), - handle = "", + existingHandles = this.element.find( ".ui-slider-handle" ) + .addClass( this._classes( "ui-slider-handle" ) + " ui-state-default" ), + handle = "", handles = []; handleCount = ( options.values && options.values.length ) || 1; @@ -123,15 +131,15 @@ return $.widget( "ui.slider", $.ui.mouse, { } if ( !this.range || !this.range.length ) { - this.range = $( "
    " ) + this.range = $( "
    " ) .appendTo( this.element ); - classes = "ui-slider-range" + + classes = this._classes( "ui-slider-range" ) + // note: this isn't the most fittingly semantic framework class for this element, // but worked best visually with a variety of themes - " ui-widget-header ui-corner-all"; + " ui-widget-header"; } else { - this.range.removeClass( "ui-slider-range-min ui-slider-range-max" ) + this.range.removeClass( this._classes( "ui-slider-range-min ui-slider-range-max" ) ) // Handle range switching from true to min/max .css({ "left": "", @@ -139,8 +147,8 @@ return $.widget( "ui.slider", $.ui.mouse, { }); } - this.range.addClass( classes + - ( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) ); + this.range.addClass( classes + " " + + this._classes( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) ); } else { if ( this.range ) { this.range.remove(); @@ -163,12 +171,8 @@ return $.widget( "ui.slider", $.ui.mouse, { } this.element - .removeClass( "ui-slider" + - " ui-slider-horizontal" + - " ui-slider-vertical" + - " ui-widget" + - " ui-widget-content" + - " ui-corner-all" ); + .removeClass( this._classes( "ui-slider ui-slider-horizontal ui-slider-vertical" ) + + " ui-widget ui-widget-content" ); this._mouseDestroy(); }, @@ -452,8 +456,8 @@ return $.widget( "ui.slider", $.ui.mouse, { case "orientation": this._detectOrientation(); this.element - .removeClass( "ui-slider-horizontal ui-slider-vertical" ) - .addClass( "ui-slider-" + this.orientation ); + .removeClass( this._classes( "ui-slider-horizontal ui-slider-vertical" ) ) + .addClass( this._classes( "ui-slider-" + this.orientation ) ); this._refreshValue(); // Reset positioning from previous orientation From b1c0f22561895631224b07198d9f74dbc27b7f1a Mon Sep 17 00:00:00 2001 From: David Petersen Date: Wed, 24 Apr 2013 13:46:22 -0500 Subject: [PATCH 07/47] Spinner: use the _classes method. Fixes #7053 --- tests/unit/spinner/spinner_common.js | 7 +++++++ tests/unit/spinner/spinner_core.js | 21 +++++++++++++++++++++ ui/spinner.js | 17 ++++++++++++----- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/tests/unit/spinner/spinner_common.js b/tests/unit/spinner/spinner_common.js index b494e3ca34d..ae9fce58faf 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": null, + "ui-spinner": "ui-corner-all", + "ui-spinner-button": null, + "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/ui/spinner.js b/ui/spinner.js index 263b29d3fbb..8d3d9421097 100644 --- a/ui/spinner.js +++ b/ui/spinner.js @@ -41,6 +41,13 @@ return $.widget( "ui.spinner", { defaultElement: "", widgetEventPrefix: "spin", options: { + classes: { + "ui-spinner-input": null, + "ui-spinner": "ui-corner-all", + "ui-spinner-button": null, + "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 "" + - "" + - ""; }, @@ -461,7 +468,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" ) From 43ec02b1c11fbed1284a899d0c57446773085fb7 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Wed, 24 Apr 2013 14:03:07 -0500 Subject: [PATCH 08/47] Progressbar: use the _classes method. Fixes #7053 --- tests/unit/progressbar/progressbar_common.js | 7 +++++++ tests/unit/progressbar/progressbar_core.js | 14 +++++++++++-- ui/progressbar.js | 22 ++++++++++++++------ 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/tests/unit/progressbar/progressbar_common.js b/tests/unit/progressbar/progressbar_common.js index 0768576f568..db0cdddc10d 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": null, + "ui-progressbar-indeterminate": null, + "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..138841eaa73 100644 --- a/tests/unit/progressbar/progressbar_core.js +++ b/tests/unit/progressbar/progressbar_core.js @@ -1,9 +1,19 @@ module( "progressbar: core" ); test( "markup structure", function() { - expect( 5 ); - var element = $( "#progressbar" ).progressbar(); + expect( 12 ); + var element = $( "#progressbar" ).progressbar(), + value = element.children().eq( 0 ); ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" ); + ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" ); + ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" ); + ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); + ok( !value.hasClass( "ui-progressbar-complete" ), "value is not .ui-progressbar-complete" ); + ok( !value.hasClass( "ui-corner-right" ), "value is not .ui-corner-right" ); + element.progressbar( "option", "value", 100 ); + ok( value.hasClass( "ui-progressbar-complete" ), "value is .ui-progressbar-complete" ); + ok( value.hasClass( "ui-corner-right" ), "value is .ui-corner-right" ); + ok( !element.hasClass( "ui-progressbar-indeterminate" ), "main element is not .ui-progressbar-indeterminate" ); equal( element.children().length, 1, "main element contains one child" ); diff --git a/ui/progressbar.js b/ui/progressbar.js index ac8144d7361..b6bd83763a1 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": null, + "ui-progressbar-indeterminate": null, + "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" ) @@ -125,15 +133,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({ From 51d1d33fd1d7ad750f455134fbb8df64c3def968 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Thu, 25 Apr 2013 08:28:40 -0500 Subject: [PATCH 09/47] Menu: use the _classes method. Fixes #7053 --- tests/unit/menu/menu_common.js | 7 +++++++ tests/unit/menu/menu_core.js | 3 ++- ui/menu.js | 34 +++++++++++++++++++++------------- 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index ae0ab988785..b1c90b4a80b 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -1,5 +1,12 @@ TestHelpers.commonWidgetTests( "menu", { defaults: { + classes: { + "ui-menu": "ui-corner-all", + "ui-menu-icons": null, + "ui-menu-icon": null, + "ui-menu-item": null, + "ui-menu-divider": null + }, 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..55f9077a110 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -3,9 +3,10 @@ module( "menu: core" ); test( "markup structure", function() { - expect( 6 ); + expect( 7 ); var element = $( "#menu1" ).menu(); ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" ); + ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" ); element.children().each(function( index ) { ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" ); }); diff --git a/ui/menu.js b/ui/menu.js index 6d60e12a5bf..3c9d016648d 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -30,6 +30,13 @@ return $.widget( "ui.menu", { defaultElement: "
      ", delay: 300, options: { + classes: { + "ui-menu": "ui-corner-all", + "ui-menu-icons": null, + "ui-menu-icon": null, + "ui-menu-item": null, + "ui-menu-divider": null + }, icons: { submenu: "ui-icon-caret-1-e" }, @@ -55,8 +62,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 +162,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 +174,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" ) .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 +191,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 +295,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, @@ -297,9 +305,9 @@ return $.widget( "ui.menu", { .each(function() { var menu = $( this ), item = menu.prev(), - submenuCaret = $( "" ) - .addClass( "ui-menu-icon ui-icon " + icon ) - .data( "ui-menu-submenu-caret", true ); + submenuCarat = $( "" ) + .addClass( that._classes( "ui-menu-icon" ) + " ui-icon " + icon ) + .data( "ui-menu-submenu-carat", true ); item .attr( "aria-haspopup", "true" ) @@ -314,16 +322,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, From 0aa2e1fed758311d398774f3e5056e5e1b74216b Mon Sep 17 00:00:00 2001 From: David Petersen Date: Thu, 25 Apr 2013 09:50:51 -0500 Subject: [PATCH 10/47] Tooltip: use the _classes method. Fixes #7053 --- tests/unit/tooltip/tooltip.html | 3 + tests/unit/tooltip/tooltip_common.js | 5 +- .../unit/tooltip/tooltip_common_deprecated.js | 25 +++++++++ tests/unit/tooltip/tooltip_deprecated.html | 55 +++++++++++++++++++ tests/unit/tooltip/tooltip_deprecated.js | 16 ++++++ tests/unit/tooltip/tooltip_options.js | 8 --- ui/tooltip.js | 30 ++++++++-- 7 files changed, 128 insertions(+), 14 deletions(-) create mode 100644 tests/unit/tooltip/tooltip_common_deprecated.js create mode 100644 tests/unit/tooltip/tooltip_deprecated.html create mode 100644 tests/unit/tooltip/tooltip_deprecated.js 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..01a4225820f 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": null + }, 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..cad4a28f8b1 --- /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": null + }, + 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..29a4b64284c --- /dev/null +++ b/tests/unit/tooltip/tooltip_deprecated.html @@ -0,0 +1,55 @@ + + + + + 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/ui/tooltip.js b/ui/tooltip.js index 180c9f8e24c..347c0bb8a17 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": null + }, 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 @@ -404,12 +407,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 +460,22 @@ return $.widget( "ui.tooltip", { } }); +// DEPRECATED +if ( $.uiBackCompat ) { + + // 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; + })); From 9562d7a852f3d9d8927e4dbe34ebb85c6f3860b9 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Sat, 23 Aug 2014 17:41:03 -0500 Subject: [PATCH 11/47] Selectmenu: use the _classes method. Fixes #7053 --- tests/unit/selectmenu/selectmenu_common.js | 9 ++++++ tests/unit/selectmenu/selectmenu_core.js | 18 ++++++++++++ ui/selectmenu.js | 32 ++++++++++++++-------- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js index 10073fe97be..da7388eab69 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": null, + "ui-selectmenu-menu": null, + "ui-selectmenu-optgroup": null, + "ui-selectmenu-open": null + }, 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..b3d0790e2bc 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -2,6 +2,24 @@ module( "selectmenu: core" ); +test( "markup structure", function() { + var element = $( "#files" ).selectmenu(), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ), + menuWrap = menu.parent(); + + expect( 7 ); + + ok( button.hasClass( "ui-selectmenu-button" ), "button is .ui-selectmenu-button" ); + ok( button.hasClass( "ui-selectmenu-button-closed" ), "button is .ui-selectmenu-button-closed" ); + ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" ); + ok( button.hasClass( "ui-widget" ), "button is .ui-widget" ); + ok( button.hasClass( "ui-state-default" ), "button is .ui-state-default" ); + + 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/ui/selectmenu.js b/ui/selectmenu.js index 0859a2c2c1c..d504b27a9fd 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", { defaultElement: "