Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(280)

Side by Side Diff: ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

Issue 2801453002: MD Settings: mouse movements should focus cr-action-menu items (Closed)
Patch Set: add tests Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698