Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular2-infinite-scroll

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-infinite-scroll - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

136

bundles/angular2-infinite-scroll.js

@@ -29,13 +29,10 @@ System.registerDynamic("src/infinite-scroll", ["@angular/core", "./scroller"], true, function($__require, exports, module) {

this._distance = 2;
this._throttle = 3;
this.scrollWindow = true;
this._immediate = false;
this.scrolled = new core_1.EventEmitter();
}
Object.defineProperty(InfiniteScroll.prototype, "infiniteScrollDistance", {
set: function(distance) {
this._distance = distance;
},
enumerable: true,
configurable: true
});
InfiniteScroll.prototype.ngOnInit = function() {
this.scroller = new scroller_1.Scroller(window, setInterval, this.element, this.onScroll.bind(this), this._distance, {});
var containerElement = this.scrollWindow ? window : this.element;
this.scroller = new scroller_1.Scroller(containerElement, setInterval, this.element, this.onScroll.bind(this), this._distance, {}, this._throttle, this._immediate);
};

@@ -48,4 +45,11 @@ InfiniteScroll.prototype.ngOnDestroy = function() {

};
__decorate([core_1.Input(), __metadata('design:type', Number), __metadata('design:paramtypes', [Number])], InfiniteScroll.prototype, "infiniteScrollDistance", null);
InfiniteScroll.prototype.handleScroll = function(event) {
this.scroller.handler();
};
__decorate([core_1.Input('infiniteScrollDistance'), __metadata('design:type', Number)], InfiniteScroll.prototype, "_distance", void 0);
__decorate([core_1.Input('infiniteScrollThrottle'), __metadata('design:type', Number)], InfiniteScroll.prototype, "_throttle", void 0);
__decorate([core_1.Input('scrollWindow'), __metadata('design:type', Boolean)], InfiniteScroll.prototype, "scrollWindow", void 0);
__decorate([core_1.Input('immediateCheck'), __metadata('design:type', Boolean)], InfiniteScroll.prototype, "_immediate", void 0);
__decorate([core_1.Output(), __metadata('design:type', Object)], InfiniteScroll.prototype, "scrolled", void 0);
__decorate([core_1.HostListener('scroll', ['$event']), __metadata('design:type', Function), __metadata('design:paramtypes', [Object]), __metadata('design:returntype', void 0)], InfiniteScroll.prototype, "handleScroll", null);
InfiniteScroll = __decorate([core_1.Directive({selector: '[infinite-scroll]'}), __metadata('design:paramtypes', [core_1.ElementRef])], InfiniteScroll);

@@ -65,24 +69,30 @@ return InfiniteScroll;

var Scroller = (function() {
function Scroller($window, $interval, $elementRef, infiniteScrollCallback, infiniteScrollDistance, infiniteScrollParent) {
var THROTTLE_MILLISECONDS = 300;
this.windowElement = $window;
this.infiniteScrollCallback = infiniteScrollCallback;
function Scroller($window, $interval, $elementRef, infiniteScrollCallback, infiniteScrollDistance, infiniteScrollParent, infiniteScrollThrottle, isImmediate) {
var _this = this;
this.$window = $window;
this.$interval = $interval;
this.$elementRef = $elementRef;
if (THROTTLE_MILLISECONDS != null) {
this.handler = this.throttle(this.handler, THROTTLE_MILLISECONDS);
}
this.infiniteScrollCallback = infiniteScrollCallback;
this.infiniteScrollThrottle = infiniteScrollThrottle;
this.isImmediate = isImmediate;
this.isContainerWindow = $window.hasOwnProperty('document');
this.windowElement = $window;
this.documentElement = this.isContainerWindow ? this.windowElement.document.documentElement : null;
this.handler = this.throttle(this.handler, this.infiniteScrollThrottle);
this.handleInfiniteScrollDistance(infiniteScrollDistance);
var _self = this;
this.handleInfiniteScrollDisabled(false);
this.changeContainer(_self.windowElement);
this.checkInterval = setInterval((function() {
if (_self.immediateCheck) {
return _self.handler();
if (this.isContainerWindow) {
this.changeContainer(this.windowElement);
} else {
this.container = this.windowElement.nativeElement;
}
this.checkInterval = this.$interval(function() {
if (_this.isImmediate) {
return _this.handler();
}
}), 0);
}, 0);
}
Scroller.prototype.height = function(elem) {
if (isNaN(elem.offsetHeight)) {
return elem.document.documentElement.clientHeight;
return this.documentElement.clientHeight;
} else {

@@ -100,40 +110,54 @@ return elem.offsetHeight;

if (isNaN(window.pageYOffset)) {
return elem.document.documentElement.scrollTop;
return this.documentElement.scrollTop;
} else if (elem.ownerDocument) {
return elem.ownerDocument.defaultView.pageYOffset;
} else {
return elem.ownerDocument.defaultView.pageYOffset;
elem.offsetTop;
}
};
Scroller.prototype.handler = function() {
var containerBottom,
containerTopOffset,
elementBottom,
remaining,
var remaining,
containerBreakpoint,
shouldScroll;
if (this.container === this.windowElement) {
containerBottom = this.height(this.container) + this.pageYOffset(this.container.document.documentElement);
elementBottom = this.offsetTop(this.$elementRef.nativeElement) + this.height(this.$elementRef.nativeElement);
} else {
containerBottom = this.height(this.container);
containerTopOffset = 0;
if (this.offsetTop(this.container) !== void 0) {
containerTopOffset = this.offsetTop(this.container);
}
elementBottom = this.offsetTop(this.$elementRef.nativeElement) - containerTopOffset + this.height(this.$elementRef.nativeElement);
var container = this.calculatePoints();
remaining = container.totalToScroll - container.scrolledUntilNow;
containerBreakpoint = container.height * this.scrollDistance + 1;
shouldScroll = remaining <= containerBreakpoint;
var triggerCallback = shouldScroll && this.scrollEnabled;
var shouldClearInterval = shouldScroll && this.checkInterval;
this.checkWhenEnabled = shouldScroll;
if (triggerCallback) {
this.infiniteScrollCallback();
}
if (this.useDocumentBottom) {
elementBottom = this.height((this.$elementRef.nativeElement.ownerDocument || this.$elementRef.nativeElement.document).documentElement);
if (shouldClearInterval) {
clearInterval(this.checkInterval);
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= this.height(this.container) * this.scrollDistance + 1;
if (shouldScroll) {
this.checkWhenEnabled = true;
if (this.scrollEnabled) {
this.infiniteScrollCallback();
}
} else {
if (this.checkInterval) {
clearInterval(this.checkInterval);
}
return this.checkWhenEnabled = false;
};
Scroller.prototype.calculatePoints = function() {
return this.isContainerWindow ? this.calculatePointsForWindow() : this.calculatePointsForElement();
};
Scroller.prototype.calculatePointsForWindow = function() {
var height = this.height(this.container);
var scrolledUntilNow = height + this.pageYOffset(this.documentElement);
var totalToScroll = this.offsetTop(this.$elementRef.nativeElement) + this.height(this.$elementRef.nativeElement);
return {
height: height,
scrolledUntilNow: scrolledUntilNow,
totalToScroll: totalToScroll
};
};
Scroller.prototype.calculatePointsForElement = function() {
var height = this.height(this.container);
var scrolledUntilNow = this.container.scrollTop;
var containerTopOffset = 0;
var offsetTop = this.offsetTop(this.container);
if (offsetTop !== void 0) {
containerTopOffset = offsetTop;
}
var totalToScroll = this.container.scrollHeight;
return {
height: height,
scrolledUntilNow: scrolledUntilNow,
totalToScroll: totalToScroll
};
};

@@ -148,3 +172,2 @@ Scroller.prototype.throttle = function(func, wait) {

later = function() {
var context;
previous = new Date().getTime();

@@ -154,3 +177,2 @@ clearInterval(timeout);

func.call(_self);
return context = null;
};

@@ -192,4 +214,4 @@ return function() {

};
Scroller.prototype.handleInfiniteScrollDisabled = function(v) {
this.scrollEnabled = !v;
Scroller.prototype.handleInfiniteScrollDisabled = function(isCurrentlyEnabled) {
this.scrollEnabled = !isCurrentlyEnabled;
};

@@ -196,0 +218,0 @@ return Scroller;

{
"name": "angular2-infinite-scroll",
"version": "0.0.8",
"version": "0.0.9",
"description": "An infinite scroll directive for angular2",

@@ -5,0 +5,0 @@ "main": "angular2-infinite-scroll.js",

# Angular 2 Infinite Scroll
A port of [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular 2.
A port & modification of [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular 2.
## Supported API
Currently supports:
* (attribute) "infinite-scroll-distance" - should get a number
* (function) - instead of defining a callback function on the "infinite-scroll" attribute, you should use the event binding **(scrolled)="handleScrollCallback()"**
The directive triggers
Currently supported attributes:
* (number) "infiniteDcrollDistance" (optional, default: **2**) - should get a number
* (number) "infiniteScrollThrottle" (optional, default: **300**) - should get a number of milliseconds for throttle
* (function) - instead of defining a callback function on the "infinite-scroll" attribute, you should use the event binding **(scrolled)="handleScrollCallback()"**
* (boolean) - "scrollWindow" (optional, default: **true**) - listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.
* (boolean) - "immediateCheck" (optional, default: **false**) - invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled).
## Behavior
By default, the directive listens to a window scroll event and invoked the callback.
**To trigger the callback when the actual element is scrolled**, these settings should be configured:
* [scrollWindow]="false"
* set an explict css "height" value to the element
## Usage
in component, define:
In this example, the **onScroll** callback will be invoked when the window is scrolled:

@@ -23,2 +33,3 @@ ```typescript

[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500"
(scrolled)="onScroll()">

@@ -34,1 +45,35 @@ </div>

```
in this example, whenever the "search-results" is scrolled, the callback will be invoked:
```typescript
import { Component } from 'angular2/core';
import { InfiniteScroll } from 'angular2-infinite-scroll';
@Component({
selector: 'app',
directives: [ InfiniteScroll ],
styles: [
`.search-results {
height: 20rem;
overflow: scroll;
}`
],
template: `
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500"
(scrolled)="onScroll()"
[scrollWindow]="false">
</div>
`
})
export class App {
onScroll () {
console.log('scrolled!!')
}
}
```
# Showcase Examples
* [Echoes Player Ng2 Version](http://orizens.github.io/echoes-ng2) ([github repo for echoes player](http://github.com/orizens/echoes-ng2))

@@ -5,4 +5,6 @@ import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';

private scroller;
private _distance;
infiniteScrollDistance: number;
_distance: number;
_throttle: number;
scrollWindow: boolean;
_immediate: boolean;
scrolled: EventEmitter<{}>;

@@ -13,2 +15,3 @@ constructor(element: ElementRef);

onScroll(): void;
handleScroll(event: any): void;
}

@@ -17,13 +17,10 @@ "use strict";

this._distance = 2;
this._throttle = 3;
this.scrollWindow = true;
this._immediate = false;
this.scrolled = new core_1.EventEmitter();
}
Object.defineProperty(InfiniteScroll.prototype, "infiniteScrollDistance", {
set: function (distance) {
this._distance = distance;
},
enumerable: true,
configurable: true
});
InfiniteScroll.prototype.ngOnInit = function () {
this.scroller = new scroller_1.Scroller(window, setInterval, this.element, this.onScroll.bind(this), this._distance, {});
var containerElement = this.scrollWindow ? window : this.element;
this.scroller = new scroller_1.Scroller(containerElement, setInterval, this.element, this.onScroll.bind(this), this._distance, {}, this._throttle, this._immediate);
};

@@ -36,11 +33,31 @@ InfiniteScroll.prototype.ngOnDestroy = function () {

};
InfiniteScroll.prototype.handleScroll = function (event) {
this.scroller.handler();
};
__decorate([
core_1.Input(),
__metadata('design:type', Number),
__metadata('design:paramtypes', [Number])
], InfiniteScroll.prototype, "infiniteScrollDistance", null);
core_1.Input('infiniteScrollDistance'),
__metadata('design:type', Number)
], InfiniteScroll.prototype, "_distance", void 0);
__decorate([
core_1.Input('infiniteScrollThrottle'),
__metadata('design:type', Number)
], InfiniteScroll.prototype, "_throttle", void 0);
__decorate([
core_1.Input('scrollWindow'),
__metadata('design:type', Boolean)
], InfiniteScroll.prototype, "scrollWindow", void 0);
__decorate([
core_1.Input('immediateCheck'),
__metadata('design:type', Boolean)
], InfiniteScroll.prototype, "_immediate", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], InfiniteScroll.prototype, "scrolled", void 0);
__decorate([
core_1.HostListener('scroll', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [Object]),
__metadata('design:returntype', void 0)
], InfiniteScroll.prototype, "handleScroll", null);
InfiniteScroll = __decorate([

@@ -47,0 +64,0 @@ core_1.Directive({

@@ -0,25 +1,45 @@

import { ElementRef } from '@angular/core';
export declare class Scroller {
scrollDistance: any;
scrollEnabled: any;
checkWhenEnabled: any;
private $window;
private $interval;
private $elementRef;
private infiniteScrollCallback;
private infiniteScrollThrottle;
private isImmediate;
scrollDistance: number;
scrollEnabled: boolean;
checkWhenEnabled: boolean;
container: any;
immediateCheck: any;
useDocumentBottom: any;
unregisterEventListener: any;
immediateCheck: boolean;
useDocumentBottom: boolean;
checkInterval: any;
windowElement: any;
infiniteScrollCallback: any;
$interval: any;
$elementRef: any;
private bindedHandler;
constructor($window: any, $interval: any, $elementRef: any, infiniteScrollCallback: any, infiniteScrollDistance: number, infiniteScrollParent: any);
private documentElement;
private isContainerWindow;
constructor($window: any, $interval: any, $elementRef: ElementRef, infiniteScrollCallback: Function, infiniteScrollDistance: number, infiniteScrollParent: any, infiniteScrollThrottle: number, isImmediate: boolean);
height(elem: any): any;
offsetTop(elem: any): any;
pageYOffset(elem: any): any;
handler(): boolean;
throttle(func: any, wait: any): () => any;
handler(): void;
calculatePoints(): {
height: any;
scrolledUntilNow: any;
totalToScroll: any;
};
calculatePointsForWindow(): {
height: any;
scrolledUntilNow: any;
totalToScroll: any;
};
calculatePointsForElement(): {
height: any;
scrolledUntilNow: any;
totalToScroll: any;
};
throttle(func: Function, wait: number): () => any;
handleInfiniteScrollDistance(v: any): number;
changeContainer(newContainer: any): any;
changeContainer(newContainer: Window): any;
clean(): void;
handleInfiniteScrollDisabled(v: any): void;
handleInfiniteScrollDisabled(isCurrentlyEnabled: boolean): void;
}
"use strict";
var Scroller = (function () {
function Scroller($window, $interval, $elementRef, infiniteScrollCallback, infiniteScrollDistance, infiniteScrollParent) {
var THROTTLE_MILLISECONDS = 300;
this.windowElement = $window;
this.infiniteScrollCallback = infiniteScrollCallback;
function Scroller($window, $interval, $elementRef, infiniteScrollCallback, infiniteScrollDistance, infiniteScrollParent, infiniteScrollThrottle, isImmediate) {
var _this = this;
this.$window = $window;
this.$interval = $interval;
this.$elementRef = $elementRef;
if (THROTTLE_MILLISECONDS != null) {
this.handler = this.throttle(this.handler, THROTTLE_MILLISECONDS);
}
this.infiniteScrollCallback = infiniteScrollCallback;
this.infiniteScrollThrottle = infiniteScrollThrottle;
this.isImmediate = isImmediate;
this.isContainerWindow = $window.hasOwnProperty('document');
this.windowElement = $window;
this.documentElement = this.isContainerWindow ? this.windowElement.document.documentElement : null;
this.handler = this.throttle(this.handler, this.infiniteScrollThrottle);
this.handleInfiniteScrollDistance(infiniteScrollDistance);

@@ -16,13 +19,14 @@ // if (attrs.infiniteScrollParent != null) {

// }
// if (attrs.infiniteScrollImmediateCheck != null) {
// immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
// }
var _self = this;
this.handleInfiniteScrollDisabled(false);
this.changeContainer(_self.windowElement);
this.checkInterval = setInterval((function () {
if (_self.immediateCheck) {
return _self.handler();
if (this.isContainerWindow) {
this.changeContainer(this.windowElement);
}
else {
this.container = this.windowElement.nativeElement;
}
this.checkInterval = this.$interval(function () {
if (_this.isImmediate) {
return _this.handler();
}
}), 0);
}, 0);
}

@@ -32,3 +36,3 @@ Scroller.prototype.height = function (elem) {

if (isNaN(elem.offsetHeight)) {
return elem.document.documentElement.clientHeight;
return this.documentElement.clientHeight;
}

@@ -49,45 +53,56 @@ else {

if (isNaN(window.pageYOffset)) {
return elem.document.documentElement.scrollTop;
return this.documentElement.scrollTop;
}
else {
else if (elem.ownerDocument) {
return elem.ownerDocument.defaultView.pageYOffset;
}
else {
elem.offsetTop;
}
};
Scroller.prototype.handler = function () {
var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
if (this.container === this.windowElement) {
containerBottom = this.height(this.container) + this.pageYOffset(this.container.document.documentElement);
elementBottom = this.offsetTop(this.$elementRef.nativeElement) + this.height(this.$elementRef.nativeElement);
var remaining, containerBreakpoint, shouldScroll;
var container = this.calculatePoints();
// if (this.useDocumentBottom) {
// container.totalToScroll = this.height(this.$elementRef.nativeElement.ownerDocument);
// }
remaining = container.totalToScroll - container.scrolledUntilNow;
containerBreakpoint = container.height * this.scrollDistance + 1;
shouldScroll = remaining <= containerBreakpoint;
var triggerCallback = shouldScroll && this.scrollEnabled;
var shouldClearInterval = shouldScroll && this.checkInterval;
this.checkWhenEnabled = shouldScroll;
if (triggerCallback) {
this.infiniteScrollCallback();
}
else {
containerBottom = this.height(this.container);
containerTopOffset = 0;
if (this.offsetTop(this.container) !== void 0) {
containerTopOffset = this.offsetTop(this.container);
}
elementBottom = this.offsetTop(this.$elementRef.nativeElement) - containerTopOffset + this.height(this.$elementRef.nativeElement);
if (shouldClearInterval) {
clearInterval(this.checkInterval);
}
if (this.useDocumentBottom) {
elementBottom = this.height((this.$elementRef.nativeElement.ownerDocument || this.$elementRef.nativeElement.document).documentElement);
};
Scroller.prototype.calculatePoints = function () {
return this.isContainerWindow
? this.calculatePointsForWindow()
: this.calculatePointsForElement();
};
Scroller.prototype.calculatePointsForWindow = function () {
// container's height
var height = this.height(this.container);
// scrolled until now / current y point
var scrolledUntilNow = height + this.pageYOffset(this.documentElement);
// total height / most bottom y point
var totalToScroll = this.offsetTop(this.$elementRef.nativeElement) + this.height(this.$elementRef.nativeElement);
return { height: height, scrolledUntilNow: scrolledUntilNow, totalToScroll: totalToScroll };
};
Scroller.prototype.calculatePointsForElement = function () {
var height = this.height(this.container);
// perhaps use this.container.offsetTop instead of 'scrollTop'
var scrolledUntilNow = this.container.scrollTop;
var containerTopOffset = 0;
var offsetTop = this.offsetTop(this.container);
if (offsetTop !== void 0) {
containerTopOffset = offsetTop;
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= this.height(this.container) * this.scrollDistance + 1;
if (shouldScroll) {
this.checkWhenEnabled = true;
if (this.scrollEnabled) {
// if (scope.$$phase || $rootScope.$$phase) {
// return scope.infiniteScroll();
// } else {
// return scope.$apply(scope.infiniteScroll);
// }
this.infiniteScrollCallback();
}
}
else {
if (this.checkInterval) {
// this.$interval.cancel(this.checkInterval);
clearInterval(this.checkInterval);
}
return this.checkWhenEnabled = false;
}
var totalToScroll = this.container.scrollHeight;
// const totalToScroll = this.offsetTop(this.$elementRef.nativeElement) - containerTopOffset + this.height(this.$elementRef.nativeElement);
return { height: height, scrolledUntilNow: scrolledUntilNow, totalToScroll: totalToScroll };
};

@@ -100,3 +115,2 @@ Scroller.prototype.throttle = function (func, wait) {

later = function () {
var context;
previous = new Date().getTime();

@@ -106,3 +120,2 @@ clearInterval(timeout);

func.call(_self);
return context = null;
};

@@ -144,4 +157,4 @@ return function () {

};
Scroller.prototype.handleInfiniteScrollDisabled = function (v) {
this.scrollEnabled = !v;
Scroller.prototype.handleInfiniteScrollDisabled = function (isCurrentlyEnabled) {
this.scrollEnabled = !isCurrentlyEnabled;
// if (this.scrollEnabled && checkWhenEnabled) {

@@ -148,0 +161,0 @@ // checkWhenEnabled = false;

{
"compilerOptions": {
"noImplicitAny": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"module": "commonjs",

@@ -5,0 +6,0 @@ "target": "es5",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc