@@ -22,6 +22,8 @@ $.widget( "ui.menubar", {
22
22
options : {
23
23
autoExpand : false ,
24
24
buttons : false ,
25
+ items : "li" ,
26
+ menuElement : "ul" ,
25
27
menuIcon : false ,
26
28
position : {
27
29
my : "left top" ,
@@ -30,19 +32,21 @@ $.widget( "ui.menubar", {
30
32
} ,
31
33
_create : function ( ) {
32
34
var that = this ;
33
- var items = this . items = this . element . children ( "li" )
35
+ this . menuItems = this . element . children ( this . options . items ) ;
36
+ this . items = this . menuItems . children ( "button, a" ) ;
37
+
38
+ this . menuItems
34
39
. addClass ( "ui-menubar-item" )
35
- . attr ( "role" , "presentation" )
36
- . children ( "button, a" ) ;
40
+ . attr ( "role" , "presentation" ) ;
37
41
// let only the first item receive focus
38
- items . slice ( 1 ) . attr ( "tabIndex" , - 1 ) ;
42
+ this . items . slice ( 1 ) . attr ( "tabIndex" , - 1 ) ;
39
43
40
44
this . element
41
45
. addClass ( "ui-menubar ui-widget-header ui-helper-clearfix" )
42
46
. attr ( "role" , "menubar" ) ;
43
- this . _focusable ( items ) ;
44
- this . _hoverable ( items ) ;
45
- items . next ( "ul" )
47
+ this . _focusable ( this . items ) ;
48
+ this . _hoverable ( this . items ) ;
49
+ this . items . siblings ( this . options . menuElement )
46
50
. menu ( {
47
51
position : {
48
52
within : this . options . position . within
@@ -53,7 +57,8 @@ $.widget( "ui.menubar", {
53
57
// TODO what is this targetting? there's probably a better way to access it
54
58
$ ( event . target ) . prev ( ) . focus ( ) ;
55
59
that . _trigger ( "select" , event , ui ) ;
56
- }
60
+ } ,
61
+ menus : that . options . menuElement
57
62
} )
58
63
. hide ( )
59
64
. attr ( {
@@ -66,19 +71,19 @@ $.widget( "ui.menubar", {
66
71
return ;
67
72
switch ( event . keyCode ) {
68
73
case $ . ui . keyCode . LEFT :
69
- that . _left ( event ) ;
74
+ that . previous ( event ) ;
70
75
event . preventDefault ( ) ;
71
76
break ;
72
77
case $ . ui . keyCode . RIGHT :
73
- that . _right ( event ) ;
78
+ that . next ( event ) ;
74
79
event . preventDefault ( ) ;
75
80
break ;
76
81
} ;
77
82
} ) ;
78
- items . each ( function ( ) {
83
+ this . items . each ( function ( ) {
79
84
var input = $ ( this ) ,
80
85
// TODO menu var is only used on two places, doesn't quite justify the .each
81
- menu = input . next ( "ul" ) ;
86
+ menu = input . next ( that . options . menuElement ) ;
82
87
83
88
input . bind ( "click.menubar focus.menubar mouseenter.menubar" , function ( event ) {
84
89
// ignore triggered focus event
@@ -109,11 +114,11 @@ $.widget( "ui.menubar", {
109
114
event . preventDefault ( ) ;
110
115
break ;
111
116
case $ . ui . keyCode . LEFT :
112
- that . _prev ( event , $ ( this ) ) ;
117
+ that . previous ( event ) ;
113
118
event . preventDefault ( ) ;
114
119
break ;
115
120
case $ . ui . keyCode . RIGHT :
116
- that . _next ( event , $ ( this ) ) ;
121
+ that . next ( event ) ;
117
122
event . preventDefault ( ) ;
118
123
break ;
119
124
}
@@ -166,17 +171,16 @@ $.widget( "ui.menubar", {
166
171
} ,
167
172
168
173
_destroy : function ( ) {
169
- var items = this . element . children ( "li" )
174
+ this . menuItems
170
175
. removeClass ( "ui-menubar-item" )
171
- . removeAttr ( "role" )
172
- . children ( "button, a" ) ;
176
+ . removeAttr ( "role" ) ;
173
177
174
178
this . element
175
179
. removeClass ( "ui-menubar ui-widget-header ui-helper-clearfix" )
176
180
. removeAttr ( "role" )
177
181
. unbind ( ".menubar" ) ;
178
182
179
- items
183
+ this . items
180
184
. unbind ( ".menubar" )
181
185
. removeClass ( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
182
186
. removeAttr ( "role" )
@@ -243,55 +247,48 @@ $.widget( "ui.menubar", {
243
247
} , this . options . position ) )
244
248
. removeAttr ( "aria-hidden" )
245
249
. attr ( "aria-expanded" , "true" )
246
- . menu ( "focus" , event , menu . children ( "li " ) . first ( ) )
250
+ . menu ( "focus" , event , menu . children ( ".ui-menu-item " ) . first ( ) )
247
251
// TODO need a comment here why both events are triggered
248
252
. focus ( )
249
253
. focusin ( ) ;
250
254
this . open = true ;
251
255
} ,
252
256
253
- // TODO refactor this and the next three methods
254
- _prev : function ( event , button ) {
255
- button . attr ( "tabIndex" , - 1 ) ;
256
- var prev = button . parent ( ) . prevAll ( "li" ) . children ( ".ui-button" ) . eq ( 0 ) ;
257
- if ( prev . length ) {
258
- prev . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
259
- } else {
260
- var lastItem = this . element . children ( "li:last" ) . children ( ".ui-button:last" ) ;
261
- lastItem . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
262
- }
257
+ next : function ( event ) {
258
+ this . _move ( "next" , "first" , event ) ;
263
259
} ,
264
260
265
- _next : function ( event , button ) {
266
- button . attr ( "tabIndex" , - 1 ) ;
267
- var next = button . parent ( ) . nextAll ( "li" ) . children ( ".ui-button" ) . eq ( 0 ) ;
268
- if ( next . length ) {
269
- next . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
270
- } else {
271
- var firstItem = this . element . children ( "li:first" ) . children ( ".ui-button:first" ) ;
272
- firstItem . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
273
- }
261
+ previous : function ( event ) {
262
+ this . _move ( "prev" , "last" , event ) ;
274
263
} ,
275
264
276
- // TODO rename to parent
277
- _left : function ( event ) {
278
- var prev = this . active . parent ( ) . prevAll ( "li:eq(0)" ) . children ( ".ui-menu" ) . eq ( 0 ) ;
279
- if ( prev . length ) {
280
- this . _open ( event , prev ) ;
265
+ _move : function ( direction , filter , event ) {
266
+ var next ,
267
+ wrapItem ;
268
+ if ( this . open ) {
269
+ next = this . active . closest ( ".ui-menubar-item" ) [ direction + "All" ] ( this . options . items ) . first ( ) . children ( ".ui-menu" ) . eq ( 0 ) ;
270
+ wrapItem = this . menuItems [ filter ] ( ) . children ( ".ui-menu" ) . eq ( 0 ) ;
281
271
} else {
282
- var lastItem = this . element . children ( "li:last" ) . children ( ".ui-menu:first" ) ;
283
- this . _open ( event , lastItem ) ;
272
+ if ( event ) {
273
+ next = $ ( event . target ) . closest ( ".ui-menubar-item" ) [ direction + "All" ] ( this . options . items ) . children ( ".ui-menubar-link" ) . eq ( 0 ) ;
274
+ wrapItem = this . menuItems [ filter ] ( ) . children ( ".ui-menubar-link" ) . eq ( 0 ) ;
275
+ } else {
276
+ next = wrapItem = this . menuItems . children ( "a" ) . eq ( 0 ) ;
277
+ }
284
278
}
285
- } ,
286
279
287
- // TODO rename to child (or something like that)
288
- _right : function ( event ) {
289
- var next = this . active . parent ( ) . nextAll ( "li:eq(0)" ) . children ( ".ui-menu" ) . eq ( 0 ) ;
290
280
if ( next . length ) {
291
- this . _open ( event , next ) ;
281
+ if ( this . open ) {
282
+ this . _open ( event , next ) ;
283
+ } else {
284
+ next . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
285
+ }
292
286
} else {
293
- var firstItem = this . element . children ( "li:first" ) . children ( ".ui-menu:first" ) ;
294
- this . _open ( event , firstItem ) ;
287
+ if ( this . open ) {
288
+ this . _open ( event , wrapItem ) ;
289
+ } else {
290
+ wrapItem . removeAttr ( "tabIndex" ) [ 0 ] . focus ( ) ;
291
+ }
295
292
}
296
293
}
297
294
} ) ;
0 commit comments