OLD | NEW |
| (Empty) |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @fileoverview This file provides utility functions for position popups. | |
7 */ | |
8 | |
9 cr.define('cr.ui', function() { | |
10 | |
11 /** | |
12 * Type def for rects as returned by getBoundingClientRect. | |
13 * @typedef { {left: number, top: number, width: number, height: number, | |
14 * right: number, bottom: number}} | |
15 */ | |
16 var Rect; | |
17 | |
18 /** @const */ | |
19 var AnchorType = cr.ui.AnchorType; | |
20 | |
21 /** | |
22 * @type {number} | |
23 * @const | |
24 */ | |
25 var BOOKMARK_BAR_HEIGHT = 48; | |
26 | |
27 /** | |
28 * Helper function for positionPopupAroundElement and positionPopupAroundRect. | |
29 * @param {!Rect} anchorRect The rect for the anchor. | |
30 * @param {!HTMLElement} popupElement The element used for the popup. | |
31 * @param {AnchorType} type The type of anchoring to do. | |
32 * @param {boolean} invertLeftRight Whether to invert the right/left | |
33 * alignment. | |
34 */ | |
35 function positionPopupAroundRect(anchorRect, popupElement, type, | |
36 invertLeftRight) { | |
37 var popupRect = popupElement.getBoundingClientRect(); | |
38 var availRect; | |
39 var ownerDoc = popupElement.ownerDocument; | |
40 var cs = ownerDoc.defaultView.getComputedStyle(popupElement); | |
41 var docElement = ownerDoc.documentElement; | |
42 | |
43 if (cs.position == 'fixed') { | |
44 // For 'fixed' positioned popups, the available rectangle should be based | |
45 // on the viewport rather than the document. | |
46 availRect = { | |
47 height: docElement.clientHeight, | |
48 width: docElement.clientWidth, | |
49 top: 0, | |
50 bottom: docElement.clientHeight, | |
51 left: 0, | |
52 right: docElement.clientWidth | |
53 }; | |
54 } else { | |
55 availRect = popupElement.offsetParent.getBoundingClientRect(); | |
56 } | |
57 | |
58 if (cs.direction == 'rtl') | |
59 invertLeftRight = !invertLeftRight; | |
60 | |
61 // Flip BEFORE, AFTER based on alignment. | |
62 if (invertLeftRight) { | |
63 if (type == AnchorType.BEFORE) | |
64 type = AnchorType.AFTER; | |
65 else if (type == AnchorType.AFTER) | |
66 type = AnchorType.BEFORE; | |
67 } | |
68 | |
69 // Flip type based on available size | |
70 switch (type) { | |
71 case AnchorType.BELOW: | |
72 // Do not flip when the type is below to avoid crbug.com/164113. | |
73 break; | |
74 case AnchorType.ABOVE: | |
75 if (popupRect.height > anchorRect.top && | |
76 anchorRect.bottom + popupRect.height <= availRect.height) { | |
77 type = AnchorType.BELOW; | |
78 } | |
79 break; | |
80 case AnchorType.AFTER: | |
81 if (anchorRect.right + popupRect.width > availRect.width && | |
82 popupRect.width <= anchorRect.left) { | |
83 type = AnchorType.BEFORE; | |
84 } | |
85 break; | |
86 case AnchorType.BEFORE: | |
87 if (popupRect.width > anchorRect.left && | |
88 anchorRect.right + popupRect.width <= availRect.width) { | |
89 type = AnchorType.AFTER; | |
90 } | |
91 break; | |
92 default: | |
93 assert(false, 'unknown type'); | |
94 } | |
95 // flipping done | |
96 | |
97 var style = popupElement.style; | |
98 // Reset all directions. | |
99 style.left = style.right = style.top = style.bottom = 'auto'; | |
100 | |
101 // Primary direction | |
102 switch (type) { | |
103 case AnchorType.BELOW: | |
104 if (anchorRect.bottom + popupRect.height <= availRect.height - | |
105 BOOKMARK_BAR_HEIGHT) { | |
106 style.top = anchorRect.bottom + 'px'; | |
107 } else { | |
108 style.bottom = BOOKMARK_BAR_HEIGHT + 'px'; | |
109 } | |
110 break; | |
111 case AnchorType.ABOVE: | |
112 if (availRect.height - anchorRect.top >= 0) | |
113 style.bottom = availRect.height - anchorRect.top + 'px'; | |
114 else | |
115 style.top = '0'; | |
116 break; | |
117 case AnchorType.AFTER: | |
118 if (anchorRect.right + popupRect.width <= availRect.width) | |
119 style.left = anchorRect.right + 'px'; | |
120 else | |
121 style.right = '0'; | |
122 break; | |
123 case AnchorType.BEFORE: | |
124 if (availRect.width - anchorRect.left >= 0) | |
125 style.right = availRect.width - anchorRect.left + 'px'; | |
126 else | |
127 style.left = '0'; | |
128 break; | |
129 } | |
130 | |
131 // Secondary direction | |
132 switch (type) { | |
133 case AnchorType.BELOW: | |
134 case AnchorType.ABOVE: | |
135 if (invertLeftRight) { | |
136 // align right edges | |
137 if (anchorRect.right - popupRect.width >= 0) { | |
138 style.right = availRect.width - anchorRect.right + 'px'; | |
139 | |
140 // align left edges | |
141 } else if (anchorRect.left + popupRect.width <= availRect.width) { | |
142 style.left = anchorRect.left + 'px'; | |
143 | |
144 // not enough room on either side | |
145 } else { | |
146 style.right = '0'; | |
147 } | |
148 } else { | |
149 // align left edges | |
150 if (anchorRect.left + popupRect.width <= availRect.width) { | |
151 style.left = anchorRect.left + 'px'; | |
152 | |
153 // align right edges | |
154 } else if (anchorRect.right - popupRect.width >= 0) { | |
155 style.right = availRect.width - anchorRect.right + 'px'; | |
156 | |
157 // not enough room on either side | |
158 } else { | |
159 style.left = '0'; | |
160 } | |
161 } | |
162 break; | |
163 | |
164 case AnchorType.AFTER: | |
165 case AnchorType.BEFORE: | |
166 // align top edges | |
167 if (anchorRect.top + popupRect.height <= availRect.height) { | |
168 style.top = anchorRect.top + 'px'; | |
169 | |
170 // align bottom edges | |
171 } else if (anchorRect.bottom - popupRect.height >= 0) { | |
172 style.bottom = availRect.height - anchorRect.bottom + 'px'; | |
173 | |
174 // not enough room on either side | |
175 } else { | |
176 style.top = '0'; | |
177 } | |
178 break; | |
179 } | |
180 } | |
181 | |
182 /** | |
183 * Positions a popup element relative to an anchor element. The popup element | |
184 * should have position set to absolute and it should be a child of the body | |
185 * element. | |
186 * @param {!HTMLElement} anchorElement The element that the popup is anchored | |
187 * to. | |
188 * @param {!HTMLElement} popupElement The popup element we are positioning. | |
189 * @param {AnchorType} type The type of anchoring we want. | |
190 * @param {boolean} invertLeftRight Whether to invert the right/left | |
191 * alignment. | |
192 */ | |
193 function positionPopupAroundElement(anchorElement, popupElement, type, | |
194 invertLeftRight) { | |
195 var anchorRect = anchorElement.getBoundingClientRect(); | |
196 positionPopupAroundRect(anchorRect, popupElement, type, invertLeftRight); | |
197 } | |
198 | |
199 /** | |
200 * Positions a popup around a point. | |
201 * @param {number} x The client x position. | |
202 * @param {number} y The client y position. | |
203 * @param {!HTMLElement} popupElement The popup element we are positioning. | |
204 */ | |
205 function positionPopupAtPoint(x, y, popupElement) { | |
206 var rect = { | |
207 left: x, | |
208 top: y, | |
209 width: 0, | |
210 height: 0, | |
211 right: x, | |
212 bottom: y | |
213 }; | |
214 positionPopupAroundRect(rect, popupElement, AnchorType.BELOW); | |
215 } | |
216 | |
217 // Monkey patch popup positioning methods to avoid the popup being hidden | |
218 // by the top overlay. This is a hacky solution, but temporarily necessary | |
219 // until we get rid of the overlay madness. | |
220 // TODO(pedrosimonetti): Remove this code when deprecating the NTP5 Apps. | |
221 cr.ui.positionPopupAroundElement = positionPopupAroundElement; | |
222 cr.ui.positionPopupAtPoint = positionPopupAtPoint; | |
223 }); | |
OLD | NEW |