Index: polymer_1.2.3/bower_components/iron-menu-behavior/iron-menu-behavior.html |
diff --git a/polymer_1.0.4/bower_components/iron-menu-behavior/iron-menu-behavior.html b/polymer_1.2.3/bower_components/iron-menu-behavior/iron-menu-behavior.html |
similarity index 52% |
copy from polymer_1.0.4/bower_components/iron-menu-behavior/iron-menu-behavior.html |
copy to polymer_1.2.3/bower_components/iron-menu-behavior/iron-menu-behavior.html |
index aa58c7fe6b558d93cb116d3c733147afdbf5265e..b97006114737b84dd69fcbe2c97d3e3281635809 100644 |
--- a/polymer_1.0.4/bower_components/iron-menu-behavior/iron-menu-behavior.html |
+++ b/polymer_1.2.3/bower_components/iron-menu-behavior/iron-menu-behavior.html |
@@ -26,9 +26,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
/** |
* Returns the currently focused item. |
- * |
- * @attribute focusedItem |
- * @type Object |
+ * @type {?Object} |
*/ |
focusedItem: { |
observer: '_focusedItemChanged', |
@@ -40,9 +38,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
* The attribute to use on menu items to look up the item title. Typing the first |
* letter of an item when the menu is open focuses that item. If unset, `textContent` |
* will be used. |
- * |
- * @attribute attrForItemTitle |
- * @type String |
*/ |
attrForItemTitle: { |
type: String |
@@ -60,17 +55,58 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
listeners: { |
'focus': '_onFocus', |
- 'keydown': '_onKeydown' |
+ 'keydown': '_onKeydown', |
+ 'iron-items-changed': '_onIronItemsChanged' |
}, |
keyBindings: { |
'up': '_onUpKey', |
'down': '_onDownKey', |
'esc': '_onEscKey', |
- 'enter': '_onEnterKey', |
'shift+tab:keydown': '_onShiftTabDown' |
}, |
+ attached: function() { |
+ this._resetTabindices(); |
+ }, |
+ |
+ /** |
+ * Selects the given value. If the `multi` property is true, then the selected state of the |
+ * `value` will be toggled; otherwise the `value` will be selected. |
+ * |
+ * @param {string} value the value to select. |
+ */ |
+ select: function(value) { |
+ if (this._defaultFocusAsync) { |
+ this.cancelAsync(this._defaultFocusAsync); |
+ this._defaultFocusAsync = null; |
+ } |
+ var item = this._valueToItem(value); |
+ if (item && item.hasAttribute('disabled')) return; |
+ this._setFocusedItem(item); |
+ Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments); |
+ }, |
+ |
+ /** |
+ * Resets all tabindex attributes to the appropriate value based on the |
+ * current selection state. The appropriate value is `0` (focusable) for |
+ * the default selected item, and `-1` (not keyboard focusable) for all |
+ * other items. |
+ */ |
+ _resetTabindices: function() { |
+ var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem; |
+ |
+ this.items.forEach(function(item) { |
+ item.setAttribute('tabindex', item === selectedItem ? '0' : '-1'); |
+ }, this); |
+ }, |
+ |
+ /** |
+ * Sets appropriate ARIA based on whether or not the menu is meant to be |
+ * multi-selectable. |
+ * |
+ * @param {boolean} multi True if the menu should be multi-selectable. |
+ */ |
_updateMultiselectable: function(multi) { |
if (multi) { |
this.setAttribute('aria-multiselectable', 'true'); |
@@ -79,32 +115,68 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
} |
}, |
- _onShiftTabDown: function() { |
- var oldTabIndex; |
- |
- Polymer.IronMenuBehaviorImpl._shiftTabPressed = true; |
+ /** |
+ * Given a KeyboardEvent, this method will focus the appropriate item in the |
+ * menu (if there is a relevant item, and it is possible to focus it). |
+ * |
+ * @param {KeyboardEvent} event A KeyboardEvent. |
+ */ |
+ _focusWithKeyboardEvent: function(event) { |
+ for (var i = 0, item; item = this.items[i]; i++) { |
+ var attr = this.attrForItemTitle || 'textContent'; |
+ var title = item[attr] || item.getAttribute(attr); |
- oldTabIndex = this.getAttribute('tabindex'); |
+ if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) { |
+ this._setFocusedItem(item); |
+ break; |
+ } |
+ } |
+ }, |
- this.setAttribute('tabindex', '-1'); |
+ /** |
+ * Focuses the previous item (relative to the currently focused item) in the |
+ * menu. |
+ */ |
+ _focusPrevious: function() { |
+ var length = this.items.length; |
+ var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length; |
+ this._setFocusedItem(this.items[index]); |
+ }, |
- this.async(function() { |
- this.setAttribute('tabindex', oldTabIndex); |
- Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; |
- // Note: polymer/polymer#1305 |
- }, 1); |
+ /** |
+ * Focuses the next item (relative to the currently focused item) in the |
+ * menu. |
+ */ |
+ _focusNext: function() { |
+ var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length; |
+ this._setFocusedItem(this.items[index]); |
}, |
+ /** |
+ * Mutates items in the menu based on provided selection details, so that |
+ * all items correctly reflect selection state. |
+ * |
+ * @param {Element} item An item in the menu. |
+ * @param {boolean} isSelected True if the item should be shown in a |
+ * selected state, otherwise false. |
+ */ |
_applySelection: function(item, isSelected) { |
if (isSelected) { |
item.setAttribute('aria-selected', 'true'); |
} else { |
item.removeAttribute('aria-selected'); |
} |
- |
Polymer.IronSelectableBehavior._applySelection.apply(this, arguments); |
}, |
+ /** |
+ * Discretely updates tabindex values among menu items as the focused item |
+ * changes. |
+ * |
+ * @param {Element} focusedItem The element that is currently focused. |
+ * @param {?Element} old The last element that was considered focused, if |
+ * applicable. |
+ */ |
_focusedItemChanged: function(focusedItem, old) { |
old && old.setAttribute('tabindex', '-1'); |
if (focusedItem) { |
@@ -113,93 +185,126 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
} |
}, |
- select: function(value) { |
- if (this._defaultFocusAsync) { |
- this.cancelAsync(this._defaultFocusAsync); |
- this._defaultFocusAsync = null; |
+ /** |
+ * A handler that responds to mutation changes related to the list of items |
+ * in the menu. |
+ * |
+ * @param {CustomEvent} event An event containing mutation records as its |
+ * detail. |
+ */ |
+ _onIronItemsChanged: function(event) { |
+ var mutations = event.detail; |
+ var mutation; |
+ var index; |
+ |
+ for (index = 0; index < mutations.length; ++index) { |
+ mutation = mutations[index]; |
+ |
+ if (mutation.addedNodes.length) { |
+ this._resetTabindices(); |
+ break; |
+ } |
} |
- var item = this._valueToItem(value); |
- this._setFocusedItem(item); |
- Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments); |
}, |
+ /** |
+ * Handler that is called when a shift+tab keypress is detected by the menu. |
+ * |
+ * @param {CustomEvent} event A key combination event. |
+ */ |
+ _onShiftTabDown: function(event) { |
+ var oldTabIndex = this.getAttribute('tabindex'); |
+ |
+ Polymer.IronMenuBehaviorImpl._shiftTabPressed = true; |
+ |
+ this._setFocusedItem(null); |
+ |
+ this.setAttribute('tabindex', '-1'); |
+ |
+ this.async(function() { |
+ this.setAttribute('tabindex', oldTabIndex); |
+ Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; |
+ // NOTE(cdata): polymer/polymer#1305 |
+ }, 1); |
+ }, |
+ |
+ /** |
+ * Handler that is called when the menu receives focus. |
+ * |
+ * @param {FocusEvent} event A focus event. |
+ */ |
_onFocus: function(event) { |
if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) { |
+ // do not focus the menu itself |
return; |
} |
- // do not focus the menu itself |
+ |
this.blur(); |
+ |
// clear the cached focus item |
- this._setFocusedItem(null); |
this._defaultFocusAsync = this.async(function() { |
// focus the selected item when the menu receives focus, or the first item |
// if no item is selected |
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem; |
+ |
+ this._setFocusedItem(null); |
+ |
if (selectedItem) { |
this._setFocusedItem(selectedItem); |
} else { |
this._setFocusedItem(this.items[0]); |
} |
- // async 100ms to wait for `select` to get called from `_itemActivate` |
- }, 100); |
+ // async 1ms to wait for `select` to get called from `_itemActivate` |
+ }, 1); |
}, |
- _onUpKey: function() { |
+ /** |
+ * Handler that is called when the up key is pressed. |
+ * |
+ * @param {CustomEvent} event A key combination event. |
+ */ |
+ _onUpKey: function(event) { |
// up and down arrows moves the focus |
this._focusPrevious(); |
}, |
- _onDownKey: function() { |
+ /** |
+ * Handler that is called when the down key is pressed. |
+ * |
+ * @param {CustomEvent} event A key combination event. |
+ */ |
+ _onDownKey: function(event) { |
this._focusNext(); |
}, |
- _onEscKey: function() { |
+ /** |
+ * Handler that is called when the esc key is pressed. |
+ * |
+ * @param {CustomEvent} event A key combination event. |
+ */ |
+ _onEscKey: function(event) { |
// esc blurs the control |
this.focusedItem.blur(); |
}, |
- _onEnterKey: function(event) { |
- // enter activates the item unless it is disabled |
- this._activateFocused(event.detail.keyboardEvent); |
- }, |
- |
+ /** |
+ * Handler that is called when a keydown event is detected. |
+ * |
+ * @param {KeyboardEvent} event A keyboard event. |
+ */ |
_onKeydown: function(event) { |
- if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) { |
- return; |
- } |
- |
- // all other keys focus the menu item starting with that character |
- this._focusWithKeyboardEvent(event); |
- }, |
- |
- _focusWithKeyboardEvent: function(event) { |
- for (var i = 0, item; item = this.items[i]; i++) { |
- var attr = this.attrForItemTitle || 'textContent'; |
- var title = item[attr] || item.getAttribute(attr); |
- if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) { |
- this._setFocusedItem(item); |
- break; |
- } |
- } |
- }, |
- |
- _activateFocused: function(event) { |
- if (!this.focusedItem.hasAttribute('disabled')) { |
- this._activateHandler(event); |
+ if (!this.keyboardEventMatchesKeys(event, 'up down esc')) { |
+ // all other keys focus the menu item starting with that character |
+ this._focusWithKeyboardEvent(event); |
} |
+ event.stopPropagation(); |
}, |
- _focusPrevious: function() { |
- var length = this.items.length; |
- var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length; |
- this._setFocusedItem(this.items[index]); |
- }, |
- |
- _focusNext: function() { |
- var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length; |
- this._setFocusedItem(this.items[index]); |
+ // override _activateHandler |
+ _activateHandler: function(event) { |
+ Polymer.IronSelectableBehavior._activateHandler.call(this, event); |
+ event.stopPropagation(); |
} |
- |
}; |
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; |