Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(position): add isScrollable
Browse files Browse the repository at this point in the history
Add the isScrollable function that will check if the element passed
in is scrollable.

Closes #5508
  • Loading branch information
RobJacobs committed Feb 22, 2016
1 parent fa17c48 commit 3c0a7cd
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 25 deletions.
68 changes: 43 additions & 25 deletions src/position/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,26 @@ Calculates the browser scrollbar width and caches the result for future calls.
* _(Type: `number`)_ -
The width of the browser scrollbar.

#### isScrollable(element, includeHidden)

Determines if an element is scrollable.

##### parameters

* `element`
_(Type: `element`)_ -
The element to check.

* `includeHidden`
_(Type: `boolean`, Default: `false`, optional)_ - Should scroll style of 'hidden' be considered.

##### returns

* _(Type: `boolean`)_ -
Whether the element is scrollable.

#### scrollParent(element, includeHidden)

Gets the closest scrollable ancestor. Concept from the jQueryUI [scrollParent.js](https://github.com/jquery/jquery-ui/blob/master/ui/scroll-parent.js).

##### parameters
Expand Down Expand Up @@ -91,21 +109,21 @@ An object with the following properties:
* `width`
_(Type: `number`)_ -
The width of the element.

* `height`
_(Type: `number`)_ -
The height of the element.

* `top`
_(Type: `number`)_ -
Distance to top edge of offset parent.

* `left`
_(Type: `number`)_ -
Distance to left edge of offset parent.

#### offset(element)

A read-only equivalent of jQuery's [offset](http://api.jquery.com/offset/) function, distance to viewport.

##### parameters
Expand All @@ -121,21 +139,21 @@ An object with the following properties:
* `width`
_(Type: `number`)_ -
The width of the element.

* `height`
_(Type: `number`)_ -
The height of the element.

* `top`
_(Type: `number`)_ -
Distance to top edge of the viewport.

* `left`
_(Type: `number`)_ -
Distance to left edge of the viewport.

#### viewportOffset(element, useDocument, includePadding)

Gets the elements available space relative to the closest scrollable ancestor. Accounts for padding, border, and scrollbar width.
Right and bottom dimensions represent the distance to the respective edge of the viewport element, not the top and left edge.
If the element edge extends beyond the viewport, a negative value will be reported.
Expand All @@ -145,11 +163,11 @@ If the element edge extends beyond the viewport, a negative value will be report
* `element`
_(Type: `element`)_ -
The element to get the viewport offset for.

* `useDocument`
_(Type: `boolean`, Default: `false`, optional)_ -
Should the viewport be the document element instead of the first scrollable element.

* `includePadding`
_(Type: `boolean`, Default: `true`, optional)_ -
Should the padding on the viewport element be accounted for, default is true.
Expand All @@ -161,21 +179,21 @@ An object with the following properties:
* `top`
_(Type: `number`)_ -
Distance to top content edge of the viewport.

* `bottom`
_(Type: `number`)_ -
Distance to bottom content edge of the viewport.

* `left`
_(Type: `number`)_ -
Distance to left content edge of the viewport.

* `right`
_(Type: `number`)_ -
Distance to right content edge of the viewport.

#### parsePlacement(placement)

Gets an array of placement values parsed from a placement string. Along with the 'auto' indicator, supported placement strings are:

* top: element on top, horizontally centered on host element.
Expand Down Expand Up @@ -208,11 +226,11 @@ An array with the following values:
* `[0]`
_(Type: `string`)_ -
The primary placement.

* `[1]`
_(Type: `string`)_ -
The secondary placement.

* `[2]`
_(Type: `boolean`)_ -
Is auto place enabled.
Expand All @@ -226,11 +244,11 @@ Gets gets coordinates for an element to be positioned relative to another elemen
* `hostElement`
_(Type: `element`)_ -
The element 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.
Expand All @@ -246,11 +264,11 @@ 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.
Expand All @@ -261,10 +279,10 @@ Positions the tooltip and popover arrow elements when using placement options be

##### parameters

* `element`
_(Type: `element`)_ -
* `element`
_(Type: `element`)_ -
The element to position the arrow element for.

* `placement`
_(Type: `string`)_ -
The placement for the element.
17 changes: 17 additions & 0 deletions src/position/position.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,23 @@ angular.module('ui.bootstrap.position', [])
return SCROLLBAR_WIDTH;
},

/**
* Checks to see if the element is scrollable.
*
* @param {element} elem - The element to check.
* @param {boolean=} [includeHidden=false] - Should scroll style of 'hidden' be considered,
* default is false.
*
* @returns {boolean} Whether the element is scrollable.
*/
isScrollable: function(elem, includeHidden) {
elem = this.getRawNode(elem);

var overflowRegex = includeHidden ? OVERFLOW_REGEX.hidden : OVERFLOW_REGEX.normal;
var elemStyle = $window.getComputedStyle(elem);
return overflowRegex.test(elemStyle.overflow + elemStyle.overflowY + elemStyle.overflowX);
},

/**
* Provides the closest scrollable ancestor.
* A port of the jQuery UI scrollParent method:
Expand Down
21 changes: 21 additions & 0 deletions src/position/test/position.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,27 @@ describe('$uibPosition service', function () {
});
});

describe('isScrollable', function() {
var el;

afterEach(function() {
el.remove();
});

it('should return true if the element is scrollable', function() {
el = angular.element('<div style="overflow: auto"></div>');
$document.find('body').append(el);
expect($uibPosition.isScrollable(el)).toBe(true);
});

it('should return false if the element is scrollable', function() {
el = angular.element('<div></div>');
$document.find('body').append(el);
expect($uibPosition.isScrollable(el)).toBe(false);
});

});

describe('scrollParent', function() {
var el;

Expand Down

0 comments on commit 3c0a7cd

Please sign in to comment.