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

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: mimic context menu on mouse out 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
Dan Beam 2017/04/04 22:32:00 jsdoc here (@private, @param)
scottchen 2017/04/04 23:07:27 Done.
89 onMouseMove_: function(e) {
90 var target = e.target;
91
92 if(!this.debounceFlusher_) {
Dan Beam 2017/04/04 22:32:00 please use `git cl format --js` and/or stop forget
scottchen 2017/04/04 23:07:27 I've formatted in the latest patch before you comm
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(){
Dan Beam 2017/04/04 22:32:00 i don't understand why you need this debounce nor
scottchen 2017/04/04 23:07:27 mousemove fires a lot, so I was trying to make the
100 if(target.classList.contains('dropdown-item') &&
101 target != document.activeElement)
Dan Beam 2017/04/04 22:32:00 curlies for this if/else
scottchen 2017/04/04 23:07:27 Done.
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.
(...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 173 // 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 174 // extending downwards. If that does not fit within the window, fallback to
153 // starting from the bottom and extending upwards. 175 // starting from the bottom and extending upwards.
154 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : 176 var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top :
155 rect.bottom - 177 rect.bottom -
156 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); 178 this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0);
157 179
158 this.style.top = top + 'px'; 180 this.style.top = top + 'px';
159 }, 181 },
160 }); 182 });
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