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

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: experimental debounce 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
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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_) {
scottchen 2017/04/04 20:43:12 Need this, otherwise if the user keeps moving thei
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 }.bind(this), 10);
104 },
105
86 /** 106 /**
87 * @param {number} step -1 for getting previous option (up), 1 for getting 107 * @param {number} step -1 for getting previous option (up), 1 for getting
88 * next option (down). 108 * next option (down).
89 * @return {?Element} The next focusable option, taking into account 109 * @return {?Element} The next focusable option, taking into account
90 * disabled/hidden attributes, or null if no focusable option exists. 110 * disabled/hidden attributes, or null if no focusable option exists.
91 * @private 111 * @private
92 */ 112 */
93 getNextOption_: function(step) { 113 getNextOption_: function(step) {
94 // Using a counter to ensure no infinite loop occurs if all elements are 114 // Using a counter to ensure no infinite loop occurs if all elements are
95 // hidden/disabled. 115 // hidden/disabled.
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
151 // Attempt to show the menu starting from the top of the rectangle and 171 // 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 172 // extending downwards. If that does not fit within the window, fallback to
153 // starting from the bottom and extending upwards. 173 // starting from the bottom and extending upwards.
154 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : 174 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top :
155 rect.bottom - 175 rect.bottom -
156 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); 176 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0);
157 177
158 this.style.top = top + 'px'; 178 this.style.top = top + 'px';
159 }, 179 },
160 }); 180 });
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698