autocomplete-list-debug.js revision 221103f45ef4ea2c4caacb9f367f88cac34b8299
f7fe7479a730247687add3053f0760430498bc71Allen RabinovichYUI.add('autocomplete-list', function(Y) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich/**
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * Traditional autocomplete dropdown list widget, just like Mom used to make.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @submodule autocomplete-list
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich/**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Traditional autocomplete dropdown list widget, just like Mom used to make.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @class AutoCompleteList
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @extends Widget
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @uses AutoCompleteBase
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @uses WidgetPosition
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @uses WidgetPositionAlign
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @constructor
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {Object} config Configuration object.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovichvar Lang = Y.Lang,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich Node = Y.Node,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich YArray = Y.Array,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Whether or not we need an iframe shim.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich useShim = Y.UA.ie && Y.UA.ie < 7,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // keyCode constants.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich KEY_TAB = 9,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // String shorthand.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _CLASS_ITEM = '_CLASS_ITEM',
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _CLASS_ITEM_ACTIVE = '_CLASS_ITEM_ACTIVE',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _CLASS_ITEM_HOVER = '_CLASS_ITEM_HOVER',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _SELECTOR_ITEM = '_SELECTOR_ITEM',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ACTIVE_ITEM = 'activeItem',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ALWAYS_SHOW_LIST = 'alwaysShowList',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich CIRCULAR = 'circular',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich HOVERED_ITEM = 'hoveredItem',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ID = 'id',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ITEM = 'item',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich LIST = 'list',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich RESULT = 'result',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich RESULTS = 'results',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich VISIBLE = 'visible',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich WIDTH = 'width',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // Event names.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich EVT_SELECT = 'select',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen RabinovichList = Y.Base.create('autocompleteList', Y.Widget, [
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich Y.AutoCompleteBase,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich Y.WidgetPosition,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich Y.WidgetPositionAlign
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich], {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // -- Prototype Properties -------------------------------------------------
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ITEM_TEMPLATE: '<li/>',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich LIST_TEMPLATE: '<ul/>',
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // -- Lifecycle Prototype Methods ------------------------------------------
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich initializer: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var inputNode = this.get('inputNode');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (!inputNode) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich Y.error('No inputNode specified.');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._inputNode = inputNode;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listEvents = [];
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // This ensures that the list is rendered inside the same parent as the
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // input node by default, which is necessary for proper ARIA support.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.DEF_PARENT_NODE = inputNode.get('parentNode');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Cache commonly used classnames and selectors for performance.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this[_CLASS_ITEM] = this.getClassName(ITEM);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this[_CLASS_ITEM_ACTIVE] = this.getClassName(ITEM, 'active');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this[_CLASS_ITEM_HOVER] = this.getClassName(ITEM, 'hover');
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich this[_SELECTOR_ITEM] = '.' + this[_CLASS_ITEM];
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Fires when an autocomplete suggestion is selected from the list,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * typically via a keyboard action or mouse click.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @event select
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventFacade} e Event facade with the following additional
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * properties:
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * <dl>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <dt>itemNode (Node)</dt>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <dd>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * List item node that was selected.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * </dd>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <dt>result (Object)</dt>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <dd>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * AutoComplete result object.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * </dd>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * </dl>
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @preventable _defSelectFn
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.publish(EVT_SELECT, {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich defaultFn: this._defSelectFn
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich });
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich destructor: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich while (this._listEvents.length) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listEvents.pop().detach();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich bindUI: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._bindInput();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._bindList();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich renderUI: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var boundingBox = this.get('boundingBox'),
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich contentBox = this.get('contentBox'),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich inputNode = this._inputNode,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich listNode = this._createListNode(),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich parentNode = inputNode.get('parentNode');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich inputNode.addClass(this.getClassName('input')).setAttrs({
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich 'aria-autocomplete': LIST,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich 'aria-expanded' : false,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich 'aria-owns' : listNode.get('id')
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich });
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Add an iframe shim for IE6.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (useShim) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich boundingBox.plug(Y.Plugin.Shim);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Force position: absolute on the boundingBox. This works around a
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // potential CSS loading race condition in Gecko that can cause the
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // boundingBox to become relatively positioned, which is all kinds of
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // no good.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich boundingBox.setStyle('position', 'absolute');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._boundingBox = boundingBox;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._contentBox = contentBox;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listNode = listNode;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._parentNode = parentNode;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich syncUI: function () {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // No need to call _syncPosition() here; the other _sync methods will
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // call it when necessary.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncResults();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncVisibility();
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // -- Public Prototype Methods ---------------------------------------------
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * Hides the list, unless the <code>alwaysShowList</code> attribute is
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <code>true</code>.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method hide
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @see show
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @chainable
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich hide: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this.get(ALWAYS_SHOW_LIST) ? this : this.set(VISIBLE, false);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Selects the specified <i>itemNode</i>, or the current
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * <code>activeItem</code> if <i>itemNode</i> is not specified.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method selectItem
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {Node} itemNode (optional) Item node to select.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventFacade} originEvent (optional) Event that triggered the
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * selection, if any.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @chainable
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich selectItem: function (itemNode, originEvent) {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich if (itemNode) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (!itemNode.hasClass(this[_CLASS_ITEM])) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich } else {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich itemNode = this.get(ACTIVE_ITEM);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (!itemNode) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this;
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.fire(EVT_SELECT, {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich itemNode : itemNode,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich originEvent: originEvent || null,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich result : itemNode.getData(RESULT)
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich });
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this;
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // -- Protected Prototype Methods ------------------------------------------
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Activates the next item after the currently active item. If there is no
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * next item and the <code>circular</code> attribute is <code>true</code>,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * focus will wrap back to the input node.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _activateNextItem
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @chainable
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _activateNextItem: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var item = this.get(ACTIVE_ITEM),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich nextItem;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich if (item) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich nextItem = item.next(this[_SELECTOR_ITEM]) ||
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich (this.get(CIRCULAR) ? null : item);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich } else {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich nextItem = this._getFirstItemNode();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(ACTIVE_ITEM, nextItem);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Activates the item previous to the currently active item. If there is no
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * previous item and the <code>circular</code> attribute is
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <code>true</code>, focus will wrap back to the input node.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _activatePrevItem
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @chainable
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _activatePrevItem: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var item = this.get(ACTIVE_ITEM),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich prevItem = item ? item.previous(this[_SELECTOR_ITEM]) :
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.get(CIRCULAR) && this._getLastItemNode();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(ACTIVE_ITEM, prevItem || null);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Appends the specified result <i>items</i> to the list inside a new item
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * node.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _add
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {Array|Node|HTMLElement|String} items Result item or array of
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * result items.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @return {NodeList} Added nodes.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _add: function (items) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var itemNodes = [];
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich YArray.each(Lang.isArray(items) ? items : [items], function (item) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich itemNodes.push(this._createItemNode(item).setData(RESULT, item));
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }, this);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich itemNodes = Y.all(itemNodes);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listNode.append(itemNodes.toFrag());
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return itemNodes;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Binds <code>inputNode</code> events and behavior.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @method _bindInput
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _bindInput: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var inputNode = this._inputNode,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich alignNode, alignWidth, tokenInput;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Null align means we can auto-align. Set align to false to prevent
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // auto-alignment, or a valid alignment config to customize the
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // alignment.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (this.get('align') === null) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // If this is a tokenInput, align with its bounding box.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // Otherwise, align with the inputNode. Bit of a cheat.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich tokenInput = this.get('tokenInput');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich alignNode = (tokenInput && tokenInput.get('boundingBox')) || inputNode;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set('align', {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich node : alignNode,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich points: ['tl', 'bl']
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich });
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // If no width config is set, attempt to set the list's width to the
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // width of the alignment node. If the alignment node's width is
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // falsy, do nothing.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (!this.get(WIDTH) && (alignWidth = alignNode.get('offsetWidth'))) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(WIDTH, alignWidth);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // Attach inputNode events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listEvents.push(inputNode.on('blur', this._onListInputBlur, this));
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Binds list events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _bindList
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _bindList: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listEvents.concat([
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich Y.on('windowresize', this._syncPosition, this),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.after({
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich mouseover: this._afterMouseOver,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich mouseout : this._afterMouseOut,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich activeItemChange : this._afterActiveItemChange,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich alwaysShowListChange: this._afterAlwaysShowListChange,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich hoveredItemChange : this._afterHoveredItemChange,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich resultsChange : this._afterResultsChange,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich visibleChange : this._afterVisibleChange
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listNode.delegate('click', this._onItemClick,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this[_SELECTOR_ITEM], this)
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich ]);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Clears the contents of the tray.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _clear
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _clear: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(ACTIVE_ITEM, null);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich this._set(HOVERED_ITEM, null);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._listNode.get('children').remove(true);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Creates and returns an item node with the specified <i>content</i>.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _createItemNode
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @param {Object} result Result object.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @return {Node} Item node.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _createItemNode: function (result) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var itemNode = Node.create(this.ITEM_TEMPLATE);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return itemNode.addClass(this[_CLASS_ITEM]).setAttrs({
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich id : Y.stamp(itemNode),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich role: 'option'
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }).setAttribute('data-text', result.text).append(result.display);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Creates and returns a list node. If the `listNode` attribute is already
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * set to an existing node, that node will be used.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @method _createListNode
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @return {Node} List node.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _createListNode: function () {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich var listNode = this.get('listNode') || Node.create(this.LIST_TEMPLATE);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich listNode.addClass(this.getClassName(LIST)).setAttrs({
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich id : Y.stamp(listNode),
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich role: 'listbox'
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich });
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._set('listNode', listNode);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.get('contentBox').append(listNode);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return listNode;
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Gets the first item node in the list, or <code>null</code> if the list is
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * empty.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @method _getFirstItemNode
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @return {Node|null}
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _getFirstItemNode: function () {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich return this._listNode.one(this[_SELECTOR_ITEM]);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Gets the last item node in the list, or <code>null</code> if the list is
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * empty.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _getLastItemNode
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @return {Node|null}
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _getLastItemNode: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich return this._listNode.one(this[_SELECTOR_ITEM] + ':last-child');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Synchronizes the result list's position and alignment.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _syncPosition
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _syncPosition: function () {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // Force WidgetPositionAlign to refresh its alignment.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncUIPosAlign();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // Resize the IE6 iframe shim to match the list's dimensions.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncShim();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Synchronizes the results displayed in the list with those in the
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * <i>results</i> argument, or with the <code>results</code> attribute if an
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * argument is not provided.
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _syncResults
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {Array} results (optional) Results.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _syncResults: function (results) {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich if (!results) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich results = this.get(RESULTS);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._clear();
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (results.length) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._add(results);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncPosition();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich if (this.get('activateFirstItem') && !this.get(ACTIVE_ITEM)) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(ACTIVE_ITEM, this._getFirstItemNode());
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Synchronizes the size of the iframe shim used for IE6 and lower. In other
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * browsers, this method is a noop.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _syncShim
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _syncShim: useShim ? function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._boundingBox.shim.sync();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich } : function () {},
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Synchronizes the visibility of the tray with the <i>visible</i> argument,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * or with the <code>visible</code> attribute if an argument is not
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * provided.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @method _syncVisibility
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {Boolean} visible (optional) Visibility.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _syncVisibility: function (visible) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (this.get(ALWAYS_SHOW_LIST)) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich visible = true;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(VISIBLE, visible);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (typeof visible === 'undefined') {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich visible = this.get(VISIBLE);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._inputNode.set('aria-expanded', visible);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich this._boundingBox.set('aria-hidden', !visible);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (visible) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._syncPosition();
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich } else {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(ACTIVE_ITEM, null);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._set(HOVERED_ITEM, null);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // Force a reflow to work around a glitch in IE6 and 7 where some of
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // the contents of the list will sometimes remain visible after the
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // container is hidden.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._boundingBox.get('offsetWidth');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // -- Protected Event Handlers ---------------------------------------------
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Handles <code>activeItemChange</code> events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _afterActiveItemChange
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventTarget} e
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich _afterActiveItemChange: function (e) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var inputNode = this._inputNode,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich newVal = e.newVal,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich prevVal = e.prevVal,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich node;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich // The previous item may have disappeared by the time this handler runs,
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich // so we need to be careful.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (prevVal && prevVal._node) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich prevVal.removeClass(this[_CLASS_ITEM_ACTIVE]);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (newVal) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich newVal.addClass(this[_CLASS_ITEM_ACTIVE]);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich inputNode.set('aria-activedescendant', newVal.get(ID));
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich } else {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich inputNode.removeAttribute('aria-activedescendant');
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich if (this.get('scrollIntoView')) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich node = newVal || inputNode;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (!node.inRegion(Y.DOM.viewportRegion(), true)
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich || !node.inRegion(this._contentBox, true)) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich node.scrollIntoView();
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Handles <code>alwaysShowListChange</code> events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * @method _afterAlwaysShowListChange
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventTarget} e
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _afterAlwaysShowListChange: function (e) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this.set(VISIBLE, e.newVal || this.get(RESULTS).length > 0);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Handles <code>hoveredItemChange</code> events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _afterHoveredItemChange
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventTarget} e
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _afterHoveredItemChange: function (e) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich var newVal = e.newVal,
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich prevVal = e.prevVal;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (prevVal) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich prevVal.removeClass(this[_CLASS_ITEM_HOVER]);
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (newVal) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich newVal.addClass(this[_CLASS_ITEM_HOVER]);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich * Handles <code>mouseover</code> events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _afterMouseOver
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventTarget} e
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _afterMouseOver: function (e) {
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich var itemNode = e.domEvent.target.ancestor(this[_SELECTOR_ITEM], true);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._mouseOverList = true;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich if (itemNode) {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._set(HOVERED_ITEM, itemNode);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich }
71bbbe94567d63ab107a7eab263595bcc6e47833Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich /**
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * Handles <code>mouseout</code> events.
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich *
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @method _afterMouseOut
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @param {EventTarget} e
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich * @protected
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich */
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich _afterMouseOut: function () {
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._mouseOverList = false;
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich this._set(HOVERED_ITEM, null);
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich },
f7fe7479a730247687add3053f0760430498bc71Allen Rabinovich
/**
* Handles <code>resultsChange</code> events.
*
* @method _afterResultsChange
* @param {EventFacade} e
* @protected
*/
_afterResultsChange: function (e) {
this._syncResults(e.newVal);
if (!this.get(ALWAYS_SHOW_LIST)) {
this.set(VISIBLE, !!e.newVal.length);
}
},
/**
* Handles <code>visibleChange</code> events.
*
* @method _afterVisibleChange
* @param {EventFacade} e
* @protected
*/
_afterVisibleChange: function (e) {
this._syncVisibility(!!e.newVal);
},
/**
* Handles <code>inputNode</code> <code>blur</code> events.
*
* @method _onListInputBlur
* @param {EventTarget} e
* @protected
*/
_onListInputBlur: function (e) {
// Hide the list on inputNode blur events, unless the mouse is currently
// over the list (which indicates that the user is probably interacting
// with it). The _lastInputKey property comes from the
// autocomplete-list-keys module.
if (!this._mouseOverList || this._lastInputKey === KEY_TAB) {
this.hide();
}
},
/**
* Delegated event handler for item <code>click</code> events.
*
* @method _onItemClick
* @param {EventTarget} e
* @protected
*/
_onItemClick: function (e) {
var itemNode = e.currentTarget;
this.set(ACTIVE_ITEM, itemNode);
this.selectItem(itemNode, e);
},
// -- Protected Default Event Handlers -------------------------------------
/**
* Default <code>select</code> event handler.
*
* @method _defSelectFn
* @param {EventTarget} e
* @protected
*/
_defSelectFn: function (e) {
var text = e.result.text;
// TODO: support typeahead completion, etc.
this._inputNode.focus();
this._updateValue(text);
this.hide();
}
}, {
ATTRS: {
/**
* If <code>true</code>, the first item in the list will be activated by
* default when the list is initially displayed and when results change.
*
* @attribute activateFirstItem
* @type Boolean
* @default false
*/
activateFirstItem: {
value: false
},
/**
* Item that's currently active, if any. When the user presses enter,
* this is the item that will be selected.
*
* @attribute activeItem
* @type Node
*/
activeItem: {
setter: Y.one,
value: null
},
/**
* If <code>true</code>, the list will remain visible even when there
* are no results to display.
*
* @attribute alwaysShowList
* @type Boolean
* @default false
*/
alwaysShowList: {
value: false
},
/**
* If <code>true</code>, keyboard navigation will wrap around to the
* opposite end of the list when navigating past the first or last item.
*
* @attribute circular
* @type Boolean
* @default true
*/
circular: {
value: true
},
/**
* Item currently being hovered over by the mouse, if any.
*
* @attribute hoveredItem
* @type Node|null
* @readOnly
*/
hoveredItem: {
readOnly: true,
value: null
},
/**
* Node that will contain result items.
*
* @attribute listNode
* @type Node|null
* @initOnly
*/
listNode: {
writeOnce: 'initOnly',
value: null
},
/**
* If <code>true</code>, the viewport will be scrolled to ensure that
* the active list item is visible when necessary.
*
* @attribute scrollIntoView
* @type Boolean
* @default false
*/
scrollIntoView: {
value: false
},
/**
* If <code>true</code>, pressing the tab key while the list is visible
* will select the active item, if any.
*
* @attribute tabSelect
* @type Boolean
* @default true
*/
tabSelect: {
value: true
},
// The "visible" attribute is documented in Widget.
visible: {
value: false
}
},
CSS_PREFIX: Y.ClassNameManager.getClassName('aclist')
});
Y.AutoCompleteList = List;
/**
* Alias for <a href="AutoCompleteList.html"><code>AutoCompleteList</code></a>.
* See that class for API docs.
*
* @class AutoComplete
*/
Y.AutoComplete = List;
}, '@VERSION@' ,{after:['autocomplete-sources'], requires:['autocomplete-base', 'event-resize', 'node-screen', 'selector-css3', 'shim-plugin', 'widget', 'widget-position', 'widget-position-align'], skinnable:true});