| 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 'mousemove': 'onMouseMove_', |
| 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 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 76 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') | 77 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') |
| 77 return; | 78 return; |
| 78 | 79 |
| 79 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); | 80 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : -1); |
| 80 if (nextOption) | 81 if (nextOption) |
| 81 nextOption.focus(); | 82 nextOption.focus(); |
| 82 | 83 |
| 83 e.preventDefault(); | 84 e.preventDefault(); |
| 84 }, | 85 }, |
| 85 | 86 |
| 87 debounceFlusher_: null, |
| 88 |
| 89 onMouseMove_: function(e) { |
| 90 var target = e.target; |
| 91 |
| 92 if (!this.debounceFlusher_) { |
| 93 this.debounceFlusher_ = setTimeout(function() { |
| 94 this.flushDebouncer('cr-action-menu-mousemove'); |
| 95 this.debounceFlusher_ = null; |
| 96 }.bind(this), 10); |
| 97 } |
| 98 |
| 99 this.debounce('cr-action-menu-mousemove', function() { |
| 100 if (target.classList.contains('dropdown-item') && |
| 101 target != document.activeElement) |
| 102 target.focus(); |
| 103 else |
| 104 this.focus(); // Blur option focus but keep up/down button working. |
| 105 }.bind(this), 10); |
| 106 }, |
| 107 |
| 86 /** | 108 /** |
| 87 * @param {number} step -1 for getting previous option (up), 1 for getting | 109 * @param {number} step -1 for getting previous option (up), 1 for getting |
| 88 * next option (down). | 110 * next option (down). |
| 89 * @return {?Element} The next focusable option, taking into account | 111 * @return {?Element} The next focusable option, taking into account |
| 90 * disabled/hidden attributes, or null if no focusable option exists. | 112 * disabled/hidden attributes, or null if no focusable option exists. |
| 91 * @private | 113 * @private |
| 92 */ | 114 */ |
| 93 getNextOption_: function(step) { | 115 getNextOption_: function(step) { |
| 94 // Using a counter to ensure no infinite loop occurs if all elements are | 116 // Using a counter to ensure no infinite loop occurs if all elements are |
| 95 // hidden/disabled. | 117 // hidden/disabled. |
| 96 var counter = 0; | 118 var counter = 0; |
| 97 var nextOption = null; | 119 var nextOption = null; |
| 98 var numOptions = this.options_.length; | 120 var numOptions = this.options_.length; |
| 99 var focusedIndex = | 121 var focusedIndex = |
| 100 Array.prototype.indexOf.call(this.options_, this.root.activeElement); | 122 Array.prototype.indexOf.call(this.options_, this.root.activeElement); |
| 101 | 123 |
| 124 // Avoid off-by-one when nothing is focused and up is pressed. |
| 125 if (focusedIndex === -1 && step === -1) |
| 126 focusedIndex = 0; |
| 127 |
| 102 do { | 128 do { |
| 103 focusedIndex = (numOptions + focusedIndex + step) % numOptions; | 129 focusedIndex = (numOptions + focusedIndex + step) % numOptions; |
| 104 nextOption = this.options_[focusedIndex]; | 130 nextOption = this.options_[focusedIndex]; |
| 105 if (nextOption.disabled || nextOption.hidden) | 131 if (nextOption.disabled || nextOption.hidden) |
| 106 nextOption = null; | 132 nextOption = null; |
| 107 counter++; | 133 counter++; |
| 108 } while (!nextOption && counter < numOptions); | 134 } while (!nextOption && counter < numOptions); |
| 109 | 135 |
| 110 return nextOption; | 136 return nextOption; |
| 111 }, | 137 }, |
| (...skipping 39 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 | 177 // 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 | 178 // extending downwards. If that does not fit within the window, fallback to |
| 153 // starting from the bottom and extending upwards. | 179 // starting from the bottom and extending upwards. |
| 154 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : | 180 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : |
| 155 rect.bottom - | 181 rect.bottom - |
| 156 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); | 182 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); |
| 157 | 183 |
| 158 this.style.top = top + 'px'; | 184 this.style.top = top + 'px'; |
| 159 }, | 185 }, |
| 160 }); | 186 }); |
| OLD | NEW |