| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 }); |
| OLD | NEW |