| OLD | NEW |
| 1 /** | 1 /** |
| 2 * `Polymer.IronMenuBehavior` implements accessible menu behavior. | 2 * `Polymer.IronMenuBehavior` implements accessible menu behavior. |
| 3 * | 3 * |
| 4 * @demo demo/index.html | 4 * @demo demo/index.html |
| 5 * @polymerBehavior Polymer.IronMenuBehavior | 5 * @polymerBehavior Polymer.IronMenuBehavior |
| 6 */ | 6 */ |
| 7 Polymer.IronMenuBehaviorImpl = { | 7 Polymer.IronMenuBehaviorImpl = { |
| 8 | 8 |
| 9 properties: { | 9 properties: { |
| 10 | 10 |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 105 * Given a KeyboardEvent, this method will focus the appropriate item in the | 105 * Given a KeyboardEvent, this method will focus the appropriate item in the |
| 106 * menu (if there is a relevant item, and it is possible to focus it). | 106 * menu (if there is a relevant item, and it is possible to focus it). |
| 107 * | 107 * |
| 108 * @param {KeyboardEvent} event A KeyboardEvent. | 108 * @param {KeyboardEvent} event A KeyboardEvent. |
| 109 */ | 109 */ |
| 110 _focusWithKeyboardEvent: function(event) { | 110 _focusWithKeyboardEvent: function(event) { |
| 111 for (var i = 0, item; item = this.items[i]; i++) { | 111 for (var i = 0, item; item = this.items[i]; i++) { |
| 112 var attr = this.attrForItemTitle || 'textContent'; | 112 var attr = this.attrForItemTitle || 'textContent'; |
| 113 var title = item[attr] || item.getAttribute(attr); | 113 var title = item[attr] || item.getAttribute(attr); |
| 114 | 114 |
| 115 if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCod
e(event.keyCode).toLowerCase()) { | 115 if (!item.hasAttribute('disabled') && title && |
| 116 title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.k
eyCode).toLowerCase()) { |
| 116 this._setFocusedItem(item); | 117 this._setFocusedItem(item); |
| 117 break; | 118 break; |
| 118 } | 119 } |
| 119 } | 120 } |
| 120 }, | 121 }, |
| 121 | 122 |
| 122 /** | 123 /** |
| 123 * Focuses the previous item (relative to the currently focused item) in the | 124 * Focuses the previous item (relative to the currently focused item) in the |
| 124 * menu. | 125 * menu, disabled items will be skipped. |
| 125 */ | 126 */ |
| 126 _focusPrevious: function() { | 127 _focusPrevious: function() { |
| 127 var length = this.items.length; | 128 var length = this.items.length; |
| 128 var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length
; | 129 var curFocusIndex = Number(this.indexOf(this.focusedItem)); |
| 129 this._setFocusedItem(this.items[index]); | 130 for (var i = 1; i < length; i++) { |
| 131 var item = this.items[(curFocusIndex - i + length) % length]; |
| 132 if (!item.hasAttribute('disabled')) { |
| 133 this._setFocusedItem(item); |
| 134 return; |
| 135 } |
| 136 } |
| 130 }, | 137 }, |
| 131 | 138 |
| 132 /** | 139 /** |
| 133 * Focuses the next item (relative to the currently focused item) in the | 140 * Focuses the next item (relative to the currently focused item) in the |
| 134 * menu. | 141 * menu, disabled items will be skipped. |
| 135 */ | 142 */ |
| 136 _focusNext: function() { | 143 _focusNext: function() { |
| 137 var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.leng
th; | 144 var length = this.items.length; |
| 138 this._setFocusedItem(this.items[index]); | 145 var curFocusIndex = Number(this.indexOf(this.focusedItem)); |
| 146 for (var i = 1; i < length; i++) { |
| 147 var item = this.items[(curFocusIndex + i) % length]; |
| 148 if (!item.hasAttribute('disabled')) { |
| 149 this._setFocusedItem(item); |
| 150 return; |
| 151 } |
| 152 } |
| 139 }, | 153 }, |
| 140 | 154 |
| 141 /** | 155 /** |
| 142 * Mutates items in the menu based on provided selection details, so that | 156 * Mutates items in the menu based on provided selection details, so that |
| 143 * all items correctly reflect selection state. | 157 * all items correctly reflect selection state. |
| 144 * | 158 * |
| 145 * @param {Element} item An item in the menu. | 159 * @param {Element} item An item in the menu. |
| 146 * @param {boolean} isSelected True if the item should be shown in a | 160 * @param {boolean} isSelected True if the item should be shown in a |
| 147 * selected state, otherwise false. | 161 * selected state, otherwise false. |
| 148 */ | 162 */ |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 237 this._defaultFocusAsync = this.async(function() { | 251 this._defaultFocusAsync = this.async(function() { |
| 238 // focus the selected item when the menu receives focus, or the first it
em | 252 // focus the selected item when the menu receives focus, or the first it
em |
| 239 // if no item is selected | 253 // if no item is selected |
| 240 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem
s[0]) : this.selectedItem; | 254 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem
s[0]) : this.selectedItem; |
| 241 | 255 |
| 242 this._setFocusedItem(null); | 256 this._setFocusedItem(null); |
| 243 | 257 |
| 244 if (selectedItem) { | 258 if (selectedItem) { |
| 245 this._setFocusedItem(selectedItem); | 259 this._setFocusedItem(selectedItem); |
| 246 } else if (this.items[0]) { | 260 } else if (this.items[0]) { |
| 247 this._setFocusedItem(this.items[0]); | 261 // We find the first none-disabled item (if one exists) |
| 262 this._focusNext(); |
| 248 } | 263 } |
| 249 }); | 264 }); |
| 250 }, | 265 }, |
| 251 | 266 |
| 252 /** | 267 /** |
| 253 * Handler that is called when the up key is pressed. | 268 * Handler that is called when the up key is pressed. |
| 254 * | 269 * |
| 255 * @param {CustomEvent} event A key combination event. | 270 * @param {CustomEvent} event A key combination event. |
| 256 */ | 271 */ |
| 257 _onUpKey: function(event) { | 272 _onUpKey: function(event) { |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 301 }; | 316 }; |
| 302 | 317 |
| 303 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; | 318 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; |
| 304 | 319 |
| 305 /** @polymerBehavior Polymer.IronMenuBehavior */ | 320 /** @polymerBehavior Polymer.IronMenuBehavior */ |
| 306 Polymer.IronMenuBehavior = [ | 321 Polymer.IronMenuBehavior = [ |
| 307 Polymer.IronMultiSelectableBehavior, | 322 Polymer.IronMultiSelectableBehavior, |
| 308 Polymer.IronA11yKeysBehavior, | 323 Polymer.IronA11yKeysBehavior, |
| 309 Polymer.IronMenuBehaviorImpl | 324 Polymer.IronMenuBehaviorImpl |
| 310 ]; | 325 ]; |
| OLD | NEW |