Skip to content

Commit 6d430e4

Browse files
jzaeffererjzaefferer
committed
Merge remote branch 'kborchers/menu_notJustUL'
2 parents 7f808b2 + 9e617bb commit 6d430e4

File tree

6 files changed

+210
-15
lines changed

6 files changed

+210
-15
lines changed

‎tests/unit/menu/menu.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,44 @@ <h2 id="qunit-userAgent"></h2>
207207
<li class="foo"><a class="foo" href="#">Amesville</a></li>
208208
</ul>
209209

210+
<div id="menu5">
211+
<blockquote><a href="#">Aberdeen</a></blockquote>
212+
<blockquote><a href="#">Ada</a></blockquote>
213+
<blockquote><a href="#">Adamsville</a></blockquote>
214+
<blockquote><a href="#">Addyston</a></blockquote>
215+
<blockquote>
216+
<a href="#">Delphi</a>
217+
<div>
218+
<blockquote><a href="#">Ada</a></blockquote>
219+
<blockquote><a href="#">Saarland</a></blockquote>
220+
<blockquote><a href="#">Salzburg</a></blockquote>
221+
</div>
222+
</blockquote>
223+
<blockquote><a href="#">Saarland</a></blockquote>
224+
<blockquote>
225+
<a href="#">Salzburg</a>
226+
<div>
227+
<blockquote>
228+
<a href="#">Delphi</a>
229+
<div>
230+
<blockquote><a href="#">Ada</a></blockquote>
231+
<blockquote><a href="#">Saarland</a></blockquote>
232+
<blockquote><a href="#">Salzburg</a></blockquote>
233+
</div>
234+
</blockquote>
235+
<blockquote>
236+
<a href="#">Delphi</a>
237+
<div>
238+
<blockquote><a href="#">Ada</a></blockquote>
239+
<blockquote><a href="#">Saarland</a></blockquote>
240+
<blockquote><a href="#">Salzburg</a></blockquote>
241+
</div>
242+
</blockquote>
243+
<blockquote><a href="#">Perch</a></blockquote>
244+
</div>
245+
</blockquote>
246+
</div>
247+
210248
<div id="log"></div>
211249

212250
</div>

‎tests/unit/menu/menu_defaults.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ commonWidgetTests( "menu", {
55
my: "left top",
66
at: "right top"
77
},
8+
items: "ul",
89

910
// callbacks
1011
create: null

‎tests/unit/menu/menu_events.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,23 @@ test("handle click on menu", function() {
2121
equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
2222
});
2323

24+
test("handle click on custom item menu", function() {
25+
expect(1);
26+
var ac = $('#menu5').menu({
27+
select: function(event, ui) {
28+
menu_log();
29+
},
30+
items: "div"
31+
});
32+
menu_log("click",true);
33+
menu_click($('#menu5'),"1");
34+
menu_log("afterclick");
35+
menu_click( ac,"2");
36+
menu_click($('#menu5'),"3");
37+
menu_click( ac,"1");
38+
equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
39+
});
40+
2441
test( "handle blur: click", function() {
2542
expect( 4 );
2643
var $menu = $( "#menu1" ).menu({
@@ -41,6 +58,27 @@ test( "handle blur: click", function() {
4158
$("#remove").remove();
4259
});
4360

61+
test( "handle blur on custom item menu: click", function() {
62+
expect( 4 );
63+
var $menu = $( "#menu5" ).menu({
64+
focus: function( event, ui ) {
65+
equal( event.originalEvent.type, "click", "focus triggered 'click'" );
66+
equal( event.type, "menufocus", "focus event.type is 'menufocus'" );
67+
68+
},
69+
blur: function( event, ui ) {
70+
equal( event.originalEvent.type, "click", "blur triggered 'click'" );
71+
equal( event.type, "menublur", "blur event.type is 'menublur'" );
72+
},
73+
items: "div"
74+
});
75+
76+
menu_click($('#menu5'),"1");
77+
$( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" );
78+
79+
$("#remove").remove();
80+
});
81+
4482
asyncTest( "handle submenu auto collapse: mouseleave", function() {
4583
expect( 4 );
4684
var $menu = $( "#menu2" ).menu();
@@ -60,6 +98,25 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
6098
}, 200);
6199
});
62100

101+
asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() {
102+
expect( 4 );
103+
var $menu = $( "#menu5" ).menu( { items: "div" } );
104+
105+
$menu.children( ":nth-child(7)" ).trigger( "mouseover" );
106+
setTimeout(function() {
107+
equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" );
108+
$menu.children( ":nth-child(7)" ).find( "div:first" ).children( ":first" ).trigger( "mouseover" );
109+
setTimeout(function() {
110+
equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" );
111+
$menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" );
112+
equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
113+
$menu.trigger( "mouseleave" );
114+
equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
115+
start();
116+
}, 400);
117+
}, 200);
118+
});
119+
63120
test("handle keyboard navigation on menu without scroll and without submenus", function() {
64121
expect(12);
65122
var element = $('#menu1').menu({

‎tests/unit/menu/menu_test_helpers.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ function menu_log( message, clear ) {
1010

1111
function menu_click( menu, item ) {
1212
$( "#log" ).data( "lastItem", item );
13-
menu.find( "li:eq(" + item + ") a" ).trigger( "click" );
14-
}
13+
menu.children( ":eq(" + item + ")" ).find( "a:first" ).trigger( "click" );
14+
}

‎tests/visual/menu/menu.html

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,22 @@
2323
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
2424
}
2525
});
26-
}
2726

27+
$("#menu5").menu({
28+
select: function(event, ui) {
29+
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
30+
},
31+
items: "div"
32+
});
33+
34+
$("#menu6").menu({
35+
select: function(event, ui) {
36+
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
37+
},
38+
items: ".menuElement"
39+
});
40+
}
41+
2842
var menus = $("#menu1, #menu2, #menu3, .menu4");
2943
create();
3044

@@ -42,6 +56,9 @@
4256
body { font-size:62.5%; }
4357
.ui-menu { width: 200px; margin-bottom: 2em; }
4458
.menu4 { height: 200px; overflow: auto; }
59+
.address-item { border-bottom: 1px solid #999; }
60+
.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
61+
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
4562
</style>
4663
</head>
4764
<body>
@@ -173,6 +190,87 @@
173190
<li><a href="#">Amesville</a></li>
174191
</ul>
175192

193+
<div id="menu5">
194+
<blockquote><a href="#">Aberdeen</a></blockquote>
195+
<blockquote><a href="#">Ada</a></blockquote>
196+
<blockquote><a href="#">Adamsville</a></blockquote>
197+
<blockquote><a href="#">Addyston</a></blockquote>
198+
<blockquote>
199+
<a href="#">Delphi</a>
200+
<div>
201+
<blockquote><a href="#">Ada</a></blockquote>
202+
<blockquote><a href="#">Saarland</a></blockquote>
203+
<blockquote><a href="#">Salzburg</a></blockquote>
204+
</div>
205+
</blockquote>
206+
<blockquote><a href="#">Saarland</a></blockquote>
207+
<blockquote>
208+
<a href="#">Salzburg</a>
209+
<div>
210+
<blockquote>
211+
<a href="#">Delphi</a>
212+
<div>
213+
<blockquote><a href="#">Ada</a></blockquote>
214+
<blockquote><a href="#">Saarland</a></blockquote>
215+
<blockquote><a href="#">Salzburg</a></blockquote>
216+
</div>
217+
</blockquote>
218+
<blockquote>
219+
<a href="#">Delphi</a>
220+
<div>
221+
<blockquote><a href="#">Ada</a></blockquote>
222+
<blockquote><a href="#">Saarland</a></blockquote>
223+
<blockquote><a href="#">Salzburg</a></blockquote>
224+
</div>
225+
</blockquote>
226+
<blockquote><a href="#">Perch</a></blockquote>
227+
</div>
228+
</blockquote>
229+
</div>
230+
231+
<div class="menuElement" id="menu6">
232+
<div class="address-item">
233+
<a href="#">
234+
<span class="address-header">John Doe</span>
235+
<span class="address-content">78 West Main St Apt 3A</span>
236+
<span class="address-content">Bloomsburg, PA 12345</span>
237+
</a>
238+
</div>
239+
<div class="address-item">
240+
<a href="#">
241+
<span class="address-header">Jane Doe</span>
242+
<span class="address-content">78 West Main St Apt 3A</span>
243+
<span class="address-content">Bloomsburg, PA 12345</span>
244+
</a>
245+
</div>
246+
<div class="address-item">
247+
<a href="#">
248+
<span class="address-header">James Doe</span>
249+
<span class="address-content">78 West Main St Apt 3A</span>
250+
<span class="address-content">Bloomsburg, PA 12345</span>
251+
</a>
252+
</div>
253+
<div class="address-item">
254+
<a href="#">
255+
<span class="address-header">Jenny Doe</span>
256+
<span class="address-content">78 West Main St Apt 3A</span>
257+
<span class="address-content">Bloomsburg, PA 12345</span>
258+
</a>
259+
</div>
260+
<div class="address-item">
261+
<a href="#">
262+
<span class="address-header">John Doe</span>
263+
<span class="address-content">78 West Main St Apt 3A</span>
264+
<span class="address-content">Bloomsburg, PA 12345</span>
265+
</a>
266+
<div class="menuElement">
267+
<div><a href="#">Ada</a></div>
268+
<div><a href="#">Saarland</a></div>
269+
<div><a href="#">Salzburg</a></div>
270+
</div>
271+
</div>
272+
</div>
273+
176274
<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial">
177275
Log:
178276
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
@@ -182,4 +280,4 @@
182280
<button id="toggle-destroy">Destroy / Create</button>
183281

184282
</body>
185-
</html>
283+
</html>

‎ui/jquery.ui.menu.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $.widget( "ui.menu", {
2020
defaultElement: "<ul>",
2121
delay: 150,
2222
options: {
23+
items: "ul",
2324
position: {
2425
my: "left top",
2526
at: "right top"
@@ -194,7 +195,7 @@ $.widget( "ui.menu", {
194195
//destroy (sub)menus
195196
this.element
196197
.removeAttr( "aria-activedescendant" )
197-
.find( "ul" )
198+
.find( ".ui-menu" )
198199
.andSelf()
199200
.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
200201
.removeAttr( "role" )
@@ -221,7 +222,7 @@ $.widget( "ui.menu", {
221222

222223
refresh: function() {
223224
// initialize nested menus
224-
var submenus = this.element.find( "ul:not(.ui-menu)" )
225+
var submenus = this.element.find( this.options.items + ":not( .ui-menu )" )
225226
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
226227
.attr( "role", "menu" )
227228
.hide()
@@ -230,7 +231,7 @@ $.widget( "ui.menu", {
230231

231232
// don't refresh list items that are already adapted
232233
var menuId = this.menuId;
233-
submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" )
234+
submenus.add( this.element ).children( ":not( .ui-menu-item ):has( a )" )
234235
.addClass( "ui-menu-item" )
235236
.attr( "role", "presentation" )
236237
.children( "a" )
@@ -273,16 +274,16 @@ $.widget( "ui.menu", {
273274
.children( "a" )
274275
.addClass( "ui-state-focus" )
275276
.end();
276-
this.element.attr( "aria-activedescendant", this.active.children("a").attr("id") );
277+
this.element.attr( "aria-activedescendant", this.active.children( "a" ).attr( "id" ) );
277278

278279
// highlight active parent menu item, if any
279-
this.active.parent().closest(".ui-menu-item").children("a:first").addClass("ui-state-active");
280+
this.active.parent().closest( ".ui-menu-item" ).children( "a:first" ).addClass( "ui-state-active" );
280281

281282
this.timer = this._delay( function() {
282283
this._close();
283284
}, this.delay );
284285

285-
var nested = $( ">ul", item );
286+
var nested = $( "> .ui-menu", item );
286287
if ( nested.length && ( /^mouse/.test( event.type ) ) ) {
287288
this._startOpening(nested);
288289
}
@@ -353,19 +354,19 @@ $.widget( "ui.menu", {
353354

354355
this._close( currentMenu );
355356

356-
if( !currentMenu ) {
357+
if ( !currentMenu ) {
357358
this.blur( event );
358359
this.activeMenu = this.element;
359360
}
360361
},
361362

362363
_close: function( startMenu ) {
363-
if( !startMenu ) {
364+
if ( !startMenu ) {
364365
startMenu = this.active ? this.active.parent() : this.element;
365366
}
366367

367368
startMenu
368-
.find( "ul" )
369+
.find( ".ui-menu" )
369370
.hide()
370371
.attr( "aria-hidden", "true" )
371372
.attr( "aria-expanded", "false" )
@@ -375,7 +376,7 @@ $.widget( "ui.menu", {
375376
},
376377

377378
collapse: function( event ) {
378-
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
379+
var newItem = this.active && this.active.parent().closest( ".ui-menu-item", this.element );
379380
if ( newItem && newItem.length ) {
380381
this._close();
381382
this.focus( event, newItem );
@@ -384,7 +385,7 @@ $.widget( "ui.menu", {
384385
},
385386

386387
expand: function( event ) {
387-
var newItem = this.active && this.active.children("ul").children("li").first();
388+
var newItem = this.active && this.active.children( ".ui-menu " ).children( ".ui-menu-item" ).first();
388389

389390
if ( newItem && newItem.length ) {
390391
this._open( newItem.parent() );

0 commit comments

Comments
 (0)