{"_id":"@apicel/ngx-infinite-scroll","_rev":"1-81c88d07a6c65bd23f3eaf7027605282","name":"@apicel/ngx-infinite-scroll","description":"Forking this from @zladuric because he forgot to make it publically accessible. Use ngx-infinite-scroll instead!!","dist-tags":{"latest":"0.6.6"},"versions":{"0.6.6":{"name":"@apicel/ngx-infinite-scroll","version":"0.6.6","description":"Forking this from @zladuric because he forgot to make it publically accessible. Use ngx-infinite-scroll instead!!","main":"./bundles/ngx-infinite-scroll.umd.js","module":"./modules/ngx-infinite-scroll.es5.js","es2015":"./modules/ngx-infinite-scroll.js","scripts":{"build":"node build.js","test":"karma start","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist","publish:beta":"npm publish --tag beta ./dist","compodoc":"compodoc -p tsconfig.json","compodoc-serve":"compodoc -s","transpile":"ngc -p ./tsconfig.json"},"typings":"./index.d.ts","author":{"name":"Zlatko Duric","email":"zladuric@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/apicel/ngx-infinite-scroll.git"},"bugs":{"url":"https://github.com/apicel/ngx-infinite-scroll/issues"},"homepage":"https://github.com/apicel/ngx-infinite-scroll","keywords":["angular","javascript","typescript"],"license":"MIT","peerDependencies":{"@angular/common":">= 4.0.0","@angular/core":">= 4.0.0"},"devDependencies":{"@angular/common":"^4.0.0","@angular/compiler":"^4.0.0","@angular/compiler-cli":"^4.0.0","@angular/core":"^4.0.0","@angular/platform-browser":"^4.0.0","@angular/platform-browser-dynamic":"^4.0.0","@angular/platform-server":"^4.0.0","@angular/animations":"^4.0.0","@types/jasmine":"2.5.46","@types/node":"7.0.10","codelyzer":"3.0.0-beta.4","compodoc":"0.0.41","core-js":"2.4.1","jasmine-core":"2.5.2","karma":"1.5.0","karma-chrome-launcher":"2.0.0","karma-jasmine":"1.1.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.30","karma-webpack":"2.0.3","reflect-metadata":"0.1.10","rollup":"0.41.6","rxjs":"5.2.0","ts-helpers":"1.1.2","ts-loader":"2.0.3","tslint":"4.5.1","typescript":"^2.1.5","webpack":"2.3.1","zone.js":"0.8.5","shelljs":"0.7.7","chalk":"1.1.3","uglify-js":"2.8.15","sorcery":"0.10.0","yargs":"7.0.2"},"_id":"@apicel/ngx-infinite-scroll@0.6.6","_npmVersion":"5.3.0","_nodeVersion":"6.1.0","_npmUser":{"name":"apicel","email":"alexander@snakt.com"},"dist":{"integrity":"sha512-UdmDoprhToVFzGsJOKE5TD1/bRH1ZA0+3r0t2cQZQYuY5fAMxTrf+dAqfeGiP/YIWwjB8EGP86gX01M6P70Fig==","shasum":"208b260a7a3bd2b7c35abc36de345556db04bbe6","tarball":"https://registry.npmjs.org/@apicel/ngx-infinite-scroll/-/ngx-infinite-scroll-0.6.6.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQu+FvJgXZp3OlBOjr7X52qDufUT/mdz5G1aayv57aeAiBwvJxKWcRofj9fR4avG15Bx3IjAKPseFkKhiOYGCglqQ=="}]},"maintainers":[{"name":"apicel","email":"alexander@snakt.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-infinite-scroll-0.6.6.tgz_1503157123022_0.066232621204108"}}},"readme":"** Note: ** This package is a personal fork of `ngx-infinite-scroll` until the original project accepts my PR. Better use that package instead because I don't plan to support this (for now).\n\nWhat I've added is a `scrolledUpBy` functionality to detect if the page was scrolled up by x screens yet.\n\n# Angular Infinite Scroll\nInspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular (> 2, 4).\n\n## Angular Support\nSupports Angular **> 4**\n\n\n## Installation\n```\nnpm install ngx-infinite-scroll-extended --save\n```\n\n## Supported API\nCurrently supported attributes:\n* **infiniteScrollDistance**<_number_> - (optional, default: **2**) - should get a number, the number of viewport lengths from the bottom of the page at which the event will be triggered.\n* **infiniteScrollUpDistance**<_number_> - (optional, default: **1.5**) - should get a number\n* **infiniteScrollThrottle**<_number_> - (optional, default: **300**) - should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user *stops* scrolling.\n* **infiniteScrollContainer**<_string|HTMLElement_> - (optional, default: 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.\n* **scrolled**<_function_> - this will callback if the distance threshold has been reached on a scroll down.\n* **scrolledUp**<_function_> - (event: InfiniteScrollEvent) - this will callback if the distance threshold has been reached on a scroll up.\n* **scrollWindow**<_boolean_> - (optional, default: **true**) - listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.\n* **scrollUpBy**<_boolean_> - (optional, default: **false**) - triggers **scrolledUp** when we have scrolled up _by_ **infiniteScrollUpDistance**, not **infiniteScrollUpDistance**-to-top.\n* **immediateCheck**<_boolean_> - (optional, default: **false**) - invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled).\n* **infiniteScrollDisabled**<_boolean_> - (optional, default: **false**) - doesn't invoke the handler if set to true\n\n## Behavior\nBy default, the directive listens to the **window scroll** event and invoked the callback.\n**To trigger the callback when the actual element is scrolled**, these settings should be configured:\n* [scrollWindow]=\"false\"\n* set an explict css \"height\" value to the element\n\n## DEMO\n- [**Default Scroll** By Window - plunkr](https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview)\n- [Scroll On a **\"Modal\"** - plunkr](https://plnkr.co/edit/QnQOwE9SEapwJCCFII3L?p=preview)\n\n## Usage\nFirst, import the InfiniteScrollModule to your module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { InfiniteScrollModule } from 'ngx-infinite-scroll';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { AppComponent } from './app';\n\n@NgModule({\n  imports:[ BrowserModule, InfiniteScrollModule ],\n  declarations: [ AppComponent, ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n```\n\nIn this example, the **onScroll** callback will be invoked when the window is scrolled down:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n\tselector: 'app',\n\ttemplate: `\n\t\t<div class=\"search-results\"\n\t\t    infiniteScroll\n\t\t    [infiniteScrollDistance]=\"2\"\n\t\t    [infiniteScrollThrottle]=\"300\"\n\t\t    (scrolled)=\"onScroll()\">\n\t\t</div>\n\t`\n})\nexport class AppComponent {\n\tonScroll () {\n\t    console.log('scrolled!!')\n\t}\n}\n```\nin this example, whenever the \"search-results\" is scrolled, the callback will be invoked:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n\tselector: 'app',\n\tstyles: [\n\t\t`.search-results {\n\t\t\theight: 20rem;\n\t\t\toverflow: scroll;\n\t\t}`\n\t],\n\ttemplate: `\n\t\t<div class=\"search-results\"\n\t\t    infiniteScroll\n\t\t    [infiniteScrollDistance]=\"2\"\n\t\t    [infiniteScrollThrottle]=\"500\"\n\t\t    (scrolled)=\"onScroll()\"\n\t\t    [scrollWindow]=\"false\">\n\t\t</div>\n\t`\n})\nexport class AppComponent {\n\tonScroll () {\n\t    console.log('scrolled!!')\n\t}\n}\n```\n\nIn 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:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { InfiniteScroll } from 'ngx-infinite-scroll';\n\n@Component({\n\tselector: 'app',\n\tdirectives: [ InfiniteScroll ],\n\ttemplate: `\n\t\t<div class=\"search-results\"\n\t\t    infiniteScroll\n\t\t    [infiniteScrollDistance]=\"2\"\n\t\t    [infiniteScrollUpDistance]=\"1.5\"\n\t\t    [infiniteScrollThrottle]=\"500\"\n\t\t    (scrolled)=\"onScrollDown()\"\n\t\t    (scrolledUp)=\"onScrollUp()\">\n\t\t</div>\n\t`\n})\nexport class AppComponent {\n\tonScrollDown () {\n\t    console.log('scrolled down!!')\n\t}\n\n\tonScrollUp () {\n    \tconsole.log('scrolled up!!')\n    }\n}\n```\n\n# Showcase Examples\n* [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))\n","maintainers":[{"name":"apicel","email":"alexander@snakt.com"}],"time":{"modified":"2022-04-04T14:35:00.023Z","created":"2017-08-19T15:38:44.143Z","0.6.6":"2017-08-19T15:38:44.143Z"},"homepage":"https://github.com/apicel/ngx-infinite-scroll","keywords":["angular","javascript","typescript"],"repository":{"type":"git","url":"git+https://github.com/apicel/ngx-infinite-scroll.git"},"author":{"name":"Zlatko Duric","email":"zladuric@gmail.com"},"bugs":{"url":"https://github.com/apicel/ngx-infinite-scroll/issues"},"license":"MIT","readmeFilename":"README.md"}