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

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: move off-by-one fix to another CL 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 '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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698