Skip to content

Commit

Permalink
Menu: Extracted menu code from autocomplete, updated all dependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
jzaefferer committed Apr 21, 2010
1 parent 469d0c5 commit 17f8079
Show file tree
Hide file tree
Showing 22 changed files with 198 additions and 6 deletions.
1 change: 1 addition & 0 deletions demos/autocomplete/categories.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/combobox.html
Expand Up @@ -9,6 +9,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/custom-data.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/default.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/folding.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/multiple-remote.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/multiple.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/remote-jsonp.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/remote-with-cache.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/remote.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions demos/autocomplete/xml.html
Expand Up @@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
Expand Down
1 change: 1 addition & 0 deletions tests/unit/index.html
Expand Up @@ -24,6 +24,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
Expand Down
1 change: 1 addition & 0 deletions tests/visual/all.html
Expand Up @@ -11,6 +11,7 @@
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
Expand Down
1 change: 1 addition & 0 deletions tests/visual/autocomplete/autocomplete.html
Expand Up @@ -9,6 +9,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/compound/widgets_in_dialog.html
Expand Up @@ -13,7 +13,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.dialog.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/menu/contextmenu.html
Expand Up @@ -8,7 +8,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/menu/drilldown.html
Expand Up @@ -9,7 +9,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript">
$(function() {
$.widget("ui.drilldown", {
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/menu/menu.html
Expand Up @@ -7,7 +7,7 @@
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/menu/nested.html
Expand Up @@ -8,7 +8,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../../external/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
Expand Down
2 changes: 1 addition & 1 deletion tests/visual/position/position.html
Expand Up @@ -9,7 +9,7 @@
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
Expand Down
1 change: 1 addition & 0 deletions ui/jquery.ui.autocomplete.js
Expand Up @@ -11,6 +11,7 @@
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.position.js
* jquery.ui.menu.js
*/
(function( $ ) {

Expand Down
177 changes: 177 additions & 0 deletions ui/jquery.ui.menu.js
@@ -0,0 +1,177 @@
/*
* jQuery UI Menu @VERSION
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Menu
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function($) {

$.widget("ui.menu", {
_create: function() {
var self = this;
this.element
.addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
.attr({
role: "listbox",
"aria-activedescendant": "ui-active-menuitem"
})
.click(function( event ) {
if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
return;
}
// temporary
event.preventDefault();
self.select( event );
});
this.refresh();
},

refresh: function() {
var self = this;

// don't refresh list items that are already adapted
var items = this.element.children("li:not(.ui-menu-item):has(a)")
.addClass("ui-menu-item")
.attr("role", "menuitem");

items.children("a")
.addClass("ui-corner-all")
.attr("tabindex", -1)
// mouseenter doesn't work with event delegation
.mouseenter(function( event ) {
self.activate( event, $(this).parent() );
})
.mouseleave(function() {
self.deactivate();
});
},

activate: function( event, item ) {
this.deactivate();
if (this.hasScroll()) {
var offset = item.offset().top - this.element.offset().top,
scroll = this.element.attr("scrollTop"),
elementHeight = this.element.height();
if (offset < 0) {
this.element.attr("scrollTop", scroll + offset);
} else if (offset > elementHeight) {
this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
}
}
this.active = item.eq(0)
.children("a")
.addClass("ui-state-hover")
.attr("id", "ui-active-menuitem")
.end();
this._trigger("focus", event, { item: item });
},

deactivate: function() {
if (!this.active) { return; }

this.active.children("a")
.removeClass("ui-state-hover")
.removeAttr("id");
this._trigger("blur");
this.active = null;
},

next: function(event) {
this.move("next", ".ui-menu-item:first", event);
},

previous: function(event) {
this.move("prev", ".ui-menu-item:last", event);
},

first: function() {
return this.active && !this.active.prev().length;
},

last: function() {
return this.active && !this.active.next().length;
},

move: function(direction, edge, event) {
if (!this.active) {
this.activate(event, this.element.children(edge));
return;
}
var next = this.active[direction + "All"](".ui-menu-item").eq(0);
if (next.length) {
this.activate(event, next);
} else {
this.activate(event, this.element.children(edge));
}
},

// TODO merge with previousPage
nextPage: function(event) {
if (this.hasScroll()) {
// TODO merge with no-scroll-else
if (!this.active || this.last()) {
this.activate(event, this.element.children(":first"));
return;
}
var base = this.active.offset().top,
height = this.element.height(),
result = this.element.children("li").filter(function() {
var close = $(this).offset().top - base - height + $(this).height();
// TODO improve approximation
return close < 10 && close > -10;
});

// TODO try to catch this earlier when scrollTop indicates the last page anyway
if (!result.length) {
result = this.element.children(":last");
}
this.activate(event, result);
} else {
this.activate(event, this.element.children(!this.active || this.last() ? ":first" : ":last"));
}
},

// TODO merge with nextPage
previousPage: function(event) {
if (this.hasScroll()) {
// TODO merge with no-scroll-else
if (!this.active || this.first()) {
this.activate(event, this.element.children(":last"));
return;
}

var base = this.active.offset().top,
height = this.element.height();
result = this.element.children("li").filter(function() {
var close = $(this).offset().top - base + height - $(this).height();
// TODO improve approximation
return close < 10 && close > -10;
});

// TODO try to catch this earlier when scrollTop indicates the last page anyway
if (!result.length) {
result = this.element.children(":first");
}
this.activate(event, result);
} else {
this.activate(event, this.element.children(!this.active || this.first() ? ":last" : ":first"));
}
},

hasScroll: function() {
return this.element.height() < this.element.attr("scrollHeight");
},

select: function( event ) {
this._trigger("selected", event, { item: this.active });
}
});

}(jQuery));

0 comments on commit 17f8079

Please sign in to comment.