diff --git a/README.md b/README.md index 6530259..edc92a2 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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 ------- diff --git a/build/ng-infinite-scroll.js b/build/ng-infinite-scroll.js index 5d29d59..5808e5b 100644 --- a/build/ng-infinite-scroll.js +++ b/build/ng-infinite-scroll.js @@ -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', []); @@ -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) { @@ -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); @@ -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) { @@ -58,4 +84,4 @@ mod.directive('infiniteScroll', [ } }; } -]); +]); \ No newline at end of file diff --git a/build/ng-infinite-scroll.min.js b/build/ng-infinite-scroll.min.js index d4410b9..043cecf 100644 --- a/build/ng-infinite-scroll.min.js +++ b/build/ng-infinite-scroll.min.js @@ -1,2 +1,2 @@ -/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */ -var mod;mod=angular.module("infinite-scroll",[]),mod.directive("infiniteScroll",["$rootScope","$window","$timeout",function(i,n,e){return{link:function(t,l,o){var r,c,f,a;return n=angular.element(n),f=0,null!=o.infiniteScrollDistance&&t.$watch(o.infiniteScrollDistance,function(i){return f=parseInt(i,10)}),a=!0,r=!1,null!=o.infiniteScrollDisabled&&t.$watch(o.infiniteScrollDisabled,function(i){return a=!i,a&&r?(r=!1,c()):void 0}),c=function(){var e,c,u,d;return d=n.height()+n.scrollTop(),e=l.offset().top+l.height(),c=e-d,u=n.height()*f>=c,u&&a?i.$$phase?t.$eval(o.infiniteScroll):t.$apply(o.infiniteScroll):u?r=!0:void 0},n.on("scroll",c),t.$on("$destroy",function(){return n.off("scroll",c)}),e(function(){return o.infiniteScrollImmediateCheck?t.$eval(o.infiniteScrollImmediateCheck)?c():void 0:c()},0)}}}]); \ No newline at end of file +/* ng-infinite-scroll - v1.0.0 - 2013-05-13 */ +var mod;mod=angular.module("infinite-scroll",[]),mod.directive("infiniteScroll",["$rootScope","$window","$timeout",function(n,i,t){return{link:function(e,l,o){var r,c,a,f,u;return i=angular.element(i),f=0,null!=o.infiniteScrollDistance&&e.$watch(o.infiniteScrollDistance,function(n){return f=parseInt(n,10)}),u=!0,r=!1,null!=o.infiniteScrollDisabled&&e.$watch(o.infiniteScrollDisabled,function(n){return u=!n,u&&r?(r=!1,a()):void 0}),c=i,null!=o.infiniteScrollContainer&&e.$watch(o.infiniteScrollContainer,function(n){if(n=angular.element(n),null!=n)return c=n;throw new Exception("invalid infinite-scroll-container attribute.")}),null!=o.infiniteScrollParent&&(c=l.parent(),e.$watch(o.infiniteScrollParent,function(){return c=l.parent()})),a=function(){var t,a,h,d;return c===i?(t=c.height()+c.scrollTop(),a=l.offset().top+l.height()):(t=c.height(),a=l.offset().top-c.offset().top+l.height()),h=a-t,d=c.height()*f>=h,d&&u?n.$$phase?e.$eval(o.infiniteScroll):e.$apply(o.infiniteScroll):d?r=!0:void 0},c.on("scroll",a),e.$on("$destroy",function(){return c.off("scroll",a)}),t(function(){return o.infiniteScrollImmediateCheck?e.$eval(o.infiniteScrollImmediateCheck)?a():void 0:a()},0)}}}]); \ No newline at end of file diff --git a/src/infinite-scroll.coffee b/src/infinite-scroll.coffee index 2e2abb8..fa61d8c 100644 --- a/src/infinite-scroll.coffee +++ b/src/infinite-scroll.coffee @@ -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 @@ -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