OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 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 /** | 5 /** |
6 * @fileoverview This file provides utility functions for position popups. | 6 * @fileoverview This file provides utility functions for position popups. |
7 */ | 7 */ |
8 | 8 |
9 cr.exportPath('cr.ui'); | 9 cr.exportPath('cr.ui'); |
10 | 10 |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
50 var AnchorType = cr.ui.AnchorType; | 50 var AnchorType = cr.ui.AnchorType; |
51 | 51 |
52 /** | 52 /** |
53 * Helper function for positionPopupAroundElement and positionPopupAroundRect. | 53 * Helper function for positionPopupAroundElement and positionPopupAroundRect. |
54 * @param {!cr.ui.Rect} anchorRect The rect for the anchor. | 54 * @param {!cr.ui.Rect} anchorRect The rect for the anchor. |
55 * @param {!HTMLElement} popupElement The element used for the popup. | 55 * @param {!HTMLElement} popupElement The element used for the popup. |
56 * @param {cr.ui.AnchorType} type The type of anchoring to do. | 56 * @param {cr.ui.AnchorType} type The type of anchoring to do. |
57 * @param {boolean=} opt_invertLeftRight Whether to invert the right/left | 57 * @param {boolean=} opt_invertLeftRight Whether to invert the right/left |
58 * alignment. | 58 * alignment. |
59 */ | 59 */ |
60 function positionPopupAroundRect(anchorRect, popupElement, type, | 60 function positionPopupAroundRect( |
61 opt_invertLeftRight) { | 61 anchorRect, popupElement, type, opt_invertLeftRight) { |
62 var popupRect = popupElement.getBoundingClientRect(); | 62 var popupRect = popupElement.getBoundingClientRect(); |
63 var availRect; | 63 var availRect; |
64 var ownerDoc = popupElement.ownerDocument; | 64 var ownerDoc = popupElement.ownerDocument; |
65 var cs = ownerDoc.defaultView.getComputedStyle(popupElement); | 65 var cs = ownerDoc.defaultView.getComputedStyle(popupElement); |
66 var docElement = ownerDoc.documentElement; | 66 var docElement = ownerDoc.documentElement; |
67 | 67 |
68 if (cs.position == 'fixed') { | 68 if (cs.position == 'fixed') { |
69 // For 'fixed' positioned popups, the available rectangle should be based | 69 // For 'fixed' positioned popups, the available rectangle should be based |
70 // on the viewport rather than the document. | 70 // on the viewport rather than the document. |
71 availRect = { | 71 availRect = { |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
154 | 154 |
155 // Secondary direction | 155 // Secondary direction |
156 switch (type) { | 156 switch (type) { |
157 case AnchorType.BELOW: | 157 case AnchorType.BELOW: |
158 case AnchorType.ABOVE: | 158 case AnchorType.ABOVE: |
159 if (opt_invertLeftRight) { | 159 if (opt_invertLeftRight) { |
160 // align right edges | 160 // align right edges |
161 if (anchorRect.right - popupRect.width >= 0) { | 161 if (anchorRect.right - popupRect.width >= 0) { |
162 style.right = availRect.width - anchorRect.right + 'px'; | 162 style.right = availRect.width - anchorRect.right + 'px'; |
163 | 163 |
164 // align left edges | 164 // align left edges |
165 } else if (anchorRect.left + popupRect.width <= availRect.width) { | 165 } else if (anchorRect.left + popupRect.width <= availRect.width) { |
166 style.left = anchorRect.left + 'px'; | 166 style.left = anchorRect.left + 'px'; |
167 | 167 |
168 // not enough room on either side | 168 // not enough room on either side |
169 } else { | 169 } else { |
170 style.right = '0'; | 170 style.right = '0'; |
171 } | 171 } |
172 } else { | 172 } else { |
173 // align left edges | 173 // align left edges |
174 if (anchorRect.left + popupRect.width <= availRect.width) { | 174 if (anchorRect.left + popupRect.width <= availRect.width) { |
175 style.left = anchorRect.left + 'px'; | 175 style.left = anchorRect.left + 'px'; |
176 | 176 |
177 // align right edges | 177 // align right edges |
178 } else if (anchorRect.right - popupRect.width >= 0) { | 178 } else if (anchorRect.right - popupRect.width >= 0) { |
179 style.right = availRect.width - anchorRect.right + 'px'; | 179 style.right = availRect.width - anchorRect.right + 'px'; |
180 | 180 |
181 // not enough room on either side | 181 // not enough room on either side |
182 } else { | 182 } else { |
183 style.left = '0'; | 183 style.left = '0'; |
184 } | 184 } |
185 } | 185 } |
186 break; | 186 break; |
187 | 187 |
188 case AnchorType.AFTER: | 188 case AnchorType.AFTER: |
189 case AnchorType.BEFORE: | 189 case AnchorType.BEFORE: |
190 // align top edges | 190 // align top edges |
191 if (anchorRect.top + popupRect.height <= availRect.height) { | 191 if (anchorRect.top + popupRect.height <= availRect.height) { |
192 style.top = anchorRect.top + 'px'; | 192 style.top = anchorRect.top + 'px'; |
193 | 193 |
194 // align bottom edges | 194 // align bottom edges |
195 } else if (anchorRect.bottom - popupRect.height >= 0) { | 195 } else if (anchorRect.bottom - popupRect.height >= 0) { |
196 style.bottom = availRect.height - anchorRect.bottom + 'px'; | 196 style.bottom = availRect.height - anchorRect.bottom + 'px'; |
197 | 197 |
198 // not enough room on either side | 198 // not enough room on either side |
199 } else { | 199 } else { |
200 style.top = '0'; | 200 style.top = '0'; |
201 } | 201 } |
202 break; | 202 break; |
203 } | 203 } |
204 } | 204 } |
205 | 205 |
206 /** | 206 /** |
207 * Positions a popup element relative to an anchor element. The popup element | 207 * Positions a popup element relative to an anchor element. The popup element |
208 * should have position set to absolute and it should be a child of the body | 208 * should have position set to absolute and it should be a child of the body |
209 * element. | 209 * element. |
210 * @param {!HTMLElement} anchorElement The element that the popup is anchored | 210 * @param {!HTMLElement} anchorElement The element that the popup is anchored |
211 * to. | 211 * to. |
212 * @param {!HTMLElement} popupElement The popup element we are positioning. | 212 * @param {!HTMLElement} popupElement The popup element we are positioning. |
213 * @param {cr.ui.AnchorType} type The type of anchoring we want. | 213 * @param {cr.ui.AnchorType} type The type of anchoring we want. |
214 * @param {boolean=} opt_invertLeftRight Whether to invert the right/left | 214 * @param {boolean=} opt_invertLeftRight Whether to invert the right/left |
215 * alignment. | 215 * alignment. |
216 */ | 216 */ |
217 function positionPopupAroundElement(anchorElement, popupElement, type, | 217 function positionPopupAroundElement( |
218 opt_invertLeftRight) { | 218 anchorElement, popupElement, type, opt_invertLeftRight) { |
219 var anchorRect = anchorElement.getBoundingClientRect(); | 219 var anchorRect = anchorElement.getBoundingClientRect(); |
220 positionPopupAroundRect(anchorRect, popupElement, type, | 220 positionPopupAroundRect( |
221 !!opt_invertLeftRight); | 221 anchorRect, popupElement, type, !!opt_invertLeftRight); |
222 } | 222 } |
223 | 223 |
224 /** | 224 /** |
225 * Positions a popup around a point. | 225 * Positions a popup around a point. |
226 * @param {number} x The client x position. | 226 * @param {number} x The client x position. |
227 * @param {number} y The client y position. | 227 * @param {number} y The client y position. |
228 * @param {!HTMLElement} popupElement The popup element we are positioning. | 228 * @param {!HTMLElement} popupElement The popup element we are positioning. |
229 * @param {cr.ui.AnchorType=} opt_anchorType The type of anchoring we want. | 229 * @param {cr.ui.AnchorType=} opt_anchorType The type of anchoring we want. |
230 */ | 230 */ |
231 function positionPopupAtPoint(x, y, popupElement, opt_anchorType) { | 231 function positionPopupAtPoint(x, y, popupElement, opt_anchorType) { |
232 var rect = { | 232 var rect = {left: x, top: y, width: 0, height: 0, right: x, bottom: y}; |
233 left: x, | |
234 top: y, | |
235 width: 0, | |
236 height: 0, | |
237 right: x, | |
238 bottom: y | |
239 }; | |
240 | 233 |
241 var anchorType = opt_anchorType || AnchorType.BELOW; | 234 var anchorType = opt_anchorType || AnchorType.BELOW; |
242 positionPopupAroundRect(rect, popupElement, anchorType); | 235 positionPopupAroundRect(rect, popupElement, anchorType); |
243 } | 236 } |
244 | 237 |
245 // Export | 238 // Export |
246 return { | 239 return { |
247 positionPopupAroundElement: positionPopupAroundElement, | 240 positionPopupAroundElement: positionPopupAroundElement, |
248 positionPopupAtPoint: positionPopupAtPoint | 241 positionPopupAtPoint: positionPopupAtPoint |
249 }; | 242 }; |
250 }); | 243 }); |
OLD | NEW |