| 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 |