Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

setting container in the watch or the scroll event is always set on the ... #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

setting container in the watch or the scroll event is always set on the ... #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f36ba34
setting container in the watch or the scroll event is always set on t…
orrgal1 Mar 26, 2015
eb71f6d
bugfixed some console errors because of undefined container
orrgal1 Mar 31, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The [download page](http://binarymuse.github.com/ngInfiniteScroll/#download) all
Getting Started
---------------

* Download ngInfiniteScroll from [the download page on the ngInfiniteScroll web site](http://binarymuse.github.com/ngInfiniteScroll/#download) or install it with [Bower](http://bower.io/) via `bower install ngInfiniteScroll`
* Download ngInfiniteScroll from [the download page on the ngInfiniteScroll web site](http://binarymuse.github.com/ngInfiniteScroll/#download)
* Include the script tag on your page after the AngularJS and jQuery script tags (ngInfiniteScroll requires jQuery to run)

<script type='text/javascript' src='path/to/jquery.min.js'></script>
Expand All @@ -45,11 +45,6 @@ Detailed Documentation

ngInfiniteScroll accepts several attributes to customize the behavior of the directive; detailed instructions can be found [on the ngInfiniteScroll web site](http://binarymuse.github.com/ngInfiniteScroll/documentation.html).

Ports
-----

If you use [AngularDart](https://github.com/angular/angular.dart), Juha Komulainen has [a port of the project](http://pub.dartlang.org/packages/ng_infinite_scroll) you can use.

License
-------

Expand Down
46 changes: 36 additions & 10 deletions build/ng-infinite-scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */
/* ng-infinite-scroll - v1.0.0 - 2013-05-13 */
var mod;

mod = angular.module('infinite-scroll', []);
Expand All @@ -7,7 +7,7 @@ mod.directive('infiniteScroll', [
'$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
return {
link: function(scope, elem, attrs) {
var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
var checkWhenEnabled, container, handler, scrollDistance, scrollEnabled;
$window = angular.element($window);
scrollDistance = 0;
if (attrs.infiniteScrollDistance != null) {
Expand All @@ -26,12 +26,38 @@ mod.directive('infiniteScroll', [
}
});
}
container = $window;
if (attrs.infiniteScrollContainer != null) {
scope.$watch(attrs.infiniteScrollContainer, function(value) {
value = angular.element(value);
if (value != null) {
container = value;
container.on('scroll', handler);
return container;
} else {
throw new Exception("invalid infinite-scroll-container attribute.");
}
});
}
if (attrs.infiniteScrollParent != null) {
container = elem.parent();
scope.$watch(attrs.infiniteScrollParent, function() {
return container = elem.parent();
});
}
handler = function() {
var elementBottom, remaining, shouldScroll, windowBottom;
windowBottom = $window.height() + $window.scrollTop();
elementBottom = elem.offset().top + elem.height();
remaining = elementBottom - windowBottom;
shouldScroll = remaining <= $window.height() * scrollDistance;
var containerBottom, elementBottom, remaining, shouldScroll;
if (container === $window) {
containerBottom = container.height() + container.scrollTop();
elementBottom = elem.offset().top + elem.height();
} else {
containerBottom = container.height();
if(container.offset()) {
elementBottom = elem.offset().top - container.offset().top + elem.height();
}
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= container.height() * scrollDistance;
if (shouldScroll && scrollEnabled) {
if ($rootScope.$$phase) {
return scope.$eval(attrs.infiniteScroll);
Expand All @@ -42,9 +68,9 @@ mod.directive('infiniteScroll', [
return checkWhenEnabled = true;
}
};
$window.on('scroll', handler);
container.on('scroll', handler);
scope.$on('$destroy', function() {
return $window.off('scroll', handler);
return container.off('scroll', handler);
});
return $timeout((function() {
if (attrs.infiniteScrollImmediateCheck) {
Expand All @@ -58,4 +84,4 @@ mod.directive('infiniteScroll', [
}
};
}
]);
]);
4 changes: 2 additions & 2 deletions build/ng-infinite-scroll.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 32 additions & 7 deletions src/infinite-scroll.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,41 @@ mod.directive 'infiniteScroll', ['$rootScope', '$window', '$timeout', ($rootScop
checkWhenEnabled = false
handler()

# infinite-scroll specifies a function to call when the window
container = $window

# infinite-scroll-container sets the container which we want to be
# infinte scrolled, instead of the whole window window. Must be an
# Angular or jQuery element.
if attrs.infiniteScrollContainer?
scope.$watch attrs.infiniteScrollContainer, (value) ->
value = angular.element(value)
if value?
container = value
else
throw new Exception("invalid infinite-scroll-container attribute.")

# infinite-scroll-parent establishes this element's parent as the
# container infinitely scrolled instead of the whole window.
if attrs.infiniteScrollParent?
container = elem.parent()
scope.$watch attrs.infiniteScrollParent, () ->
container = elem.parent()

# infinite-scroll specifies a function to call when the window,
# or some other container specified by infinite-scroll-container,
# is scrolled within a certain range from the bottom of the
# document. It is recommended to use infinite-scroll-disabled
# with a boolean that is set to true when the function is
# called in order to throttle the function call.
handler = ->
windowBottom = $window.height() + $window.scrollTop()
elementBottom = elem.offset().top + elem.height()
remaining = elementBottom - windowBottom
shouldScroll = remaining <= $window.height() * scrollDistance
if container == $window
containerBottom = container.height() + container.scrollTop()
elementBottom = elem.offset().top + elem.height()
else
containerBottom = container.height()
elementBottom = elem.offset().top - container.offset().top + elem.height()
remaining = elementBottom - containerBottom
shouldScroll = remaining <= container.height() * scrollDistance

if shouldScroll && scrollEnabled
if $rootScope.$$phase
Expand All @@ -48,9 +73,9 @@ mod.directive 'infiniteScroll', ['$rootScope', '$window', '$timeout', ($rootScop
else if shouldScroll
checkWhenEnabled = true

$window.on 'scroll', handler
container.on 'scroll', handler
scope.$on '$destroy', ->
$window.off 'scroll', handler
container.off 'scroll', handler

$timeout (->
if attrs.infiniteScrollImmediateCheck
Expand Down