Skip to content

Commit a03428a

Browse files
arschmitzarschmitz
committed
Menu: Implement new _addClass api
1 parent 821ecf3 commit a03428a

File tree

1 file changed

+43
-49
lines changed

1 file changed

+43
-49
lines changed

‎ui/menu.js

Lines changed: 43 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ return $.widget( "ui.menu", {
3636
"ui-menu-icon": "",
3737
"ui-menu-item": "",
3838
"ui-menu-divider": "",
39-
"ui-menu-item-wrapper": ""
39+
"ui-menu-item-wrapper": "",
40+
"ui-menu-submenu-caret": ""
4041
},
4142
icons: {
4243
submenu: "ui-icon-caret-1-e"
@@ -67,13 +68,12 @@ return $.widget( "ui.menu", {
6768
role: this.options.role,
6869
tabIndex: 0
6970
});
70-
this._addClass( "ui-menu", "ui-widget ui-widget-content" );
71-
this[ "_" + ( !!this.element.find( ".ui-icon" ).length ? "add" : "remove" ) +
71+
this._addClass( "ui-menu ui-widget ui-widget-content" );
72+
this[ ( !!this.element.find( ".ui-icon" ).length ? "_add" : "_remove" ) +
7273
"Class" ]( "ui-menu-icons" );
7374
if ( this.options.disabled ) {
74-
this.element
75-
.addClass( "ui-state-disabled" )
76-
.attr( "aria-disabled", "true" );
75+
this._addClass( "ui-state-disabled" );
76+
this.element.attr( "aria-disabled", "true" );
7777
}
7878

7979
this._on({
@@ -118,7 +118,7 @@ return $.widget( "ui.menu", {
118118
var target = $( event.currentTarget );
119119
// Remove ui-state-active class from siblings of the newly focused menu item
120120
// to avoid a jump caused by adjacent elements both having a class with a border
121-
target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
121+
this._removeClass( target.siblings().children( ".ui-state-active" ), "ui-state-active" );
122122

123123
this.focus( event, target );
124124
},
@@ -159,8 +159,17 @@ return $.widget( "ui.menu", {
159159
},
160160

161161
_destroy: function() {
162+
var items = this.element.find( ".ui-menu-item" )
163+
.removeAttr( "role" )
164+
.removeAttr( "aria-disabled" ),
165+
submenus = items.children( ".ui-menu-item-wrapper" )
166+
.removeUniqueId()
167+
.removeAttr( "tabIndex" )
168+
.removeAttr( "role" )
169+
.removeAttr( "aria-haspopup" );
170+
162171
// Destroy (sub)menus
163-
var menu = this.element
172+
this.element
164173
.removeAttr( "aria-activedescendant" )
165174
.find( ".ui-menu" ).addBack()
166175
.removeAttr( "role" )
@@ -171,30 +180,13 @@ return $.widget( "ui.menu", {
171180
.removeAttr( "aria-disabled" )
172181
.removeUniqueId()
173182
.show(),
174-
items = this.element.find( ".ui-menu-item" )
175-
.removeClass( "ui-menu-item" )
176-
.removeAttr( "role" )
177-
.removeAttr( "aria-disabled" ),
178-
submenus = items.children( ".ui-menu-item-wrapper" )
179-
.removeUniqueId()
180-
.removeAttr( "tabIndex" )
181-
.removeAttr( "role" )
182-
.removeAttr( "aria-haspopup" );
183183

184184
submenus.children().each(function() {
185185
var elem = $( this );
186186
if ( elem.data( "ui-menu-submenu-caret" ) ) {
187187
elem.remove();
188188
}
189189
});
190-
191-
this._removeClass( menu, "ui-menu ui-menu-icons", "ui-widget ui-widget-content ui-front" );
192-
this._removeClass( items, "ui-menu-item" );
193-
this._removeClass( submenus, "ui-menu-item-wrapper", "ui-state-hover ui-state" );
194-
195-
// Destroy menu dividers
196-
this._removeClass( this.element.find( ".ui-menu-divider" ), "ui-menu-divider",
197-
"ui-widget-content" );
198190
},
199191

200192
_keydown: function( event ) {
@@ -293,7 +285,8 @@ return $.widget( "ui.menu", {
293285
icon = this.options.icons.submenu,
294286
submenus = this.element.find( this.options.menus );
295287

296-
this.element.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length );
288+
this[ ( !!this.element.find( ".ui-icon" ).length ? "_add" : "_remove" ) +
289+
"Class" ]( "ui-menu-icons" );
297290

298291
// Initialize nested menus
299292
submenus.filter( ":not(.ui-menu)" )
@@ -306,18 +299,18 @@ return $.widget( "ui.menu", {
306299
.each(function() {
307300
var menu = $( this ),
308301
item = menu.prev(),
309-
submenuCaret = $( "<span>" )
310-
.addClass( "ui-menu-icon ui-icon " + icon )
311-
.data( "ui-menu-submenu-caret", true );
302+
submenuCaret = $( "<span>" ).data( "ui-menu-submenu-caret", true );
303+
304+
that._addClass( submenuCaret, "ui-menu-icon ui-icon " + icon );
312305

313306
item
314307
.attr( "aria-haspopup", "true" )
315308
.prepend( submenuCaret );
316309
menu.attr( "aria-labelledby", item.attr( "id" ) );
317310
});
318311

319-
this._addClass( submenus.filter( ":not(.ui-menu)" ), "ui-menu",
320-
"ui-widget ui-widget-content ui-front" );
312+
this._addClass( submenus.filter( ":not(.ui-menu)" ),
313+
"ui-menu ui-widget ui-widget-content ui-front" );
321314

322315
menus = submenus.add( this.element );
323316
items = menus.find( this.options.items );
@@ -326,7 +319,7 @@ return $.widget( "ui.menu", {
326319
items.not( ".ui-menu-item" ).each(function() {
327320
var item = $( this );
328321
if ( that._isDivider( item ) ) {
329-
that._addClass( item, "ui-menu-divider", "ui-widget-content" );
322+
that._addClass( item, "ui-menu-divider ui-widget-content" );
330323
}
331324
});
332325

@@ -360,28 +353,27 @@ return $.widget( "ui.menu", {
360353

361354
_setOption: function( key, value ) {
362355
if ( key === "icons" ) {
363-
this.element.find( ".ui-menu-icon" )
364-
.removeClass( this.options.icons.submenu )
365-
.addClass( value.submenu );
356+
var icons = this.element.find( ".ui-menu-icon" );
357+
this._removeClass( icons, this.options.icons.submenu );
358+
this._addClass( icons, value.submenu );
366359
}
367360
if ( key === "disabled" ) {
368-
this.element
369-
.toggleClass( "ui-state-disabled", !!value )
370-
.attr( "aria-disabled", value );
361+
this.element.attr( "aria-disabled", value );
362+
this[ ( !!value ? "_add" : "_remove" ) + "Class" ]( "ui-state-disabled", !!value );
371363
}
372364
this._super( key, value );
373365
},
374366

375367
focus: function( event, item ) {
376-
var nested, focused;
368+
var nested, focused, highlight;
377369
this.blur( event, event && event.type === "focus" );
378370

379371
this._scrollIntoView( item );
380372

381373
this.active = item.first();
382-
focused = this.active.children( ".ui-menu-item-wrapper" )
383-
.addClass( "ui-state-focus" )
384-
.removeClass( "ui-state-active" );
374+
focused = this.active.children( ".ui-menu-item-wrapper" );
375+
this._addClass( focused, "ui-state-focus" );
376+
this._removeClass( focused, "ui-state-active" );
385377

386378
// Only update aria-activedescendant if there's a role
387379
// otherwise we assume focus is managed elsewhere
@@ -390,11 +382,12 @@ return $.widget( "ui.menu", {
390382
}
391383

392384
// Highlight active parent menu item, if any
393-
this.active
385+
highlight = this.active
394386
.parent()
395387
.closest( ".ui-menu-item" )
396-
.children( ".ui-menu-item-wrapper" )
397-
.addClass( "ui-state-active" );
388+
.children( ".ui-menu-item-wrapper" );
389+
390+
this._addClass( highlight, "ui-state-active" );
398391

399392
if ( event && event.type === "keydown" ) {
400393
this._close();
@@ -440,7 +433,7 @@ return $.widget( "ui.menu", {
440433
return;
441434
}
442435

443-
this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" );
436+
this._removeClass( this.active.children( ".ui-menu-item-wrapper" ), "ui-state-focus" );
444437
this.active = null;
445438

446439
this._trigger( "blur", event, { item: this.active } );
@@ -504,14 +497,15 @@ return $.widget( "ui.menu", {
504497
startMenu = this.active ? this.active.parent() : this.element;
505498
}
506499

507-
startMenu
500+
var active = startMenu
508501
.find( ".ui-menu" )
509502
.hide()
510503
.attr( "aria-hidden", "true" )
511504
.attr( "aria-expanded", "false" )
512505
.end()
513-
.find( ".ui-state-active" ).not( ".ui-state-focus" )
514-
.removeClass( "ui-state-active" );
506+
.find( ".ui-state-active" ).not( ".ui-state-focus" );
507+
508+
this._removeClass( active, "ui-state-active" );
515509
},
516510

517511
_closeOnDocumentClick: function( event ) {

0 commit comments

Comments
 (0)