@ngui/infinite-list - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

app/app.component.ts

@@ -6,3 +6,3 @@ import {Component, Type} from '@angular/core'
   template: `
-<ul ngui-infinite-list  class="infinite-list"
+<ul ngui-infinite-list class="infinite-list" [disableScrollListener]="set1.loadingInProgress"
  (endVisible)="loadMore(set1)">
@@ -17,3 +17,3 @@ <li *ngFor="let item of set1.list">{{item+1}}</li>
 
-<div ngui-infinite-list horizontal="true" class="infinite-list horizontal"
+<div ngui-infinite-list horizontal="true" class="infinite-list horizontal" [disableScrollListener]="set2.loadingInProgress"
   (endVisible)="loadMore(set2)">
@@ -67,18 +67,16 @@ <div *ngFor="let item of set2.list">{{item+1}}</div>
   loadMore(data) {
-    if (!data.loadingInProgress) {
-      if (data.offset > 99) {    // detect the end of list
-        data.endOfList = true;
-      } else {
-        setTimeout(() => data.loadingInProgress = true);
-        setTimeout(() => {      // mimics http call delay
-          let max = data.offset + data.limit;
-          for (let i = data.offset; i < max; i++) {
-            data.list.push(i);
-          }
-          data.offset = max;
-          data.loadingInProgress = false;
-        }, 1000);
-      }
+    if (data.offset > 99) {    // detect the end of list
+      data.endOfList = true;
+    } else {
+      setTimeout(() => data.loadingInProgress = true);
+      setTimeout(() => {      // mimics http call delay
+        let max = data.offset + data.limit;
+        for (let i = data.offset; i < max; i++) {
+          data.list.push(i);
+        }
+        data.offset = max;
+        data.loadingInProgress = false;
+      }, 1000);
     }
   }
-}
+}

app/webpack.config.js

@@ -0,1 +1,2 @@
+var path = require('path');
 const webpack = require('webpack');
@@ -5,5 +6,5 @@
   resolve: {
-    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'],
+    extensions: ['.ts', '.webpack.js', '.web.js', '.js'],
     alias: {
-      '@ngui/infinite-list': '../src/index.ts'
+      '@ngui/infinite-list': path.join(__dirname, '..', 'src', 'index')
     }
@@ -14,11 +15,19 @@ },
   module: {
-    loaders: [
-      { test: /\.ts$/, loaders: ['ts', 'angular2-template-loader'] },
-      { test: /\.html$/, loader: 'raw' }
+    rules: [
+      { 
+        test: /\.ts$/, 
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              include: ['src/**/*.ts', 'app/**/*.ts']
+            },
+          },
+          'angular2-template-loader'
+        ],
+      },
+      { test: /\.html$/, use: ['raw-loader'] }
     ]
   },
   plugins: [],
-  ts: {
-    include: ['src/**/*.ts', 'app/**/*.ts']
-  },
   output: {
@@ -35,4 +44,4 @@ path: `${__dirname}/build/`,
   ];
-  config.module.loaders.push({
-    test: /\.ts$/, loader: 'strip-loader?strip[]=debug,strip[]=console.log'
+  config.module.rules.push({
+    test: /\.ts$/, use: 'strip-loader?strip[]=debug,strip[]=console.log'
   });
@@ -39,0 +48,0 @@ }

dist/index.js

 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
@@ -21,11 +13,12 @@ var forms_1 = require("@angular/forms");
 }());
-NguiInfiniteListModule = __decorate([
-    core_1.NgModule({
-        imports: [platform_browser_1.BrowserModule, forms_1.FormsModule],
-        declarations: [infinite_list_directive_1.NguiInfiniteListDirective],
-        exports: [infinite_list_directive_1.NguiInfiniteListDirective]
-    }),
-    __metadata("design:paramtypes", [])
-], NguiInfiniteListModule);
+NguiInfiniteListModule.decorators = [
+    { type: core_1.NgModule, args: [{
+                imports: [platform_browser_1.BrowserModule, forms_1.FormsModule],
+                declarations: [infinite_list_directive_1.NguiInfiniteListDirective],
+                exports: [infinite_list_directive_1.NguiInfiniteListDirective]
+            },] },
+];
+/** @nocollapse */
+NguiInfiniteListModule.ctorParameters = function () { return []; };
 exports.NguiInfiniteListModule = NguiInfiniteListModule;
 //# sourceMappingURL=index.js.map

dist/infinite-list.directive.d.ts

 import { ElementRef, EventEmitter } from '@angular/core';
 export declare class NguiInfiniteListDirective {
     horizontal: boolean;
+    enableWindowScroll: boolean;
+    disableScrollListener: boolean;
     endVisible: EventEmitter<{}>;
@@ -8,5 +10,21 @@ el: HTMLElement;
     elementVisible: any;
+    /**
+     * Creates an instance of NguiInfiniteListDirective.
+     * @param {ElementRef} el
+     *
+     * @memberOf NguiInfiniteListDirective
+     */
     constructor(el: ElementRef);
+    /**
+     * Setup list of sections
+     *
+     * @memberOf NguiInfiniteListDirective
+     */
     ngOnInit(): void;
+    /**
+     * Handles the scroll listener event.
+     *
+     * @memberOf NguiInfiniteListDirective
+     */
     scrollListener: () => void;
 }

dist/infinite-list.directive.js

 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
 var utils_1 = require("@ngui/utils");
 var NguiInfiniteListDirective = (function () {
+    /**
+     * Creates an instance of NguiInfiniteListDirective.
+     * @param {ElementRef} el
+     *
+     * @memberOf NguiInfiniteListDirective
+     */
     function NguiInfiniteListDirective(el) {
         var _this = this;
+        this.enableWindowScroll = false;
+        this.disableScrollListener = false;
         this.endVisible = new core_1.EventEmitter();
         this.elementVisible = utils_1.elementVisible;
+        /**
+         * Handles the scroll listener event.
+         *
+         * @memberOf NguiInfiniteListDirective
+         */
         this.scrollListener = function () {
-            var visible = _this.elementVisible(_this.endEl, _this.el);
-            if (_this.horizontal && (visible.left || visible.right)) {
-                _this.endVisible.emit(true);
+            if (!_this.disableScrollListener) {
+                var visible = void 0;
+                if (_this.enableWindowScroll) {
+                    visible = _this.elementVisible(_this.endEl, window);
+                }
+                else {
+                    visible = _this.elementVisible(_this.endEl, _this.el);
+                }
+                if (_this.horizontal && (visible.left || visible.right)) {
+                    _this.endVisible.emit(true);
+                }
+                else if (!_this.horizontal && (visible.top || visible.bottom)) {
+                    _this.endVisible.emit(true);
+                }
             }
-            else if (!_this.horizontal && (visible.top || visible.bottom)) {
-                _this.endVisible.emit(true);
-            }
         };
         this.el = el.nativeElement;
     }
-    // setup list of sections
+    /**
+     * Setup list of sections
+     *
+     * @memberOf NguiInfiniteListDirective
+     */
     NguiInfiniteListDirective.prototype.ngOnInit = function () {
@@ -36,3 +53,8 @@ this.endEl = this.el.querySelector('[ngui-infinite-list-end]');
         this.scrollListener();
-        this.el.addEventListener('scroll', this.scrollListener);
+        if (this.enableWindowScroll) {
+            window.addEventListener('scroll', this.scrollListener);
+        }
+        else {
+            this.el.addEventListener('scroll', this.scrollListener);
+        }
         window.addEventListener('resize', this.scrollListener);
@@ -42,15 +64,16 @@ };
 }());
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Boolean)
-], NguiInfiniteListDirective.prototype, "horizontal", void 0);
-__decorate([
-    core_1.Output(),
-    __metadata("design:type", Object)
-], NguiInfiniteListDirective.prototype, "endVisible", void 0);
-NguiInfiniteListDirective = __decorate([
-    core_1.Directive({ selector: '[ngui-infinite-list]' }),
-    __metadata("design:paramtypes", [core_1.ElementRef])
-], NguiInfiniteListDirective);
+NguiInfiniteListDirective.decorators = [
+    { type: core_1.Directive, args: [{ selector: '[ngui-infinite-list]' },] },
+];
+/** @nocollapse */
+NguiInfiniteListDirective.ctorParameters = function () { return [
+    { type: core_1.ElementRef, },
+]; };
+NguiInfiniteListDirective.propDecorators = {
+    'horizontal': [{ type: core_1.Input },],
+    'enableWindowScroll': [{ type: core_1.Input },],
+    'disableScrollListener': [{ type: core_1.Input },],
+    'endVisible': [{ type: core_1.Output },],
+};
 exports.NguiInfiniteListDirective = NguiInfiniteListDirective;
 //# sourceMappingURL=infinite-list.directive.js.map

package.json

 {
   "name": "@ngui/infinite-list",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Angular2 Infinite List Directive",
@@ -25,35 +25,35 @@ "main": "dist/infinite-list.umd.js",
     "build:umd": "NODE_ENV=prod webpack",
-    "build:app": "NODE_ENV=prod webpack --config app/webpack.config",
+    "build:app": "NODE_ENV=prod webpack --config app/webpack.config.js",
     "upgrade": "npm-check-updates --upgradeAll"
   },
   "dependencies": {
-    "@ngui/utils": "^0.7.0"
+    "@ngui/utils": "^0.8.1"
   },
   "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
-    "@types/node": "^7.0.12",
+    "@angular/common": "^4.0.3",
+    "@angular/compiler": "^4.0.3",
+    "@angular/compiler-cli": "^4.0.3",
+    "@angular/core": "^4.0.3",
+    "@angular/forms": "^4.0.3",
+    "@angular/http": "^4.0.3",
+    "@angular/platform-browser": "^4.0.3",
+    "@angular/platform-browser-dynamic": "^4.0.3",
+    "@angular/router": "^4.0.3",
+    "@types/node": "^7.0.13",
     "angular2-template-loader": "^0.6.2",
-    "codelyzer": "^3.0.0-beta.4",
+    "codelyzer": "^3.0.0",
     "core-js": "^2.4.1",
-    "npm-check-updates": "^2.10.4",
+    "npm-check-updates": "^2.11.0",
     "npm-run-all": "^4.0.2",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.1",
-    "rxjs": "^5.2.0",
+    "rxjs": "^5.3.0",
     "strip-loader": "^0.1.2",
     "ts-loader": "^2.0.3",
-    "tslint": "^4.5.1",
+    "tslint": "^5.1.0",
     "typescript": "^2.2.2",
-    "webpack": "^2.3.2",
-    "webpack-dev-server": "^2.4.2",
-    "zone.js": "^0.8.5"
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.4",
+    "zone.js": "^0.8.9"
   }
 }

README.md

 # infinite-list
 Angular2 Infinite List directive
 
+## IMPORTANT NOTICE
+
+After 0.6.0 or higher, `ng2-infinite-list` has been changed to `@ngui/infinite-list`. Here are the changes;
+
+* Module `ng2-infinite-list` is changed to `@ngui/infinite-list`.
+* Direvtive `ng2-infinite-list` is changed to `ngui-infinite-list`.
+* Class name `Ng2InfiniteListModule` is changed to `NguiInfiniteListModule`.
+
 <a href="https://rawgit.com/ng2-ui/infinite-list/master/app/index.html">
@@ -17,5 +25,7 @@ <img src="http://i.imgur.com/5SDqQ6t.png"width="50% border="1" />
 2. add `map` and `packages` to your `systemjs.config.js`
+
         map['@ngui/infinite-list'] = 'node_modules/@ngui/infinite-list/dist/infinite-list.umd.js';
 
 3. import NguiInfiniteList to your AppModule
+
         import { NgModule } from '@angular/core';
@@ -28,3 +38,3 @@ import { FormsModule } from "@angular/forms";
         @NgModule({
-          imports: [BrowserModule, FormsModule, NguiInfilistListModule],
+          imports: [BrowserModule, FormsModule, NguiInfiniteListModule],
           declarations: [AppComponent],
@@ -35,5 +45,14 @@ bootstrap: [ AppComponent ]
 
-## Use it in your template
- 
-     <input auto-complete [(ngModel)]="myData" [source]="mySource" />
+## Use it in your code
+
+```
+    <ul ngui-infinite-list  class="infinite-list" [disableScrollListener]="set1.loadingInProgress"
+     (endVisible)="loadMore(set1)">
+      <li *ngFor="let item of set1.list">{{item+1}}</li>
+      <div ngui-infinite-list-end>
+        <div *ngIf="set1.loadingInProgress">Loading</div>
+        <div *ngIf="set1.endOfList">End Of List</div>
+      </div>
+    </ul>
+```
          
@@ -66,14 +85,2 @@ For full example, please check out `test` directory to see the example of;
 
-
-## Use it in your code
-
-    <ul ngui-infinite-list  class="infinite-list"
-     (endVisible)="loadMore(set1)">
-      <li *ngFor="let item of set1.list">{{item+1}}</li>
-      <div ngui-infinite-list-end>
-        <div *ngIf="set1.loadingInProgress">Loading</div>
-        <div *ngIf="set1.endOfList">End Of List</div>
-      </div>
-    </ul>`
-
 ## For Developers
@@ -87,2 +94,1 @@
     $ npm start
-

webpack.config.js

 var path = require("path");
 var webpack = require('webpack');
 
-module.exports = {
+var config = {
   entry: {
@@ -9,6 +9,6 @@ '@ngui/infinite-list': path.join(__dirname, 'src', 'index.ts')
   resolve: {
-    extensions: ['', '.ts', '.js', '.json', '.css', '.html']
+    extensions: ['.ts', '.js', '.json', '.css', '.html']
   },
   resolveLoader: {
-    root: path.join(__dirname, 'node_modules')
+    modules: [path.join(__dirname, 'node_modules')]
   },
@@ -27,6 +27,6 @@ output: {
   module: {
-    loaders: [
-      { // Support for .ts files.
-        test: /\.ts$/,
-        loaders: ['ts', 'angular2-template-loader']
+    rules: [
+      {
+        test: /\.ts$/, 
+        use: [ 'ts-loader', 'angular2-template-loader' ]
       }
@@ -36,1 +36,11 @@ ]
 };
+
+//Different Environment Setup
+
+if (process.env.NODE_ENV === 'prod') {
+  config.module.rules.push({
+    test: /\.ts$/, use: 'strip-loader?strip[]=debug,strip[]=console.log'
+  });
+}
+
+module.exports = config;

No alert changes

Improved metrics

Total package byte prevSize

7901345

increased by0.74%

Number of package files

25

increased by8.7%

Lines of code

8067

increased by5.99%

Number of lines in readme file

90

increased by7.14%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@ngui/utils@0.8.1(transitive)

• - Removed@ngui/utils@0.7.0(transitive)

• Updated@ngui/utils@^0.8.1