From 133563a26f9d4f8680c2eac12fbd6111fe0edbe0 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:38:25 -0500 Subject: [PATCH 01/12] Widget: Make _addClass auto remove classes in destroy --- ui/widget.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/ui/widget.js b/ui/widget.js index f05f8c5b2e1..b2845df3597 100644 --- a/ui/widget.js +++ b/ui/widget.js @@ -292,7 +292,13 @@ $.Widget.prototype = { _init: $.noop, destroy: function() { + var that = this; this._destroy(); + + $.each( this.classObject, function( key, value ) { + that._removeClass( value, key ); + }); + // we can probably remove the unbind calls in 2.0 // all event bindings should go through this._on() this.element @@ -304,9 +310,7 @@ $.Widget.prototype = { this.widget() .unbind( this.eventNamespace ) .removeAttr( "aria-disabled" ) - .removeClass( - this.widgetFullName + "-disabled " + - "ui-state-disabled" ); + .removeClass( this.widgetFullName + "-disabled " + "ui-state-disabled" ); // clean up events and states this.bindings.unbind( this.eventNamespace ); @@ -401,20 +405,19 @@ $.Widget.prototype = { }, _constructClasses: function( element, keys, add, object ) { - var i, + var i, current, full = [], keyArray = keys.split( " " ); object = object || this.options.classes; for ( i = 0; i < keyArray.length; i++ ) { - this.classObject[ keyArray[ i ] ] = this.classObject[ keyArray[ i ] ] || $(); - this.classObject[ keyArray[ i ] ][ add ? "add" : "filter" ]( element ); - + current = this.classObject[ keyArray[ i ] ]; + this.classObject[ keyArray[ i ] ] = this.classObject[ keyArray[ i ] ] ? this.classObject[ keyArray[ i ] ].add( element ) : $().add( element ); full.push( keyArray[ i ] ); if ( this.options.classes[ keyArray[ i ] ] ) { - full.push( this.options.classes[ keyArray[ i ] ] ); + full.push( object[ keyArray[ i ] ] ); } } return full.join( " " ); From ba232aaa7815c89db2ee191ebd6f778956432533 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:39:41 -0500 Subject: [PATCH 02/12] Accordion: Implement new _addClass api --- ui/accordion.js | 52 ++++++++++++++++++++++--------------------------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index a76de1e34eb..7b301404c3a 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -72,7 +72,7 @@ return $.widget( "ui.accordion", { _create: function() { var options = this.options; this.prevShow = this.prevHide = $(); - this._addClass( "ui-accordion", "ui-widget ui-helper-reset" ); + this._addClass( "ui-accordion ui-widget ui-helper-reset" ); // ARIA this.element.attr( "role", "tablist" ); @@ -98,15 +98,15 @@ return $.widget( "ui.accordion", { }, _createIcons: function() { - var icon, + var icon, children, icons = this.options.icons; if ( icons ) { icon = $( "" ); - this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header ); + this._addClass( icon, "ui-accordion-header-icon ui-icon " + icons.header ); icon.prependTo( this.headers ); - this.active.children( ".ui-accordion-header-icon" ) - .removeClass( icons.header ) - .addClass( icons.activeHeader ); + children = this.active.children( ".ui-accordion-header-icon" ) + this._removeClass( children, icons.header ); + this._addClass( children, icons.activeHeader ); this._addClass( this.headers, "ui-accordion-icons" ); } }, @@ -121,12 +121,9 @@ return $.widget( "ui.accordion", { var contents; // clean up main element - this._removeClass( "ui-accordion", "ui-widget ui-helper-reset" ); this.element.removeAttr( "role" ); // clean up headers - this._removeClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed ui-accordion-header-active", - "ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ); this.headers .removeAttr( "role" ) .removeAttr( "aria-expanded" ) @@ -144,8 +141,6 @@ return $.widget( "ui.accordion", { .removeAttr( "aria-hidden" ) .removeAttr( "aria-labelledby" ) .removeUniqueId(); - this._removeClass( contents, "ui-accordion-content ui-accordion-content-active", - "ui-helper-reset ui-widget-content ui-state-disabled" ); if ( this.options.heightStyle !== "content" ) { contents.css( "height", "" ); @@ -183,11 +178,10 @@ return $.widget( "ui.accordion", { // #5332 - opacity doesn't cascade to positioned elements in IE // so we need to add the disabled class to the headers and panels if ( key === "disabled" ) { - this.element - .toggleClass( "ui-state-disabled", !!value ) - .attr( "aria-disabled", value ); - this.headers.add( this.headers.next() ) - .toggleClass( "ui-state-disabled", !!value ); + this.element.attr( "aria-disabled", value ); + + this[ ( !!value ? "_add": "_remove" ) + "Class" ]( "ui-state-disabled" ); + this[ ( !!value ? "_add": "_remove" ) + "Class" ]( this.headers.add( this.headers.next() ), "ui-state-disabled" ); } }, @@ -273,12 +267,10 @@ return $.widget( "ui.accordion", { prevPanels = this.panels; this.headers = this.element.find( this.options.header ); - this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed", - "ui-state-default" ); + this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed ui-state-default" ); this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide(); - this._addClass( this.panels, "ui-accordion-content", - "ui-helper-reset ui-widget-content" ); + this._addClass( this.panels, "ui-accordion-content ui-helper-reset ui-widget-content" ); // Avoid memory leaks (#10056) if ( prevPanels ) { @@ -294,7 +286,7 @@ return $.widget( "ui.accordion", { parent = this.element.parent(); this.active = this._findActive( options.active ); - this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" ); + this._addClass( this.active, "ui-accordion-header-active ui-state-active" ); this._removeClass( this.active, "ui-accordion-header-collapsed" ); this._addClass( this.active.next(), "ui-accordion-content-active" ); this.active.next().show(); @@ -418,6 +410,8 @@ return $.widget( "ui.accordion", { _eventHandler: function( event ) { var options = this.options, active = this.active, + activeChildren = null, + clickedChildren = null, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, @@ -449,20 +443,20 @@ return $.widget( "ui.accordion", { // switch classes // corner classes on the previously active header stay after the animation - this._removeClass( active, "ui-accordion-header-active", "ui-state-active" ); + this._removeClass( active, "ui-accordion-header-active ui-state-active" ); if ( options.icons ) { - active.children( ".ui-accordion-header-icon" ) - .removeClass( options.icons.activeHeader ) - .addClass( options.icons.header ); + activeChildren = active.children( ".ui-accordion-header-icon" ); + this._removeClass( activeChildren, options.icons.activeHeader ); + this._addClass( activeChildren, options.icons.header ); } if ( !clickedIsActive ) { this._removeClass( clicked, "ui-accordion-header-collapsed" ); - this._addClass( clicked, "ui-accordion-header-active", "ui-state-active" ); + this._addClass( clicked, "ui-accordion-header-active ui-state-active" ); if ( options.icons ) { - clicked.children( ".ui-accordion-header-icon" ) - .removeClass( options.icons.header ) - .addClass( options.icons.activeHeader ); + clickedChildren = clicked.children( ".ui-accordion-header-icon" ); + this._removeClass( clickedChildren, options.icons.header ); + this._addClass( clickedChildren, options.icons.activeHeader ); } this._addClass( clicked.next(), "ui-accordion-content-active" ); From d21cc3d0dc5192f0cf287a1aa383f56489f88311 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:40:14 -0500 Subject: [PATCH 03/12] Dialog: Implement new _addClass api --- ui/dialog.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/ui/dialog.js b/ui/dialog.js index 63421c8a3bf..b009ac6387c 100644 --- a/ui/dialog.js +++ b/ui/dialog.js @@ -128,7 +128,7 @@ $.widget( "ui.dialog", { .removeAttr( "title" ) .appendTo( this.uiDialog ); - this._addClass( "ui-dialog-content", "ui-widget-content" ); + this._addClass( "ui-dialog-content ui-widget-content" ); this._createTitlebar(); this._createButtonPane(); @@ -171,8 +171,6 @@ $.widget( "ui.dialog", { // Without detaching first, the following becomes really slow .detach(); - this._removeClass( "ui-dialog-content", "ui-widget-content" ); - this.uiDialog.stop( true, true ).remove(); if ( this.originalTitle ) { @@ -349,7 +347,7 @@ $.widget( "ui.dialog", { }) .appendTo( this._appendTo() ); - this._addClass( this.uiDialog, "ui-dialog", "ui-widget ui-widget-content ui-front" ); + this._addClass( this.uiDialog, "ui-dialog ui-widget ui-widget-content ui-front" ); this._on( this.uiDialog, { keydown: function( event ) { @@ -398,9 +396,11 @@ $.widget( "ui.dialog", { }, _createTitlebar: function() { - this.uiDialogTitlebar = $( "
" ) - .addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ) - .prependTo( this.uiDialog ); + this.uiDialogTitlebar = $( "
" ).prependTo( this.uiDialog ); + + this._addClass( this.uiDialogTitlebar, + "ui-dialog-titlebar ui-widget-header ui-helper-clearfix" ); + this._on( this.uiDialogTitlebar, { mousedown: function( event ) { // Don't prevent click on close button (#8838) @@ -455,8 +455,7 @@ $.widget( "ui.dialog", { _createButtonPane: function() { this.uiDialogButtonPane = $( "
" ); - this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane", - "ui-widget-content ui-helper-clearfix" ); + this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ); this.uiButtonSet = $( "
" ) .appendTo( this.uiDialogButtonPane ); @@ -853,7 +852,7 @@ $.widget( "ui.dialog", { this.overlay = $( "
" ) .appendTo( this._appendTo() ); - this._addClass( this.overlay, "ui-widget-overlay", "ui-front" ); + this._addClass( this.overlay, "ui-widget-overlay ui-front" ); this._on( this.overlay, { mousedown: "_keepFocus" }); From 6da53a6f4bb793c9ad4126d0e10df3079e641269 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:40:39 -0500 Subject: [PATCH 04/12] Menu: Implement new _addClass api --- ui/menu.js | 92 +++++++++++++++++++++++++----------------------------- 1 file changed, 43 insertions(+), 49 deletions(-) diff --git a/ui/menu.js b/ui/menu.js index 8a9322dd3c4..e7ce0115bb5 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -36,7 +36,8 @@ return $.widget( "ui.menu", { "ui-menu-icon": "", "ui-menu-item": "", "ui-menu-divider": "", - "ui-menu-item-wrapper": "" + "ui-menu-item-wrapper": "", + "ui-menu-submenu-caret": "" }, icons: { submenu: "ui-icon-caret-1-e" @@ -67,13 +68,12 @@ return $.widget( "ui.menu", { role: this.options.role, tabIndex: 0 }); - this._addClass( "ui-menu", "ui-widget ui-widget-content" ); - this[ "_" + ( !!this.element.find( ".ui-icon" ).length ? "add" : "remove" ) + + this._addClass( "ui-menu ui-widget ui-widget-content" ); + this[ ( !!this.element.find( ".ui-icon" ).length ? "_add" : "_remove" ) + "Class" ]( "ui-menu-icons" ); if ( this.options.disabled ) { - this.element - .addClass( "ui-state-disabled" ) - .attr( "aria-disabled", "true" ); + this._addClass( "ui-state-disabled" ); + this.element.attr( "aria-disabled", "true" ); } this._on({ @@ -118,7 +118,7 @@ return $.widget( "ui.menu", { var target = $( event.currentTarget ); // Remove ui-state-active class from siblings of the newly focused menu item // to avoid a jump caused by adjacent elements both having a class with a border - target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + this._removeClass( target.siblings().children( ".ui-state-active" ), "ui-state-active" ); this.focus( event, target ); }, @@ -159,8 +159,17 @@ return $.widget( "ui.menu", { }, _destroy: function() { + var items = this.element.find( ".ui-menu-item" ) + .removeAttr( "role" ) + .removeAttr( "aria-disabled" ), + submenus = items.children( ".ui-menu-item-wrapper" ) + .removeUniqueId() + .removeAttr( "tabIndex" ) + .removeAttr( "role" ) + .removeAttr( "aria-haspopup" ); + // Destroy (sub)menus - var menu = this.element + this.element .removeAttr( "aria-activedescendant" ) .find( ".ui-menu" ).addBack() .removeAttr( "role" ) @@ -171,15 +180,6 @@ return $.widget( "ui.menu", { .removeAttr( "aria-disabled" ) .removeUniqueId() .show(), - items = this.element.find( ".ui-menu-item" ) - .removeClass( "ui-menu-item" ) - .removeAttr( "role" ) - .removeAttr( "aria-disabled" ), - submenus = items.children( ".ui-menu-item-wrapper" ) - .removeUniqueId() - .removeAttr( "tabIndex" ) - .removeAttr( "role" ) - .removeAttr( "aria-haspopup" ); submenus.children().each(function() { var elem = $( this ); @@ -187,14 +187,6 @@ return $.widget( "ui.menu", { elem.remove(); } }); - - this._removeClass( menu, "ui-menu ui-menu-icons", "ui-widget ui-widget-content ui-front" ); - this._removeClass( items, "ui-menu-item" ); - this._removeClass( submenus, "ui-menu-item-wrapper", "ui-state-hover ui-state" ); - - // Destroy menu dividers - this._removeClass( this.element.find( ".ui-menu-divider" ), "ui-menu-divider", - "ui-widget-content" ); }, _keydown: function( event ) { @@ -293,7 +285,8 @@ return $.widget( "ui.menu", { icon = this.options.icons.submenu, submenus = this.element.find( this.options.menus ); - this.element.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length ); + this[ ( !!this.element.find( ".ui-icon" ).length ? "_add" : "_remove" ) + + "Class" ]( "ui-menu-icons" ); // Initialize nested menus submenus.filter( ":not(.ui-menu)" ) @@ -306,9 +299,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 ); + submenuCaret = $( "" ).data( "ui-menu-submenu-caret", true ); + + that._addClass( submenuCaret, "ui-menu-icon ui-icon " + icon ); item .attr( "aria-haspopup", "true" ) @@ -316,8 +309,8 @@ return $.widget( "ui.menu", { menu.attr( "aria-labelledby", item.attr( "id" ) ); }); - this._addClass( submenus.filter( ":not(.ui-menu)" ), "ui-menu", - "ui-widget ui-widget-content ui-front" ); + this._addClass( submenus.filter( ":not(.ui-menu)" ), + "ui-menu ui-widget ui-widget-content ui-front" ); menus = submenus.add( this.element ); items = menus.find( this.options.items ); @@ -326,7 +319,7 @@ return $.widget( "ui.menu", { items.not( ".ui-menu-item" ).each(function() { var item = $( this ); if ( that._isDivider( item ) ) { - that._addClass( item, "ui-menu-divider", "ui-widget-content" ); + that._addClass( item, "ui-menu-divider ui-widget-content" ); } }); @@ -360,28 +353,27 @@ return $.widget( "ui.menu", { _setOption: function( key, value ) { if ( key === "icons" ) { - this.element.find( ".ui-menu-icon" ) - .removeClass( this.options.icons.submenu ) - .addClass( value.submenu ); + var icons = this.element.find( ".ui-menu-icon" ); + this._removeClass( icons, this.options.icons.submenu ); + this._addClass( icons, value.submenu ); } if ( key === "disabled" ) { - this.element - .toggleClass( "ui-state-disabled", !!value ) - .attr( "aria-disabled", value ); + this.element.attr( "aria-disabled", value ); + this[ ( !!value ? "_add" : "_remove" ) + "Class" ]( "ui-state-disabled", !!value ); } this._super( key, value ); }, focus: function( event, item ) { - var nested, focused; + var nested, focused, highlight; this.blur( event, event && event.type === "focus" ); this._scrollIntoView( item ); this.active = item.first(); - focused = this.active.children( ".ui-menu-item-wrapper" ) - .addClass( "ui-state-focus" ) - .removeClass( "ui-state-active" ); + focused = this.active.children( ".ui-menu-item-wrapper" ); + this._addClass( focused, "ui-state-focus" ); + this._removeClass( focused, "ui-state-active" ); // Only update aria-activedescendant if there's a role // otherwise we assume focus is managed elsewhere @@ -390,11 +382,12 @@ return $.widget( "ui.menu", { } // Highlight active parent menu item, if any - this.active + highlight = this.active .parent() .closest( ".ui-menu-item" ) - .children( ".ui-menu-item-wrapper" ) - .addClass( "ui-state-active" ); + .children( ".ui-menu-item-wrapper" ); + + this._addClass( highlight, "ui-state-active" ); if ( event && event.type === "keydown" ) { this._close(); @@ -440,7 +433,7 @@ return $.widget( "ui.menu", { return; } - this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" ); + this._removeClass( this.active.children( ".ui-menu-item-wrapper" ), "ui-state-focus" ); this.active = null; this._trigger( "blur", event, { item: this.active } ); @@ -504,14 +497,15 @@ return $.widget( "ui.menu", { startMenu = this.active ? this.active.parent() : this.element; } - startMenu + var active = startMenu .find( ".ui-menu" ) .hide() .attr( "aria-hidden", "true" ) .attr( "aria-expanded", "false" ) .end() - .find( ".ui-state-active" ).not( ".ui-state-focus" ) - .removeClass( "ui-state-active" ); + .find( ".ui-state-active" ).not( ".ui-state-focus" ); + + this._removeClass( active, "ui-state-active" ); }, _closeOnDocumentClick: function( event ) { From 2fe0bcdbc3374e68a76f9b4000f45d92f9bb0803 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:41:04 -0500 Subject: [PATCH 05/12] Progressbar: Implement new _addClass api --- ui/progressbar.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/ui/progressbar.js b/ui/progressbar.js index 1c66f0aa7d1..9899e7e887d 100644 --- a/ui/progressbar.js +++ b/ui/progressbar.js @@ -53,10 +53,10 @@ return $.widget( "ui.progressbar", { role: "progressbar", "aria-valuemin": this.min }); - this._addClass( "ui-progressbar", "ui-widget ui-widget-content" ); + this._addClass( "ui-progressbar ui-widget ui-widget-content" ); this.valueDiv = $( "
" ).appendTo( this.element ); - this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" ); + this._addClass( this.valueDiv, "ui-progressbar-value ui-widget-header" ); this._refreshValue(); }, @@ -67,8 +67,6 @@ return $.widget( "ui.progressbar", { .removeAttr( "aria-valuemax" ) .removeAttr( "aria-valuenow" ); - this._removeClass( "ui-progressbar", "ui-widget ui-widget-content" ); - this.valueDiv.remove(); }, @@ -114,9 +112,8 @@ return $.widget( "ui.progressbar", { value = Math.max( this.min, value ); } if ( key === "disabled" ) { - this.element - .toggleClass( "ui-state-disabled", !!value ) - .attr( "aria-disabled", value ); + this.element.attr( "aria-disabled", value ); + this[ ( !!value ? "_add" : "_remove" ) + "Class" ]( "ui-state-disabled" ); } this._super( key, value ); }, From 3f4eab635396e03ece77fc8944eef27c636496cb Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:41:34 -0500 Subject: [PATCH 06/12] Selectmenu: Implement new _addClass api --- ui/selectmenu.js | 45 +++++++++++++++++++-------------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/ui/selectmenu.js b/ui/selectmenu.js index 691c41afbe5..75e0e49ff77 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -76,7 +76,8 @@ return $.widget( "ui.selectmenu", { }, _drawButton: function() { - var that = this, + var icon, + that = this, item = this._parseOption( this.element.find( "option:selected" ), this.element[ 0 ].selectedIndex @@ -107,13 +108,12 @@ return $.widget( "ui.selectmenu", { }) .insertAfter( this.element ); - this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed", - "ui-widget ui-state-default" ); + this._addClass( this.button, + "ui-selectmenu-button ui-selectmenu-button-closed ui-widget ui-state-default" ); - $( "", { - "class": "ui-icon " + this.options.icons.button - }) - .prependTo( this.button ); + icon = $( "" ).prependTo( this.button ); + + this._addClass( icon, "ui-icon " + this.options.icons.button ); this.buttonItem = this._renderButtonItem( item ) .appendTo( this.button ); @@ -146,13 +146,9 @@ return $.widget( "ui.selectmenu", { }); // Wrap menu - this.menuWrap = $( "
", { - "class": "ui-selectmenu-menu ui-front" - }) - .append( this.menu ) - .appendTo( this._appendTo() ); + this.menuWrap = $( "
" ).append( this.menu ).appendTo( this._appendTo() ); - this._addClass( this.menuWrap, "ui-selectmenu-menu", "ui-front" ); + this._addClass( this.menuWrap, "ui-selectmenu-menu ui-front" ); // Initialize menu widget this.menuInstance = this.menu @@ -255,7 +251,7 @@ return $.widget( "ui.selectmenu", { } else { // Menu clears focus on close, reset focus to selected item - this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" ); + this._removeClass( this.menu.find( ".ui-state-focus" ), "ui-state-focus" ); this.menuInstance.focus( null, this._getSelectedItem() ); } @@ -313,7 +309,7 @@ return $.widget( "ui.selectmenu", { text: item.optgroup }).appendTo( ul ); - that._addClass( li, "ui-selectmenu-optgroup", "ui-menu-divider" + + that._addClass( li, "ui-selectmenu-optgroup ui-menu-divider" + ( item.element.parent( "optgroup" ).prop( "disabled" ) ? " ui-state-disabled" : "" ) ); @@ -335,7 +331,7 @@ return $.widget( "ui.selectmenu", { }); if ( item.disabled ) { - li.addClass( "ui-state-disabled" ); + this._addClass( li, "ui-state-disabled" ); } this._setText( wrapper, item.label ); @@ -533,9 +529,10 @@ return $.widget( "ui.selectmenu", { _setOption: function( key, value ) { if ( key === "icons" ) { - this.button.find( "span.ui-icon" ) - .removeClass( this.options.icons.button ) - .addClass( value.button ); + var icon = this.button.find( "span.ui-icon" ); + + this._removeClass( icon, this.options.icons.button ); + this._addClass( icon, value.button ); } this._super( key, value ); @@ -546,9 +543,8 @@ return $.widget( "ui.selectmenu", { if ( key === "disabled" ) { this.menuInstance.option( "disabled", value ); - this.button - .toggleClass( "ui-state-disabled", value ) - .attr( "aria-disabled", value ); + this.button.attr( "aria-disabled", value ); + this[ ( value ? "_add" : "_remove" ) + "Class" ]( "ui-state-disabled", value ); this.element.prop( "disabled", value ); if ( value ) { @@ -585,10 +581,7 @@ return $.widget( "ui.selectmenu", { }, _toggleAttr: function() { - this.button - .toggleClass( "ui-corner-top", this.isOpen ) - .toggleClass( "ui-corner-all", !this.isOpen ) - .attr( "aria-expanded", this.isOpen ); + this.button.attr( "aria-expanded", this.isOpen ); this[ ( !this.isOpen ? "_add" : "_remove" ) + "Class" ] ( this.button, "ui-selectmenu-button-closed" ); From e61ab93c38ab3571f93c02eb516ba12e5243afcc Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:42:11 -0500 Subject: [PATCH 07/12] Slider: Implement new _addClass api --- ui/slider.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/ui/slider.js b/ui/slider.js index 7ca772fd9bc..e941f745e92 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -69,8 +69,8 @@ return $.widget( "ui.slider", $.ui.mouse, { this._mouseInit(); this._calculateNewMax(); - this._addClass( "ui-slider" + " ui-slider-" + this.orientation, - "ui-widget ui-widget-content ui-corner-all"); + this._addClass( "ui-slider" + " ui-slider-" + this.orientation + + " ui-widget ui-widget-content ui-corner-all"); this._refresh(); this._setOption( "disabled", this.options.disabled ); @@ -105,7 +105,7 @@ return $.widget( "ui.slider", $.ui.mouse, { this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) ); - this._addClass( this.handles, "ui-slider-handle", "ui-state-default" ); + this._addClass( this.handles, "ui-slider-handle ui-state-default" ); this.handle = this.handles.eq( 0 ); @@ -132,7 +132,7 @@ return $.widget( "ui.slider", $.ui.mouse, { this.range = $( "
" ) .appendTo( this.element ); - this._addClass( this.range, "ui-slider-range", "ui-widget-header" ); + this._addClass( this.range, "ui-slider-range ui-widget-header" ); } else { this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" ); // Handle range switching from true to min/max @@ -165,9 +165,6 @@ return $.widget( "ui.slider", $.ui.mouse, { this.range.remove(); } - this._removeClass( "ui-slider ui-slider-horizontal ui-slider-vertical", - " ui-widget ui-widget-content" ); - this._mouseDestroy(); }, @@ -208,9 +205,8 @@ return $.widget( "ui.slider", $.ui.mouse, { this._handleIndex = index; - closestHandle - .addClass( "ui-state-active" ) - .focus(); + closestHandle.focus(); + this._addClass( closestHandle, "ui-state-active" ); offset = closestHandle.offset(); mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" ); @@ -244,7 +240,7 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _mouseStop: function( event ) { - this.handles.removeClass( "ui-state-active" ); + this._removeClass( this.handles, "ui-state-active" ); this._mouseSliding = false; this._stop( event, this._handleIndex ); @@ -441,7 +437,7 @@ return $.widget( "ui.slider", $.ui.mouse, { } if ( key === "disabled" ) { - this.element.toggleClass( "ui-state-disabled", !!value ); + this[ ( !!value? "_add" : "_remove" ) + "Class" ]( "ui-state-disabled" ); } this._super( key, value ); @@ -630,7 +626,7 @@ return $.widget( "ui.slider", $.ui.mouse, { event.preventDefault(); if ( !this._keySliding ) { this._keySliding = true; - $( event.target ).addClass( "ui-state-active" ); + this._addClass( $( event.target ), "ui-state-active" ); allowed = this._start( event, index ); if ( allowed === false ) { return; @@ -687,7 +683,7 @@ return $.widget( "ui.slider", $.ui.mouse, { this._keySliding = false; this._stop( event, index ); this._change( event, index ); - $( event.target ).removeClass( "ui-state-active" ); + this._removeClass( $( event.target ), "ui-state-active" ); } } } From f49ec06047eac4e477eeb5b1b1bfc72e2e19ff56 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:42:32 -0500 Subject: [PATCH 08/12] Spinner: Implement new _addClass api --- ui/spinner.js | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/ui/spinner.js b/ui/spinner.js index 2e0f0d27006..3ae7e9b8283 100644 --- a/ui/spinner.js +++ b/ui/spinner.js @@ -216,7 +216,7 @@ return $.widget( "ui.spinner", { // add buttons .append( this._buttonHtml() ); - this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" ); + this._addClass( this.uiSpinner, "ui-spinner ui-widget ui-widget-content" ); this._addClass( "ui-spinner-input" ); this.element.attr( "role", "spinbutton" ); @@ -224,13 +224,15 @@ return $.widget( "ui.spinner", { // button bindings this.buttons = uiSpinner.find( "a" ) .attr( "tabIndex", -1 ) - .button() + .button(); // Right now button does not support classes once it does adjust this with classes - .removeClass( "ui-corner-all" ); + this._removeClass( this.buttons, "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" ); + this._addClass( this.buttons.first().find( "span span" ), "ui-icon " + this.options.icons.up ); + this._addClass( this.buttons.last().find( "span span" ), "ui-icon " + this.options.icons.down ); // IE 6 doesn't understand height: 50% for the buttons // unless the wrapper has an explicit height @@ -268,16 +270,16 @@ return $.widget( "ui.spinner", { }, _uiSpinnerHtml: function() { - return ""; + return ""; }, _buttonHtml: function() { return "" + "" + - "▲" + + "▲" + "" + "" + - "▼" + + "▼" + ""; }, @@ -385,8 +387,9 @@ return $.widget( "ui.spinner", { }, _setOption: function( key, value ) { + var prevValue, first, last; if ( key === "culture" || key === "numberFormat" ) { - var prevValue = this._parse( this.element.val() ); + prevValue = this._parse( this.element.val() ); this.options[ key ] = value; this.element.val( this._format( prevValue ) ); return; @@ -398,18 +401,19 @@ return $.widget( "ui.spinner", { } } if ( key === "icons" ) { - this.buttons.first().find( ".ui-icon" ) - .removeClass( this.options.icons.up ) - .addClass( value.up ); - this.buttons.last().find( ".ui-icon" ) - .removeClass( this.options.icons.down ) - .addClass( value.down ); + first = this.buttons.first().find( ".ui-icon" ); + this._removeClass( first, this.options.icons.up ); + this._addClass( first, value.up ); + last = this.buttons.last().find( ".ui-icon" ); + this._removeClass( last, this.options.icons.down ); + this._addClass( last, value.down ); } this._super( key, value ); if ( key === "disabled" ) { - this.widget().toggleClass( "ui-state-disabled", !!value ); + this[ ( !!value ? "_add" : "_remove" ) + "Class" ]( this.widget(), + "ui-state-disabled" ); this.element.prop( "disabled", !!value ); this.buttons.button( value ? "disable" : "enable" ); } @@ -482,7 +486,6 @@ return $.widget( "ui.spinner", { .removeAttr( "aria-valuemax" ) .removeAttr( "aria-valuenow" ); - this._removeClass( "ui-spinner-input" ); this.uiSpinner.replaceWith( this.element ); }, From b29b7ab090fbe0929d71d526021e84c2c0ae096e Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:42:56 -0500 Subject: [PATCH 09/12] Tabs: Implement new _addClass api --- ui/tabs.js | 33 +++++++++++---------------------- 1 file changed, 11 insertions(+), 22 deletions(-) diff --git a/ui/tabs.js b/ui/tabs.js index cdc3a1719fe..9f424a8b66a 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -79,7 +79,7 @@ return $.widget( "ui.tabs", { this.running = false; - this._addClass( "ui-tabs", "ui-widget ui-widget-content" ); + this._addClass( "ui-tabs ui-widget ui-widget-content" ); this[ ( options.collapsible ? "_add" : "_remove" ) + "Class" ]( "ui-tabs-collapsible" ); this._processTabs(); @@ -369,7 +369,7 @@ return $.widget( "ui.tabs", { tabIndex: 0 }); - this._addClass( this.active, "ui-tabs-active", "ui-state-active" ); + this._addClass( this.active, "ui-tabs-active ui-state-active" ); this._getPanelForTab( this.active ) .show() .attr({ @@ -386,8 +386,8 @@ return $.widget( "ui.tabs", { this.tablist = this._getList().attr( "role", "tablist" ); - this._addClass( this.tablist, "ui-tabs-nav", - "ui-helper-reset ui-helper-clearfix ui-widget-header" ); + this._addClass( this.tablist, + "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header" ); // Prevent users from focusing disabled tabs via click this.tablist.delegate( "> li", "mousedown" + this.eventNamespace, function( event ) { @@ -413,7 +413,7 @@ return $.widget( "ui.tabs", { role: "tab", tabIndex: -1 }); - this._addClass( this.tabs, "ui-tab", "ui-state-default" ); + this._addClass( this.tabs, "ui-tab ui-state-default" ); this.anchors = this.tabs.map(function() { return $( "a", this )[ 0 ]; @@ -464,7 +464,7 @@ return $.widget( "ui.tabs", { }); this.panels.attr( "role", "tabpanel" ); - this._addClass( this.panels, "ui-tabs-panel", "ui-widget-content" ); + this._addClass( this.panels, "ui-tabs-panel ui-widget-content" ); // Avoid memory leaks (#10056) if ( prevTabs ) { @@ -495,13 +495,9 @@ return $.widget( "ui.tabs", { // disable tabs for ( var i = 0, li; ( li = this.tabs[ i ] ); i++ ) { if ( disabled === true || $.inArray( i, disabled ) !== -1 ) { - $( li ) - .addClass( "ui-state-disabled" ) - .attr( "aria-disabled", "true" ); + this._addClass( $( li ).attr( "aria-disabled", "true" ), "ui-state-disabled" ); } else { - $( li ) - .removeClass( "ui-state-disabled" ) - .removeAttr( "aria-disabled" ); + this._removeClass( $( li ).removeAttr( "aria-disabled" ), "ui-state-disabled" ); } } @@ -627,7 +623,7 @@ return $.widget( "ui.tabs", { } function show() { - that._addClass( eventData.newTab.closest( "li" ), "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 ); @@ -641,12 +637,12 @@ return $.widget( "ui.tabs", { if ( toHide.length && this.options.hide ) { this._hide( toHide, this.options.hide, function() { that._removeClass( eventData.oldTab.closest( "li" ), - "ui-tabs-active", "ui-state-active" ); + "ui-tabs-active ui-state-active" ); show(); }); } else { this._removeClass( eventData.oldTab.closest( "li" ), - "ui-tabs-active", "ui-state-active" ); + "ui-tabs-active ui-state-active" ); toHide.hide(); show(); } @@ -712,15 +708,10 @@ return $.widget( "ui.tabs", { }, _destroy: function() { - var that = this; if ( this.xhr ) { this.xhr.abort(); } - 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.tablist.removeAttr( "role" ).unbind( this.eventNamespace ); @@ -739,8 +730,6 @@ 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" ); } }); From fe60fb5bf1603d9493378677c02eecda4586587c Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:43:22 -0500 Subject: [PATCH 10/12] Tooltip: Implement _addClass --- ui/tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/tooltip.js b/ui/tooltip.js index 149c9d61f11..371c5bd352b 100644 --- a/ui/tooltip.js +++ b/ui/tooltip.js @@ -104,8 +104,8 @@ $.widget( "ui.tooltip", { "aria-live": "assertive", "aria-relevant": "additions" }) - .addClass( "ui-helper-hidden-accessible" ) .appendTo( this.document[ 0 ].body ); + this._addClass( this.liveRegion, "ui-helper-hidden-accessible" ); }, _setOption: function( key, value ) { @@ -410,7 +410,7 @@ $.widget( "ui.tooltip", { id = tooltip.uniqueId().attr( "id" ); this._addClass( content, "ui-tooltip-content" ); - this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" ); + this._addClass( tooltip, "ui-tooltip ui-widget ui-widget-content" ); tooltip.appendTo( this.document[0].body ); From a65316e48bb4fa3e63bdaed056a7e6270c0e0b61 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:43:52 -0500 Subject: [PATCH 11/12] Menu: Update tests for classes option --- tests/unit/menu/menu_common.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 2c11f239121..c6b6a57692e 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -6,7 +6,8 @@ TestHelpers.commonWidgetTests( "menu", { "ui-menu-icon": "", "ui-menu-item": "", "ui-menu-item-wrapper": "", - "ui-menu-divider": "" + "ui-menu-divider": "", + "ui-menu-submenu-caret": "" }, disabled: false, icons: { From fa00bd00585570d0c9c037bda4a224a9e9b06847 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:45:34 -0500 Subject: [PATCH 12/12] Autocomplete: Implement new _addClass api --- ui/autocomplete.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/ui/autocomplete.js b/ui/autocomplete.js index 14a4c2e42b4..ccc718c105b 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -213,7 +213,7 @@ $.widget( "ui.autocomplete", { .hide() .menu( "instance" ); - this._addClass( this.menu.element, "ui-autocomplete", "ui-front" ); + this._addClass( this.menu.element, "ui-autocomplete ui-front" ); this._on( this.menu.element, { mousedown: function( event ) { // prevent moving focus out of the text field @@ -309,9 +309,8 @@ $.widget( "ui.autocomplete", { role: "status", "aria-live": "assertive", "aria-relevant": "additions" - }) - .addClass( "ui-helper-hidden-accessible" ) - .appendTo( this.document[ 0 ].body ); + }).appendTo( this.document[ 0 ].body ); + this._addClass( this.liveRegion, "ui-helper-hidden-accessible" ); // turning off autocomplete prevents the browser from remembering the // value when navigating through history, so we re-enable autocomplete @@ -325,9 +324,7 @@ $.widget( "ui.autocomplete", { _destroy: function() { clearTimeout( this.searching ); - this.element - .removeClass( "ui-autocomplete-input" ) - .removeAttr( "autocomplete" ); + this.element.removeAttr( "autocomplete" ); this.menu.element.remove(); this.liveRegion.remove(); },