15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @fileoverview This file provides utility functions for position popups. 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 903b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)cr.exportPath('cr.ui'); 1003b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) 1103b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)/** 1203b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * Type def for rects as returned by getBoundingClientRect. 1303b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @typedef {{left: number, top: number, width: number, height: number, 1403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * right: number, bottom: number}} 1503b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) */ 1603b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)cr.ui.Rect; 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1803b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)/** 1903b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * Enum for defining how to anchor a popup to an anchor element. 2003b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @enum {number} 2103b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) */ 2203b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)cr.ui.AnchorType = { 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popup's right edge is aligned with the left edge of the anchor. 2503b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popup's top edge is aligned with the top edge of the anchor. 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2703b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) BEFORE: 1, // p: right, a: left, p: top, a: top 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 3003b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popop's left edge is aligned with the right edge of the anchor. 3103b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popup's top edge is aligned with the top edge of the anchor. 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3303b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) AFTER: 2, // p: left a: right, p: top, a: top 3403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) 3503b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) /** 3603b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popop's bottom edge is aligned with the top edge of the anchor. 3703b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popup's left edge is aligned with the left edge of the anchor. 3803b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) */ 3903b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) ABOVE: 3, // p: bottom, a: top, p: left, a: left 4003b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) 4103b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) /** 4203b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popop's top edge is aligned with the bottom edge of the anchor. 4303b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * The popup's left edge is aligned with the left edge of the anchor. 4403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) */ 4503b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) BELOW: 4 // p: top, a: bottom, p: left, a: left 4603b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)}; 4703b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) 4803b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles)cr.define('cr.ui', function() { 4903b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) /** @const */ 5003b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) var AnchorType = cr.ui.AnchorType; 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Helper function for positionPopupAroundElement and positionPopupAroundRect. 5403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @param {!cr.ui.Rect} anchorRect The rect for the anchor. 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {!HTMLElement} popupElement The element used for the popup. 5603b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @param {cr.ui.AnchorType} type The type of anchoring to do. 5703b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @param {boolean=} opt_invertLeftRight Whether to invert the right/left 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * alignment. 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function positionPopupAroundRect(anchorRect, popupElement, type, 6103b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) opt_invertLeftRight) { 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var popupRect = popupElement.getBoundingClientRect(); 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var availRect; 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var ownerDoc = popupElement.ownerDocument; 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var cs = ownerDoc.defaultView.getComputedStyle(popupElement); 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var docElement = ownerDoc.documentElement; 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (cs.position == 'fixed') { 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // For 'fixed' positioned popups, the available rectangle should be based 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // on the viewport rather than the document. 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) availRect = { 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: docElement.clientHeight, 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: docElement.clientWidth, 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 0, 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: docElement.clientHeight, 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 0, 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: docElement.clientWidth 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) availRect = popupElement.offsetParent.getBoundingClientRect(); 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (cs.direction == 'rtl') 8403b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) opt_invertLeftRight = !opt_invertLeftRight; 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Flip BEFORE, AFTER based on alignment. 8703b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) if (opt_invertLeftRight) { 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (type == AnchorType.BEFORE) 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.AFTER; 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else if (type == AnchorType.AFTER) 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.BEFORE; 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Flip type based on available size 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (type) { 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BELOW: 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.bottom + popupRect.height > availRect.height && 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) popupRect.height <= anchorRect.top) { 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.ABOVE; 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.ABOVE: 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (popupRect.height > anchorRect.top && 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) anchorRect.bottom + popupRect.height <= availRect.height) { 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.BELOW; 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.AFTER: 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.right + popupRect.width > availRect.width && 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) popupRect.width <= anchorRect.left) { 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.BEFORE; 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BEFORE: 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (popupRect.width > anchorRect.left && 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) anchorRect.right + popupRect.width <= availRect.width) { 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) type = AnchorType.AFTER; 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // flipping done 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var style = popupElement.style; 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Reset all directions. 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = style.right = style.top = style.bottom = 'auto'; 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Primary direction 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (type) { 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BELOW: 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.bottom + popupRect.height <= availRect.height) 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.top = anchorRect.bottom + 'px'; 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.bottom = '0'; 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.ABOVE: 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (availRect.height - anchorRect.top >= 0) 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.bottom = availRect.height - anchorRect.top + 'px'; 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.top = '0'; 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.AFTER: 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.right + popupRect.width <= availRect.width) 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = anchorRect.right + 'px'; 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.right = '0'; 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BEFORE: 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (availRect.width - anchorRect.left >= 0) 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.right = availRect.width - anchorRect.left + 'px'; 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = '0'; 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Secondary direction 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (type) { 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BELOW: 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.ABOVE: 15903b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) if (opt_invertLeftRight) { 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align right edges 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.right - popupRect.width >= 0) { 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.right = availRect.width - anchorRect.right + 'px'; 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align left edges 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else if (anchorRect.left + popupRect.width <= availRect.width) { 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = anchorRect.left + 'px'; 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // not enough room on either side 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.right = '0'; 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align left edges 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.left + popupRect.width <= availRect.width) { 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = anchorRect.left + 'px'; 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align right edges 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else if (anchorRect.right - popupRect.width >= 0) { 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.right = availRect.width - anchorRect.right + 'px'; 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // not enough room on either side 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.left = '0'; 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.AFTER: 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case AnchorType.BEFORE: 1905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align top edges 1915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (anchorRect.top + popupRect.height <= availRect.height) { 1925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.top = anchorRect.top + 'px'; 1935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // align bottom edges 1955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else if (anchorRect.bottom - popupRect.height >= 0) { 1965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.bottom = availRect.height - anchorRect.bottom + 'px'; 1975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // not enough room on either side 1995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 2005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) style.top = '0'; 2015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 2035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Positions a popup element relative to an anchor element. The popup element 2085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * should have position set to absolute and it should be a child of the body 2095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * element. 2105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {!HTMLElement} anchorElement The element that the popup is anchored 2115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * to. 2125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {!HTMLElement} popupElement The popup element we are positioning. 21303b57e008b61dfcb1fbad3aea950ae0e001748b0Torne (Richard Coles) * @param {cr.ui.AnchorType} type The type of anchoring we want. 2141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {boolean=} opt_invertLeftRight Whether to invert the right/left 2155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * alignment. 2165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function positionPopupAroundElement(anchorElement, popupElement, type, 2181320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci opt_invertLeftRight) { 2195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var anchorRect = anchorElement.getBoundingClientRect(); 2201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci positionPopupAroundRect(anchorRect, popupElement, type, 2211320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci !!opt_invertLeftRight); 2225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Positions a popup around a point. 2265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} x The client x position. 2275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} y The client y position. 2285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {!HTMLElement} popupElement The popup element we are positioning. 2295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function positionPopupAtPoint(x, y, popupElement) { 2315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var rect = { 2325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: x, 2335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: y, 2345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 0, 2355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 0, 2365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: x, 2375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: y 2385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 2395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) positionPopupAroundRect(rect, popupElement, AnchorType.BELOW); 2405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Export 2435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return { 2445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) positionPopupAroundElement: positionPopupAroundElement, 2455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) positionPopupAtPoint: positionPopupAtPoint 2465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 2475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}); 248