OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> |
| 10 |
| 11 <link rel="import" href="../polymer/polymer.html"> |
| 12 <link rel="import" href="../iron-selector/iron-multi-selectable.html"> |
| 13 |
| 14 <!-- |
| 15 `Polymer.IronMenuBehavior` implements accessible menu behavior. |
| 16 --> |
| 17 |
| 18 <script> |
| 19 |
| 20 Polymer.IronMenuBehavior = Polymer.IronMultiSelectableBehavior.concat({ |
| 21 |
| 22 properties: { |
| 23 |
| 24 /** |
| 25 * Returns the currently focused item. |
| 26 * |
| 27 * @attribute focusedItem |
| 28 * @type Object |
| 29 */ |
| 30 focusedItem: { |
| 31 observer: '_focusedItemChanged', |
| 32 readOnly: true, |
| 33 type: Object |
| 34 }, |
| 35 |
| 36 /** |
| 37 * The attribute to use on menu items to look up the item title. Typing th
e first |
| 38 * letter of an item when the menu is open focuses that item. If unset, `t
extContent` |
| 39 * will be used. |
| 40 * |
| 41 * @attribute attrForItemTitle |
| 42 * @type String |
| 43 */ |
| 44 attrForItemTitle: { |
| 45 type: String |
| 46 } |
| 47 |
| 48 }, |
| 49 |
| 50 observers: [ |
| 51 '_selectedItemsChanged(selectedItems)', |
| 52 '_selectedItemChanged(selectedItem)' |
| 53 ], |
| 54 |
| 55 hostAttributes: { |
| 56 'role': 'menu', |
| 57 'tabindex': '0' |
| 58 }, |
| 59 |
| 60 listeners: { |
| 61 'focus': '_onFocus', |
| 62 'keydown': '_onKeydown' |
| 63 }, |
| 64 |
| 65 _focusedItemChanged: function(focusedItem, old) { |
| 66 old && old.setAttribute('tabindex', '-1'); |
| 67 if (focusedItem) { |
| 68 focusedItem.setAttribute('tabindex', '0'); |
| 69 focusedItem.focus(); |
| 70 } |
| 71 }, |
| 72 |
| 73 _selectedItemsChanged: function(selectedItems) { |
| 74 this._setFocusedItem(selectedItems[0]); |
| 75 }, |
| 76 |
| 77 _selectedItemChanged: function(selectedItem) { |
| 78 this._setFocusedItem(selectedItem); |
| 79 }, |
| 80 |
| 81 _onFocus: function(event) { |
| 82 // clear the cached focus item |
| 83 this._setFocusedItem(null); |
| 84 // focus the selected item when the menu receives focus, or the first item |
| 85 // if no item is selected |
| 86 var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[
0]) : this.selectedItem; |
| 87 if (selectedItem) { |
| 88 this._setFocusedItem(selectedItem); |
| 89 } else { |
| 90 this._setFocusedItem(this.items[0]); |
| 91 } |
| 92 }, |
| 93 |
| 94 _onKeydown: function(event) { |
| 95 // FIXME want to define these somewhere, core-a11y-keys? |
| 96 var DOWN = 40; |
| 97 var UP = 38; |
| 98 var ESC = 27; |
| 99 var ENTER = 13; |
| 100 if (event.keyCode === DOWN) { |
| 101 // up and down arrows moves the focus |
| 102 this._focusNext(); |
| 103 } else if (event.keyCode === UP) { |
| 104 this._focusPrevious(); |
| 105 } else if (event.keyCode === ESC) { |
| 106 // esc blurs the control |
| 107 this.focusedItem.blur(); |
| 108 } else if (event.keyCode === ENTER) { |
| 109 // enter activates the item unless it is disabled |
| 110 if (!this.focusedItem.hasAttribute('disabled')) { |
| 111 this._activateHandler(event); |
| 112 } |
| 113 } else { |
| 114 // all other keys focus the menu item starting with that character |
| 115 for (var i = 0, item; item = this.items[i]; i++) { |
| 116 var attr = this.attrForItemTitle || 'textContent'; |
| 117 var title = item[attr] || item.getAttribute(attr); |
| 118 if (title && title.trim().charAt(0).toLowerCase() === String.fromCharC
ode(event.keyCode).toLowerCase()) { |
| 119 this._setFocusedItem(item); |
| 120 break; |
| 121 } |
| 122 } |
| 123 } |
| 124 }, |
| 125 |
| 126 _focusPrevious: function() { |
| 127 var length = this.items.length; |
| 128 var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length
; |
| 129 this._setFocusedItem(this.items[index]); |
| 130 }, |
| 131 |
| 132 _focusNext: function() { |
| 133 var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.leng
th; |
| 134 this._setFocusedItem(this.items[index]); |
| 135 } |
| 136 |
| 137 }); |
| 138 |
| 139 </script> |
OLD | NEW |