aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorjzaefferer <joern.zaefferer@gmail.com>2010-12-22 18:31:27 +0100
committerjzaefferer <joern.zaefferer@gmail.com>2010-12-22 18:31:27 +0100
commit3552947c19b8ea1b779dc9809783c6ac6a218d68 (patch)
tree61b23078b9ff83f65bd5258bc4dd9efed5ac5f7a /ui
parent8d39171fa285519203688084f3cf66c1e2ae0ada (diff)
parent70e8e9f294729f120f7b52fb9803fddfd37e464e (diff)
downloadjquery-ui-3552947c19b8ea1b779dc9809783c6ac6a218d68.tar.gz
jquery-ui-3552947c19b8ea1b779dc9809783c6ac6a218d68.zip
Merge remote branch 'origin/menu'
Conflicts: demos/autocomplete/categories.html demos/autocomplete/combobox.html demos/autocomplete/custom-data.html demos/autocomplete/default.html demos/autocomplete/folding.html demos/autocomplete/multiple-remote.html demos/autocomplete/multiple.html demos/autocomplete/remote-jsonp.html demos/autocomplete/remote-with-cache.html demos/autocomplete/remote.html demos/autocomplete/xml.html demos/button/splitbutton.html demos/index.html tests/visual/menu/nested.html themes/base/jquery.ui.autocomplete.css ui/jquery.ui.autocomplete.js
Diffstat (limited to 'ui')
-rw-r--r--ui/jquery.ui.autocomplete.js189
-rw-r--r--ui/jquery.ui.menu.js249
2 files changed, 253 insertions, 185 deletions
diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index 73d50ee6e..f48dc032a 100644
--- a/ui/jquery.ui.autocomplete.js
+++ b/ui/jquery.ui.autocomplete.js
@@ -11,6 +11,7 @@
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.position.js
+ * jquery.ui.menu.js
*/
(function( $, undefined ) {
@@ -158,6 +159,8 @@ $.widget( "ui.autocomplete", {
}, 13);
})
.menu({
+ // custom key handling for now
+ input: $(),
focus: function( event, ui ) {
var item = ui.item.data( "item.autocomplete" );
if ( false !== self._trigger( "focus", event, { item: item } ) ) {
@@ -167,7 +170,7 @@ $.widget( "ui.autocomplete", {
}
}
},
- selected: function( event, ui ) {
+ select: function( event, ui ) {
var item = ui.item.data( "item.autocomplete" ),
previous = self.previous;
@@ -417,187 +420,3 @@ $.extend( $.ui.autocomplete, {
});
}( jQuery ));
-
-/*
- * jQuery UI Menu (not officially released)
- *
- * This widget isn't yet finished and the API is subject to change. We plan to finish
- * it for the next release. You're welcome to give it a try anyway and give us feedback,
- * as long as you're okay with migrating your code later on. We can help with that, too.
- *
- * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * 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.prevAll(".ui-menu-item").length;
- },
-
- last: function() {
- return this.active && !this.active.nextAll(".ui-menu-item").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(".ui-menu-item:first"));
- return;
- }
- var base = this.active.offset().top,
- height = this.element.height(),
- result = this.element.children(".ui-menu-item").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(".ui-menu-item:last");
- }
- this.activate(event, result);
- } else {
- this.activate(event, this.element.children(".ui-menu-item")
- .filter(!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(".ui-menu-item:last"));
- return;
- }
-
- var base = this.active.offset().top,
- height = this.element.height();
- result = this.element.children(".ui-menu-item").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(".ui-menu-item:first");
- }
- this.activate(event, result);
- } else {
- this.activate(event, this.element.children(".ui-menu-item")
- .filter(!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));
diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
new file mode 100644
index 000000000..6381bedbc
--- /dev/null
+++ b/ui/jquery.ui.menu.js
@@ -0,0 +1,249 @@
+/*
+ * jQuery UI Menu @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ */
+(function($) {
+
+var idIncrement = 0;
+
+$.widget("ui.menu", {
+ _create: function() {
+ var self = this;
+ this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
+ this.element
+ .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
+ .attr({
+ id: this.menuId,
+ role: "listbox"
+ })
+ .bind( "click.menu", function( event ) {
+ if ( self.options.disabled ) {
+ return false;
+ }
+ if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
+ return;
+ }
+ // temporary
+ event.preventDefault();
+ self.select( event );
+ })
+ .bind( "mouseover.menu", function( event ) {
+ if ( self.options.disabled ) {
+ return;
+ }
+ var target = $( event.target ).closest( ".ui-menu-item" );
+ if ( target.length && target.parent()[0] === self.element[0] ) {
+ self.activate( event, target );
+ }
+ })
+ .bind("mouseout.menu", function( event ) {
+ if ( self.options.disabled ) {
+ return;
+ }
+ var target = $( event.target ).closest( ".ui-menu-item" );
+ if ( target.length && target.parent()[0] === self.element[0] ) {
+ self.deactivate( event );
+ }
+ });
+ this.refresh();
+
+ if ( !this.options.input ) {
+ this.options.input = this.element.attr( "tabIndex", 0 );
+ }
+ this.options.input.bind( "keydown.menu", function( event ) {
+ if ( self.options.disabled ) {
+ return;
+ }
+ switch ( event.keyCode ) {
+ case $.ui.keyCode.PAGE_UP:
+ self.previousPage();
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ break;
+ case $.ui.keyCode.PAGE_DOWN:
+ self.nextPage();
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ break;
+ case $.ui.keyCode.UP:
+ self.previous();
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ break;
+ case $.ui.keyCode.DOWN:
+ self.next();
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ break;
+ case $.ui.keyCode.ENTER:
+ self.select();
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ break;
+ }
+ });
+ },
+
+ destroy: function() {
+ $.Widget.prototype.destroy.apply( this, arguments );
+
+ this.element
+ .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
+ .removeAttr( "tabIndex" )
+ .removeAttr( "role" )
+ .removeAttr( "aria-activedescendant" );
+
+ this.element.children( ".ui-menu-item" )
+ .removeClass( "ui-menu-item" )
+ .removeAttr( "role" )
+ .children( "a" )
+ .removeClass( "ui-corner-all" )
+ .removeAttr( "tabIndex" )
+ .unbind( ".menu" );
+ },
+
+ refresh: function() {
+ // 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 );
+ },
+
+ activate: function( event, item ) {
+ var self = this;
+ this.deactivate();
+ if ( this._hasScroll() ) {
+ var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0,
+ paddingtop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0,
+ offset = item.offset().top - this.element.offset().top - borderTop - paddingtop,
+ scroll = this.element.attr( "scrollTop" ),
+ elementHeight = this.element.height(),
+ itemHeight = item.height();
+ if ( offset < 0 ) {
+ this.element.attr( "scrollTop", scroll + offset );
+ } else if ( offset + itemHeight > elementHeight ) {
+ this.element.attr( "scrollTop", scroll + offset - elementHeight + itemHeight );
+ }
+ }
+ this.active = item.first()
+ .children( "a" )
+ .addClass( "ui-state-hover" )
+ .attr( "id", function(index, id) {
+ return (self.itemId = id || self.menuId + "-activedescendant");
+ })
+ .end();
+ // need to remove the attribute before adding it for the screenreader to pick up the change
+ // see http://groups.google.com/group/jquery-a11y/msg/929e0c1e8c5efc8f
+ this.element.removeAttr("aria-activedescenant").attr("aria-activedescenant", self.itemId);
+ this._trigger( "focus", event, { item: item } );
+ },
+
+ deactivate: function(event) {
+ if (!this.active) {
+ return;
+ }
+
+ var self = this;
+ this.active.children( "a" ).removeClass( "ui-state-hover" );
+ // remove only generated id
+ $( "#" + self.menuId + "-activedescendant" ).removeAttr( "id" );
+ this.element.removeAttr( "aria-activedescenant" );
+ this._trigger( "blur", event );
+ 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.prevAll( ".ui-menu-item" ).length;
+ },
+
+ last: function() {
+ return this.active && !this.active.nextAll( ".ui-menu-item" ).length;
+ },
+
+ _move: function(direction, edge, filter, event) {
+ if ( !this.active ) {
+ this.activate( event, this.element.children(edge)[filter]() );
+ 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)[filter]() );
+ }
+ },
+
+ nextPage: function( event ) {
+ if ( this._hasScroll() ) {
+ if ( !this.active || this.last() ) {
+ this.activate( event, this.element.children( ".ui-menu-item" ).first() );
+ return;
+ }
+ var base = this.active.offset().top,
+ height = this.element.height(),
+ result;
+ this.active.nextAll( ".ui-menu-item" ).each( function() {
+ result = $( this );
+ return $( this ).offset().top - base - height < 0;
+ });
+
+ this.activate( event, result );
+ } else {
+ this.activate( event, this.element.children( ".ui-menu-item" )
+ [ !this.active || this.last() ? "first" : "last" ]() );
+ }
+ },
+
+ previousPage: function( event ) {
+ if ( this._hasScroll() ) {
+ if ( !this.active || this.first() ) {
+ this.activate( event, this.element.children( ".ui-menu-item" ).last() );
+ return;
+ }
+
+ var base = this.active.offset().top,
+ height = this.element.height(),
+ result;
+ this.active.prevAll( ".ui-menu-item" ).each( function() {
+ result = $( this );
+ return $(this).offset().top - base + height > 0;
+ });
+
+ this.activate( event, result );
+ } else {
+ this.activate( event, this.element.children( ".ui-menu-item" )
+ [ !this.active || this.first() ? ":last" : ":first" ]() );
+ }
+ },
+
+ _hasScroll: function() {
+ return this.element.height() < this.element.attr( "scrollHeight" );
+ },
+
+ select: function( event ) {
+ this._trigger( "select", event, { item: this.active } );
+ }
+});
+
+}( jQuery ));