Freeze scrolling (#1)

### Added
- Freezing of scrolling
- Github Action to testbuild the application + demo
- Fix build pipeline

.github/workflows/nodejs.yml

@@ -0,0 +1,31 @@
+name: tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  nodejs:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    name: NodeJS Build
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm run install-dependencies
+    - run: npm install
+    - run: npm run build:all
+

README.md

@@ -1,24 +1,13 @@
-# Sponsors
-
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://moviepix.app/?utm_source=sponsor&utm_campaign=ngx-virtual-scroller" target="_blank">
-          <img src="https://moviepix.app/images/Logo_Small.png">
-          <img src="https://moviepix.app/images/Title_Small.png">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-# ngx-virtual-scroller
+# ambersive-virtual-scroller
 
 Virtual Scroll displays a virtual, "infinite" list. Supports horizontal/vertical, variable heights, & multi-column.
+This package is based on [ngx-virtual-scroller](https://github.com/rintoj/ngx-virtual-scroller) but will be further supported by AMBERSIVE KG.
 
-## Renamed from `angular2-virtual-scroll` to `ngx-virtual-scroller`. Please update your _package.json_
+## Install
 
+```bash
+npm install ambersive-virtual-scroller
+```
 ## About
 
 This module displays a small subset of records just enough to fill the viewport and uses the same DOM elements as the user scrolls.
@@ -27,35 +16,6 @@ This method is effective because the number of DOM elements are always constant
 - Supports multi-column
 - Easy to use APIs
 - Open source and available in GitHub
-
-## Breaking Changes:
-
-- `v3.0.0` Several deprecated properties removed (see changelog).
-    - If items array is prepended with additional items, keep scroll on currently visible items, if possible. There is no flag to disable this, because it seems to be the best user-experience in all cases. If you disagree, please create an issue.
-- `v2.1.0` Dependency Injection syntax was changed.
-- `v1.0.6` viewPortIndices API property removed. (use viewPortInfo instead)
-- `v1.0.3` Renamed everything from _virtual-scroll_ to _virtual-scroller_ and from _virtualScroll_ to _virtualScroller_
-- `v0.4.13` _resizeBypassRefreshTheshold_ renamed to _resizeBypassRefreshThreshold_ (typo)
-- `v0.4.12` The start and end values of the change/start/end events were including bufferAmount, which made them confusing. This has been corrected.
-    - viewPortIndices.arrayStartIndex renamed to viewPortIndices.startIndex and viewPortIndices.arrayEndIndex renamed to viewPortIndices.endIndex
-- `v0.4.4` The value of IPageInfo.endIndex wasn't intuitive. This has been corrected. Both IPageInfo.startIndex and IPageInfo.endIndex are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.EndIndex was the array index + 1)
-
-*Note* - API methods marked *(DEPRECATED)* will be removed in the next major version. Please attempt to stop using them in your code & create an issue if you believe they're still necessary.
-
-## New features:
-
- - RTL Support on Horizontal scrollers
- - Support for fixed `<thead>` on `<table>` elements.
- - Added API to query for current scroll px position (also passed as argument to `IPageInfo` listeners)
- - Added API to invalidate cached child item measurements (if your child item sizes change dynamically)
- - Added API to scroll to specific px position
- - If scroll container resizes, the items will auto-refresh. Can be disabled if it causes any performance issues by setting `[checkResizeInterval]="0"`
- - `useMarginInsteadOfTranslate` flag. Defaults to _false_. This can affect performance (better/worse depending on your circumstances), and also creates a workaround for the transform+position:fixed browser bug.
- - Support for horizontal scrollbars
- - Support for elements with different sizes
- - Added ability to put other elements inside of scroll (Need to wrap list itself in @ContentChild('container'))
- - Added ability to use any parent with scrollbar instead of this element (@Input() parentScroll)
-
 ## Demo
 
 [See Demo Here](http://rintoj.github.io/ngx-virtual-scroller)
@@ -100,7 +60,7 @@ npm install ngx-virtual-scroller
 
 ```ts
 ....
-import { VirtualScrollerModule } from 'ngx-virtual-scroller';
+import { VirtualScrollerModule } from 'ambersive-virtual-scroller';
 
 ....
 
@@ -198,15 +158,14 @@ In _alphabetical_ order:
 | ssrViewportHeight                  | `number` 1080     | The hard-coded visible height of the _virtual-scroller_ (or [parentScroll]) to use if rendering via _Angular Universal/Server-Side-Rendering_.
 | ssrViewportWidth                   | `number` 1920     | The hard-coded visible width of the _virtual-scroller_ (or [parentScroll]) to use if rendering via _Angular Universal/Server-Side-Rendering_.
 | stripedTable                       | `boolean` false   | Set to true if you use a striped table. In this case, the rows will be added/removed two by two to keep the strips consistent.
+| freeze                       | `boolean` false   | Disable scrolling
 | useMarginInsteadOfTranslate        | `boolean` false   | Translate is faster in many scenarios because it can use GPU acceleration, but it can be slower if your scroll container or child elements don't use any transitions or opacity. More importantly, translate creates a new "containing block" which breaks position:fixed because it'll be relative to the transform rather than the window. If you're experiencing issues with position:fixed on your child elements, turn this flag on.
 | viewPortInfo                       | `IPageInfo`       | Allows querying the the current viewport info on demand rather than listening for events.
 | viewPortItems                      | any[]             | The array of items currently being rendered to the viewport.
 | vsChange                           | `Event<IPageInfo>`| This event is fired every time the `start` or `end` indexes or scroll position change and emits `IPageInfo`.
 | vsEnd                              | `Event<IPageInfo>`| This event is fired every time `end` index changes and emits `IPageInfo`.
 | vsStart                            | `Event<IPageInfo>`| This event is fired every time `start` index changes and emits `IPageInfo`.
 | vsUpdate                           | `Event<any[]>`    | This event is fired every time the `start` or `end` indexes change and emits the list of items which should be visible based on the current scroll position from `start` to `end`. The list emitted by this event must be used with `*ngFor` to render the actual list of items within `<virtual-scroller>`
-| childHeight *(DEPRECATED)*         | `number`          | The minimum height of the item template's cell. Use this if `enableUnequalChildrenSizes` isn't working well enough. (The actual rendered size of the first cell is used by default if not specified.)
-| childWidth *(DEPRECATED)*          | `number`          | The minimum width of the item template's cell. Use this if `enableUnequalChildrenSizes` isn't working well enough. (The actual rendered size of the first cell is used by default if not specified.)
 
 *Note* - The Events without the "vs" prefix have been deprecated because they might conflict with native DOM events due to their "bubbling" nature. See https://github.com/angular/angular/issues/13997
 
@@ -278,7 +237,7 @@ Items _must_ have fixed height and width for this module to work perfectly. If n
 The event `vsEnd` is fired every time the scrollbar reaches the end of the list. You could use this to dynamically load more items at the end of the scroll. See below.
 
 ```ts
-import { IPageInfo } from 'ngx-virtual-scroller';
+import { IPageInfo } from 'ambersive-virtual-scroller';
 ...
 
 @Component({
@@ -383,7 +342,7 @@ If virtual scroll is used within a dropdown or collapsible menu, virtual scroll
 
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
+import { VirtualScrollerComponent } from 'ambersive-virtual-scroller';
 
 @Component({
     selector: 'rj-list',
@@ -415,7 +374,7 @@ You can use the `scrollInto()` or `scrollToIndex()` API to scroll into an item i
 
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
+import { VirtualScrollerComponent } from 'ambersive-virtual-scroller';
 
 @Component({
     selector: 'rj-list',

demo/package.json

@@ -27,7 +27,7 @@
     "core-js": "2.6.2",
     "loadash": "1.0.0",
     "menuspy": "^1.1.2",
-    "ngx-virtual-scroller": "latest",
+    "ambersive-virtual-scroller": "latest",
     "npm-check": "5.9.0",
     "rxjs": "6.5.4",
     "tslib": "1.11.0",

demo/src/app/app.component.html

@@ -2,7 +2,7 @@
   <div class="sidebar pure-u-1 pure-u-md-1-4">
     <div class="header">
       <h1 class="brand-title">Virtual Scroll</h1>
-      <h2 class="brand-tagline">an "infinite" list for angular 2</h2>
+      <h2 class="brand-tagline">an "infinite" list for angular >6</h2>
       <nav class="nav">
         <ul class="nav-list">
           <li class="nav-item">
@@ -20,12 +20,10 @@ <h2 class="brand-tagline">an "infinite" list for angular 2</h2>
         </ul>
       </nav>
       <div class="author">
-        <div>Rinto Jose <span>(rintoj)</span></div>
+        <div>AMBERSIVE KG<span>(@ambersive)</span></div>
         <div>
-          <a href="https://github.com/rintoj">GitHub</a> |
-          <a href="https://www.facebook.com/rinto.jose">Facebook</a> |
-          <a href="https://twitter.com/rintoj">Twitter</a> |
-          <a href="https://youtube.com/+RintoJoseMankudy">YouTube</a>
+          <a href="https://github.com/ambersive">GitHub</a>
+          <a href="https://twitter.com/ambersive">Twitter</a> 
         </div>
       </div>
     </div>
@@ -36,12 +34,9 @@ <h2 class="brand-tagline">an "infinite" list for angular 2</h2>
     </div>
     <div class="footer">
       <div class="pure-menu pure-menu-horizontal">
-        <strong>Rinto Jose (rintoj)</strong>
+        <strong>AMBERSIVE KG<span>(@ambersive)</span></strong>
         <ul>
-          <li class="pure-menu-item"><a class="pure-menu-link" href="https://github.com/rintoj">Github</a></li>
-          <li class="pure-menu-item"><a class="pure-menu-link" href="https://www.facebook.com/rinto.jose">Facebook</a></li>
-          <li class="pure-menu-item"><a class="pure-menu-link" href="https://twitter.com/rintoj">Twitter</a></li>
-          <li class="pure-menu-item"><a class="pure-menu-link" href="https://youtube.com/+RintoJoseMankudy">YouTube</a></li>
+          <li class="pure-menu-item"><a class="pure-menu-link" href="https://github.com/ambersive">Github</a></li>
         </ul>
       </div>
     </div>

demo/src/app/app.module.ts

@@ -18,7 +18,7 @@ import { MultiColListComponent } from './lists/multi-col-list.component';
 import { TableListComponent } from './lists/table-list.component';
 import { VerticalListComponent } from './lists/vertical-list.component';
 
-import { VirtualScrollerModule, VirtualScrollerDefaultOptions } from 'ngx-virtual-scroller';
+import { VirtualScrollerModule, VirtualScrollerDefaultOptions } from 'ambersive-virtual-scroller';
 
 const customDefaultOptions = {
 	scrollThrottlingTime: 0,

demo/src/app/lists/horizontal-list.component.ts

@@ -9,6 +9,9 @@ import { BaseList } from './base-list';
       ::ng-deep list-item.inline {
         width: 400px;
       }
+      .horizontal-hidden {
+        overflow-x:hidden!important;
+      }
     </style>
 
     <button (click)="sortByName()">Sort By Name</button>
@@ -21,6 +24,7 @@ import { BaseList } from './base-list';
     <button (click)="scroll.scrollToIndex(50)">Scroll to index 50</button>
     <button (click)="scroll.scrollToPosition(1500)">Scroll to position 1500</button>
     <button (click)="randomSize = !randomSize">Toggle Random Width</button>
+    <button (click)="frozen = !frozen">Toogle scroll freeze (Frozen: {{frozen ? 'yes' :'no'}})</button>
     <button *ngIf="randomSize" (click)="ListItemComponent.ResetSeed();">Re-Randomize Item Sizes</button>
     <button *ngIf="randomSize" (click)="scroll.invalidateAllCachedMeasurements();">Invalidate cached measurements</button>
 
@@ -30,18 +34,29 @@ import { BaseList } from './base-list';
         of <span>{{filteredList?.length}}</span>
       <span>({{scroll.viewPortItems?.length}} nodes)</span>
       <span>[scrollStartPosition: {{scroll.viewPortInfo.scrollStartPosition}}px, scrollEndPosition: {{scroll.viewPortInfo.scrollEndPosition}}px, maxScrollPosition: {{scroll.viewPortInfo.maxScrollPosition}}px ]</span>
-    </div>
+    </div> 
 
     <virtual-scroller #scroll
       [enableUnequalChildrenSizes]="randomSize"
       [horizontal]="true"
-      [items]="filteredList" [RTL] = "rtl">
-      
+      [items]="filteredList" [RTL] = "rtl" [freeze]="frozen">      
+      <list-item [randomWidth]="randomSize" *ngFor="let item of scroll.viewPortItems" class="inline" [item]="item"> </list-item>
+    </virtual-scroller>
+
+    <h2>Blocked scrolling</h2>
+
+    <virtual-scroller #scroll2
+      [enableUnequalChildrenSizes]="randomSize"
+      [horizontal]="true"
+      [freeze]="true"
+      [items]="filteredList">      
       <list-item [randomWidth]="randomSize" *ngFor="let item of scroll.viewPortItems" class="inline" [item]="item"> </list-item>
     </virtual-scroller>
   `,
   styleUrls: ['./horizontal-list.scss']
 })
 export class HorizontalListComponent extends BaseList {
+
+  public frozen:boolean = false;
   @Input() rtl:boolean;
 }

demo/src/app/lists/list-with-api.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ListItem } from './list-item.component';
 import { BaseList } from './base-list';
-import { IPageInfo } from 'ngx-virtual-scroller';
+import { IPageInfo } from 'ambersive-virtual-scroller';
 
 @Component({
   selector: 'list-with-api',

docs/3rdpartylicenses.txt

@@ -68,6 +68,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
+ambersive-virtual-scroller
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2016 Rinto Jose (rintoj)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
 chance
 MIT
 The MIT License (MIT)
@@ -142,31 +167,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
-ngx-virtual-scroller
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2016 Rinto Jose (rintoj)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-
 regenerator-runtime
 MIT
 MIT License

docs/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-  <base href="/ngx-virtual-scroller/">
+  <base href="/ambersive-virtual-scroller/">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="A infinite virtual scroll for angular 2">
@@ -29,6 +29,6 @@
 
 <body>
   <app-root>Loading...</app-root>
-<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.67d73ec2ad07ed243425.js" nomodule defer></script><script src="polyfills-es2015.c9c354f3dc6732d748db.js" type="module"></script><script src="main-es2015.e261a70bd659f0b38273.js" type="module"></script><script src="main-es5.e261a70bd659f0b38273.js" nomodule defer></script></body>
+<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.67d73ec2ad07ed243425.js" nomodule defer></script><script src="polyfills-es2015.c9c354f3dc6732d748db.js" type="module"></script><script src="main-es2015.482fb03e6d34ad2070ae.js" type="module"></script><script src="main-es5.482fb03e6d34ad2070ae.js" nomodule defer></script></body>
 
 </html>