feature(ng13): add v13
This commit is contained in:
Oren Farhi
parent
8000cfea8a
commit
f959ccf448
16
.editorconfig
Normal file
16
.editorconfig
Normal file
@ -0,0 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
43
.gitignore
vendored
Normal file
43
.gitignore
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
*node_modules*
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
20
.vscode/launch.json
vendored
Normal file
20
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "pwa-chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
42
.vscode/tasks.json
vendored
Normal file
42
.vscode/tasks.json
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
67
CONTRIBUTING.md
Normal file
67
CONTRIBUTING.md
Normal file
@ -0,0 +1,67 @@
|
||||
# Contribute
|
||||
|
||||
## Introduction
|
||||
|
||||
First, thank you for considering contributing to ngx-infinite-scroll! It's people like you that make the open source community such a great community! 😊
|
||||
|
||||
We welcome any type of contribution, not only code. You can help with
|
||||
- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
|
||||
- **Marketing**: writing blog posts, howto's, printing stickers, ...
|
||||
- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
|
||||
- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
|
||||
- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
|
||||
|
||||
## Your First Contribution
|
||||
|
||||
Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
|
||||
|
||||
## Submitting code
|
||||
|
||||
Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
|
||||
|
||||
## Code review process
|
||||
|
||||
The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
|
||||
It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
|
||||
|
||||
## Financial contributions
|
||||
|
||||
We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
|
||||
Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
|
||||
|
||||
## Questions
|
||||
|
||||
If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
|
||||
You can also reach us at hello@ngx-infinite-scroll.opencollective.com.
|
||||
|
||||
## Credits
|
||||
|
||||
### Contributors
|
||||
|
||||
Thank you to all the people who have already contributed to ngx-infinite-scroll!
|
||||
<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
|
||||
|
||||
|
||||
### Backers
|
||||
|
||||
Thank you to all our backers! [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
|
||||
|
||||
|
||||
### Sponsors
|
||||
|
||||
Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor))
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
|
||||
|
||||
<!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->
|
||||
27
Development Instructions.md
Normal file
27
Development Instructions.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Development
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
278
README.md
Normal file
278
README.md
Normal file
@ -0,0 +1,278 @@
|
||||
[](https://travis-ci.org/orizens/ngx-infinite-scroll) [](#backers) [](#sponsors)
|
||||
[](https://badge.fury.io/js/ngx-infinite-scroll)
|
||||
[](https://badge.fury.io/js/ngx-infinite-scroll)
|
||||
[](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)
|
||||
[](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)
|
||||
|
||||
## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)
|
||||
|
||||
# Angular Infinite Scroll
|
||||
|
||||
versions now follow Angular's version to easily reflect compatibility.
|
||||
Meaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`
|
||||
|
||||
## Angular - Older Versions Support
|
||||
|
||||
Starting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0`
|
||||
For **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4`
|
||||
For **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3`
|
||||
For Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
|
||||
|
||||
## Used By
|
||||
|
||||
- [Google](https://google.com)
|
||||
- [Apple](https://apple.com)
|
||||
- [Amazon](https://amazon.com)
|
||||
- [Microsoft](https://microsoft.com)
|
||||
- [Disney](https://disney.com)
|
||||
- [Sap](https://sap.com/)
|
||||
- [Cisco](https://cisco.com/)
|
||||
- [Yandex](https://yandex.com)
|
||||
- [Ancestry](https://www.ancestry.com/)
|
||||
|
||||
and much more.
|
||||
|
||||
> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
|
||||
|
||||
### Opt-Out Of Scarf
|
||||
|
||||
Scarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)
|
||||
|
||||
## Front End Consulting Services
|
||||
|
||||
I'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).
|
||||
My services include:
|
||||
|
||||
- Angular/React/Javascript Consulting
|
||||
- Front End Architecture Consulting
|
||||
- Project Code Review
|
||||
- Project Development
|
||||
|
||||
[Contact Here](http://orizens.com/contact)
|
||||
|
||||
<a href="https://orizens.com" target="_blank">
|
||||
<img src="https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png" alt="Webpack and Angular" width="20%"/>
|
||||
</a>
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm install ngx-infinite-scroll --save
|
||||
```
|
||||
|
||||
## Supported API
|
||||
|
||||
### Properties
|
||||
|
||||
| @Input() | Type | Required | Default | Description |
|
||||
| ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
|
||||
| infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
|
||||
| infiniteScrollThrottle | number | optional | 150 | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling. |
|
||||
| scrollWindow | boolean | optional | 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. |
|
||||
| immediateCheck | boolean | optional | 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) |
|
||||
| infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |
|
||||
| horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |
|
||||
| alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |
|
||||
| infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
|
||||
| fromRoot | boolean | optional | false | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. |
|
||||
|
||||
### Events
|
||||
|
||||
| @Output() | Type | Event Type | Required | Description |
|
||||
| ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
|
||||
| scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
|
||||
| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |
|
||||
|
||||
## Behavior
|
||||
|
||||
By default, the directive listens to the **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
|
||||
|
||||
## DEMO
|
||||
|
||||
[Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)
|
||||
|
||||
## Usage
|
||||
|
||||
First, import the InfiniteScrollModule to your module:
|
||||
|
||||
```typescript
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppComponent } from './app';
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule, InfiniteScrollModule],
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
```
|
||||
|
||||
In this example, the **onScroll** callback will be invoked when the window is scrolled down:
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScroll()"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScroll() {
|
||||
console.log('scrolled!!');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
in this example, whenever the "search-results" is scrolled, the callback will be invoked:
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
styles: [
|
||||
`
|
||||
.search-results {
|
||||
height: 20rem;
|
||||
overflow: scroll;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScroll()"
|
||||
[scrollWindow]="false"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScroll() {
|
||||
console.log('scrolled!!');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
import { InfiniteScroll } from 'ngx-infinite-scroll';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
directives: [InfiniteScroll],
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollUpDistance]="1.5"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScrollDown()"
|
||||
(scrolledUp)="onScrollUp()"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScrollDown() {
|
||||
console.log('scrolled down!!');
|
||||
}
|
||||
|
||||
onScrollUp() {
|
||||
console.log('scrolled up!!');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]="true"`) or just inside the **infiniteScroll** directive (`[fromRoot]="false"`, default option).
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
styles: [
|
||||
`
|
||||
.main-panel {
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="main-panel">
|
||||
<div
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
[infiniteScrollContainer]="selector"
|
||||
[fromRoot]="true"
|
||||
(scrolled)="onScroll()"
|
||||
></div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
selector: string = '.main-panel';
|
||||
|
||||
onScroll() {
|
||||
console.log('scrolled!!');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It is also possible to use **infiniteScrollContainer** without additional variable by using single quotes inside double quotes:
|
||||
|
||||
```
|
||||
[infiniteScrollContainer]="'.main-panel'"
|
||||
```
|
||||
|
||||
# Showcase Examples
|
||||
|
||||
- [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
||||
<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
|
||||
|
||||
## Backers
|
||||
|
||||
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
|
||||
|
||||
## Sponsors
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
|
||||
137
angular.json
Normal file
137
angular.json
Normal file
@ -0,0 +1,137 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"ngx-infinite-scroll": {
|
||||
"projectType": "library",
|
||||
"root": "projects/ngx-infinite-scroll",
|
||||
"sourceRoot": "projects/ngx-infinite-scroll/src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"project": "projects/ngx-infinite-scroll/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/ngx-infinite-scroll/src/test.ts",
|
||||
"tsConfig": "projects/ngx-infinite-scroll/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/ngx-infinite-scroll/karma.conf.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "projects/demo",
|
||||
"sourceRoot": "projects/demo/src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/demo",
|
||||
"index": "projects/demo/src/index.html",
|
||||
"main": "projects/demo/src/main.ts",
|
||||
"polyfills": "projects/demo/src/polyfills.ts",
|
||||
"tsConfig": "projects/demo/tsconfig.app.json",
|
||||
"assets": [
|
||||
"projects/demo/src/favicon.ico",
|
||||
"projects/demo/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"projects/demo/src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "projects/demo/src/environments/environment.ts",
|
||||
"with": "projects/demo/src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "demo:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "demo:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "demo:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/demo/src/test.ts",
|
||||
"polyfills": "projects/demo/src/polyfills.ts",
|
||||
"tsConfig": "projects/demo/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/demo/karma.conf.js",
|
||||
"assets": [
|
||||
"projects/demo/src/favicon.ico",
|
||||
"projects/demo/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"projects/demo/src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "ngx-infinite-scroll"
|
||||
}
|
||||
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "orizens-ng",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test",
|
||||
"publish-lib": "npm publish --tag latest ./dist/ngx-infinite-scroll",
|
||||
"publish:beta": "npm publish --tag next ./dist/ngx-infinite-scroll"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.1.0",
|
||||
"@angular/common": "~13.1.0",
|
||||
"@angular/compiler": "~13.1.0",
|
||||
"@angular/core": "~13.1.0",
|
||||
"@angular/forms": "~13.1.0",
|
||||
"@angular/platform-browser": "~13.1.0",
|
||||
"@angular/platform-browser-dynamic": "~13.1.0",
|
||||
"@angular/router": "~13.1.0",
|
||||
"@scarf/scarf": "^1.1.1",
|
||||
"rxjs": "~7.4.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.1.3",
|
||||
"@angular/cli": "~13.1.3",
|
||||
"@angular/compiler-cli": "~13.1.0",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"jasmine-core": "~3.10.0",
|
||||
"karma": "~6.3.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.1.0",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"ng-packagr": "^13.0.0",
|
||||
"typescript": "~4.5.2"
|
||||
}
|
||||
}
|
||||
16
projects/demo/.browserslistrc
Normal file
16
projects/demo/.browserslistrc
Normal file
@ -0,0 +1,16 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
44
projects/demo/karma.conf.js
Normal file
44
projects/demo/karma.conf.js
Normal file
@ -0,0 +1,44 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, '../../coverage/demo'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
0
projects/demo/src/app/app.component.css
Normal file
0
projects/demo/src/app/app.component.css
Normal file
347
projects/demo/src/app/app.component.html
Normal file
347
projects/demo/src/app/app.component.html
Normal file
@ -0,0 +1,347 @@
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
|
||||
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<style>
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbar img {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo {
|
||||
height: 40px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.toolbar #youtube-logo {
|
||||
height: 40px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.toolbar #twitter-logo:hover,
|
||||
.toolbar #youtube-logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin: 82px auto 32px;
|
||||
padding: 0 16px;
|
||||
max-width: 960px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg.material-icons {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
svg.material-icons:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card svg.material-icons path {
|
||||
fill: #888;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
all: unset;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
margin: 0 8px 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.card-container .card:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card.card-small {
|
||||
height: 16px;
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.card-container .card:not(.highlight-card):hover .material-icons path {
|
||||
fill: rgb(105, 103, 103);
|
||||
}
|
||||
|
||||
.card.highlight-card {
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
width: auto;
|
||||
min-width: 30%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card.card.highlight-card span {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
svg#rocket {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
height: calc(100vh - 95px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 180px;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: #1976d2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #125699;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 6px;
|
||||
padding-top: 45px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
background-color: rgb(15, 15, 16);
|
||||
}
|
||||
|
||||
.terminal::before {
|
||||
content: "\2022 \2022 \2022";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: rgb(58, 58, 58);
|
||||
color: #c2c3c4;
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
line-height: 0;
|
||||
padding: 14px 0;
|
||||
text-indent: 4px;
|
||||
}
|
||||
|
||||
.terminal pre {
|
||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||
color: white;
|
||||
padding: 0 1rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-link {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 40px;
|
||||
margin: 8px;
|
||||
background-color: white;
|
||||
border: 1px solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
transition: 1s ease-out;
|
||||
}
|
||||
|
||||
.circle-link:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
svg#clouds {
|
||||
position: fixed;
|
||||
bottom: -160px;
|
||||
left: -230px;
|
||||
z-index: -10;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 767px) {
|
||||
.card-container > *:not(.circle-link) ,
|
||||
.terminal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card:not(.highlight-card) {
|
||||
height: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.card.highlight-card span {
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
svg#rocket-smoke {
|
||||
right: 120px;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
svg#rocket-smoke {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="toolbar" role="banner">
|
||||
<img
|
||||
width="40"
|
||||
alt="Angular Logo"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
|
||||
/>
|
||||
<span>Welcome To ngx-infinite-scroll</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
|
||||
<!-- Highlight Card -->
|
||||
<div class="card highlight-card card-small">
|
||||
|
||||
</div>
|
||||
|
||||
<h1 class="title well">
|
||||
ngx-infinite-scroll
|
||||
<section>
|
||||
<small>items: {{sum}}, now triggering scroll: {{direction}}</small>
|
||||
</section>
|
||||
<section>
|
||||
<button class="btn btn-info" (click)="toggleModal()">Open Infinite Scroll in Modal</button>
|
||||
</section>
|
||||
</h1>
|
||||
<modal *ngIf="modalOpen" (onClose)="toggleModal()"></modal>
|
||||
<div class="search-results"
|
||||
infinite-scroll
|
||||
[infiniteScrollDistance]="scrollDistance"
|
||||
[infiniteScrollUpDistance]="scrollUpDistance"
|
||||
[infiniteScrollThrottle]="throttle"
|
||||
(scrolled)="onScrollDown()"
|
||||
(scrolledUp)="onUp()">
|
||||
<p *ngFor="let i of array">
|
||||
{{ i }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
31
projects/demo/src/app/app.component.spec.ts
Normal file
31
projects/demo/src/app/app.component.spec.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'demo'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('demo');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('demo app is running!');
|
||||
});
|
||||
});
|
||||
70
projects/demo/src/app/app.component.ts
Normal file
70
projects/demo/src/app/app.component.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'demo';
|
||||
array: string[] = [];
|
||||
sum = 100;
|
||||
throttle = 300;
|
||||
scrollDistance = 1;
|
||||
scrollUpDistance = 2;
|
||||
direction = '';
|
||||
modalOpen = false;
|
||||
|
||||
// nisVersion = nisPackage.dependencies["ngx-infinite-scroll"];
|
||||
|
||||
constructor() {
|
||||
this.appendItems(0, this.sum);
|
||||
}
|
||||
|
||||
addItems(startIndex: number, endIndex: number, _method: 'push' | 'unshift') {
|
||||
for (let i = 0; i < this.sum; ++i) {
|
||||
const value = [i, ' ', this.generateWord()].join('');
|
||||
if (_method === 'push') {
|
||||
this.array.push(value);
|
||||
} else {
|
||||
this.array.unshift(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
appendItems(startIndex: number, endIndex: number) {
|
||||
this.addItems(startIndex, endIndex, 'push');
|
||||
}
|
||||
|
||||
prependItems(startIndex: number, endIndex: number) {
|
||||
this.addItems(startIndex, endIndex, 'unshift');
|
||||
}
|
||||
|
||||
onScrollDown() {
|
||||
// console.log('scrolled down!!', ev);
|
||||
|
||||
// add another 20 items
|
||||
const start = this.sum;
|
||||
this.sum += 20;
|
||||
this.appendItems(start, this.sum);
|
||||
|
||||
this.direction = 'down';
|
||||
}
|
||||
|
||||
onUp() {
|
||||
// console.log('scrolled up!', ev);
|
||||
const start = this.sum;
|
||||
this.sum += 20;
|
||||
this.prependItems(start, this.sum);
|
||||
|
||||
this.direction = 'up';
|
||||
}
|
||||
generateWord() {
|
||||
return Math.random() * 3342411313;
|
||||
// return chance.word();
|
||||
}
|
||||
|
||||
toggleModal() {
|
||||
this.modalOpen = !this.modalOpen;
|
||||
}
|
||||
}
|
||||
14
projects/demo/src/app/app.module.ts
Normal file
14
projects/demo/src/app/app.module.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent, ModalComponent],
|
||||
imports: [BrowserModule, InfiniteScrollModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
69
projects/demo/src/app/modal/modal.component.ts
Normal file
69
projects/demo/src/app/modal/modal.component.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { Component, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'modal',
|
||||
templateUrl: './modal.html',
|
||||
})
|
||||
export class ModalComponent {
|
||||
@Output() onClose = new EventEmitter();
|
||||
|
||||
array: number[] = [];
|
||||
sum = 100;
|
||||
|
||||
modalIsOpen = '';
|
||||
modalTitle = 'scroll to update';
|
||||
modalBody = modalText;
|
||||
|
||||
modalScrollDistance = 2;
|
||||
modalScrollThrottle = 50;
|
||||
|
||||
constructor() {
|
||||
for (let i = 0; i < this.sum; ++i) {
|
||||
this.array.push(i);
|
||||
}
|
||||
this.open();
|
||||
}
|
||||
|
||||
onScrollDown() {
|
||||
console.log('scrolled!!');
|
||||
|
||||
// add another 20 items
|
||||
const start = this.sum;
|
||||
this.sum += 20;
|
||||
for (let i = start; i < this.sum; ++i) {
|
||||
this.array.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
onModalScrollDown() {
|
||||
this.modalTitle = 'updated on ' + new Date().toString();
|
||||
this.modalBody += modalText;
|
||||
}
|
||||
open() {
|
||||
this.modalIsOpen = 'in modal-open';
|
||||
}
|
||||
|
||||
close() {
|
||||
this.modalIsOpen = '';
|
||||
this.modalBody = modalText;
|
||||
this.onClose.emit();
|
||||
}
|
||||
}
|
||||
|
||||
var modalText = `Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
|
||||
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
|
||||
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.`;
|
||||
24
projects/demo/src/app/modal/modal.html
Normal file
24
projects/demo/src/app/modal/modal.html
Normal file
@ -0,0 +1,24 @@
|
||||
<div class="modal fade {{ modalIsOpen }}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="close()"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">{{ modalTitle }}</h4>
|
||||
</div>
|
||||
<div class="modal-body"
|
||||
infinite-scroll
|
||||
[infiniteScrollDistance]="modalScrollDistance"
|
||||
[infiniteScrollThrottle]="modalScrollThrottle"
|
||||
[scrollWindow]="false"
|
||||
(scrolled)="onModalScrollDown()"
|
||||
>
|
||||
<p>
|
||||
{{ modalBody }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" (click)="close()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
0
projects/demo/src/assets/.gitkeep
Normal file
0
projects/demo/src/assets/.gitkeep
Normal file
3
projects/demo/src/environments/environment.prod.ts
Normal file
3
projects/demo/src/environments/environment.prod.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
16
projects/demo/src/environments/environment.ts
Normal file
16
projects/demo/src/environments/environment.ts
Normal file
@ -0,0 +1,16 @@
|
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
BIN
projects/demo/src/favicon.ico
Normal file
BIN
projects/demo/src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
13
projects/demo/src/index.html
Normal file
13
projects/demo/src/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Demo</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
12
projects/demo/src/main.ts
Normal file
12
projects/demo/src/main.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
53
projects/demo/src/polyfills.ts
Normal file
53
projects/demo/src/polyfills.ts
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
1
projects/demo/src/styles.css
Normal file
1
projects/demo/src/styles.css
Normal file
@ -0,0 +1 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
26
projects/demo/src/test.ts
Normal file
26
projects/demo/src/test.ts
Normal file
@ -0,0 +1,26 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
17
projects/demo/tsconfig.app.json
Normal file
17
projects/demo/tsconfig.app.json
Normal file
@ -0,0 +1,17 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/app",
|
||||
"types": [],
|
||||
"noImplicitAny": false,
|
||||
"strict": false,
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
18
projects/demo/tsconfig.spec.json
Normal file
18
projects/demo/tsconfig.spec.json
Normal file
@ -0,0 +1,18 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
16
projects/ngx-infinite-scroll/.browserslistrc
Normal file
16
projects/ngx-infinite-scroll/.browserslistrc
Normal file
@ -0,0 +1,16 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
173
projects/ngx-infinite-scroll/CHANGELOG.md
Normal file
173
projects/ngx-infinite-scroll/CHANGELOG.md
Normal file
@ -0,0 +1,173 @@
|
||||
## v 13.0.0 (2022/26/03)
|
||||
- [UPGRADE] - now using Angular 13
|
||||
- [DEV] - includes now a demo app for development
|
||||
|
||||
## v 10.1.0 (2020/12/09)
|
||||
|
||||
- [FIX] - fixes fast scroll issues #385
|
||||
|
||||
## v 10.0.1 (2020/12/09)
|
||||
|
||||
- [FIX] - throttle behavior refined - fixed issue #198
|
||||
|
||||
## v 10.0.0 (2020/11/07)
|
||||
|
||||
- [UPGRADE] - now using Angular 10
|
||||
|
||||
## v 9.1.0 (2020/09/09)
|
||||
|
||||
- [UPGRADE] - upgrading scarf
|
||||
|
||||
## v 9.0.0 (2020/05/12)
|
||||
|
||||
- [UPGRADE] - now using Angular 9
|
||||
|
||||
## v 8.0.2 (2020/05/10)
|
||||
|
||||
- [CHORE] - add @scarf
|
||||
|
||||
## v 8.0.1 (2019/10/15)
|
||||
|
||||
- [FIX] - solves issue with open collective postinstall #321
|
||||
|
||||
## v 8.0.0 (2019/07/26)
|
||||
|
||||
- [UPGRADE] - now using Angular 8
|
||||
- [BREAKING_CHANGE] - `InfiniteScrollEvent` is renamed to `IInfiniteScrollEvent`
|
||||
|
||||
## v 7.2.0 (2019/06/10)
|
||||
|
||||
- [FIX] - fixes #322 - fixing scrollDistance calculations to include it reach to definite bottom
|
||||
|
||||
## v 7.1.0 (2019/03/10)
|
||||
|
||||
- [FIX] - 'alwaysCallback' to trigger only when past distance point
|
||||
- [UPGRADE] - unit tests with puppeteer
|
||||
- [UPGRADE] - scorll state is now handled within a class
|
||||
- [FIX] - using now opencollective-postinstall #296
|
||||
|
||||
## v 7.0.1 (2019/01/04)
|
||||
|
||||
- [FIX] - build fix adding correct version of Typescript 3
|
||||
|
||||
## v 7.0.0 (2018/12/30)
|
||||
|
||||
- [UPGRADE] - now using Angular 7
|
||||
|
||||
## v 6.0.1 (2018/06/15)
|
||||
|
||||
- [FIX] - scroll up calculations issues #282
|
||||
- [CHORE] - more tests for "shouldFireScrollEvent()"
|
||||
- [CHORE] - added an "exmaples" instead "example" for development
|
||||
|
||||
## v 6.0.0 (2018/05/22)
|
||||
|
||||
- [UPGRADE] - upgrade to Angular 6 & rxjs 6
|
||||
- [CHORE] - demo now with https://stackblitz.com
|
||||
|
||||
## v 0.8.4 (2018/04/11)
|
||||
|
||||
- [FIX] - bug fixes
|
||||
- [UPGRADE] - rxjs 5.5.6 upgrade
|
||||
- [CHORE] - Add npm badges
|
||||
|
||||
## v 0.8.3 (2018/02/21)
|
||||
|
||||
- [FIX] - fix for #198 - takes a long time for onscroll to fire
|
||||
- [UPDATE] - default value for throttle changed to 150
|
||||
|
||||
## v 0.8.2 (2018/01/07)
|
||||
|
||||
- [FIX] - fix for #221 - action not fired on Windows scrolling
|
||||
- [FIX] - fix for #228 - scrolling back up to the top of the list and then scroll down doesn't trigger event
|
||||
- [REFACTOR] - shorten var names
|
||||
|
||||
## v 0.8.1 (2018/01/07)
|
||||
|
||||
- [REFACTOR] - performance optimization for scroll events
|
||||
|
||||
## v 0.8.0 (2018/01/02)
|
||||
|
||||
- [FIX] - now triggers only once when in or after target (#200)
|
||||
- [REFACTOR] - "distance" number has been refined to be the percentage point of the scroll nob.
|
||||
- [REFACTOR] - added more unit tests.
|
||||
|
||||
## v 0.7.2 (2017/12/07)
|
||||
|
||||
- [FIX] - fix for ie11 - fix #157
|
||||
|
||||
## v 0.7.1 (2017/11/27)
|
||||
|
||||
- [FIX] - use html container if passed in #217 - fix #216
|
||||
|
||||
## v 0.7.0 (2017/11/27)
|
||||
|
||||
- [ADD] - watch changes for: infiniteScrollDisabled - fix #196
|
||||
- [ADD] - watch changes for: infiniteScrollDistance - fix #202
|
||||
- [FIX] - fix for IE11 - fix #203
|
||||
- [REFACTOR] - "disable" now removes the scroll listener instead of rxjs/filter
|
||||
|
||||
## v 0.6.1 (2017/10/20)
|
||||
|
||||
- [REFACTOR] - updated code to be functional based
|
||||
- [FIX] - fix #67, fix #191, fix #190
|
||||
|
||||
## v 0.5.2 (2017/09/27)
|
||||
|
||||
- [FIX] - fix #157, fix #162, fix #171, fix #188
|
||||
- [DOCS] - added example for development
|
||||
|
||||
## v 0.5.1 (2017/04/25)
|
||||
|
||||
- [FIX] - fixes #156 - running scroll logics outside of angular's zone
|
||||
|
||||
## v 0.5.0 (2017/04/24)
|
||||
|
||||
- [MAINTAINANCE] - code refactor - removing factories to rely more pure functional methods in PositionResolver, AxisResolver
|
||||
|
||||
## v 0.4.2 (2017/04/19)
|
||||
|
||||
- [NEW] - added **'[infiniteScroll]'** by [Angular's styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-06). **[infinite-scroll]** will be deprecated in future version.
|
||||
- reduced bundle size with imports for RxJS Observable and Subscription objects #126.
|
||||
- removed old code directory from repo
|
||||
|
||||
## v 0.4.1 (2017/04/13)
|
||||
|
||||
- Fixes #147 - (**InfiniteScrollModule is not an NgModule**)
|
||||
|
||||
## v 0.4.0 (2017/04/12)
|
||||
|
||||
- Added Angular 4 support
|
||||
- New starter code base ([based on angular-library-starter](https://github.com/robisim74/angular-library-starter))
|
||||
|
||||
## v 0.3.3 (2017/03/01)
|
||||
|
||||
### Updates
|
||||
|
||||
- reverted the fix of #126
|
||||
|
||||
## v 0.3.2 (2017/03/01)
|
||||
|
||||
### Updates
|
||||
|
||||
- fixes [#126](https://github.com/orizens/angular2-infinite-scroll/issues/126)
|
||||
|
||||
## v 0.3.1 (2017/02/15)
|
||||
|
||||
### Updates
|
||||
|
||||
- added custom scrollable container from [#108](https://github.com/orizens/angular2-infinite-scroll/pull/108/files)
|
||||
|
||||
## v 0.3.0 (2017/01/31)
|
||||
|
||||
### Updates
|
||||
|
||||
- refactored infinite scroller to smaller modules with composition
|
||||
- added "models" - includes interfaces for development
|
||||
|
||||
## v 0.2.9 (2017/01/13)
|
||||
|
||||
### Updates
|
||||
|
||||
- added changelog.md
|
||||
- ([refactor(scroll): replaces throttle with debounce](https://github.com/orizens/angular2-infinite-scroll/pull/82))
|
||||
67
projects/ngx-infinite-scroll/CONTRIBUTING.md
Normal file
67
projects/ngx-infinite-scroll/CONTRIBUTING.md
Normal file
@ -0,0 +1,67 @@
|
||||
# Contribute
|
||||
|
||||
## Introduction
|
||||
|
||||
First, thank you for considering contributing to ngx-infinite-scroll! It's people like you that make the open source community such a great community! 😊
|
||||
|
||||
We welcome any type of contribution, not only code. You can help with
|
||||
- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
|
||||
- **Marketing**: writing blog posts, howto's, printing stickers, ...
|
||||
- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
|
||||
- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
|
||||
- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
|
||||
|
||||
## Your First Contribution
|
||||
|
||||
Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
|
||||
|
||||
## Submitting code
|
||||
|
||||
Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
|
||||
|
||||
## Code review process
|
||||
|
||||
The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
|
||||
It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
|
||||
|
||||
## Financial contributions
|
||||
|
||||
We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
|
||||
Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
|
||||
|
||||
## Questions
|
||||
|
||||
If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
|
||||
You can also reach us at hello@ngx-infinite-scroll.opencollective.com.
|
||||
|
||||
## Credits
|
||||
|
||||
### Contributors
|
||||
|
||||
Thank you to all the people who have already contributed to ngx-infinite-scroll!
|
||||
<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
|
||||
|
||||
|
||||
### Backers
|
||||
|
||||
Thank you to all our backers! [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
|
||||
|
||||
|
||||
### Sponsors
|
||||
|
||||
Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor))
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
|
||||
|
||||
<!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->
|
||||
25
projects/ngx-infinite-scroll/Development Instructions.md
Normal file
25
projects/ngx-infinite-scroll/Development Instructions.md
Normal file
@ -0,0 +1,25 @@
|
||||
# NgxInfiniteScroll
|
||||
|
||||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name --project ngx-infinite-scroll` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-infinite-scroll`.
|
||||
|
||||
> Note: Don't forget to add `--project ngx-infinite-scroll` or else it will be added to the default project in your `angular.json` file.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build ngx-infinite-scroll` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Publishing
|
||||
|
||||
After building your library with `ng build ngx-infinite-scroll`, go to the dist folder `cd dist/ngx-infinite-scroll` and run `npm publish`.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test ngx-infinite-scroll` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
278
projects/ngx-infinite-scroll/README.md
Normal file
278
projects/ngx-infinite-scroll/README.md
Normal file
@ -0,0 +1,278 @@
|
||||
[](https://travis-ci.org/orizens/ngx-infinite-scroll) [](#backers) [](#sponsors)
|
||||
[](https://badge.fury.io/js/ngx-infinite-scroll)
|
||||
[](https://badge.fury.io/js/ngx-infinite-scroll)
|
||||
[](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)
|
||||
[](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)
|
||||
|
||||
## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)
|
||||
|
||||
# Angular Infinite Scroll
|
||||
|
||||
versions now follow Angular's version to easily reflect compatibility.
|
||||
Meaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`
|
||||
|
||||
## Angular - Older Versions Support
|
||||
|
||||
Starting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0`
|
||||
For **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4`
|
||||
For **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3`
|
||||
For Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
|
||||
|
||||
## Used By
|
||||
|
||||
- [Google](https://google.com)
|
||||
- [Apple](https://apple.com)
|
||||
- [Amazon](https://amazon.com)
|
||||
- [Microsoft](https://microsoft.com)
|
||||
- [Disney](https://disney.com)
|
||||
- [Sap](https://sap.com/)
|
||||
- [Cisco](https://cisco.com/)
|
||||
- [Yandex](https://yandex.com)
|
||||
- [Ancestry](https://www.ancestry.com/)
|
||||
|
||||
and much more.
|
||||
|
||||
> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
|
||||
|
||||
### Opt-Out Of Scarf
|
||||
|
||||
Scarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)
|
||||
|
||||
## Front End Consulting Services
|
||||
|
||||
I'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).
|
||||
My services include:
|
||||
|
||||
- Angular/React/Javascript Consulting
|
||||
- Front End Architecture Consulting
|
||||
- Project Code Review
|
||||
- Project Development
|
||||
|
||||
[Contact Here](http://orizens.com/contact)
|
||||
|
||||
<a href="https://orizens.com" target="_blank">
|
||||
<img src="https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png" alt="Webpack and Angular" width="20%"/>
|
||||
</a>
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm install ngx-infinite-scroll --save
|
||||
```
|
||||
|
||||
## Supported API
|
||||
|
||||
### Properties
|
||||
|
||||
| @Input() | Type | Required | Default | Description |
|
||||
| ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
|
||||
| infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
|
||||
| infiniteScrollThrottle | number | optional | 150 | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling. |
|
||||
| scrollWindow | boolean | optional | 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. |
|
||||
| immediateCheck | boolean | optional | 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) |
|
||||
| infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |
|
||||
| horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |
|
||||
| alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |
|
||||
| infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
|
||||
| fromRoot | boolean | optional | false | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. |
|
||||
|
||||
### Events
|
||||
|
||||
| @Output() | Type | Event Type | Required | Description |
|
||||
| ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
|
||||
| scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
|
||||
| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |
|
||||
|
||||
## Behavior
|
||||
|
||||
By default, the directive listens to the **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
|
||||
|
||||
## DEMO
|
||||
|
||||
[Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)
|
||||
|
||||
## Usage
|
||||
|
||||
First, import the InfiniteScrollModule to your module:
|
||||
|
||||
```typescript
|
||||
import { NgModule } from "@angular/core";
|
||||
import { BrowserModule } from "@angular/platform-browser";
|
||||
import { InfiniteScrollModule } from "ngx-infinite-scroll";
|
||||
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
|
||||
import { AppComponent } from "./app";
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule, InfiniteScrollModule],
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
```
|
||||
|
||||
In this example, the **onScroll** callback will be invoked when the window is scrolled down:
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app",
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScroll()"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScroll() {
|
||||
console.log("scrolled!!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
in this example, whenever the "search-results" is scrolled, the callback will be invoked:
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app",
|
||||
styles: [
|
||||
`
|
||||
.search-results {
|
||||
height: 20rem;
|
||||
overflow: scroll;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScroll()"
|
||||
[scrollWindow]="false"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScroll() {
|
||||
console.log("scrolled!!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
import { InfiniteScroll } from "ngx-infinite-scroll";
|
||||
|
||||
@Component({
|
||||
selector: "app",
|
||||
directives: [InfiniteScroll],
|
||||
template: `
|
||||
<div
|
||||
class="search-results"
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollUpDistance]="1.5"
|
||||
[infiniteScrollThrottle]="50"
|
||||
(scrolled)="onScrollDown()"
|
||||
(scrolledUp)="onScrollUp()"
|
||||
></div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
onScrollDown() {
|
||||
console.log("scrolled down!!");
|
||||
}
|
||||
|
||||
onScrollUp() {
|
||||
console.log("scrolled up!!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]="true"`) or just inside the **infiniteScroll** directive (`[fromRoot]="false"`, default option).
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app",
|
||||
styles: [
|
||||
`
|
||||
.main-panel {
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<div class="main-panel">
|
||||
<div
|
||||
infiniteScroll
|
||||
[infiniteScrollDistance]="2"
|
||||
[infiniteScrollThrottle]="50"
|
||||
[infiniteScrollContainer]="selector"
|
||||
[fromRoot]="true"
|
||||
(scrolled)="onScroll()"
|
||||
></div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {
|
||||
selector: string = ".main-panel";
|
||||
|
||||
onScroll() {
|
||||
console.log("scrolled!!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It is also possible to use **infiniteScrollContainer** without additional variable by using single quotes inside double quotes:
|
||||
|
||||
```
|
||||
[infiniteScrollContainer]="'.main-panel'"
|
||||
```
|
||||
|
||||
# Showcase Examples
|
||||
|
||||
- [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
||||
<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
|
||||
|
||||
## Backers
|
||||
|
||||
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
|
||||
|
||||
## Sponsors
|
||||
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
|
||||
44
projects/ngx-infinite-scroll/karma.conf.js
Normal file
44
projects/ngx-infinite-scroll/karma.conf.js
Normal file
@ -0,0 +1,44 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, '../../coverage/ngx-infinite-scroll'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
8
projects/ngx-infinite-scroll/ng-package.json
Normal file
8
projects/ngx-infinite-scroll/ng-package.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../dist/ngx-infinite-scroll",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
},
|
||||
"allowedNonPeerDependencies": ["@scarf/@scarf"]
|
||||
}
|
||||
19
projects/ngx-infinite-scroll/package.json
Normal file
19
projects/ngx-infinite-scroll/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "ngx-infinite-scroll",
|
||||
"version": "13.0.1",
|
||||
"scripts": {
|
||||
"postinstall": "opencollective-postinstall || exit 0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^13.1.0",
|
||||
"@angular/core": "^13.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"collective": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/ngx-infinite-scroll",
|
||||
"logo": "https://opencollective.com/ngx-infinite-scroll/logo.txt"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
import {
|
||||
AfterViewInit,
|
||||
Directive,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
NgZone,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
Output,
|
||||
SimpleChanges,
|
||||
} from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
import { IInfiniteScrollEvent, IInfiniteScrollAction } from '../models';
|
||||
import { hasWindowDefined, inputPropChanged } from './services/ngx-ins-utils';
|
||||
import {
|
||||
createScroller,
|
||||
InfiniteScrollActions,
|
||||
} from './services/scroll-register';
|
||||
|
||||
@Directive({
|
||||
selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]',
|
||||
})
|
||||
export class InfiniteScrollDirective
|
||||
implements OnDestroy, OnChanges, AfterViewInit
|
||||
{
|
||||
@Output() scrolled = new EventEmitter<IInfiniteScrollEvent>();
|
||||
@Output() scrolledUp = new EventEmitter<IInfiniteScrollEvent>();
|
||||
|
||||
@Input() infiniteScrollDistance: number = 2;
|
||||
@Input() infiniteScrollUpDistance: number = 1.5;
|
||||
@Input() infiniteScrollThrottle: number = 150;
|
||||
@Input() infiniteScrollDisabled: boolean = false;
|
||||
@Input() infiniteScrollContainer: any = null;
|
||||
@Input() scrollWindow: boolean = true;
|
||||
@Input() immediateCheck: boolean = false;
|
||||
@Input() horizontal: boolean = false;
|
||||
@Input() alwaysCallback: boolean = false;
|
||||
@Input() fromRoot: boolean = false;
|
||||
|
||||
private disposeScroller: Subscription | any;
|
||||
|
||||
constructor(private element: ElementRef, private zone: NgZone) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (!this.infiniteScrollDisabled) {
|
||||
this.setup();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges({
|
||||
infiniteScrollContainer,
|
||||
infiniteScrollDisabled,
|
||||
infiniteScrollDistance,
|
||||
}: SimpleChanges) {
|
||||
const containerChanged = inputPropChanged(infiniteScrollContainer);
|
||||
const disabledChanged = inputPropChanged(infiniteScrollDisabled);
|
||||
const distanceChanged = inputPropChanged(infiniteScrollDistance);
|
||||
const shouldSetup =
|
||||
(!disabledChanged && !this.infiniteScrollDisabled) ||
|
||||
(disabledChanged && !infiniteScrollDisabled.currentValue) ||
|
||||
distanceChanged;
|
||||
|
||||
if (containerChanged || disabledChanged || distanceChanged) {
|
||||
this.destroyScroller();
|
||||
if (shouldSetup) {
|
||||
this.setup();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setup() {
|
||||
if (hasWindowDefined()) {
|
||||
this.zone.runOutsideAngular(() => {
|
||||
this.disposeScroller = createScroller({
|
||||
fromRoot: this.fromRoot,
|
||||
alwaysCallback: this.alwaysCallback,
|
||||
disable: this.infiniteScrollDisabled,
|
||||
downDistance: this.infiniteScrollDistance,
|
||||
element: this.element,
|
||||
horizontal: this.horizontal,
|
||||
scrollContainer: this.infiniteScrollContainer,
|
||||
scrollWindow: this.scrollWindow,
|
||||
throttle: this.infiniteScrollThrottle,
|
||||
upDistance: this.infiniteScrollUpDistance,
|
||||
}).subscribe((payload: any) =>
|
||||
this.zone.run(() => this.handleOnScroll(payload))
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleOnScroll({ type, payload }: IInfiniteScrollAction) {
|
||||
switch (type) {
|
||||
case InfiniteScrollActions.DOWN:
|
||||
return this.scrolled.emit(payload);
|
||||
|
||||
case InfiniteScrollActions.UP:
|
||||
return this.scrolledUp.emit(payload);
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroyScroller();
|
||||
}
|
||||
|
||||
destroyScroller() {
|
||||
if (this.disposeScroller) {
|
||||
this.disposeScroller.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { InfiniteScrollDirective } from './ngx-infinite-scroll.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [InfiniteScrollDirective],
|
||||
exports: [InfiniteScrollDirective],
|
||||
imports: [],
|
||||
providers: [],
|
||||
})
|
||||
export class InfiniteScrollModule {}
|
||||
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NgxInfiniteScrollService } from './ngx-infinite-scroll.service';
|
||||
|
||||
describe('NgxInfiniteScrollService', () => {
|
||||
let service: NgxInfiniteScrollService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(NgxInfiniteScrollService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NgxInfiniteScrollService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
const VerticalProps = {
|
||||
clientHeight: "clientHeight",
|
||||
offsetHeight: "offsetHeight",
|
||||
scrollHeight: "scrollHeight",
|
||||
pageYOffset: "pageYOffset",
|
||||
offsetTop: "offsetTop",
|
||||
scrollTop: "scrollTop",
|
||||
top: "top"
|
||||
};
|
||||
|
||||
const HorizontalProps = {
|
||||
clientHeight: "clientWidth",
|
||||
offsetHeight: "offsetWidth",
|
||||
scrollHeight: "scrollWidth",
|
||||
pageYOffset: "pageXOffset",
|
||||
offsetTop: "offsetLeft",
|
||||
scrollTop: "scrollLeft",
|
||||
top: "left"
|
||||
};
|
||||
|
||||
export class AxisResolver {
|
||||
private propsMap: any;
|
||||
|
||||
constructor(private vertical: boolean = true) {
|
||||
this.propsMap = vertical ? VerticalProps : HorizontalProps;
|
||||
}
|
||||
clientHeightKey() {
|
||||
return this.propsMap.clientHeight;
|
||||
}
|
||||
offsetHeightKey() {
|
||||
return this.propsMap.offsetHeight;
|
||||
}
|
||||
scrollHeightKey() {
|
||||
return this.propsMap.scrollHeight;
|
||||
}
|
||||
pageYOffsetKey() {
|
||||
return this.propsMap.pageYOffset;
|
||||
}
|
||||
offsetTopKey() {
|
||||
return this.propsMap.offsetTop;
|
||||
}
|
||||
scrollTopKey() {
|
||||
return this.propsMap.scrollTop;
|
||||
}
|
||||
topKey() {
|
||||
return this.propsMap.top;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
import { IInfiniteScrollEvent, IPositionStats } from '../../models';
|
||||
|
||||
export interface IScrollerProps extends IDistanceRange {
|
||||
container: IPositionStats;
|
||||
alwaysCallback: boolean;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export interface ITriggerEvents {
|
||||
down: (event: any) => any;
|
||||
up: (event: any) => any;
|
||||
}
|
||||
|
||||
export interface IDistanceRange {
|
||||
down: number;
|
||||
up: number;
|
||||
}
|
||||
|
||||
export interface IScrollConfig {
|
||||
alwaysCallback: boolean;
|
||||
shouldFireScrollEvent: boolean;
|
||||
}
|
||||
|
||||
export function shouldTriggerEvents(
|
||||
alwaysCallback: boolean,
|
||||
shouldFireScrollEvent: boolean,
|
||||
isTriggeredCurrentTotal: boolean
|
||||
) {
|
||||
if (alwaysCallback && shouldFireScrollEvent) {
|
||||
return true;
|
||||
}
|
||||
if (!isTriggeredCurrentTotal && shouldFireScrollEvent) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { ElementRef, SimpleChange } from '@angular/core';
|
||||
|
||||
export function resolveContainerElement(
|
||||
selector: string | any,
|
||||
scrollWindow,
|
||||
defaultElement,
|
||||
fromRoot: boolean
|
||||
): any {
|
||||
const hasWindow = window && !!window.document && window.document.documentElement;
|
||||
let container = hasWindow && scrollWindow ? window : defaultElement;
|
||||
if (selector) {
|
||||
const containerIsString =
|
||||
selector && hasWindow && typeof selector === 'string';
|
||||
container = containerIsString
|
||||
? findElement(selector, defaultElement.nativeElement, fromRoot)
|
||||
: selector;
|
||||
if (!container) {
|
||||
throw new Error('ngx-infinite-scroll {resolveContainerElement()}: selector for');
|
||||
}
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
export function findElement(
|
||||
selector: string | any,
|
||||
customRoot: ElementRef | any,
|
||||
fromRoot: boolean
|
||||
) {
|
||||
const rootEl = fromRoot ? window.document : customRoot;
|
||||
return rootEl.querySelector(selector);
|
||||
}
|
||||
|
||||
export function inputPropChanged(prop: SimpleChange): boolean {
|
||||
return prop && !prop.firstChange;
|
||||
}
|
||||
|
||||
export function hasWindowDefined(): boolean {
|
||||
return typeof window !== 'undefined';
|
||||
}
|
||||
@ -0,0 +1,160 @@
|
||||
import { ElementRef } from '@angular/core';
|
||||
|
||||
import {
|
||||
ContainerRef,
|
||||
IPositionElements,
|
||||
IPositionStats,
|
||||
IResolver,
|
||||
} from '../../models';
|
||||
import { AxisResolver } from './axis-resolver';
|
||||
|
||||
export function createResolver({
|
||||
windowElement,
|
||||
axis,
|
||||
}: IPositionElements): IResolver {
|
||||
return createResolverWithContainer(
|
||||
{ axis, isWindow: isElementWindow(windowElement) },
|
||||
windowElement
|
||||
);
|
||||
}
|
||||
|
||||
export function createResolverWithContainer(
|
||||
resolver: any,
|
||||
windowElement: ContainerRef
|
||||
) {
|
||||
const container =
|
||||
resolver.isWindow || (windowElement && !windowElement.nativeElement)
|
||||
? windowElement
|
||||
: windowElement.nativeElement;
|
||||
return { ...resolver, container };
|
||||
}
|
||||
|
||||
export function isElementWindow(windowElement: ContainerRef): boolean {
|
||||
const isWindow = ['Window', 'global'].some((obj: string) =>
|
||||
Object.prototype.toString.call(windowElement).includes(obj)
|
||||
);
|
||||
return isWindow;
|
||||
}
|
||||
|
||||
export function getDocumentElement(
|
||||
isContainerWindow: boolean,
|
||||
windowElement: any
|
||||
) {
|
||||
return isContainerWindow ? windowElement.document.documentElement : null;
|
||||
}
|
||||
|
||||
export function calculatePoints(element: ElementRef, resolver: IResolver) {
|
||||
const height = extractHeightForElement(resolver);
|
||||
return resolver.isWindow
|
||||
? calculatePointsForWindow(height, element, resolver)
|
||||
: calculatePointsForElement(height, element, resolver);
|
||||
}
|
||||
|
||||
export function calculatePointsForWindow(
|
||||
height: number,
|
||||
element: ElementRef,
|
||||
resolver: IResolver
|
||||
): IPositionStats {
|
||||
const { axis, container, isWindow } = resolver;
|
||||
const { offsetHeightKey, clientHeightKey } = extractHeightPropKeys(axis);
|
||||
// scrolled until now / current y point
|
||||
const scrolled =
|
||||
height +
|
||||
getElementPageYOffset(
|
||||
getDocumentElement(isWindow, container),
|
||||
axis,
|
||||
isWindow
|
||||
);
|
||||
// total height / most bottom y point
|
||||
const nativeElementHeight = getElementHeight(
|
||||
element.nativeElement,
|
||||
isWindow,
|
||||
offsetHeightKey,
|
||||
clientHeightKey
|
||||
);
|
||||
const totalToScroll =
|
||||
getElementOffsetTop(element.nativeElement, axis, isWindow) +
|
||||
nativeElementHeight;
|
||||
return { height, scrolled, totalToScroll, isWindow };
|
||||
}
|
||||
|
||||
export function calculatePointsForElement(
|
||||
height: number,
|
||||
element: ElementRef,
|
||||
resolver: IResolver
|
||||
): IPositionStats {
|
||||
const { axis, container } = resolver;
|
||||
// perhaps use container.offsetTop instead of 'scrollTop'
|
||||
const scrolled = container[axis.scrollTopKey()];
|
||||
const totalToScroll = container[axis.scrollHeightKey()];
|
||||
return { height, scrolled, totalToScroll, isWindow: false };
|
||||
}
|
||||
|
||||
export function extractHeightPropKeys(axis: AxisResolver) {
|
||||
return {
|
||||
offsetHeightKey: axis.offsetHeightKey(),
|
||||
clientHeightKey: axis.clientHeightKey(),
|
||||
};
|
||||
}
|
||||
|
||||
export function extractHeightForElement({
|
||||
container,
|
||||
isWindow,
|
||||
axis,
|
||||
}: IResolver) {
|
||||
const { offsetHeightKey, clientHeightKey } = extractHeightPropKeys(axis);
|
||||
return getElementHeight(
|
||||
container,
|
||||
isWindow,
|
||||
offsetHeightKey,
|
||||
clientHeightKey
|
||||
);
|
||||
}
|
||||
export function getElementHeight(
|
||||
elem: any,
|
||||
isWindow: boolean,
|
||||
offsetHeightKey: string,
|
||||
clientHeightKey: string
|
||||
) {
|
||||
if (isNaN(elem[offsetHeightKey])) {
|
||||
const docElem = getDocumentElement(isWindow, elem);
|
||||
return docElem ? docElem[clientHeightKey] : 0;
|
||||
} else {
|
||||
return elem[offsetHeightKey];
|
||||
}
|
||||
}
|
||||
|
||||
export function getElementOffsetTop(
|
||||
elem: ContainerRef,
|
||||
axis: AxisResolver,
|
||||
isWindow: boolean
|
||||
) {
|
||||
const topKey = axis.topKey();
|
||||
// elem = elem.nativeElement;
|
||||
if (!elem.getBoundingClientRect) {
|
||||
// || elem.css('none')) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
elem.getBoundingClientRect()[topKey] +
|
||||
getElementPageYOffset(elem, axis, isWindow)
|
||||
);
|
||||
}
|
||||
|
||||
export function getElementPageYOffset(
|
||||
elem: ContainerRef,
|
||||
axis: AxisResolver,
|
||||
isWindow: boolean
|
||||
) {
|
||||
const pageYOffset = axis.pageYOffsetKey();
|
||||
const scrollTop = axis.scrollTopKey();
|
||||
const offsetTop = axis.offsetTopKey();
|
||||
|
||||
if (isNaN(window.pageYOffset)) {
|
||||
return getDocumentElement(isWindow, elem)[scrollTop];
|
||||
} else if (elem.ownerDocument) {
|
||||
return elem.ownerDocument.defaultView[pageYOffset];
|
||||
} else {
|
||||
return elem[offsetTop];
|
||||
}
|
||||
}
|
||||
115
projects/ngx-infinite-scroll/src/lib/services/scroll-register.ts
Normal file
115
projects/ngx-infinite-scroll/src/lib/services/scroll-register.ts
Normal file
@ -0,0 +1,115 @@
|
||||
import { Observable, of, fromEvent } from 'rxjs';
|
||||
import { map, mergeMap, tap, throttleTime, filter } from 'rxjs/operators';
|
||||
|
||||
import * as Models from '../../models';
|
||||
import { AxisResolver } from './axis-resolver';
|
||||
import { shouldTriggerEvents } from './event-trigger';
|
||||
import { resolveContainerElement } from './ngx-ins-utils';
|
||||
import { calculatePoints, createResolver } from './position-resolver';
|
||||
import * as ScrollResolver from './scroll-resolver';
|
||||
import { ScrollState } from './scroll-state';
|
||||
|
||||
export function createScroller(config: Models.IScroller) {
|
||||
const { scrollContainer, scrollWindow, element, fromRoot } = config;
|
||||
const resolver = createResolver({
|
||||
axis: new AxisResolver(!config.horizontal),
|
||||
windowElement: resolveContainerElement(
|
||||
scrollContainer,
|
||||
scrollWindow,
|
||||
element,
|
||||
fromRoot
|
||||
),
|
||||
});
|
||||
const scrollState = new ScrollState({
|
||||
totalToScroll: calculatePoints(element, resolver),
|
||||
});
|
||||
const options: Models.IScrollRegisterConfig = {
|
||||
container: resolver.container,
|
||||
throttle: config.throttle,
|
||||
};
|
||||
const distance = {
|
||||
up: config.upDistance,
|
||||
down: config.downDistance,
|
||||
};
|
||||
return attachScrollEvent(options).pipe(
|
||||
mergeMap(() => of(calculatePoints(element, resolver))),
|
||||
map((positionStats: Models.IPositionStats) =>
|
||||
toInfiniteScrollParams(
|
||||
scrollState.lastScrollPosition,
|
||||
positionStats,
|
||||
distance
|
||||
)
|
||||
),
|
||||
tap(({ stats }: Models.IScrollParams) =>
|
||||
scrollState.updateScroll(stats.scrolled, stats.totalToScroll)
|
||||
),
|
||||
filter(
|
||||
({ fire, scrollDown, stats: { totalToScroll } }: Models.IScrollParams) =>
|
||||
shouldTriggerEvents(
|
||||
config.alwaysCallback,
|
||||
fire,
|
||||
scrollState.isTriggeredScroll(totalToScroll, scrollDown)
|
||||
)
|
||||
),
|
||||
tap(({ scrollDown, stats: { totalToScroll } }: Models.IScrollParams) => {
|
||||
scrollState.updateTriggeredFlag(totalToScroll, scrollDown);
|
||||
}),
|
||||
map(toInfiniteScrollAction)
|
||||
);
|
||||
}
|
||||
|
||||
export function attachScrollEvent(
|
||||
options: Models.IScrollRegisterConfig
|
||||
): Observable<{}> {
|
||||
let obs = fromEvent(options.container, 'scroll');
|
||||
// For an unknown reason calling `sampleTime()` causes trouble for many users, even with `options.throttle = 0`.
|
||||
// Let's avoid calling the function unless needed.
|
||||
// Replacing with throttleTime seems to solve the problem
|
||||
// See https://github.com/orizens/ngx-infinite-scroll/issues/198
|
||||
if (options.throttle) {
|
||||
obs = obs.pipe(
|
||||
throttleTime(options.throttle, undefined, {
|
||||
leading: true,
|
||||
trailing: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
return obs as any;
|
||||
}
|
||||
|
||||
export function toInfiniteScrollParams(
|
||||
lastScrollPosition: number,
|
||||
stats: Models.IPositionStats,
|
||||
distance: Models.IScrollerDistance
|
||||
): Models.IScrollParams {
|
||||
const { scrollDown, fire } = ScrollResolver.getScrollStats(
|
||||
lastScrollPosition,
|
||||
stats,
|
||||
distance
|
||||
);
|
||||
return {
|
||||
scrollDown,
|
||||
fire,
|
||||
stats,
|
||||
};
|
||||
}
|
||||
|
||||
export const InfiniteScrollActions = {
|
||||
DOWN: '[NGX_ISE] DOWN',
|
||||
UP: '[NGX_ISE] UP',
|
||||
};
|
||||
|
||||
export function toInfiniteScrollAction(
|
||||
response: Models.IScrollParams
|
||||
): Models.IInfiniteScrollAction {
|
||||
const {
|
||||
scrollDown,
|
||||
stats: { scrolled: currentScrollPosition },
|
||||
} = response;
|
||||
return {
|
||||
type: scrollDown ? InfiniteScrollActions.DOWN : InfiniteScrollActions.UP,
|
||||
payload: {
|
||||
currentScrollPosition,
|
||||
},
|
||||
};
|
||||
}
|
||||
108
projects/ngx-infinite-scroll/src/lib/services/scroll-resolver.ts
Normal file
108
projects/ngx-infinite-scroll/src/lib/services/scroll-resolver.ts
Normal file
@ -0,0 +1,108 @@
|
||||
import { IPositionStats, IScrollState, IScrollerDistance } from '../../models';
|
||||
|
||||
export function shouldFireScrollEvent(
|
||||
container: IPositionStats,
|
||||
distance: IScrollerDistance = { down: 0, up: 0 },
|
||||
scrollingDown: boolean
|
||||
) {
|
||||
let remaining: number;
|
||||
let containerBreakpoint: number;
|
||||
if (container.totalToScroll <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const scrolledUntilNow = container.isWindow
|
||||
? container.scrolled
|
||||
: container.height + container.scrolled;
|
||||
if (scrollingDown) {
|
||||
remaining =
|
||||
(container.totalToScroll - scrolledUntilNow) / container.totalToScroll;
|
||||
const distanceDown = distance?.down ? distance.down : 0;
|
||||
containerBreakpoint = distanceDown / 10;
|
||||
} else {
|
||||
const totalHiddenContentHeight =
|
||||
container.scrolled + (container.totalToScroll - scrolledUntilNow);
|
||||
remaining = container.scrolled / totalHiddenContentHeight;
|
||||
const distanceUp = distance?.up ? distance.up : 0;
|
||||
containerBreakpoint = distanceUp / 10;
|
||||
}
|
||||
|
||||
const shouldFireEvent: boolean = remaining <= containerBreakpoint;
|
||||
return shouldFireEvent;
|
||||
}
|
||||
|
||||
export function isScrollingDownwards(
|
||||
lastScrollPosition: number,
|
||||
container: IPositionStats
|
||||
) {
|
||||
return lastScrollPosition < container.scrolled;
|
||||
}
|
||||
|
||||
export function getScrollStats(
|
||||
lastScrollPosition: number,
|
||||
container: IPositionStats,
|
||||
distance: IScrollerDistance
|
||||
) {
|
||||
const scrollDown = isScrollingDownwards(lastScrollPosition, container);
|
||||
return {
|
||||
fire: shouldFireScrollEvent(container, distance, scrollDown),
|
||||
scrollDown,
|
||||
};
|
||||
}
|
||||
|
||||
export function updateScrollPosition(
|
||||
position: number,
|
||||
scrollState: IScrollState
|
||||
) {
|
||||
return (scrollState.lastScrollPosition = position);
|
||||
}
|
||||
|
||||
export function updateTotalToScroll(
|
||||
totalToScroll: number,
|
||||
scrollState: IScrollState
|
||||
) {
|
||||
if (scrollState.lastTotalToScroll !== totalToScroll) {
|
||||
scrollState.lastTotalToScroll = scrollState.totalToScroll;
|
||||
scrollState.totalToScroll = totalToScroll;
|
||||
}
|
||||
}
|
||||
|
||||
export function isSameTotalToScroll(scrollState: IScrollState) {
|
||||
return scrollState.totalToScroll === scrollState.lastTotalToScroll;
|
||||
}
|
||||
|
||||
export function updateTriggeredFlag(
|
||||
scroll: number,
|
||||
scrollState: IScrollState,
|
||||
triggered: boolean,
|
||||
isScrollingDown: boolean
|
||||
) {
|
||||
if (isScrollingDown) {
|
||||
scrollState.triggered.down = scroll;
|
||||
} else {
|
||||
scrollState.triggered.up = scroll;
|
||||
}
|
||||
}
|
||||
|
||||
export function isTriggeredScroll(
|
||||
totalToScroll: number,
|
||||
scrollState: IScrollState,
|
||||
isScrollingDown: boolean
|
||||
) {
|
||||
return isScrollingDown
|
||||
? scrollState.triggered.down === totalToScroll
|
||||
: scrollState.triggered.up === totalToScroll;
|
||||
}
|
||||
|
||||
export function updateScrollState(
|
||||
scrollState: IScrollState,
|
||||
scrolledUntilNow: number,
|
||||
totalToScroll: number
|
||||
) {
|
||||
updateScrollPosition(scrolledUntilNow, scrollState);
|
||||
updateTotalToScroll(totalToScroll, scrollState);
|
||||
// const isSameTotal = isSameTotalToScroll(scrollState);
|
||||
// if (!isSameTotal) {
|
||||
// updateTriggeredFlag(scrollState, false, isScrollingDown);
|
||||
// }
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import { IScrollState, IScrollerDistance } from '../../models';
|
||||
|
||||
export class ScrollState implements IScrollState {
|
||||
lastScrollPosition = 0;
|
||||
lastTotalToScroll = 0;
|
||||
totalToScroll = 0;
|
||||
triggered: IScrollerDistance = {
|
||||
down: 0,
|
||||
up: 0,
|
||||
};
|
||||
|
||||
constructor({ totalToScroll }) {
|
||||
this.totalToScroll = totalToScroll;
|
||||
}
|
||||
|
||||
updateScrollPosition(position: number) {
|
||||
return (this.lastScrollPosition = position);
|
||||
}
|
||||
|
||||
updateTotalToScroll(totalToScroll: number) {
|
||||
if (this.lastTotalToScroll !== totalToScroll) {
|
||||
this.lastTotalToScroll = this.totalToScroll;
|
||||
this.totalToScroll = totalToScroll;
|
||||
}
|
||||
}
|
||||
|
||||
updateScroll(scrolledUntilNow: number, totalToScroll: number) {
|
||||
this.updateScrollPosition(scrolledUntilNow);
|
||||
this.updateTotalToScroll(totalToScroll);
|
||||
}
|
||||
|
||||
updateTriggeredFlag(scroll, isScrollingDown: boolean) {
|
||||
if (isScrollingDown) {
|
||||
this.triggered.down = scroll;
|
||||
} else {
|
||||
this.triggered.up = scroll;
|
||||
}
|
||||
}
|
||||
|
||||
isTriggeredScroll(totalToScroll, isScrollingDown: boolean) {
|
||||
return isScrollingDown
|
||||
? this.triggered.down === totalToScroll
|
||||
: this.triggered.up === totalToScroll;
|
||||
}
|
||||
}
|
||||
65
projects/ngx-infinite-scroll/src/models.ts
Normal file
65
projects/ngx-infinite-scroll/src/models.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import { ElementRef } from '@angular/core';
|
||||
|
||||
export type ContainerRef = Window | ElementRef | any;
|
||||
|
||||
export interface IInfiniteScrollEvent {
|
||||
currentScrollPosition: number;
|
||||
}
|
||||
|
||||
export interface IPositionElements {
|
||||
windowElement: ContainerRef;
|
||||
axis: any;
|
||||
}
|
||||
|
||||
export interface IPositionStats {
|
||||
height: number;
|
||||
scrolled: number;
|
||||
totalToScroll: number;
|
||||
isWindow?: boolean;
|
||||
}
|
||||
export interface IScrollerDistance {
|
||||
down?: number;
|
||||
up?: number;
|
||||
}
|
||||
|
||||
export interface IScrollState {
|
||||
lastTotalToScroll: number;
|
||||
totalToScroll: number;
|
||||
triggered: IScrollerDistance;
|
||||
lastScrollPosition: number;
|
||||
}
|
||||
|
||||
export interface IResolver {
|
||||
container: ContainerRef;
|
||||
isWindow: boolean;
|
||||
axis: any;
|
||||
}
|
||||
|
||||
export interface IScrollRegisterConfig {
|
||||
container: ContainerRef;
|
||||
throttle: number;
|
||||
}
|
||||
|
||||
export interface IScroller {
|
||||
fromRoot: boolean;
|
||||
horizontal: boolean;
|
||||
disable: boolean;
|
||||
throttle: number;
|
||||
scrollWindow: boolean;
|
||||
element: ElementRef;
|
||||
scrollContainer: string | ElementRef;
|
||||
alwaysCallback: boolean;
|
||||
downDistance: number;
|
||||
upDistance: number;
|
||||
}
|
||||
|
||||
export interface IScrollParams {
|
||||
scrollDown: boolean;
|
||||
fire: boolean;
|
||||
stats: IPositionStats;
|
||||
}
|
||||
|
||||
export interface IInfiniteScrollAction {
|
||||
type: string;
|
||||
payload: IInfiniteScrollEvent;
|
||||
}
|
||||
14
projects/ngx-infinite-scroll/src/public-api.ts
Normal file
14
projects/ngx-infinite-scroll/src/public-api.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* Public API Surface of ngx-infinite-scroll
|
||||
*/
|
||||
|
||||
export * from './lib/ngx-infinite-scroll.service';
|
||||
export { InfiniteScrollDirective } from './lib/ngx-infinite-scroll.directive';
|
||||
export { InfiniteScrollModule } from './lib/ngx-infinite-scroll.module';
|
||||
export {
|
||||
ContainerRef,
|
||||
IInfiniteScrollEvent,
|
||||
IPositionElements,
|
||||
IPositionStats,
|
||||
IResolver,
|
||||
} from './models';
|
||||
27
projects/ngx-infinite-scroll/src/test.ts
Normal file
27
projects/ngx-infinite-scroll/src/test.ts
Normal file
@ -0,0 +1,27 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js';
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
@ -0,0 +1,196 @@
|
||||
/*
|
||||
import {
|
||||
async,
|
||||
inject
|
||||
} from '@angular/core/testing';
|
||||
import { InfiniteScrollDirective } from '../../src/modules/infinite-scroll.directive';
|
||||
import { ScrollRegister } from '../../src/services/scroll-register';
|
||||
import { ScrollResolver } from '../../src/services/scroll-resolver';
|
||||
|
||||
import { ElementRef, NgZone, SimpleChanges, SimpleChange } from '@angular/core';
|
||||
|
||||
describe('Infinite Scroll Directive', () => {
|
||||
// const zone = new NgZone({ enableLongStackTrace: false });
|
||||
let isScrollingDown = true;
|
||||
let zoneSpy: any, scrollResolverSpy: any, scrollRegisterSpy: any, positionResolverSpy: any;
|
||||
let directive: InfiniteScrollDirective;
|
||||
const positionFactoryMock: any = {
|
||||
create: () => positionResolverSpy
|
||||
};
|
||||
const createMockElement = () => {
|
||||
const mockedElement: ElementRef = new ElementRef(document.createElement('div'));
|
||||
return mockedElement;
|
||||
};
|
||||
const createInfiniteScroll = (mockedElement?: any) => {
|
||||
mockedElement = mockedElement || createMockElement();
|
||||
return new InfiniteScrollDirective(
|
||||
mockedElement,
|
||||
zoneSpy,
|
||||
positionFactoryMock,
|
||||
scrollRegisterSpy,
|
||||
scrollResolverSpy
|
||||
);
|
||||
};
|
||||
|
||||
beforeEach(() =>{
|
||||
zoneSpy = jasmine.createSpyObj('zone', ['run']);
|
||||
zoneSpy.runOutsideAngular = (fn) => fn();
|
||||
scrollResolverSpy = {
|
||||
getScrollStats: () => {
|
||||
return { shouldScroll: true, isScrollingDown };
|
||||
}
|
||||
};
|
||||
scrollRegisterSpy = jasmine.createSpyObj('register', ['attachEvent']);
|
||||
positionResolverSpy = jasmine.createSpyObj('pos', ['create', 'container']);
|
||||
directive = createInfiniteScroll();
|
||||
});
|
||||
|
||||
it('should create an instance of the directive', () => {
|
||||
const actual = directive;
|
||||
expect(actual).toBeDefined();
|
||||
});
|
||||
|
||||
it('should have default @Input properties values', () => {
|
||||
const expectedInputs: Object = {
|
||||
alwaysCallback: false,
|
||||
horizontal: false,
|
||||
infiniteScrollContainer: null,
|
||||
infiniteScrollDisabled: false,
|
||||
infiniteScrollDistance: 2,
|
||||
infiniteScrollThrottle: 300,
|
||||
infiniteScrollUpDistance: 1.5,
|
||||
scrollWindow: true
|
||||
};
|
||||
|
||||
Object.keys(expectedInputs).forEach((input) =>
|
||||
expect(directive[input]).toEqual(expectedInputs[input]));
|
||||
});
|
||||
|
||||
it('should trigger the onScrollDown event when scroll has passed _distancedDown', () => {
|
||||
const container = {
|
||||
height: 0,
|
||||
scrolledUntilNow: 0,
|
||||
totalToScroll: 0,
|
||||
};
|
||||
spyOn(directive, 'onScrollDown');
|
||||
directive.ngOnInit();
|
||||
directive.handleOnScroll(container);
|
||||
const actual = directive.onScrollDown;
|
||||
expect(actual).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should trigger the onScrollUp event when scroll has passed _distanceUp', () => {
|
||||
const container = {
|
||||
height: 0,
|
||||
scrolledUntilNow: 0,
|
||||
totalToScroll: 0,
|
||||
};
|
||||
spyOn(directive, 'onScrollUp');
|
||||
directive.ngOnInit();
|
||||
isScrollingDown = false;
|
||||
directive.handleOnScroll(container);
|
||||
const actual = directive.onScrollUp;
|
||||
expect(actual).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should disable the scroller', () => {
|
||||
const container = {
|
||||
height: 0,
|
||||
scrolledUntilNow: 0,
|
||||
totalToScroll: 0,
|
||||
};
|
||||
spyOn(directive, 'onScrollDown');
|
||||
directive.ngOnInit();
|
||||
directive.infiniteScrollDisabled = true;
|
||||
directive.handleOnScroll(container);
|
||||
const actual = directive.onScrollDown;
|
||||
expect(actual).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('resolving container', () => {
|
||||
let directive: InfiniteScrollDirective;
|
||||
let mockedElement: ElementRef;
|
||||
const container = {
|
||||
height: 0,
|
||||
scrolledUntilNow: 0,
|
||||
totalToScroll: 0,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedElement = createMockElement();
|
||||
directive = createInfiniteScroll(mockedElement);
|
||||
spyOn(positionFactoryMock, 'create').and.callThrough();
|
||||
});
|
||||
|
||||
describe('when container input is defined', () => {
|
||||
describe('when css selector is used', () => {
|
||||
beforeEach(() => {
|
||||
spyOn(document, 'querySelector').and.returnValue(container);
|
||||
directive.infiniteScrollContainer = '.test';
|
||||
directive.ngOnInit();
|
||||
});
|
||||
|
||||
it('should find element in DOM', () => {
|
||||
expect(document.querySelector).toHaveBeenCalledWith('.test');
|
||||
});
|
||||
|
||||
it('should return container', () => {
|
||||
expect(positionFactoryMock.create)
|
||||
.toHaveBeenCalledWith(jasmine.objectContaining({windowElement: container}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('when container is passed directly', () => {
|
||||
beforeEach(() => {
|
||||
directive.infiniteScrollContainer = container;
|
||||
directive.ngOnInit();
|
||||
});
|
||||
|
||||
it('should return container', () => {
|
||||
expect(positionFactoryMock.create)
|
||||
.toHaveBeenCalledWith(jasmine.objectContaining({windowElement: container}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when container input is not defined', () => {
|
||||
describe('when scrollWindow is true', () => {
|
||||
beforeEach(() => {
|
||||
directive.scrollWindow = true;
|
||||
directive.ngOnInit();
|
||||
});
|
||||
|
||||
it('should return window', () => {
|
||||
expect(positionFactoryMock.create)
|
||||
.toHaveBeenCalledWith(jasmine.objectContaining({windowElement: window}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('when scrollWindow is false', () => {
|
||||
beforeEach(() => {
|
||||
directive.scrollWindow = false;
|
||||
directive.ngOnInit();
|
||||
});
|
||||
|
||||
it('should return current element', () => {
|
||||
expect(positionFactoryMock.create)
|
||||
.toHaveBeenCalledWith(jasmine.objectContaining({windowElement: mockedElement}));
|
||||
});
|
||||
|
||||
it('should initialize again when infiniteScrollContainer has changed', () => {
|
||||
const anotherContainer = {
|
||||
height: 0,
|
||||
scrolledUntilNow: 0,
|
||||
totalToScroll: 0,
|
||||
};
|
||||
directive.infiniteScrollContainer = anotherContainer;
|
||||
const change = new SimpleChange(container, anotherContainer, false);
|
||||
directive.ngOnChanges({ infiniteScrollContainer: change });
|
||||
expect(positionFactoryMock.create)
|
||||
.toHaveBeenCalledWith(jasmine.objectContaining({windowElement: anotherContainer}));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
*/
|
||||
@ -0,0 +1,105 @@
|
||||
import {
|
||||
IScrollerProps,
|
||||
shouldTriggerEvents
|
||||
} from '../../src/services/event-trigger';
|
||||
|
||||
const props = {
|
||||
alwaysCallback: true,
|
||||
container: {},
|
||||
disabled: false,
|
||||
down: 3,
|
||||
up: 2
|
||||
} as IScrollerProps;
|
||||
|
||||
describe('EventTrigger', () => {
|
||||
[
|
||||
{
|
||||
it: 'should return TRUE when alwaysCallback, shouldFireScrollEvent',
|
||||
params: {
|
||||
alwaysCallback: true,
|
||||
shouldFireScrollEvent: true,
|
||||
isTriggeredTotal: false
|
||||
},
|
||||
expected: true
|
||||
},
|
||||
{
|
||||
it: 'should return FALSE when alwaysCallback, NOT shouldFireScrollEvent',
|
||||
params: {
|
||||
alwaysCallback: true,
|
||||
shouldFireScrollEvent: false,
|
||||
isTriggeredTotal: true
|
||||
},
|
||||
expected: false
|
||||
},
|
||||
{
|
||||
it: 'should return FALSE when alwaysCallback',
|
||||
params: {
|
||||
alwaysCallback: true,
|
||||
shouldFireScrollEvent: false,
|
||||
isTriggeredTotal: false
|
||||
},
|
||||
expected: false
|
||||
},
|
||||
{
|
||||
it:
|
||||
'should return TRUE when alwaysCallback, shouldFireScrollEvent, isTriggeredTotal',
|
||||
params: {
|
||||
alwaysCallback: true,
|
||||
shouldFireScrollEvent: true,
|
||||
isTriggeredTotal: true
|
||||
},
|
||||
expected: true
|
||||
},
|
||||
{
|
||||
it: 'should return TRUE when shouldFireScrollEvent ONLY',
|
||||
params: {
|
||||
alwaysCallback: false,
|
||||
shouldFireScrollEvent: true,
|
||||
isTriggeredTotal: false
|
||||
},
|
||||
expected: true
|
||||
},
|
||||
{
|
||||
it: 'should return FALSE when shouldFireScrollEvent, isTriggeredTotal',
|
||||
params: {
|
||||
alwaysCallback: false,
|
||||
shouldFireScrollEvent: true,
|
||||
isTriggeredTotal: true
|
||||
},
|
||||
expected: false
|
||||
},
|
||||
{
|
||||
it:
|
||||
'should return FALSE when not alwaysCallback, shouldFireScrollEvent is false',
|
||||
params: {
|
||||
alwaysCallback: false,
|
||||
shouldFireScrollEvent: false,
|
||||
isTriggeredTotal: false
|
||||
},
|
||||
expected: false
|
||||
},
|
||||
{
|
||||
it: 'should return FALSE when isTriggeredTotal ONLY',
|
||||
params: {
|
||||
alwaysCallback: false,
|
||||
shouldFireScrollEvent: false,
|
||||
isTriggeredTotal: true
|
||||
},
|
||||
expected: false
|
||||
}
|
||||
].forEach(spec => {
|
||||
it(spec.it, () => {
|
||||
const {
|
||||
isTriggeredTotal,
|
||||
alwaysCallback,
|
||||
shouldFireScrollEvent
|
||||
} = spec.params;
|
||||
const actual = shouldTriggerEvents(
|
||||
alwaysCallback,
|
||||
shouldFireScrollEvent,
|
||||
isTriggeredTotal
|
||||
);
|
||||
expect(actual).toBe(spec.expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,96 @@
|
||||
import { ElementRef } from "@angular/core";
|
||||
|
||||
import { ContainerRef } from "../../src/models";
|
||||
import { AxisResolver } from "../../src/services/axis-resolver";
|
||||
import {
|
||||
createResolver,
|
||||
createResolverWithContainer
|
||||
} from "../../src/services/position-resolver";
|
||||
|
||||
describe("Position Resolver", () => {
|
||||
let mockedElement: ElementRef;
|
||||
let mockedContainer: ElementRef;
|
||||
let axis: AxisResolver;
|
||||
let mockDom: ContainerRef;
|
||||
|
||||
const createMockDom = () => {
|
||||
const container = document.createElement("section");
|
||||
container.setAttribute("style", "height: 500px; overflow-y: scroll");
|
||||
const el = document.createElement("div");
|
||||
el.setAttribute("style", "height: 1000px;");
|
||||
container.appendChild(el);
|
||||
mockedElement = new ElementRef(el);
|
||||
mockedContainer = new ElementRef(container);
|
||||
return { element: mockedElement, container: mockedContainer };
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
axis = new AxisResolver(false);
|
||||
mockDom = createMockDom();
|
||||
});
|
||||
|
||||
describe("Resolver Maker", () => {
|
||||
it("should create an instance of position resolver", () => {
|
||||
const actual = createResolver({
|
||||
axis,
|
||||
windowElement: mockDom.element
|
||||
});
|
||||
expect(actual).toBeDefined();
|
||||
});
|
||||
|
||||
it("should return the native element if container is not window", () => {
|
||||
mockDom.element.nativeElement = { mocked: true };
|
||||
const resolver = createResolverWithContainer(
|
||||
{
|
||||
axis,
|
||||
isWindow: false
|
||||
},
|
||||
mockDom.element
|
||||
);
|
||||
const actual = resolver.container;
|
||||
const expected = mockDom.element.nativeElement;
|
||||
expect(actual).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
// describe('Points Calculation', () => {
|
||||
// it('should calculate points', () => {
|
||||
// const resolver: IResolver = {
|
||||
// isWindow: true,
|
||||
// axis,
|
||||
// container: {}
|
||||
// };
|
||||
// const points = calculatePoints(mockDom.element, resolver);
|
||||
// const actual = calculatePointsForWindow;
|
||||
// expect(actual).toHaveBeenCalledWith(mockDom.element, resolver);
|
||||
// });
|
||||
// });
|
||||
|
||||
// describe("creating instance for non-window element", () => {
|
||||
// let service: IResolver;
|
||||
|
||||
// describe("when nativeElement is present", () => {
|
||||
// beforeEach(() => {
|
||||
// service = positionResolver.create({
|
||||
// axis,
|
||||
// windowElement: mockDom.element
|
||||
// });
|
||||
// });
|
||||
|
||||
// it("should use container as nativeElement", () => {
|
||||
// expect(service.container instanceof HTMLDivElement).toBeTruthy();
|
||||
// });
|
||||
// });
|
||||
|
||||
// describe('when nativeElement is not present', () => {
|
||||
// beforeEach(() => {
|
||||
// const mockDom = createMockDom();
|
||||
// service = createPositionResolver(mockDom.element, mockDom.container.nativeElement);
|
||||
// });
|
||||
|
||||
// it('should use container as nativeElement', () => {
|
||||
// expect(service.container instanceof HTMLDivElement).toBeTruthy();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
});
|
||||
@ -0,0 +1,118 @@
|
||||
import * as Models from '../../src/models';
|
||||
import { Observable } from 'rxjs';
|
||||
import * as ScrollRegister from '../../src/services/scroll-register';
|
||||
import * as ScrollResolver from '../../src/services/scroll-resolver';
|
||||
import { ElementRef } from '@angular/core';
|
||||
|
||||
describe('Scroll Regsiter', () => {
|
||||
let mockedElement: ElementRef;
|
||||
let mockedContainer: ElementRef;
|
||||
|
||||
const createMockDom = () => {
|
||||
const container = document.createElement('section');
|
||||
container.setAttribute('style', 'height: 500px; overflow-y: scroll');
|
||||
const el = document.createElement('div');
|
||||
el.setAttribute('style', 'height: 1000px;');
|
||||
container.appendChild(el);
|
||||
mockedElement = new ElementRef(el);
|
||||
mockedContainer = new ElementRef(container);
|
||||
return { element: mockedElement, container: mockedContainer };
|
||||
};
|
||||
|
||||
it('should create a Observable of scroll observable', () => {
|
||||
const mockDom = createMockDom();
|
||||
const scrollConfig: Models.IScrollRegisterConfig = {
|
||||
container: mockDom.container.nativeElement,
|
||||
throttle: 300,
|
||||
};
|
||||
const scroller$: Observable<{}> = ScrollRegister.attachScrollEvent(scrollConfig);
|
||||
const actual = scroller$;
|
||||
expect(actual).toBeDefined();
|
||||
});
|
||||
|
||||
[
|
||||
{
|
||||
it: 'should create a Observable of scroll observable with default 300 throttle',
|
||||
config: {
|
||||
throttle: 300,
|
||||
},
|
||||
expected: 300
|
||||
},
|
||||
{
|
||||
it: 'should create a Observable of scroll observable without a sampleTime if throttle is 0',
|
||||
config: {
|
||||
throttle: 0
|
||||
},
|
||||
expected: 0
|
||||
}
|
||||
].forEach((spec) => {
|
||||
it(spec.it, (done) => {
|
||||
const mockDom = createMockDom();
|
||||
const scrollConfig: Models.IScrollRegisterConfig = {
|
||||
container: mockDom.container.nativeElement,
|
||||
...spec.config
|
||||
};
|
||||
const scroller$: Observable<{}> = ScrollRegister.attachScrollEvent(scrollConfig);
|
||||
const start = new Date();
|
||||
scroller$.subscribe((result) => {
|
||||
const end = new Date();
|
||||
const actual = end.getTime() - start.getTime();
|
||||
expect(actual).toBeGreaterThanOrEqual(spec.expected);
|
||||
done();
|
||||
});
|
||||
mockDom.container.nativeElement.dispatchEvent(new Event('scroll'));
|
||||
});
|
||||
});
|
||||
|
||||
it('should create a scroll params object', () => {
|
||||
const lastScrollPosition = 0;
|
||||
const positionStats = {} as Models.IPositionStats;
|
||||
const distance = {
|
||||
down: 2,
|
||||
up: 3,
|
||||
} as Models.IScrollerDistance;
|
||||
const scrollStats = {
|
||||
isScrollingDown: true,
|
||||
shouldFireScrollEvent: true
|
||||
};
|
||||
spyOn(ScrollResolver, 'getScrollStats').and.returnValue(scrollStats);
|
||||
const actual = ScrollRegister.toInfiniteScrollParams(lastScrollPosition, positionStats, distance);
|
||||
const expected = 3;
|
||||
expect(Object.keys(actual).length).toEqual(expected);
|
||||
});
|
||||
|
||||
describe('toInfiniteScrollAction', () => {
|
||||
let response;
|
||||
|
||||
beforeEach(() => {
|
||||
response = {
|
||||
stats: {
|
||||
scrolled: 100
|
||||
}
|
||||
} as Models.IScrollParams;
|
||||
});
|
||||
|
||||
[
|
||||
{
|
||||
it: 'should trigger down event when scrolling down',
|
||||
params: {
|
||||
scrollDown: true
|
||||
},
|
||||
expected: ScrollRegister.InfiniteScrollActions.DOWN
|
||||
},
|
||||
{
|
||||
it: 'should trigger up event when scrolling up',
|
||||
params: {
|
||||
scrollDown: false
|
||||
},
|
||||
expected: ScrollRegister.InfiniteScrollActions.UP
|
||||
}
|
||||
].forEach((spec) => {
|
||||
it(spec.it, () => {
|
||||
const params = { ...response, ...spec.params };
|
||||
const actual = ScrollRegister.toInfiniteScrollAction(params);
|
||||
expect(actual.type).toBe(spec.expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,192 @@
|
||||
import * as Models from '../../src/models';
|
||||
import * as ScrollResolver from '../../src/services/scroll-resolver';
|
||||
|
||||
describe('Manage Scroll State', () => {
|
||||
it('should backup old Total and update the new one', () => {
|
||||
const state = {
|
||||
totalToScroll: 10,
|
||||
lastTotalToScroll: 0
|
||||
} as any;
|
||||
const newTotal = 20;
|
||||
ScrollResolver.updateTotalToScroll(newTotal, state);
|
||||
const actual = state.totalToScroll;
|
||||
const expected = newTotal;
|
||||
expect(actual).toEqual(expected);
|
||||
});
|
||||
|
||||
it('should return false when total != lastTotal', () => {
|
||||
const state = {
|
||||
totalToScroll: 10,
|
||||
lastTotalToScroll: 0
|
||||
} as any;
|
||||
const actual = ScrollResolver.isSameTotalToScroll(state);
|
||||
expect(actual).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should return true total = lastTotal', () => {
|
||||
const state = {
|
||||
totalToScroll: 10,
|
||||
lastTotalToScroll: 10
|
||||
} as any;
|
||||
const actual = ScrollResolver.isSameTotalToScroll(state);
|
||||
expect(actual).toBeTruthy();
|
||||
});
|
||||
|
||||
[
|
||||
{
|
||||
it: 'should set the triggered to down',
|
||||
down: true,
|
||||
state: {
|
||||
triggered: { down: 0 }
|
||||
} as Models.IScrollState,
|
||||
prop: 'down'
|
||||
},
|
||||
{
|
||||
it: 'should set the triggered to up',
|
||||
down: false,
|
||||
state: {
|
||||
triggered: { up: 0 }
|
||||
} as Models.IScrollState,
|
||||
prop: 'up'
|
||||
}
|
||||
].forEach(spec => {
|
||||
it(spec.it, () => {
|
||||
const total = 1000;
|
||||
ScrollResolver.updateTriggeredFlag(total, spec.state, true, spec.down);
|
||||
const actual = spec.state.triggered[spec.prop];
|
||||
expect(actual).toBe(total);
|
||||
});
|
||||
});
|
||||
|
||||
describe('shouldFireScrollEvent() - DOWN', () => {
|
||||
const distance: Models.IScrollerDistance = {
|
||||
down: 2
|
||||
};
|
||||
const scrollingDown = true;
|
||||
it('should scroll when scrolled to the up', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 400,
|
||||
totalToScroll: 900
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = true;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should NOT scroll when NOT scroll pass distance point', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 100,
|
||||
totalToScroll: 800
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = false;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should NOT scroll when NOT scroll pass distance point', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 0,
|
||||
totalToScroll: 800
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = false;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should NOT scroll when there is no scrollbar', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 0,
|
||||
totalToScroll: 0
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = false;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('shouldFireScrollEvent() - UP', () => {
|
||||
const distance: Models.IScrollerDistance = {
|
||||
up: 2
|
||||
};
|
||||
const scrollingDown = false;
|
||||
it('should scroll when scrolled upwards', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 50,
|
||||
totalToScroll: 900
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = true;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should NOT scroll when scroll NOT pass up distance point', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 200,
|
||||
totalToScroll: 800
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = false;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should scroll when at top zero point', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 0,
|
||||
totalToScroll: 800
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = true;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
|
||||
it('should NOT scroll when there is no scrollbar', () => {
|
||||
const container: Models.IPositionStats = {
|
||||
height: 500,
|
||||
scrolled: 0,
|
||||
totalToScroll: 0
|
||||
};
|
||||
const actual = ScrollResolver.shouldFireScrollEvent(
|
||||
container,
|
||||
distance,
|
||||
scrollingDown
|
||||
);
|
||||
const expected = false;
|
||||
expect(actual).toBe(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
16
projects/ngx-infinite-scroll/tsconfig.lib.json
Normal file
16
projects/ngx-infinite-scroll/tsconfig.lib.json
Normal file
@ -0,0 +1,16 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": [],
|
||||
"noImplicitAny": false,
|
||||
},
|
||||
"exclude": [
|
||||
"src/test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
10
projects/ngx-infinite-scroll/tsconfig.lib.prod.json
Normal file
10
projects/ngx-infinite-scroll/tsconfig.lib.prod.json
Normal file
@ -0,0 +1,10 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"compilerOptions": {
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
17
projects/ngx-infinite-scroll/tsconfig.spec.json
Normal file
17
projects/ngx-infinite-scroll/tsconfig.spec.json
Normal file
@ -0,0 +1,17 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
38
tsconfig.json
Normal file
38
tsconfig.json
Normal file
@ -0,0 +1,38 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"paths": {
|
||||
"ngx-infinite-scroll": [
|
||||
"dist/ngx-infinite-scroll/ngx-infinite-scroll",
|
||||
"dist/ngx-infinite-scroll"
|
||||
]
|
||||
},
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2017",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user