diff --git a/src/position/docs/readme.md b/src/position/docs/readme.md index 1dad79aca0..43d55b51bc 100644 --- a/src/position/docs/readme.md +++ b/src/position/docs/readme.md @@ -309,6 +309,40 @@ Gets gets coordinates for an element to be positioned relative to another elemen An object with the following properties: +* `top` + _(Type: `number`)_ - + The targetElement top value. + +* `left` + _(Type: `number`)_ - + The targetElement left value. + +* `right` + _(Type: `number`)_ - + The resolved placement with 'auto' removed. + +#### positionElementAt(clientCoordinates, targetElement, placement) + +Gets gets coordinates for an element to be positioned at relative to the horizontal and vertical client coordinates. + +##### parameters + +* `clientCoordinates` + _(Type: `Object`)_ - + The clientX and clientY coordinates to position against. + +* `targetElement` + _(Type: `element`)_ - + The element to position. + +* `placement` + _(Type: `string`, Default: `top`, optional)_ - + The placement for the target element. See the parsePlacement() function for available options. If 'auto' placement is used, the viewportOffset() function is used to decide where the targetElement will fit. + +##### returns + +An object with the following properties: + * `top` _(Type: `number`)_ - The targetElement top value. diff --git a/src/position/position.js b/src/position/position.js index 3ab066abb5..5fe983bf41 100644 --- a/src/position/position.js +++ b/src/position/position.js @@ -433,51 +433,108 @@ angular.module('ui.bootstrap.position', []) */ positionElements: function(hostElem, targetElem, placement, appendToBody) { hostElem = this.getRawNode(hostElem); + + var hostElemPos = appendToBody ? this.offset(hostElem) : this.position(hostElem); + var viewportOffset = this.viewportOffset(hostElem, appendToBody); + + return this.positionElement(viewportOffset, hostElemPos, targetElem, placement); + }, + + /** + * Provides coordinates for an element to be positioned at relative to + * the horizontal and vertical client coordinates. Passing 'auto' as part of the placement parameter + * will enable smart placement - where the element fits. i.e: + * 'auto left-top' will check to see if there is enough space to the left + * of the client coordinates to fit the targetElem, if not place right (same for secondary + * top placement). Available space is calculated using the client width and height. + * + * @param {element} clientCoordinates - The coordinates to position at. + * @param {element} targetElem - The element to position. + * @param {string=} [placement=top] - The placement for the targetElem, + * default is 'top'. 'center' is assumed as secondary placement for + * 'top', 'left', 'right', and 'bottom' placements. Available placements are: + * + * + * @returns {object} An object with the following properties: + * + */ + positionElementAt: function(clientCoordinates, targetElem, placement) { + var viewportOffset = { + top: clientCoordinates.clientY, + left: clientCoordinates.clientX, + right: $document[0].documentElement.clientWidth - clientCoordinates.clientX, + bottom: $document[0].documentElement.clientHeight - clientCoordinates.clientY + }; + var hostPosition = { + top: clientCoordinates.clientY, + left: clientCoordinates.clientX, + height: 0, + width: 0 + }; + return this.positionElement(viewportOffset, hostPosition, targetElem, placement); + }, + + positionElement: function(hostOffset, hostPos, targetElem, placement) { targetElem = this.getRawNode(targetElem); // need to read from prop to support tests. var targetWidth = angular.isDefined(targetElem.offsetWidth) ? targetElem.offsetWidth : targetElem.prop('offsetWidth'); var targetHeight = angular.isDefined(targetElem.offsetHeight) ? targetElem.offsetHeight : targetElem.prop('offsetHeight'); + placement = this.parsePlacement(placement); - var hostElemPos = appendToBody ? this.offset(hostElem) : this.position(hostElem); var targetElemPos = {top: 0, left: 0, placement: ''}; if (placement[2]) { - var viewportOffset = this.viewportOffset(hostElem, appendToBody); - var targetElemStyle = $window.getComputedStyle(targetElem); var adjustedSize = { width: targetWidth + Math.round(Math.abs(this.parseStyle(targetElemStyle.marginLeft) + this.parseStyle(targetElemStyle.marginRight))), height: targetHeight + Math.round(Math.abs(this.parseStyle(targetElemStyle.marginTop) + this.parseStyle(targetElemStyle.marginBottom))) }; - placement[0] = placement[0] === 'top' && adjustedSize.height > viewportOffset.top && adjustedSize.height <= viewportOffset.bottom ? 'bottom' : - placement[0] === 'bottom' && adjustedSize.height > viewportOffset.bottom && adjustedSize.height <= viewportOffset.top ? 'top' : - placement[0] === 'left' && adjustedSize.width > viewportOffset.left && adjustedSize.width <= viewportOffset.right ? 'right' : - placement[0] === 'right' && adjustedSize.width > viewportOffset.right && adjustedSize.width <= viewportOffset.left ? 'left' : + placement[0] = placement[0] === 'top' && adjustedSize.height > hostOffset.top && adjustedSize.height <= hostOffset.bottom ? 'bottom' : + placement[0] === 'bottom' && adjustedSize.height > hostOffset.bottom && adjustedSize.height <= hostOffset.top ? 'top' : + placement[0] === 'left' && adjustedSize.width > hostOffset.left && adjustedSize.width <= hostOffset.right ? 'right' : + placement[0] === 'right' && adjustedSize.width > hostOffset.right && adjustedSize.width <= hostOffset.left ? 'left' : placement[0]; - placement[1] = placement[1] === 'top' && adjustedSize.height - hostElemPos.height > viewportOffset.bottom && adjustedSize.height - hostElemPos.height <= viewportOffset.top ? 'bottom' : - placement[1] === 'bottom' && adjustedSize.height - hostElemPos.height > viewportOffset.top && adjustedSize.height - hostElemPos.height <= viewportOffset.bottom ? 'top' : - placement[1] === 'left' && adjustedSize.width - hostElemPos.width > viewportOffset.right && adjustedSize.width - hostElemPos.width <= viewportOffset.left ? 'right' : - placement[1] === 'right' && adjustedSize.width - hostElemPos.width > viewportOffset.left && adjustedSize.width - hostElemPos.width <= viewportOffset.right ? 'left' : + placement[1] = placement[1] === 'top' && adjustedSize.height - hostPos.height > hostOffset.bottom && adjustedSize.height - hostPos.height <= hostOffset.top ? 'bottom' : + placement[1] === 'bottom' && adjustedSize.height - hostPos.height > hostOffset.top && adjustedSize.height - hostPos.height <= hostOffset.bottom ? 'top' : + placement[1] === 'left' && adjustedSize.width - hostPos.width > hostOffset.right && adjustedSize.width - hostPos.width <= hostOffset.left ? 'right' : + placement[1] === 'right' && adjustedSize.width - hostPos.width > hostOffset.left && adjustedSize.width - hostPos.width <= hostOffset.right ? 'left' : placement[1]; if (placement[1] === 'center') { if (PLACEMENT_REGEX.vertical.test(placement[0])) { - var xOverflow = hostElemPos.width / 2 - targetWidth / 2; - if (viewportOffset.left + xOverflow < 0 && adjustedSize.width - hostElemPos.width <= viewportOffset.right) { + var xOverflow = hostPos.width / 2 - targetWidth / 2; + if (hostOffset.left + xOverflow < 0 && adjustedSize.width - hostPos.width <= hostOffset.right) { placement[1] = 'left'; - } else if (viewportOffset.right + xOverflow < 0 && adjustedSize.width - hostElemPos.width <= viewportOffset.left) { + } else if (hostOffset.right + xOverflow < 0 && adjustedSize.width - hostPos.width <= hostOffset.left) { placement[1] = 'right'; } } else { - var yOverflow = hostElemPos.height / 2 - adjustedSize.height / 2; - if (viewportOffset.top + yOverflow < 0 && adjustedSize.height - hostElemPos.height <= viewportOffset.bottom) { + var yOverflow = hostPos.height / 2 - adjustedSize.height / 2; + if (hostOffset.top + yOverflow < 0 && adjustedSize.height - hostPos.height <= hostOffset.bottom) { placement[1] = 'top'; - } else if (viewportOffset.bottom + yOverflow < 0 && adjustedSize.height - hostElemPos.height <= viewportOffset.top) { + } else if (hostOffset.bottom + yOverflow < 0 && adjustedSize.height - hostPos.height <= hostOffset.top) { placement[1] = 'bottom'; } } @@ -486,37 +543,37 @@ angular.module('ui.bootstrap.position', []) switch (placement[0]) { case 'top': - targetElemPos.top = hostElemPos.top - targetHeight; + targetElemPos.top = hostPos.top - targetHeight; break; case 'bottom': - targetElemPos.top = hostElemPos.top + hostElemPos.height; + targetElemPos.top = hostPos.top + hostPos.height; break; case 'left': - targetElemPos.left = hostElemPos.left - targetWidth; + targetElemPos.left = hostPos.left - targetWidth; break; case 'right': - targetElemPos.left = hostElemPos.left + hostElemPos.width; + targetElemPos.left = hostPos.left + hostPos.width; break; } switch (placement[1]) { case 'top': - targetElemPos.top = hostElemPos.top; + targetElemPos.top = hostPos.top; break; case 'bottom': - targetElemPos.top = hostElemPos.top + hostElemPos.height - targetHeight; + targetElemPos.top = hostPos.top + hostPos.height - targetHeight; break; case 'left': - targetElemPos.left = hostElemPos.left; + targetElemPos.left = hostPos.left; break; case 'right': - targetElemPos.left = hostElemPos.left + hostElemPos.width - targetWidth; + targetElemPos.left = hostPos.left + hostPos.width - targetWidth; break; case 'center': if (PLACEMENT_REGEX.vertical.test(placement[0])) { - targetElemPos.left = hostElemPos.left + hostElemPos.width / 2 - targetWidth / 2; + targetElemPos.left = hostPos.left + hostPos.width / 2 - targetWidth / 2; } else { - targetElemPos.top = hostElemPos.top + hostElemPos.height / 2 - targetHeight / 2; + targetElemPos.top = hostPos.top + hostPos.height / 2 - targetHeight / 2; } break; } diff --git a/src/position/test/position.spec.js b/src/position/test/position.spec.js index fcc0ea83a3..56ce66fe66 100644 --- a/src/position/test/position.spec.js +++ b/src/position/test/position.spec.js @@ -4,7 +4,8 @@ describe('$uibPosition service', function () { this.height = height; this.prop = function(propName) { - return propName === 'offsetWidth' ? width : height; + if (propName === 'offsetWidth') { return width; } + if (propName === 'offsetHeight') { return height; } }; }; @@ -319,171 +320,208 @@ describe('$uibPosition service', function () { }); }); - describe('positionElements - append-to-body: false', function() { - var el; + describe('positionElements', function() { + var viewportOffset, + position, + offset, + hostElem, + targetElem, + placement; beforeEach(function() { //mock position info normally queried from the DOM - $uibPosition.position = function() { - return { - width: 20, - height: 20, - top: 100, - left: 100 - }; + position = { + width: 20, + height: 20, + top: 100, + left: 100 }; - }); - - it('should position element on top-center by default', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'other')).toBePositionedAt(90, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top')).toBePositionedAt(90, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-center')).toBePositionedAt(90, 105); - }); - - it('should position on top-left', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-left')).toBePositionedAt(90, 100); - }); - it('should position on top-right', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-right')).toBePositionedAt(90, 110); - }); + $uibPosition.position = jasmine.createSpy('position').and.returnValue(position); - it('should position elements on bottom-center when "bottom" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom')).toBePositionedAt(120, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-center')).toBePositionedAt(120, 105); - }); + viewportOffset = { + top: 10, + bottom: 10, + left: 10, + right: 10 + }; - it('should position elements on bottom-left', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-left')).toBePositionedAt(120, 100); - }); + $uibPosition.viewportOffset = jasmine.createSpy('viewportOffset').and.returnValue(viewportOffset); - it('should position elements on bottom-right', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-right')).toBePositionedAt(120, 110); - }); + offset = { + width: 40, + height: 40, + top: 100, + left: 100 + }; - it('should position elements on left-center when "left" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left')).toBePositionedAt(105, 90); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-center')).toBePositionedAt(105, 90); - }); + $uibPosition.offset = jasmine.createSpy('offset').and.returnValue(offset); - it('should position elements on left-top when "left-top" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-top')).toBePositionedAt(100, 90); - }); + $uibPosition.positionElement = jasmine.createSpy('positionElement'); - it('should position elements on left-bottom when "left-bottom" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-bottom')).toBePositionedAt(110, 90); + hostElem = {}; + placement = 'some-placement'; + targetElem = new TargetElMock(10, 10); }); - it('should position elements on right-center when "right" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right')).toBePositionedAt(105, 120); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-center')).toBePositionedAt(105, 120); + describe('with append-to-body: false', function() { + beforeEach(function() { + $uibPosition.positionElements(hostElem, targetElem, placement); + }); + it('should get position', function() { + expect($uibPosition.position).toHaveBeenCalledWith(hostElem); + }); + it('should not get offset', function() { + expect($uibPosition.offset).not.toHaveBeenCalled(); + }); + it('should get viewportOffset', function() { + expect($uibPosition.viewportOffset).toHaveBeenCalledWith(hostElem, undefined); + }); + it ('should call positionElement', function() { + expect($uibPosition.positionElement).toHaveBeenCalledWith(viewportOffset, position, targetElem, placement); + }); }); - it('should position elements on right-top when "right-top" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-top')).toBePositionedAt(100, 120); + describe('with append-to-body: true', function() { + beforeEach(function() { + $uibPosition.positionElements(hostElem, targetElem, placement, true); + }); + it('should not get position', function() { + expect($uibPosition.position).not.toHaveBeenCalled(); + }); + it('should get offset', function() { + expect($uibPosition.offset).toHaveBeenCalledWith(hostElem); + }); + it('should get viewportOffset', function() { + expect($uibPosition.viewportOffset).toHaveBeenCalledWith(hostElem, true); + }); + it ('should call positionElement', function() { + expect($uibPosition.positionElement).toHaveBeenCalledWith(viewportOffset, offset, targetElem, placement); + }); }); + }); - it('should position elements on right-top when "right-top" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-bottom')).toBePositionedAt(110, 120); + describe('positionElementAt', function() { + var clientCoords, targetElem, placement; + beforeEach(function() { + $uibPosition.positionElement = jasmine.createSpy('positionElement'); + + clientCoords = { clientX: 20, clientY: 10}; + placement = 'some-placement'; + targetElem = new TargetElMock(10, 10); + + $uibPosition.positionElementAt(clientCoords, targetElem, placement); + }); + it('should call positionElement', function() { + expect($uibPosition.positionElement).toHaveBeenCalledWith( + { + top: clientCoords.clientY, + left: clientCoords.clientX, + right: $document[0].documentElement.clientWidth - clientCoords.clientX, + bottom: $document[0].documentElement.clientHeight - clientCoords.clientY + }, + { top: clientCoords.clientY, left: clientCoords.clientX, height: 0, width: 0 }, + targetElem, + placement + ); }); }); - describe('positionElements - append-to-body: true', function() { + describe('positionElement', function() { + var hostOffset, hostPos, targetElem; beforeEach(function() { //mock offset info normally queried from the DOM - $uibPosition.offset = function() { - return { - width: 20, - height: 20, - top: 100, - left: 100 - }; + hostPos = { + width: 20, + height: 20, + top: 100, + left: 100 + }; + + hostOffset = { + top: 10, + bottom: 10, + left: 10, + right: 10 }; + + targetElem = new TargetElMock(10, 10); }); it('should position element on top-center by default', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'other', true)).toBePositionedAt(90, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top', true)).toBePositionedAt(90, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-center', true)).toBePositionedAt(90, 105); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'other')).toBePositionedAt(90, 105); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'top')).toBePositionedAt(90, 105); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'top-center')).toBePositionedAt(90, 105); }); it('should position on top-left', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-left', true)).toBePositionedAt(90, 100); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'top-left')).toBePositionedAt(90, 100); }); it('should position on top-right', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'top-right', true)).toBePositionedAt(90, 110); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'top-right')).toBePositionedAt(90, 110); }); it('should position elements on bottom-center when "bottom" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom', true)).toBePositionedAt(120, 105); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-center', true)).toBePositionedAt(120, 105); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'bottom')).toBePositionedAt(120, 105); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'bottom-center')).toBePositionedAt(120, 105); }); it('should position elements on bottom-left', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-left', true)).toBePositionedAt(120, 100); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'bottom-left')).toBePositionedAt(120, 100); }); it('should position elements on bottom-right', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'bottom-right', true)).toBePositionedAt(120, 110); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'bottom-right')).toBePositionedAt(120, 110); }); it('should position elements on left-center when "left" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left', true)).toBePositionedAt(105, 90); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-center', true)).toBePositionedAt(105, 90); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'left')).toBePositionedAt(105, 90); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'left-center')).toBePositionedAt(105, 90); }); it('should position elements on left-top when "left-top" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-top', true)).toBePositionedAt(100, 90); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'left-top')).toBePositionedAt(100, 90); }); it('should position elements on left-bottom when "left-bottom" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'left-bottom', true)).toBePositionedAt(110, 90); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'left-bottom')).toBePositionedAt(110, 90); }); it('should position elements on right-center when "right" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right', true)).toBePositionedAt(105, 120); - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-center', true)).toBePositionedAt(105, 120); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'right')).toBePositionedAt(105, 120); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'right-center')).toBePositionedAt(105, 120); }); it('should position elements on right-top when "right-top" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-top', true)).toBePositionedAt(100, 120); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'right-top')).toBePositionedAt(100, 120); }); it('should position elements on right-bottom when "right-bottom" specified', function() { - expect($uibPosition.positionElements({}, new TargetElMock(10, 10), 'right-bottom', true)).toBePositionedAt(110, 120); + expect($uibPosition.positionElement(hostOffset, hostPos, targetElem, 'right-bottom')).toBePositionedAt(110, 120); }); }); - describe('smart positioning', function() { - var viewportOffset, el; + describe('positionElement - smart positioning', function() { + var hostOffset, hostPos; beforeEach(function() { el = angular.element('
'); $document.find('body').append(el); - //mock position info normally queried from the DOM - $uibPosition.position = function() { - return { - width: 40, - height: 40, - top: 100, - left: 100 - }; + hostPos = { + width: 40, + height: 40, + top: 100, + left: 100 }; - viewportOffset = { - width: 10, - height: 10, + hostOffset = { top: 10, bottom: 10, left: 10, right: 10 }; - - $uibPosition.viewportOffset = function() { - return viewportOffset; - }; }); afterEach(function() { @@ -493,65 +531,65 @@ describe('$uibPosition service', function () { // tests primary top -> bottom // tests secondary left -> right it('should position element on bottom-right when top-left does not fit', function() { - viewportOffset.bottom = 20; - viewportOffset.left = 20; + hostOffset.bottom = 20; + hostOffset.left = 20; el.css({ width: '60px', height: '20px' }); - expect($uibPosition.positionElements({}, el, 'auto top-left')).toBePositionedAt(140, 80); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto top-left')).toBePositionedAt(140, 80); }); // tests primary bottom -> top // tests secondary right -> left it('should position element on top-left when bottom-right does not fit', function() { - viewportOffset.top = 20; - viewportOffset.right = 20; + hostOffset.top = 20; + hostOffset.right = 20; el.css({ width: '60px', height: '20px' }); - expect($uibPosition.positionElements({}, el, 'auto bottom-right')).toBePositionedAt(80, 100); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto bottom-right')).toBePositionedAt(80, 100); }); // tests primary left -> right // tests secondary top -> bottom it('should position element on right-bottom when left-top does not fit', function() { - viewportOffset.top = 20; - viewportOffset.right = 20; + hostOffset.top = 20; + hostOffset.right = 20; el.css({ width: '20px', height: '60px' }); - expect($uibPosition.positionElements({}, el, 'auto left-top')).toBePositionedAt(80, 140); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto left-top')).toBePositionedAt(80, 140); }); // tests primary right -> left // tests secondary bottom -> top it('should position element on left-top when right-bottom does not fit', function() { - viewportOffset.bottom = 20; - viewportOffset.left = 20; + hostOffset.bottom = 20; + hostOffset.left = 20; el.css({ width: '20px', height: '60px' }); - expect($uibPosition.positionElements({}, el, 'auto right-bottom')).toBePositionedAt(100, 80); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto right-bottom')).toBePositionedAt(100, 80); }); // tests vertical center -> top it('should position element on left-top when left-center does not fit vetically', function() { - viewportOffset.bottom = 100; + hostOffset.bottom = 100; el.css({ width: '20px', height: '120px' }); - expect($uibPosition.positionElements({}, el, 'auto left')).toBePositionedAt(100, 80); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto left')).toBePositionedAt(100, 80); }); // tests vertical center -> bottom it('should position element on left-bottom when left-center does not fit vertically', function() { - viewportOffset.top = 100; + hostOffset.top = 100; el.css({ width: '20px', height: '120px' }); - expect($uibPosition.positionElements({}, el, 'auto left')).toBePositionedAt(20, 80); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto left')).toBePositionedAt(20, 80); }); // tests horizontal center -> left it('should position element on top-left when top-center does not fit horizontally', function() { - viewportOffset.right = 100; + hostOffset.right = 100; el.css({ width: '120px', height: '20px' }); - expect($uibPosition.positionElements({}, el, 'auto top')).toBePositionedAt(80, 100); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto top')).toBePositionedAt(80, 100); }); // tests horizontal center -> right it('should position element on top-right when top-center does not fit horizontally', function() { - viewportOffset.left = 100; + hostOffset.left = 100; el.css({ width: '120px', height: '20px' }); - expect($uibPosition.positionElements({}, el, 'auto top')).toBePositionedAt(80, 20); + expect($uibPosition.positionElement(hostOffset, hostPos, el, 'auto top')).toBePositionedAt(80, 20); }); }); });