Index: ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js |
diff --git a/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js b/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js |
index 42b00655dd9e1ba6b45a7acd27a3892e9ef6d2fa..eea5b77ea414752ccdd53f3af71ab1418ddf76b9 100644 |
--- a/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js |
+++ b/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js |
@@ -2,6 +2,22 @@ |
// Use of this source code is governed by a BSD-style license that can be |
// found in the LICENSE file. |
+/** |
+ * @typedef {{ |
+ * top: number, |
+ * left: number, |
+ * width: (number| undefined), |
+ * height: (number| undefined), |
+ * anchorPositionX: (number| undefined), |
+ * anchorPositionY: (number| undefined), |
+ * minX: (number| undefined), |
+ * minY: (number| undefined), |
+ * maxX: (number| undefined), |
+ * maxY: (number| undefined), |
+ * }} |
+ */ |
+var ShowConfig; |
+ |
Polymer({ |
is: 'cr-action-menu', |
extends: 'dialog', |
@@ -151,7 +167,9 @@ Polymer({ |
// Removing 'resize' and 'popstate' listeners when dialog is closed. |
this.removeListeners_(); |
HTMLDialogElement.prototype.close.call(this); |
- this.anchorElement_.focus(); |
+ if (this.anchorElement_) |
+ this.anchorElement_.focus(); |
+ |
this.anchorElement_ = null; |
dpapad
2017/04/14 22:06:31
This line should be inside the if too,
if (this.a
calamity
2017/04/19 05:31:07
Done.
|
}, |
@@ -161,6 +179,67 @@ Polymer({ |
*/ |
showAt: function(anchorElement) { |
this.anchorElement_ = anchorElement; |
+ this.anchorElement_.scrollIntoViewIfNeeded(); |
+ var rect = this.anchorElement_.getBoundingClientRect(); |
+ this.showAtPosition({ |
+ top: rect.top, |
+ left: rect.left, |
+ height: rect.height, |
+ width: rect.width, |
+ // Default to anchoring towards the left. |
+ anchorPositionX: -1, |
+ }); |
+ }, |
+ |
+ /** |
+ * Returns the point to start along the X or Y axis given a start and end |
+ * point to anchor to, the length of the target and the direction to anchor |
+ * in. If honoring the anchor would force the menu outside of min/max, this |
+ * will ignore the anchor position and try to keep the menu within min/max. |
+ * @param {number} start |
+ * @param {number} end |
+ * @param {number} length |
+ * @param {number} anchorPosition |
+ * @param {number} min |
+ * @param {number} max |
+ * @return {number} |
+ */ |
+ getStartPointWithAnchor: function( |
+ start, end, length, anchorPosition, min, max) { |
+ var startPoint = (start + end - length) / 2 + |
dpapad
2017/04/14 22:06:31
TL;DR equivalent to
var startPoint = anchorPositio
calamity
2017/04/19 05:31:07
It depends if you ever want to center-align a men
dpapad
2017/04/19 21:41:55
Ok, I kind of understand the generalization need b
calamity
2017/04/24 05:20:54
I'm not a fan of calling this percent, given that
dpapad
2017/04/25 17:42:43
If you think that will be cleaner, I am fine with
calamity
2017/04/26 03:15:50
Changed to AnchorAlignment. I think this covers li
|
+ (start - end + length) * anchorPosition / 2; |
+ if (startPoint + length > max) |
+ startPoint = end - length; |
+ if (startPoint < min) |
+ startPoint = start; |
+ return startPoint; |
+ }, |
+ |
+ /** |
+ * Shows the menu anchored to the given box. |
+ * @param {ShowConfig} config |
dpapad
2017/04/14 22:06:31
!ShowConfig
calamity
2017/04/19 05:31:07
Done.
|
+ */ |
+ showAtPosition: function(config) { |
+ /** |
+ * @param {number|undefined} value |
+ * @param {number} defaultValue |
+ * @return {number} |
+ */ |
+ var defaultIfUndefined = function(value, defaultValue) { |
+ return value == undefined ? defaultValue : value; |
+ }; |
+ |
+ var top = config.top; |
dpapad
2017/04/14 22:06:31
Lines 232-241 are basically creating a ShowConfig
calamity
2017/04/19 05:31:07
Done.
|
+ var left = config.left; |
+ var bottom = top + defaultIfUndefined(config.height, 0); |
+ var right = left + defaultIfUndefined(config.width, 0); |
+ var anchorPositionX = defaultIfUndefined(config.anchorPositionX, 1); |
+ var anchorPositionY = defaultIfUndefined(config.anchorPositionY, 1); |
+ var minX = defaultIfUndefined(config.minX, 0); |
+ var maxX = defaultIfUndefined(config.maxX, window.innerWidth); |
+ var minY = defaultIfUndefined(config.minY, 0); |
+ var maxY = defaultIfUndefined(config.maxY, window.innerHeight); |
+ |
this.boundClose_ = this.boundClose_ || function() { |
if (this.open) |
this.close(); |
@@ -173,25 +252,25 @@ Polymer({ |
this.style.right = ''; |
this.style.top = ''; |
- this.anchorElement_.scrollIntoViewIfNeeded(); |
this.showModal(); |
- var rect = this.anchorElement_.getBoundingClientRect(); |
- if (getComputedStyle(this.anchorElement_).direction == 'rtl') { |
- var right = window.innerWidth - rect.left - this.offsetWidth; |
- this.style.right = right + 'px'; |
+ // Flip the X anchor in RTL. |
+ var rtl = getComputedStyle(this).direction == 'rtl'; |
+ if (rtl) |
+ anchorPositionX *= -1; |
+ |
+ var menuLeft = this.getStartPointWithAnchor( |
+ left, right, this.offsetWidth, anchorPositionX, minX, maxX); |
+ |
+ if (rtl) { |
+ var menuRight = window.innerWidth - menuLeft - this.offsetWidth; |
+ this.style.right = menuRight + 'px'; |
} else { |
- var left = rect.right - this.offsetWidth; |
- this.style.left = left + 'px'; |
+ this.style.left = menuLeft + 'px'; |
} |
- // Attempt to show the menu starting from the top of the rectangle and |
- // extending downwards. If that does not fit within the window, fallback to |
- // starting from the bottom and extending upwards. |
- var top = rect.top + this.offsetHeight <= window.innerHeight ? rect.top : |
- rect.bottom - |
- this.offsetHeight - Math.max(rect.bottom - window.innerHeight, 0); |
- |
- this.style.top = top + 'px'; |
+ var menuTop = this.getStartPointWithAnchor( |
+ top, bottom, this.offsetHeight, anchorPositionY, minY, maxY); |
+ this.style.top = menuTop + 'px'; |
}, |
}); |