| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 Polymer({ | 5 Polymer({ |
| 6 is: 'cr-action-menu', | 6 is: 'cr-action-menu', |
| 7 extends: 'dialog', | 7 extends: 'dialog', |
| 8 | 8 |
| 9 /** | 9 /** |
| 10 * List of all options in this action menu. | 10 * List of all options in this action menu. |
| (...skipping 14 matching lines...) Expand all Loading... |
| 25 * @private {?Function} | 25 * @private {?Function} |
| 26 */ | 26 */ |
| 27 boundClose_: null, | 27 boundClose_: null, |
| 28 | 28 |
| 29 hostAttributes: { | 29 hostAttributes: { |
| 30 tabindex: 0, | 30 tabindex: 0, |
| 31 }, | 31 }, |
| 32 | 32 |
| 33 listeners: { | 33 listeners: { |
| 34 'keydown': 'onKeyDown_', | 34 'keydown': 'onKeyDown_', |
| 35 'mouseover': 'onMouseover_', |
| 35 'tap': 'onTap_', | 36 'tap': 'onTap_', |
| 36 }, | 37 }, |
| 37 | 38 |
| 38 /** override */ | 39 /** override */ |
| 39 attached: function() { | 40 attached: function() { |
| 40 this.options_ = this.querySelectorAll('.dropdown-item'); | 41 this.options_ = this.querySelectorAll('.dropdown-item'); |
| 41 }, | 42 }, |
| 42 | 43 |
| 43 /** override */ | 44 /** override */ |
| 44 detached: function() { | 45 detached: function() { |
| (...skipping 21 matching lines...) Expand all Loading... |
| 66 * @param {!KeyboardEvent} e | 67 * @param {!KeyboardEvent} e |
| 67 * @private | 68 * @private |
| 68 */ | 69 */ |
| 69 onKeyDown_: function(e) { | 70 onKeyDown_: function(e) { |
| 70 if (e.key == 'Tab' || e.key == 'Escape') { | 71 if (e.key == 'Tab' || e.key == 'Escape') { |
| 71 this.close(); | 72 this.close(); |
| 72 e.preventDefault(); | 73 e.preventDefault(); |
| 73 return; | 74 return; |
| 74 } | 75 } |
| 75 | 76 |
| 77 var mouseHandler = function(e) { |
| 78 this.onMouseover_(e); |
| 79 this.removeEventListener('mousemove', mouseHandler); |
| 80 }; |
| 81 this.addEventListener('mousemove', mouseHandler); |
| 82 |
| 76 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') | 83 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') |
| 77 return; | 84 return; |
| 78 | 85 |
| 79 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); | 86 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); |
| 80 if (nextOption) | 87 if (nextOption) |
| 81 nextOption.focus(); | 88 nextOption.focus(); |
| 82 | 89 |
| 83 e.preventDefault(); | 90 e.preventDefault(); |
| 84 }, | 91 }, |
| 85 | 92 |
| 86 /** | 93 /** |
| 94 * @param {!MouseEvent} e |
| 95 * @private |
| 96 */ |
| 97 onMouseover_: function(e) { |
| 98 // TODO(scottchen): Using "focus" to determine selected item might mess |
| 99 // with screen readers in some edge cases. |
| 100 for (var i = 0, el = e.path[0]; this != el; el = e.path[i++]) { |
| 101 if (el.classList && el.classList.contains('dropdown-item')) { |
| 102 el.focus(); |
| 103 return; |
| 104 } |
| 105 }; |
| 106 |
| 107 // Reached dialog, so el is not an option. |
| 108 this.focus(); // Blur option focus but keep up/down button working. |
| 109 }, |
| 110 |
| 111 /** |
| 87 * @param {number} step -1 for getting previous option (up), 1 for getting | 112 * @param {number} step -1 for getting previous option (up), 1 for getting |
| 88 * next option (down). | 113 * next option (down). |
| 89 * @return {?Element} The next focusable option, taking into account | 114 * @return {?Element} The next focusable option, taking into account |
| 90 * disabled/hidden attributes, or null if no focusable option exists. | 115 * disabled/hidden attributes, or null if no focusable option exists. |
| 91 * @private | 116 * @private |
| 92 */ | 117 */ |
| 93 getNextOption_: function(step) { | 118 getNextOption_: function(step) { |
| 94 // Using a counter to ensure no infinite loop occurs if all elements are | 119 // Using a counter to ensure no infinite loop occurs if all elements are |
| 95 // hidden/disabled. | 120 // hidden/disabled. |
| 96 var counter = 0; | 121 var counter = 0; |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 151 // Attempt to show the menu starting from the top of the rectangle and | 176 // Attempt to show the menu starting from the top of the rectangle and |
| 152 // extending downwards. If that does not fit within the window, fallback to | 177 // extending downwards. If that does not fit within the window, fallback to |
| 153 // starting from the bottom and extending upwards. | 178 // starting from the bottom and extending upwards. |
| 154 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : | 179 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : |
| 155 rect.bottom - | 180 rect.bottom - |
| 156 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); | 181 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); |
| 157 | 182 |
| 158 this.style.top = top + 'px'; | 183 this.style.top = top + 'px'; |
| 159 }, | 184 }, |
| 160 }); | 185 }); |
| OLD | NEW |