- // Adjust offset to avoid anchor being rendered too close to the edge
- // $anchor.width() doesn't work with the pure CSS anchor (returns 0)
- // TODO: Find a measurement that works for CSS anchors and image anchors
- anchorWidth = this.$anchor[ 0 ].scrollWidth * 2;
- if ( popupOffset + this.width < anchorWidth ) {
- popupOffset = anchorWidth - this.width;
- } else if ( -popupOffset < anchorWidth ) {
- popupOffset = -anchorWidth;
+ // Parent method
+ parentPosition = OO.ui.mixin.FloatableElement.prototype.computePosition.call( this );
+ // Find out which property FloatableElement used for positioning, and adjust that value
+ positionProp = vertical ?
+ ( parentPosition.top !== '' ? 'top' : 'bottom' ) :
+ ( parentPosition.left !== '' ? 'left' : 'right' );
+
+ // Figure out where the near and far edges of the popup and $floatableContainer are
+ floatablePos = this.$floatableContainer.offset();
+ floatablePos[ far ] = floatablePos[ near ] + this.$floatableContainer[ 'outer' + sizeProp ]();
+ // Measure where the offsetParent is and compute our position based on that and parentPosition
+ offsetParentPos = this.$element.offsetParent().offset();
+
+ if ( positionProp === near ) {
+ popupPos[ near ] = offsetParentPos[ near ] + parentPosition[ near ];
+ popupPos[ far ] = popupPos[ near ] + popupSize;
+ } else {
+ popupPos[ far ] = offsetParentPos[ near ] +
+ this.$element.offsetParent()[ 'inner' + sizeProp ]() - parentPosition[ far ];
+ popupPos[ near ] = popupPos[ far ] - popupSize;
+ }
+
+ // Position the anchor (which is positioned relative to the popup) to point to $floatableContainer
+ // For popups above/below, we point to the start edge; for popups before/after, we point to the center
+ anchorPos = vertical ? ( floatablePos[ start ] + floatablePos[ end ] ) / 2 : floatablePos[ start ];
+ anchorOffset = ( start === far ? -1 : 1 ) * ( anchorPos - popupPos[ start ] );
+
+ // If the anchor is less than 2*anchorSize from either edge, move the popup to make more space
+ // this.$anchor.width()/height() returns 0 because of the CSS trickery we use, so use scrollWidth/Height
+ anchorSize = this.$anchor[ 0 ][ 'scroll' + sizeProp ];
+ anchorMargin = parseFloat( this.$anchor.css( 'margin-' + start ) );
+ if ( anchorOffset + anchorMargin < 2 * anchorSize ) {
+ // Not enough space for the anchor on the start side; pull the popup startwards
+ positionAdjustment = ( positionProp === start ? -1 : 1 ) *
+ ( 2 * anchorSize - ( anchorOffset + anchorMargin ) );
+ } else if ( anchorOffset + anchorMargin > popupSize - 2 * anchorSize ) {
+ // Not enough space for the anchor on the end side; pull the popup endwards
+ positionAdjustment = ( positionProp === end ? -1 : 1 ) *
+ ( anchorOffset + anchorMargin - ( popupSize - 2 * anchorSize ) );
+ } else {
+ positionAdjustment = 0;