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

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

Issue 2464873003: WebUI: Return focus to anchor element when cr-action-menu is closed. (Closed)
Patch Set: Resolve conflicts. Created 4 years, 1 month 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 | « chrome/test/data/webui/cr_elements/cr_action_menu_test.js ('k') | 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.
11 * @private {?NodeList<!Element>} 11 * @private {?NodeList<!Element>}
12 */ 12 */
13 options_: null, 13 options_: null,
14 14
15 /** 15 /**
16 * The element which the action menu will be anchored to. Also the element
17 * where focus will be returned after the menu is closed.
18 * @private {?Element}
19 */
20 anchorElement_: null,
21
22 /**
16 * Reference to the bound window's resize listener, such that it can be 23 * Reference to the bound window's resize listener, such that it can be
17 * removed on detach. 24 * removed on detach.
18 * @private {?Function} 25 * @private {?Function}
19 */ 26 */
20 onWindowResize_: null, 27 onWindowResize_: null,
21 28
22 hostAttributes: { 29 hostAttributes: {
23 tabindex: 0, 30 tabindex: 0,
24 }, 31 },
25 32
(...skipping 26 matching lines...) Expand all
52 this.close(); 59 this.close();
53 e.stopPropagation(); 60 e.stopPropagation();
54 } 61 }
55 }, 62 },
56 63
57 /** 64 /**
58 * @param {!KeyboardEvent} e 65 * @param {!KeyboardEvent} e
59 * @private 66 * @private
60 */ 67 */
61 onKeyDown_: function(e) { 68 onKeyDown_: function(e) {
62 if (e.key == 'Tab') { 69 if (e.key == 'Tab' || e.key == 'Escape') {
63 this.close(); 70 this.close();
71 e.preventDefault();
64 return; 72 return;
65 } 73 }
66 74
67 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') 75 if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
68 return; 76 return;
69 77
70 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : - 1); 78 var nextOption = this.getNextOption_(e.key == 'ArrowDown' ? 1 : - 1);
71 if (nextOption) 79 if (nextOption)
72 nextOption.focus(); 80 nextOption.focus();
73 81
(...skipping 25 matching lines...) Expand all
99 } while (!nextOption && counter < numOptions); 107 } while (!nextOption && counter < numOptions);
100 108
101 return nextOption; 109 return nextOption;
102 }, 110 },
103 111
104 /** @override */ 112 /** @override */
105 close: function() { 113 close: function() {
106 // Removing 'resize' listener when dialog is closed. 114 // Removing 'resize' listener when dialog is closed.
107 this.removeResizeListener_(); 115 this.removeResizeListener_();
108 HTMLDialogElement.prototype.close.call(this); 116 HTMLDialogElement.prototype.close.call(this);
117 this.anchorElement_.focus();
118 this.anchorElement_ = null;
109 }, 119 },
110 120
111 /** 121 /**
112 * Shows the menu anchored to the given element. 122 * Shows the menu anchored to the given element.
113 * @param {!Element} anchorElement 123 * @param {!Element} anchorElement
114 */ 124 */
115 showAt: function(anchorElement) { 125 showAt: function(anchorElement) {
126 this.anchorElement_ = anchorElement;
116 this.onWindowResize_ = this.onWindowResize_ || function() { 127 this.onWindowResize_ = this.onWindowResize_ || function() {
117 if (this.open) 128 if (this.open)
118 this.close(); 129 this.close();
119 }.bind(this); 130 }.bind(this);
120 window.addEventListener('resize', this.onWindowResize_); 131 window.addEventListener('resize', this.onWindowResize_);
121 132
122 this.showModal(); 133 this.showModal();
123 134
124 var rect = anchorElement.getBoundingClientRect(); 135 var rect = this.anchorElement_.getBoundingClientRect();
125 if (getComputedStyle(anchorElement).direction == 'rtl') { 136 if (getComputedStyle(this.anchorElement_).direction == 'rtl') {
126 var right = window.innerWidth - rect.left - this.offsetWidth; 137 var right = window.innerWidth - rect.left - this.offsetWidth;
127 this.style.right = right + 'px'; 138 this.style.right = right + 'px';
128 } else { 139 } else {
129 var left = rect.right - this.offsetWidth; 140 var left = rect.right - this.offsetWidth;
130 this.style.left = left + 'px'; 141 this.style.left = left + 'px';
131 } 142 }
132 143
133 // Attempt to show the menu starting from the top of the rectangle and 144 // Attempt to show the menu starting from the top of the rectangle and
134 // extending downwards. If that does not fit within the window, fallback to 145 // extending downwards. If that does not fit within the window, fallback to
135 // starting from the bottom and extending upwards. 146 // starting from the bottom and extending upwards.
136 var top = rect.top + this.offsetHeight <= window.innerHeight ? 147 var top = rect.top + this.offsetHeight <= window.innerHeight ?
137 rect.top : 148 rect.top :
138 rect.bottom - this.offsetHeight - Math.max( 149 rect.bottom - this.offsetHeight - Math.max(
139 rect.bottom - window.innerHeight, 0); 150 rect.bottom - window.innerHeight, 0);
140 151
141 this.style.top = top + 'px'; 152 this.style.top = top + 'px';
142 }, 153 },
143 }); 154 });
OLDNEW
« no previous file with comments | « chrome/test/data/webui/cr_elements/cr_action_menu_test.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698