| 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;
|
|
|