ngx-virtual-scroller - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

CHANGELOG.md

@@ -0,1 +1,5 @@
+# v1.0.17
+
+* Bug fix: bufferAmount < 5 was forced to 5 if enableUnequalChildrenSizes==true.
+
 # v1.0.16
@@ -2,0 +6,0 @@

dist/virtual-scroller.js

@@ -102,3 +102,8 @@ "use strict";
         get: function () {
-            return Math.max(this._bufferAmount, this.enableUnequalChildrenSizes ? 5 : 0);
+            if (typeof (this._bufferAmount) === 'number' && this._bufferAmount >= 0) {
+                return this._bufferAmount;
+            }
+            else {
+                return this.enableUnequalChildrenSizes ? 5 : 0;
+            }
         },
@@ -931,71 +936,71 @@ set: function (value) {
     };
-    VirtualScrollerComponent.decorators = [
-        { type: core_1.Component, args: [{
-                    selector: 'virtual-scroller,[virtualScroller]',
-                    exportAs: 'virtualScroller',
-                    template: "\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ",
-                    host: {
-                        '[class.horizontal]': "horizontal",
-                        '[class.vertical]': "!horizontal",
-                        '[class.selfScroll]': "!parentScroll"
-                    },
-                    styles: ["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]
-                },] },
-    ];
-    /** @nocollapse */
-    VirtualScrollerComponent.ctorParameters = function () { return [
-        { type: core_1.ElementRef, },
-        { type: core_1.Renderer2, },
-        { type: core_1.NgZone, },
-        { type: core_1.ChangeDetectorRef, },
-        { type: Object, decorators: [{ type: core_1.Inject, args: [core_2.PLATFORM_ID,] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollThrottlingTime',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollDebounceTime',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollAnimationTime',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollbarWidth',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollbarHeight',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.checkResizeInterval',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.resizeBypassRefreshThreshold',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.modifyOverflowStyleOfParentScroll',] },] },
-        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.stripedTable',] },] },
-    ]; };
-    VirtualScrollerComponent.propDecorators = {
-        'executeRefreshOutsideAngularZone': [{ type: core_1.Input },],
-        'enableUnequalChildrenSizes': [{ type: core_1.Input },],
-        'useMarginInsteadOfTranslate': [{ type: core_1.Input },],
-        'modifyOverflowStyleOfParentScroll': [{ type: core_1.Input },],
-        'stripedTable': [{ type: core_1.Input },],
-        'scrollbarWidth': [{ type: core_1.Input },],
-        'scrollbarHeight': [{ type: core_1.Input },],
-        'childWidth': [{ type: core_1.Input },],
-        'childHeight': [{ type: core_1.Input },],
-        'ssrChildWidth': [{ type: core_1.Input },],
-        'ssrChildHeight': [{ type: core_1.Input },],
-        'ssrViewportWidth': [{ type: core_1.Input },],
-        'ssrViewportHeight': [{ type: core_1.Input },],
-        'bufferAmount': [{ type: core_1.Input },],
-        'scrollAnimationTime': [{ type: core_1.Input },],
-        'resizeBypassRefreshThreshold': [{ type: core_1.Input },],
-        'scrollThrottlingTime': [{ type: core_1.Input },],
-        'scrollDebounceTime': [{ type: core_1.Input },],
-        'checkResizeInterval': [{ type: core_1.Input },],
-        'items': [{ type: core_1.Input },],
-        'compareItems': [{ type: core_1.Input },],
-        'horizontal': [{ type: core_1.Input },],
-        'parentScroll': [{ type: core_1.Input },],
-        'update': [{ type: core_1.Output },],
-        'vsUpdate': [{ type: core_1.Output },],
-        'change': [{ type: core_1.Output },],
-        'vsChange': [{ type: core_1.Output },],
-        'start': [{ type: core_1.Output },],
-        'vsStart': [{ type: core_1.Output },],
-        'end': [{ type: core_1.Output },],
-        'vsEnd': [{ type: core_1.Output },],
-        'contentElementRef': [{ type: core_1.ViewChild, args: ['content', { read: core_1.ElementRef },] },],
-        'invisiblePaddingElementRef': [{ type: core_1.ViewChild, args: ['invisiblePadding', { read: core_1.ElementRef },] },],
-        'headerElementRef': [{ type: core_1.ContentChild, args: ['header', { read: core_1.ElementRef },] },],
-        'containerElementRef': [{ type: core_1.ContentChild, args: ['container', { read: core_1.ElementRef },] },],
-    };
     return VirtualScrollerComponent;
 }());
+VirtualScrollerComponent.decorators = [
+    { type: core_1.Component, args: [{
+                selector: 'virtual-scroller,[virtualScroller]',
+                exportAs: 'virtualScroller',
+                template: "\n    <div class=\"total-padding\" #invisiblePadding></div>\n    <div class=\"scrollable-content\" #content>\n      <ng-content></ng-content>\n    </div>\n  ",
+                host: {
+                    '[class.horizontal]': "horizontal",
+                    '[class.vertical]': "!horizontal",
+                    '[class.selfScroll]': "!parentScroll"
+                },
+                styles: ["\n    :host {\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n\t\n\t:host.horizontal.selfScroll {\n      overflow-y: visible;\n      overflow-x: auto;\n\t}\n\t:host.vertical.selfScroll {\n      overflow-y: auto;\n      overflow-x: visible;\n\t}\n\t\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      max-width: 100vw;\n      max-height: 100vh;\n      position: absolute;\n    }\n\n\t.scrollable-content ::ng-deep > * {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host.horizontal {\n\t\twhite-space: nowrap;\n\t}\n\t\n\t:host.horizontal .scrollable-content {\n\t\tdisplay: flex;\n\t}\n\t\n\t:host.horizontal .scrollable-content ::ng-deep > * {\n\t\tflex-shrink: 0;\n\t\tflex-grow: 0;\n\t\twhite-space: initial;\n\t}\n\t\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n    \n    :host.horizontal .total-padding {\n      height: 100%;\n    }\n  "]
+            },] },
+];
+/** @nocollapse */
+VirtualScrollerComponent.ctorParameters = function () { return [
+    { type: core_1.ElementRef, },
+    { type: core_1.Renderer2, },
+    { type: core_1.NgZone, },
+    { type: core_1.ChangeDetectorRef, },
+    { type: Object, decorators: [{ type: core_1.Inject, args: [core_2.PLATFORM_ID,] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollThrottlingTime',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollDebounceTime',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollAnimationTime',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollbarWidth',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.scrollbarHeight',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.checkResizeInterval',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.resizeBypassRefreshThreshold',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.modifyOverflowStyleOfParentScroll',] },] },
+    { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: ['virtualScroller.stripedTable',] },] },
+]; };
+VirtualScrollerComponent.propDecorators = {
+    'executeRefreshOutsideAngularZone': [{ type: core_1.Input },],
+    'enableUnequalChildrenSizes': [{ type: core_1.Input },],
+    'useMarginInsteadOfTranslate': [{ type: core_1.Input },],
+    'modifyOverflowStyleOfParentScroll': [{ type: core_1.Input },],
+    'stripedTable': [{ type: core_1.Input },],
+    'scrollbarWidth': [{ type: core_1.Input },],
+    'scrollbarHeight': [{ type: core_1.Input },],
+    'childWidth': [{ type: core_1.Input },],
+    'childHeight': [{ type: core_1.Input },],
+    'ssrChildWidth': [{ type: core_1.Input },],
+    'ssrChildHeight': [{ type: core_1.Input },],
+    'ssrViewportWidth': [{ type: core_1.Input },],
+    'ssrViewportHeight': [{ type: core_1.Input },],
+    'bufferAmount': [{ type: core_1.Input },],
+    'scrollAnimationTime': [{ type: core_1.Input },],
+    'resizeBypassRefreshThreshold': [{ type: core_1.Input },],
+    'scrollThrottlingTime': [{ type: core_1.Input },],
+    'scrollDebounceTime': [{ type: core_1.Input },],
+    'checkResizeInterval': [{ type: core_1.Input },],
+    'items': [{ type: core_1.Input },],
+    'compareItems': [{ type: core_1.Input },],
+    'horizontal': [{ type: core_1.Input },],
+    'parentScroll': [{ type: core_1.Input },],
+    'update': [{ type: core_1.Output },],
+    'vsUpdate': [{ type: core_1.Output },],
+    'change': [{ type: core_1.Output },],
+    'vsChange': [{ type: core_1.Output },],
+    'start': [{ type: core_1.Output },],
+    'vsStart': [{ type: core_1.Output },],
+    'end': [{ type: core_1.Output },],
+    'vsEnd': [{ type: core_1.Output },],
+    'contentElementRef': [{ type: core_1.ViewChild, args: ['content', { read: core_1.ElementRef },] },],
+    'invisiblePaddingElementRef': [{ type: core_1.ViewChild, args: ['invisiblePadding', { read: core_1.ElementRef },] },],
+    'headerElementRef': [{ type: core_1.ContentChild, args: ['header', { read: core_1.ElementRef },] },],
+    'containerElementRef': [{ type: core_1.ContentChild, args: ['container', { read: core_1.ElementRef },] },],
+};
 exports.VirtualScrollerComponent = VirtualScrollerComponent;
@@ -1005,14 +1010,14 @@ var VirtualScrollerModule = (function () {
     }
-    VirtualScrollerModule.decorators = [
-        { type: core_1.NgModule, args: [{
-                    exports: [VirtualScrollerComponent],
-                    declarations: [VirtualScrollerComponent],
-                    imports: [common_2.CommonModule]
-                },] },
-    ];
-    /** @nocollapse */
-    VirtualScrollerModule.ctorParameters = function () { return []; };
     return VirtualScrollerModule;
 }());
+VirtualScrollerModule.decorators = [
+    { type: core_1.NgModule, args: [{
+                exports: [VirtualScrollerComponent],
+                declarations: [VirtualScrollerComponent],
+                imports: [common_2.CommonModule]
+            },] },
+];
+/** @nocollapse */
+VirtualScrollerModule.ctorParameters = function () { return []; };
 exports.VirtualScrollerModule = VirtualScrollerModule;
 //# sourceMappingURL=virtual-scroller.js.map

package.json

 {
   "name": "ngx-virtual-scroller",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Angular 4+ module for virtual -infinite- list. Supports horizontal/vertical, variable heights, & multi-column",
@@ -67,3 +67,3 @@ "main": "dist/virtual-scroller.js",
     "tslint": "^5.5.0",
-    "typescript": "2.4.1",
+    "typescript": "2.3.4",
     "zone.js": "^0.8.13"
@@ -70,0 +70,0 @@ },

README.md

@@ -115,3 +115,2 @@
 virtual-scroller {
-  display: block;
   width: 350px;
@@ -346,2 +345,19 @@ height: 200px;
 
+## If child view state is reverted after scrolling away & back 
+virtual-scroller essentially uses *ngIf to remove items that are scrolled out of view. This is what gives the performance benefits compared to keeping all the off-screen items in the DOM.
+
+Because of the *ngIf, Angular completely forgets any view state. If your component has the ability to change state, it's your app's responsibility to retain that viewstate in your own object which data-binds to the component.
+
+For example, if your child component can expand/collapse via a button, most likely scrolling away & back will cause the expansion state to revert to the default state.
+
+To fix this, you'll need to store any "view" state properties in a variable & data-bind to it so that it can be restored when it gets removed/re-added from the DOM.
+
+Example:
+```
+<virtual-scroller #scroll [items]="items">
+    <my-custom-component [expanded]="item.expanded" *ngFor="let item of scroll.viewPortItems">
+    </my-custom-component>
+</virtual-scroller>
+```
+
 ## If container size changes
@@ -495,3 +511,3 @@
 
-## Angular OnPush Detection Strategy (General performance advice. not specific to ngx-virtual-scroller)
+## Angular OnPush Detection Strategy - General performance advice (not specific to ngx-virtual-scroller)
 The default ChangeDetectionStrategy implemented by Angular monitors your entire app for code that *might* change state. If something triggers change detection, Angular recursively checks every component in your app to see if any of them need to be re-rendered. It determines this by comparing the old/new value of each bound property to see if anything has changed. This is helpful to the programmer because it's easy & it works like magic. If you change something, it displays on the screen. However, it's extremely slow. The default ChangeDetectionStrategy is really intented for quick-start apps. Once an application gets complex enough, it'll almost be mandatory to convert it to the OnPush strategy otherwise performance will grind to a halt.
@@ -632,2 +648,8 @@
 
+## Known Issues
+The following are known issues that we don't know how to solve or don't have the resources to do so. Please don't submit a ticket for them. If you have an idea on how to fix them, please submit a pull request :)
+
+### Nested Scrollbars
+If there are 2 nested scrollbars on the page the mouse scrollwheel will only affect the scrollbar of the nearest parent to the current mouse position. This means if you scroll to the bottom of a virtual-scroller using the mousewheel & the window has an extra scrollbar, you cannot use the scrollwheel to scroll the page unless you move the mouse pointer out of the virtual-scroller element.
+
 ## Contributing
@@ -634,0 +656,0 @@ Contributions are very welcome! Just send a pull request. Feel free to contact me or checkout my [GitHub](https://github.com/rintoj) page.

No alert changes

Improved metrics

Total package byte prevSize

14461426

increased by9.15%

Number of package files

181

increased by2.26%

Lines of code

17094

increased by0.03%

Number of lines in readme file

696

increased by3.26%

No dependency changes