From 9504d334387f2333ae65216cade71b4b48eb9084 Mon Sep 17 00:00:00 2001 From: arzynik Date: Wed, 1 Feb 2012 16:52:10 -0800 Subject: [PATCH] changed typeahead attribute to data-typeahead. added trigger and focus for LI element as well as A element in order to properly select and highlight them. added missing css attribute into css. --- themes/base/jquery.ui.selectmenu.css | 1 + ui/jquery.ui.selectmenu.js | 26 ++++++++++++++------------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css index d2c65bc77f2..84ee3a593c1 100644 --- a/themes/base/jquery.ui.selectmenu.css +++ b/themes/base/jquery.ui.selectmenu.css @@ -2,6 +2,7 @@ ----------------------------------*/ .ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; } .ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; } +.ui-selectmenu-item-focus {} .ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; display: none; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */ .ui-selectmenu-menu ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; } .ui-selectmenu-open { display: block; } diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index f3f70b97e31..d5f99871995 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -100,6 +100,7 @@ $.widget("ui.selectmenu", { .bind('click.selectmenu', function() { return false; }) + // key events for closed menu .bind("keydown.selectmenu", function(event) { var ret = false; switch (event.keyCode) { @@ -208,6 +209,7 @@ $.widget("ui.selectmenu", { // transfer menu click to menu button this.list + // key events for open menu .bind("keydown.selectmenu", function(event) { var ret = false; switch (event.keyCode) { @@ -287,7 +289,7 @@ $.widget("ui.selectmenu", { selected: opt.attr('selected'), disabled: opt.attr('disabled'), classes: opt.attr('class'), - typeahead: opt.attr('typeahead'), + typeahead: opt.attr('data-typeahead'), parentOptGroup: opt.parent('optgroup'), bgImage: o.bgImage.call(opt) }); @@ -317,7 +319,7 @@ $.widget("ui.selectmenu", { thisAAttr[ 'aria-disabled' ] = selectOptionData[ i ].disabled; } if ( selectOptionData[ i ].typeahead ) { - thisAAttr[ 'typeahead' ] = selectOptionData[ i ].typeahead; + thisAAttr[ 'data-typeahead' ] = selectOptionData[ i ].typeahead; } var thisA = $('', thisAAttr); var thisLi = $('
  • ', thisLiAttr) @@ -492,7 +494,6 @@ $.widget("ui.selectmenu", { if ( self._typeAhead_chars.length < 2 || (self._typeAhead_chars.substr(-2, 1) === c && self._typeAhead_cycling) ) { self._typeAhead_cycling = true; - // Match only the first character and loop matchee = c; } @@ -514,8 +515,8 @@ $.widget("ui.selectmenu", { this._focusedOptionLi().data('index')) || 0; for (var i = 0; i < this._optionLis.length; i++) { - var thisText = this._optionLis.eq(i).text().substr(0, matchee.length).toLowerCase(); - + // use the typeahead text if we have it + var thisText = (this._optionLis.eq(i).find("a").attr('data-typeahead') || this._optionLis.eq(i).find("a").text()).substr(0, matchee.length).toLowerCase(); if ( thisText === matchee ) { if ( self._typeAhead_cycling ) { if ( nextIndex === null ) @@ -532,11 +533,9 @@ $.widget("ui.selectmenu", { } if ( nextIndex !== null ) { - // Why using trigger() instead of a direct method to select the - // index? Because we don't what is the exact action to do, it - // depends if the user is typing on the element or on the popped - // up menu - this._optionLis.eq(nextIndex).find("a").trigger( eventType ); + // trigger both the li and the a to properly enabling styling? + // seems like we need to pick one of these things instead + this._optionLis.eq(nextIndex).trigger( eventType ).find("a").trigger( eventType ); } self._typeAhead_timer = window.setTimeout(function() { @@ -688,6 +687,7 @@ $.widget("ui.selectmenu", { var newIndex = parseInt(this._optionLis.filter(amt).data('index'), 10); } + if (newIndex < 0) { newIndex = 0; } @@ -707,7 +707,9 @@ $.widget("ui.selectmenu", { (amt > 0) ? ++amt : --amt; this._moveFocus(amt, newIndex); } else { - this._optionLis.eq(newIndex).find('a:eq(0)').attr('id',activeID).focus(); + this._focusedOptionLi().removeClass(this.widgetBaseClass + '-item-focus ui-state-hover'); + this._optionLis.eq(newIndex).addClass(this.widgetBaseClass + '-item-focus ui-state-hover') + .find('a:eq(0)').attr('id',activeID).focus(); } this.list.attr('aria-activedescendant', activeID); @@ -877,4 +879,4 @@ $.widget("ui.selectmenu", { } }); -})(jQuery); +})(jQuery); \ No newline at end of file