jQuery UI Dialog Test Suite

") - .addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " + - this.options.dialogClass ) .hide() .attr({ // Setting tabIndex makes the div focusable @@ -337,6 +349,8 @@ return $.widget( "ui.dialog", { }) .appendTo( this._appendTo() ); + this._addClass( this.uiDialog, "ui-dialog", "ui-widget ui-widget-content ui-front" ); + this._on( this.uiDialog, { keydown: function( event ) { if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && @@ -384,8 +398,6 @@ return $.widget( "ui.dialog", { }, _createTitlebar: function() { - var uiDialogTitle; - this.uiDialogTitlebar = $( "

" ) .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) .prependTo( this.uiDialog ); @@ -412,8 +424,9 @@ return $.widget( "ui.dialog", { }, text: false }) - .addClass( "ui-dialog-titlebar-close" ) .appendTo( this.uiDialogTitlebar ); + + this._addClass( this.uiDialogTitlebarClose, "ui-dialog-titlebar-close" ); this._on( this.uiDialogTitlebarClose, { click: function( event ) { event.preventDefault(); @@ -421,14 +434,15 @@ return $.widget( "ui.dialog", { } }); - uiDialogTitle = $( "" ) + this.uiDialogTitle = $( "" ) .uniqueId() - .addClass( "ui-dialog-title" ) .prependTo( this.uiDialogTitlebar ); - this._title( uiDialogTitle ); + + this._addClass( this.uiDialogTitle, "ui-dialog-title" ); + this._title( this.uiDialogTitle ); this.uiDialog.attr({ - "aria-labelledby": uiDialogTitle.attr( "id" ) + "aria-labelledby": this.uiDialogTitle.attr( "id" ) }); }, @@ -440,13 +454,15 @@ return $.widget( "ui.dialog", { }, _createButtonPane: function() { - this.uiDialogButtonPane = $( "

" ) - .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); + this.uiDialogButtonPane = $( "

" ); + this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane", + "ui-widget-content ui-helper-clearfix" ); this.uiButtonSet = $( "

" ) - .addClass( "ui-dialog-buttonset" ) .appendTo( this.uiDialogButtonPane ); + this._addClass( this.uiButtonSet, "ui-dialog-buttonset" ); + this._createButtons(); }, @@ -459,7 +475,7 @@ return $.widget( "ui.dialog", { this.uiButtonSet.empty(); if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) { - this.uiDialog.removeClass( "ui-dialog-buttons" ); + this._removeClass( this.uiDialog, "ui-dialog-buttons" ); return; } @@ -485,7 +501,7 @@ return $.widget( "ui.dialog", { .button( buttonOptions ) .appendTo( that.uiButtonSet ); }); - this.uiDialog.addClass( "ui-dialog-buttons" ); + this._addClass( this.uiDialog, "ui-dialog-buttons" ); this.uiDialogButtonPane.appendTo( this.uiDialog ); }, @@ -505,7 +521,7 @@ return $.widget( "ui.dialog", { handle: ".ui-dialog-titlebar", containment: "document", start: function( event, ui ) { - $( this ).addClass( "ui-dialog-dragging" ); + that._addClass( $( this ), "ui-dialog-dragging" ); that._blockFrames(); that._trigger( "dragStart", event, filteredUi( ui ) ); }, @@ -522,7 +538,7 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-dragging" ); + that._removeClass( $( this ), "ui-dialog-dragging" ); that._unblockFrames(); that._trigger( "dragStop", event, filteredUi( ui ) ); } @@ -559,7 +575,7 @@ return $.widget( "ui.dialog", { minHeight: this._minHeight(), handles: resizeHandles, start: function( event, ui ) { - $( this ).addClass( "ui-dialog-resizing" ); + that._addClass( $( this ), "ui-dialog-resizing" ); that._blockFrames(); that._trigger( "resizeStart", event, filteredUi( ui ) ); }, @@ -579,7 +595,7 @@ return $.widget( "ui.dialog", { "top" + (top >= 0 ? "+" : "") + top, of: that.window }; - $( this ).removeClass( "ui-dialog-resizing" ); + that._removeClass( $( this ), "ui-dialog-resizing" ); that._unblockFrames(); that._trigger( "resizeStop", event, filteredUi( ui ) ); } @@ -667,12 +683,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,8 +851,9 @@ return $.widget( "ui.dialog", { } this.overlay = $( "

" ) - .addClass( "ui-widget-overlay ui-front" ) .appendTo( this._appendTo() ); + + this._addClass( this.overlay, "ui-widget-overlay", "ui-front" ); this._on( this.overlay, { mousedown: "_keepFocus" }); @@ -872,4 +883,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; + })); From 43d42d87b3ebcbb990f72f9fb52cfe1274dbbdc6 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:24:44 -0500 Subject: [PATCH 05/11] Menu: Add classes option --- tests/unit/menu/menu_common.js | 8 +++++ tests/unit/menu/menu_core.js | 2 +- ui/menu.js | 64 ++++++++++++++++++++-------------- 3 files changed, 47 insertions(+), 27 deletions(-) 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/ui/menu.js b/ui/menu.js index 6d60e12a5bf..8a9322dd3c4 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -30,6 +30,14 @@ return $.widget( "ui.menu", { defaultElement: "

Date: Wed, 3 Dec 2014 11:25:32 -0500 Subject: [PATCH 06/11] Progressbar: Add classes option --- tests/unit/progressbar/progressbar_common.js | 7 +++++ tests/unit/progressbar/progressbar_core.js | 23 +++++++++------ ui/progressbar.js | 30 +++++++++++++------- 3 files changed, 42 insertions(+), 18 deletions(-) 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..7f0fc3a4723 100644 --- a/tests/unit/progressbar/progressbar_core.js +++ b/tests/unit/progressbar/progressbar_core.js @@ -1,23 +1,30 @@ 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.ui-corner-left.ui-widget-header" ), + "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/ui/progressbar.js b/ui/progressbar.js index ac8144d7361..1c66f0aa7d1 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, @@ -40,29 +47,28 @@ return $.widget( "ui.progressbar", { // Constrain initial value this.oldValue = this.options.value = this._constrainedValue(); - this.element - .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) - .attr({ + this.element.attr({ // Only set static values, aria-valuenow and aria-valuemax are // set inside _refreshValue() role: "progressbar", "aria-valuemin": this.min }); + this._addClass( "ui-progressbar", "ui-widget ui-widget-content" ); - this.valueDiv = $( "

" ) - .appendTo( this.element ); - + this.valueDiv = $( "

" ).appendTo( this.element ); + this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" ); this._refreshValue(); }, _destroy: function() { this.element - .removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) .removeAttr( "role" ) .removeAttr( "aria-valuemin" ) .removeAttr( "aria-valuemax" ) .removeAttr( "aria-valuenow" ); + this._removeClass( "ui-progressbar", "ui-widget ui-widget-content" ); + this.valueDiv.remove(); }, @@ -125,15 +131,19 @@ return $.widget( "ui.progressbar", { this.valueDiv .toggle( this.indeterminate || value > this.min ) - .toggleClass( "ui-corner-right", value === this.options.max ) .width( percentage.toFixed(0) + "%" ); - this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate ); + this[ ( ( value === this.options.max ) ? "_add" : "_remove" ) + "Class" ] + ( this.valueDiv, "ui-progressbar-complete" ); + + this[ ( this.indeterminate ? "_add" : "_remove" ) + "Class" ] + ( "ui-progressbar-indeterminate" ); if ( this.indeterminate ) { this.element.removeAttr( "aria-valuenow" ); if ( !this.overlayDiv ) { - this.overlayDiv = $( "

" ).appendTo( this.valueDiv ); + this.overlayDiv = $( "

" ).appendTo( this.valueDiv ); + this._addClass( this.overlayDiv, "ui-progressbar-overlay" ); } } else { this.element.attr({ From 4fb73519607561d6f4e40f1ff9fa046ac241c45f Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:26:46 -0500 Subject: [PATCH 07/11] Selectmenu: Add classes option --- tests/unit/selectmenu/selectmenu_common.js | 9 ++++ tests/unit/selectmenu/selectmenu_core.js | 15 ++++++ ui/selectmenu.js | 54 +++++++++++++++------- 3 files changed, 61 insertions(+), 17 deletions(-) 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..90574a4777c 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -2,6 +2,21 @@ 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/ui/selectmenu.js b/ui/selectmenu.js index 0859a2c2c1c..691c41afbe5 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,21 +210,28 @@ return $.widget( "ui.spinner", { _draw: function() { var uiSpinner = this.uiSpinner = this.element - .addClass( "ui-spinner-input" ) .attr( "autocomplete", "off" ) .wrap( this._uiSpinnerHtml() ) .parent() // add buttons .append( this._buttonHtml() ); + this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" ); + this._addClass( "ui-spinner-input" ); + this.element.attr( "role", "spinbutton" ); // button bindings - this.buttons = uiSpinner.find( ".ui-spinner-button" ) + this.buttons = uiSpinner.find( "a" ) .attr( "tabIndex", -1 ) .button() + + // Right now button does not support classes once it does adjust this with classes .removeClass( "ui-corner-all" ); + this._addClass( this.buttons.eq( 0 ), "ui-spinner-button ui-spinner-up" ); + this._addClass( this.buttons.eq( 1 ), "ui-spinner-button ui-spinner-down" ); + // IE 6 doesn't understand height: 50% for the buttons // unless the wrapper has an explicit height if ( this.buttons.height() > Math.ceil( uiSpinner.height() * 0.5 ) && @@ -259,10 +273,10 @@ return $.widget( "ui.spinner", { _buttonHtml: function() { return "" + - "" + + "" + "▲" + "" + - "" + + "" + "▼" + ""; }, @@ -461,13 +475,14 @@ return $.widget( "ui.spinner", { _destroy: function() { this.element - .removeClass( "ui-spinner-input" ) .prop( "disabled", false ) .removeAttr( "autocomplete" ) .removeAttr( "role" ) .removeAttr( "aria-valuemin" ) .removeAttr( "aria-valuemax" ) .removeAttr( "aria-valuenow" ); + + this._removeClass( "ui-spinner-input" ); this.uiSpinner.replaceWith( this.element ); }, From ecf672b9a71d2d8f337511078bff65a5885981a4 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:28:56 -0500 Subject: [PATCH 10/11] Tabs: Add classes option --- tests/unit/tabs/tabs_common.js | 10 +++++ tests/unit/tabs/tabs_core.js | 29 +++++++++--- tests/unit/tabs/tabs_methods.js | 16 +++++++ tests/unit/tabs/tabs_options.js | 9 +++- ui/tabs.js | 78 +++++++++++++++++---------------- 5 files changed, 98 insertions(+), 44 deletions(-) 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..26f7aecf37e 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" ), "tabs have 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,20 @@ 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..cdc3a1719fe 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", @@ -69,9 +79,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 ); + this._addClass( "ui-tabs", "ui-widget ui-widget-content" ); + this[ ( options.collapsible ? "_add" : "_remove" ) + "Class" ]( "ui-tabs-collapsible" ); this._processTabs(); options.active = this._initialActive(); @@ -278,7 +287,7 @@ return $.widget( "ui.tabs", { this._super( key, value); if ( key === "collapsible" ) { - this.element.toggleClass( "ui-tabs-collapsible", value ); + this[ ( value ? "_add" : "_remove" ) + "Class" ]( "ui-tabs-collapsible" ); // Setting collapsible: false while collapsed; open first panel if ( !value && this.options.active === false ) { this._activate( 0 ); @@ -354,12 +363,13 @@ return $.widget( "ui.tabs", { this.tabs.eq( 0 ).attr( "tabIndex", 0 ); } else { this.active - .addClass( "ui-tabs-active ui-state-active" ) .attr({ "aria-selected": "true", "aria-expanded": "true", tabIndex: 0 }); + + this._addClass( this.active, "ui-tabs-active", "ui-state-active" ); this._getPanelForTab( this.active ) .show() .attr({ @@ -374,12 +384,13 @@ return $.widget( "ui.tabs", { prevAnchors = this.anchors, prevPanels = this.panels; - this.tablist = this._getList() - .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) - .attr( "role", "tablist" ) + this.tablist = this._getList().attr( "role", "tablist" ); + + this._addClass( this.tablist, "ui-tabs-nav", + "ui-helper-reset ui-helper-clearfix ui-widget-header" ); // Prevent users from focusing disabled tabs via click - .delegate( "> li", "mousedown" + this.eventNamespace, function( event ) { + this.tablist.delegate( "> li", "mousedown" + this.eventNamespace, function( event ) { if ( $( this ).is( ".ui-state-disabled" ) ) { event.preventDefault(); } @@ -398,21 +409,20 @@ return $.widget( "ui.tabs", { }); this.tabs = this.tablist.find( "> li:has(a[href])" ) - .addClass( "ui-state-default ui-corner-top" ) .attr({ role: "tab", tabIndex: -1 }); + this._addClass( this.tabs, "ui-tab", "ui-state-default" ); this.anchors = this.tabs.map(function() { return $( "a", this )[ 0 ]; }) - .addClass( "ui-tabs-anchor" ) .attr({ role: "presentation", tabIndex: -1 }); - + this._addClass( this.anchors, "ui-tabs-anchor" ); this.panels = $(); this.anchors.each(function( i, anchor ) { @@ -453,9 +463,8 @@ return $.widget( "ui.tabs", { panel.attr( "aria-labelledby", anchorId ); }); - this.panels - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) - .attr( "role", "tabpanel" ); + this.panels.attr( "role", "tabpanel" ); + this._addClass( this.panels, "ui-tabs-panel", "ui-widget-content" ); // Avoid memory leaks (#10056) if ( prevTabs ) { @@ -471,10 +480,7 @@ return $.widget( "ui.tabs", { }, _createPanel: function( id ) { - return $( "

" ) - .attr( "id", id ) - .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) - .data( "ui-tabs-destroy", true ); + return $( "

" ).attr( "id", id ).data( "ui-tabs-destroy", true ); }, _setupDisabled: function( disabled ) { @@ -621,7 +627,7 @@ return $.widget( "ui.tabs", { } function show() { - eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); + that._addClass( eventData.newTab.closest( "li" ), "ui-tabs-active", "ui-state-active" ); if ( toShow.length && that.options.show ) { that._show( toShow, that.options.show, complete ); @@ -634,11 +640,13 @@ 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" ); + that._removeClass( eventData.oldTab.closest( "li" ), + "ui-tabs-active", "ui-state-active" ); show(); }); } else { - eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + this._removeClass( eventData.oldTab.closest( "li" ), + "ui-tabs-active", "ui-state-active" ); toHide.hide(); show(); } @@ -704,31 +712,25 @@ 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.tablist - .removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) - .removeAttr( "role" ); + this._removeClass( "ui-tabs ui-tabs-collapsible", "ui-widget ui-widget-content" ); + this._removeClass( this.tablist, "ui-tabs-nav", + "ui-helper-reset ui-helper-clearfix ui-widget-header" ); + this._removeClass( this.anchors, "ui-tabs-anchor" ); - this.anchors - .removeClass( "ui-tabs-anchor" ) - .removeAttr( "role" ) - .removeAttr( "tabIndex" ) - .removeUniqueId(); + this.tablist.removeAttr( "role" ).unbind( this.eventNamespace ); - this.tablist.unbind( this.eventNamespace ); + this.anchors.removeAttr( "role" ).removeAttr( "tabIndex" ).removeUniqueId(); this.tabs.add( this.panels ).each(function() { if ( $.data( this, "ui-tabs-destroy" ) ) { $( 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" ) .removeAttr( "tabIndex" ) .removeAttr( "aria-live" ) .removeAttr( "aria-busy" ) @@ -737,6 +739,8 @@ return $.widget( "ui.tabs", { .removeAttr( "aria-hidden" ) .removeAttr( "aria-expanded" ) .removeAttr( "role" ); + that._removeClass( $( this ), "ui-tabs-active ui-tab ui-tabs-panel", + "ui-state-default ui-state-active ui-state-disabled ui-widget-content" ); } }); @@ -826,7 +830,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" ); + this._addClass( tab, "ui-tabs-loading" ); panel.attr( "aria-busy", "true" ); this.xhr @@ -846,7 +850,7 @@ return $.widget( "ui.tabs", { that.panels.stop( false, true ); } - tab.removeClass( "ui-tabs-loading" ); + that._removeClass( tab, "ui-tabs-loading" ); panel.removeAttr( "aria-busy" ); if ( jqXHR === that.xhr ) { From 769f68ee097aa9a4415556a153b019f18298febe Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:30:22 -0500 Subject: [PATCH 11/11] Tooltip: Add classes option --- 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 | 52 +++++++++++++++++++ tests/unit/tooltip/tooltip_deprecated.js | 16 ++++++ tests/unit/tooltip/tooltip_options.js | 8 --- tests/visual/tooltip/tooltip.html | 12 +++-- ui/tooltip.js | 36 +++++++++---- 8 files changed, 136 insertions(+), 21 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..67f4d0f1b71 100644 --- a/tests/unit/tooltip/tooltip_common.js +++ b/tests/unit/tooltip/tooltip_common.js @@ -1,6 +1,10 @@ TestHelpers.commonWidgetTests( "tooltip", { defaults: { content: function() {}, + classes: { + "ui-tooltip": "ui-corner-all", + "ui-tooltip-content": "" + }, disabled: false, hide: true, items: "[title]:not([disabled])", @@ -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/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 8d5364d783c..9ca69690e64 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,9 @@ // 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/tooltip.js b/ui/tooltip.js index 180c9f8e24c..149c9d61f11 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 @@ -402,15 +405,12 @@ 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 || "" ) ), + var tooltip = $( "

" ).attr( "role", "tooltip" ), + content = $( "

" ).appendTo( tooltip ), id = tooltip.uniqueId().attr( "id" ); - $( "

" ) - .addClass( "ui-tooltip-content" ) - .appendTo( tooltip ); + this._addClass( content, "ui-tooltip-content" ); + this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" ); tooltip.appendTo( this.document[0].body ); @@ -458,4 +458,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; + }));