Skip to content

Commit abfdb2a

Browse files
jzaeffererjzaefferer
committed
First attempt at integrating key handling into menu
1 parent c7edd58 commit abfdb2a

File tree

6 files changed

+59
-64
lines changed

6 files changed

+59
-64
lines changed

‎tests/visual/menu/contextmenu.html

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,48 +18,33 @@
1818
top: 10
1919
}).appendTo(document.body).themeswitcher();
2020

21-
var menus = $("#menu1, #menu2").menu({
22-
selected: function(event, ui) {
23-
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
24-
}
25-
}).hide();
26-
27-
28-
$("button").click(function(event) {
21+
$("button").each(function() {
22+
$(this).next().menu({
23+
selected: function(event, ui) {
24+
$(this).hide();
25+
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
26+
},
27+
input: $(this)
28+
}).hide();
29+
}).click(function(event) {
2930
// TODO required to prevent the click handler below from handling this event
3031
event.stopPropagation();
31-
$("#menu" + this.id).menu("deactivate").show().position({
32+
var menu = $("#menu" + this.id).menu("deactivate").show().position({
3233
my: "left top",
3334
at: "right top",
3435
of: event.pageX > 0 ? event : this
3536
});
3637
$(document).one("click", function() {
37-
menus.hide();
38+
menu.hide();
3839
})
3940
}).keydown(function(event) {
4041
var menu = $("#menu" + this.id).data("menu");
4142
if (menu.widget().is(":hidden"))
4243
return;
4344
event.stopPropagation();
4445
switch (event.keyCode) {
45-
case $.ui.keyCode.PAGE_UP:
46-
menu.previousPage();
47-
break;
48-
case $.ui.keyCode.PAGE_DOWN:
49-
menu.nextPage();
50-
break;
51-
case $.ui.keyCode.UP:
52-
menu.previous();
53-
break;
54-
case $.ui.keyCode.DOWN:
55-
menu.next();
56-
event.preventDefault();
57-
break;
58-
case $.ui.keyCode.ENTER:
5946
case $.ui.keyCode.TAB:
60-
menu.select();
6147
menu.widget().hide();
62-
event.preventDefault();
6348
break;
6449
case $.ui.keyCode.ESCAPE:
6550
menu.widget().hide();
@@ -111,7 +96,6 @@
11196
<body>
11297

11398
<button id="1">Show context menu 1</button>
114-
11599
<ul id="menu1">
116100
<li><a href="#">Amsterdam</a></li>
117101
<li><a href="#">Anaheim</a></li>
@@ -123,6 +107,12 @@
123107
<li><a href="#">Zurich</a></li>
124108
</ul>
125109

110+
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
111+
Log:
112+
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
113+
</div>
114+
115+
<button id="2">Show context menu 2</button>
126116
<ul id="menu2">
127117
<li><a href="#">Aberdeen</a></li>
128118
<li><a href="#">Ada</a></li>
@@ -164,12 +154,5 @@
164154
<li><a href="#">Amesville</a></li>
165155
</ul>
166156

167-
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
168-
Log:
169-
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
170-
</div>
171-
172-
<button id="2">Show context menu 2</button>
173-
174157
</body>
175158
</html>

‎tests/visual/menu/drilldown.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();
2929

3030
this.element.find("ul").menu({
31+
// disable built-in key handling
32+
input: $(),
3133
focus: function(event, ui) {
3234
self.activeItem = ui.item;
3335
},

‎tests/visual/menu/menu.html

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,37 +17,10 @@
1717
top: 10
1818
}).appendTo(document.body).themeswitcher();
1919

20-
var menus = $("#menu1, #menu2").menu({
20+
$("#menu1, #menu2").menu({
2121
selected: function(event, ui) {
2222
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
2323
}
24-
}).keydown(function(event) {
25-
var menu = $(this).data("menu");
26-
if (menu.widget().is(":hidden"))
27-
return;
28-
event.stopPropagation();
29-
switch (event.keyCode) {
30-
case $.ui.keyCode.PAGE_UP:
31-
menu.previousPage();
32-
event.preventDefault();
33-
break;
34-
case $.ui.keyCode.PAGE_DOWN:
35-
menu.nextPage();
36-
event.preventDefault();
37-
break;
38-
case $.ui.keyCode.UP:
39-
menu.previous();
40-
event.preventDefault();
41-
break;
42-
case $.ui.keyCode.DOWN:
43-
menu.next();
44-
event.preventDefault();
45-
break;
46-
case $.ui.keyCode.ENTER:
47-
menu.select();
48-
event.preventDefault();
49-
break;
50-
}
5124
});
5225

5326
});
@@ -60,15 +33,15 @@
6033
</head>
6134
<body>
6235

63-
<ul id="menu1" tabindex="0">
36+
<ul id="menu1">
6437
<li><a href="#">Aberdeen</a></li>
6538
<li><a href="#">Ada</a></li>
6639
<li><a href="#">Adamsville</a></li>
6740
<li><a href="#">Addyston</a></li>
6841
<li><a href="#">Adelphi</a></li>
6942
</ul>
7043

71-
<ul id="menu2" tabindex="0">
44+
<ul id="menu2">
7245
<li><a href="#">Aberdeen</a></li>
7346
<li><a href="#">Ada</a></li>
7447
<li><a href="#">Adamsville</a></li>

‎tests/visual/menu/nested.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
2929

3030
this.element.find("ul").andSelf().menu({
31+
// disable built-in key handling
32+
input: $(),
3133
selected: this.options.selected,
3234
focus: function(event, ui) {
3335
self.active = ui.item.parent();

‎ui/jquery.ui.autocomplete.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ $.widget( "ui.autocomplete", {
104104
.addClass( "ui-autocomplete" )
105105
.appendTo( "body", doc )
106106
.menu({
107+
// custom key handling for now
108+
input: $(),
107109
focus: function( event, ui ) {
108110
var item = ui.item.data( "item.autocomplete" );
109111
if ( false !== self._trigger( "focus", null, { item: item } ) ) {

‎ui/jquery.ui.menu.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,39 @@ $.widget("ui.menu", {
3131
self.select( event );
3232
});
3333
this.refresh();
34+
35+
if (!this.options.input) {
36+
this.options.input = this.element.attr("tabindex", 0);
37+
}
38+
this.options.input.bind("keydown.menu", function(event) {
39+
switch (event.keyCode) {
40+
case $.ui.keyCode.PAGE_UP:
41+
self.previousPage();
42+
event.preventDefault();
43+
event.stopImmediatePropagation();
44+
break;
45+
case $.ui.keyCode.PAGE_DOWN:
46+
self.nextPage();
47+
event.preventDefault();
48+
event.stopImmediatePropagation();
49+
break;
50+
case $.ui.keyCode.UP:
51+
self.previous();
52+
event.preventDefault();
53+
event.stopImmediatePropagation();
54+
break;
55+
case $.ui.keyCode.DOWN:
56+
self.next();
57+
event.preventDefault();
58+
event.stopImmediatePropagation();
59+
break;
60+
case $.ui.keyCode.ENTER:
61+
self.select();
62+
event.preventDefault();
63+
event.stopImmediatePropagation();
64+
break;
65+
}
66+
});
3467
},
3568

3669
destroy: function() {

0 commit comments

Comments
 (0)