Skip to content

Make widget factory remove classes in destroy #1394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

Make widget factory remove classes in destroy #1394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
133563a
Widget: Make _addClass auto remove classes in destroy
arschmitz Dec 3, 2014
ba232aa
Accordion: Implement new _addClass api
arschmitz Dec 3, 2014
d21cc3d
Dialog: Implement new _addClass api
arschmitz Dec 3, 2014
6da53a6
Menu: Implement new _addClass api
arschmitz Dec 3, 2014
2fe0bcd
Progressbar: Implement new _addClass api
arschmitz Dec 3, 2014
3f4eab6
Selectmenu: Implement new _addClass api
arschmitz Dec 3, 2014
e61ab93
Slider: Implement new _addClass api
arschmitz Dec 3, 2014
f49ec06
Spinner: Implement new _addClass api
arschmitz Dec 3, 2014
b29b7ab
Tabs: Implement new _addClass api
arschmitz Dec 3, 2014
fe60fb5
Tooltip: Implement _addClass
arschmitz Dec 3, 2014
a65316e
Menu: Update tests for classes option
arschmitz Dec 3, 2014
fa00bd0
Autocomplete: Implement new _addClass api
arschmitz Dec 3, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion tests/unit/menu/menu_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
52 changes: 23 additions & 29 deletions ui/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" );
Expand All @@ -98,15 +98,15 @@ return $.widget( "ui.accordion", {
},

_createIcons: function() {
var icon,
var icon, children,
icons = this.options.icons;
if ( icons ) {
icon = $( "<span>" );
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" );
}
},
Expand All @@ -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" )
Expand All @@ -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", "" );
Expand Down Expand Up @@ -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" );
}
},

Expand Down Expand Up @@ -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 ) {
Expand All @@ -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();
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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" );
Expand Down
11 changes: 4 additions & 7 deletions ui/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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();
},
Expand Down
19 changes: 9 additions & 10 deletions ui/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -398,9 +396,11 @@ $.widget( "ui.dialog", {
},

_createTitlebar: function() {
this.uiDialogTitlebar = $( "<div>" )
.addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
.prependTo( this.uiDialog );
this.uiDialogTitlebar = $( "<div>" ).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)
Expand Down Expand Up @@ -455,8 +455,7 @@ $.widget( "ui.dialog", {

_createButtonPane: function() {
this.uiDialogButtonPane = $( "<div>" );
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 = $( "<div>" )
.appendTo( this.uiDialogButtonPane );
Expand Down Expand Up @@ -853,7 +852,7 @@ $.widget( "ui.dialog", {
this.overlay = $( "<div>" )
.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"
});
Expand Down
Loading