angular2-virtual-scroll - npm Package Compare versions

Comparing version 0.1.8 to 0.2.0

CHANGELOG.md

 
+# v0.2.0
+
+* 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)
+
 # v0.1.8
@@ -3,0 +8,0 @@

dist/virtual-scroll.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, OnChanges, OnInit, Renderer, SimpleChanges } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 export interface ChangeEvent {
@@ -6,5 +6,4 @@ start?: number;
 }
-export declare class VirtualScrollComponent implements OnInit, OnChanges {
+export declare class VirtualScrollComponent implements OnInit, OnChanges, OnDestroy {
     private element;
-    private renderer;
     items: any[];
@@ -16,2 +15,5 @@ scrollbarWidth: number;
     bufferAmount: number;
+    private refreshHandler;
+    _parentScroll: Element | Window;
+    parentScroll: Element | Window;
     update: EventEmitter<any[]>;
@@ -22,2 +24,3 @@ change: EventEmitter<ChangeEvent>;
     contentElementRef: ElementRef;
+    containerElementRef: ElementRef;
     topPadding: number;
@@ -28,9 +31,13 @@ scrollHeight: number;
     startupLoop: boolean;
-    constructor(element: ElementRef, renderer: Renderer);
-    onScroll(e: Event): void;
+    constructor(element: ElementRef);
+    onScroll(): void;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     refresh(): void;
     scrollInto(item: any): void;
+    private addParentEventHandlers(parentScroll);
+    private removeParentEventHandlers(parentScroll);
     private countItemsPerRow();
+    private getElementsOffset();
     private calculateDimensions();
@@ -37,0 +44,0 @@ private calculateItems();

dist/virtual-scroll.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 common_1 = require("@angular/common");
 var VirtualScrollComponent = (function () {
-    function VirtualScrollComponent(element, renderer) {
+    function VirtualScrollComponent(element) {
+        var _this = this;
         this.element = element;
-        this.renderer = renderer;
         this.items = [];
         this.bufferAmount = 0;
+        this.refreshHandler = function () {
+            _this.refresh();
+        };
         this.update = new core_1.EventEmitter();
@@ -25,3 +19,18 @@ this.change = new core_1.EventEmitter();
     }
-    VirtualScrollComponent.prototype.onScroll = function (e) {
+    Object.defineProperty(VirtualScrollComponent.prototype, "parentScroll", {
+        get: function () {
+            return this._parentScroll;
+        },
+        set: function (element) {
+            if (this._parentScroll === element) {
+                return;
+            }
+            this.removeParentEventHandlers(this._parentScroll);
+            this._parentScroll = element;
+            this.addParentEventHandlers(this._parentScroll);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    VirtualScrollComponent.prototype.onScroll = function () {
         this.refresh();
@@ -33,2 +42,5 @@ };
     };
+    VirtualScrollComponent.prototype.ngOnDestroy = function () {
+        this.removeParentEventHandlers(this.parentScroll);
+    };
     VirtualScrollComponent.prototype.ngOnChanges = function (changes) {
@@ -48,2 +60,4 @@ this.previousStart = undefined;
     VirtualScrollComponent.prototype.scrollInto = function (item) {
+        var el = this.parentScroll instanceof Window ? document.body : this.parentScroll || this.element.nativeElement;
+        var offsetTop = this.getElementsOffset();
         var index = (this.items || []).indexOf(item);
@@ -53,6 +67,22 @@ if (index < 0 || index >= (this.items || []).length)
         var d = this.calculateDimensions();
-        this.element.nativeElement.scrollTop = (Math.floor(index / d.itemsPerRow) * d.childHeight)
+        el.scrollTop = (Math.floor(index / d.itemsPerRow) * d.childHeight)
             - (d.childHeight * Math.min(index, this.bufferAmount));
         this.refresh();
     };
+    VirtualScrollComponent.prototype.addParentEventHandlers = function (parentScroll) {
+        if (parentScroll) {
+            parentScroll.addEventListener('scroll', this.refreshHandler);
+            if (parentScroll instanceof Window) {
+                parentScroll.addEventListener('resize', this.refreshHandler);
+            }
+        }
+    };
+    VirtualScrollComponent.prototype.removeParentEventHandlers = function (parentScroll) {
+        if (parentScroll) {
+            parentScroll.removeEventListener('scroll', this.refreshHandler);
+            if (parentScroll instanceof Window) {
+                parentScroll.removeEventListener('resize', this.refreshHandler);
+            }
+        }
+    };
     VirtualScrollComponent.prototype.countItemsPerRow = function () {
@@ -69,5 +99,14 @@ var offsetTop;
     };
+    VirtualScrollComponent.prototype.getElementsOffset = function () {
+        var offsetTop = 0;
+        if (this.containerElementRef && this.containerElementRef.nativeElement) {
+            offsetTop += this.containerElementRef.nativeElement.offsetTop;
+        }
+        if (this.parentScroll) {
+            offsetTop += this.element.nativeElement.offsetTop;
+        }
+        return offsetTop;
+    };
     VirtualScrollComponent.prototype.calculateDimensions = function () {
-        var el = this.element.nativeElement;
-        var content = this.contentElementRef.nativeElement;
+        var el = this.parentScroll instanceof Window ? document.body : this.parentScroll || this.element.nativeElement;
         var items = this.items || [];
@@ -79,2 +118,6 @@ var itemCount = items.length;
         if (this.childWidth == undefined || this.childHeight == undefined) {
+            var content = this.contentElementRef.nativeElement;
+            if (this.containerElementRef && this.containerElementRef.nativeElement) {
+                content = this.containerElementRef.nativeElement;
+            }
             contentDimensions = content.children[0] ? content.children[0].getBoundingClientRect() : {
@@ -106,10 +149,11 @@ width: viewWidth,
     VirtualScrollComponent.prototype.calculateItems = function () {
-        var el = this.element.nativeElement;
+        var el = this.parentScroll instanceof Window ? document.body : this.parentScroll || this.element.nativeElement;
         var d = this.calculateDimensions();
         var items = this.items || [];
+        var offsetTop = this.getElementsOffset();
         this.scrollHeight = d.childHeight * d.itemCount / d.itemsPerRow;
-        if (this.element.nativeElement.scrollTop > this.scrollHeight) {
-            this.element.nativeElement.scrollTop = this.scrollHeight;
+        if (el.scrollTop > this.scrollHeight) {
+            el.scrollTop = this.scrollHeight + offsetTop;
         }
-        var scrollTop = Math.max(0, el.scrollTop);
+        var scrollTop = Math.max(0, el.scrollTop - offsetTop);
         var indexByScrollTop = scrollTop / this.scrollHeight * d.itemCount / d.itemsPerRow;
@@ -157,63 +201,35 @@ var end = Math.min(d.itemCount, Math.ceil(indexByScrollTop) * d.itemsPerRow + d.itemsPerRow * (d.itemsPerCol + 1));
     };
+    VirtualScrollComponent.decorators = [
+        { type: core_1.Component, args: [{
+                    selector: 'virtual-scroll,[virtualScroll]',
+                    exportAs: 'virtualScroll',
+                    template: "\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ",
+                    host: {
+                        '[style.overflow-y]': "parentScroll ? 'hidden' : 'auto'"
+                    },
+                    styles: ["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]
+                },] },
+    ];
+    /** @nocollapse */
+    VirtualScrollComponent.ctorParameters = function () { return [
+        { type: core_1.ElementRef, },
+    ]; };
+    VirtualScrollComponent.propDecorators = {
+        'items': [{ type: core_1.Input },],
+        'scrollbarWidth': [{ type: core_1.Input },],
+        'scrollbarHeight': [{ type: core_1.Input },],
+        'childWidth': [{ type: core_1.Input },],
+        'childHeight': [{ type: core_1.Input },],
+        'bufferAmount': [{ type: core_1.Input },],
+        'parentScroll': [{ type: core_1.Input },],
+        'update': [{ type: core_1.Output },],
+        'change': [{ type: core_1.Output },],
+        'start': [{ type: core_1.Output },],
+        'end': [{ type: core_1.Output },],
+        'contentElementRef': [{ type: core_1.ViewChild, args: ['content', { read: core_1.ElementRef },] },],
+        'containerElementRef': [{ type: core_1.ContentChild, args: ['container',] },],
+        'onScroll': [{ type: core_1.HostListener, args: ['scroll',] },],
+    };
     return VirtualScrollComponent;
 }());
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Array)
-], VirtualScrollComponent.prototype, "items", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], VirtualScrollComponent.prototype, "scrollbarWidth", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], VirtualScrollComponent.prototype, "scrollbarHeight", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], VirtualScrollComponent.prototype, "childWidth", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], VirtualScrollComponent.prototype, "childHeight", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], VirtualScrollComponent.prototype, "bufferAmount", void 0);
-__decorate([
-    core_1.Output(),
-    __metadata("design:type", core_1.EventEmitter)
-], VirtualScrollComponent.prototype, "update", void 0);
-__decorate([
-    core_1.Output(),
-    __metadata("design:type", core_1.EventEmitter)
-], VirtualScrollComponent.prototype, "change", void 0);
-__decorate([
-    core_1.Output(),
-    __metadata("design:type", core_1.EventEmitter)
-], VirtualScrollComponent.prototype, "start", void 0);
-__decorate([
-    core_1.Output(),
-    __metadata("design:type", core_1.EventEmitter)
-], VirtualScrollComponent.prototype, "end", void 0);
-__decorate([
-    core_1.ViewChild('content', { read: core_1.ElementRef }),
-    __metadata("design:type", core_1.ElementRef)
-], VirtualScrollComponent.prototype, "contentElementRef", void 0);
-__decorate([
-    core_1.HostListener('scroll'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], VirtualScrollComponent.prototype, "onScroll", null);
-VirtualScrollComponent = __decorate([
-    core_1.Component({
-        selector: 'virtual-scroll,[virtualScroll]',
-        exportAs: 'virtualScroll',
-        template: "\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ",
-        styles: ["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]
-    }),
-    __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer])
-], VirtualScrollComponent);
 exports.VirtualScrollComponent = VirtualScrollComponent;
@@ -223,12 +239,13 @@ var VirtualScrollModule = (function () {
     }
+    VirtualScrollModule.decorators = [
+        { type: core_1.NgModule, args: [{
+                    exports: [VirtualScrollComponent],
+                    declarations: [VirtualScrollComponent]
+                },] },
+    ];
+    /** @nocollapse */
+    VirtualScrollModule.ctorParameters = function () { return []; };
     return VirtualScrollModule;
 }());
-VirtualScrollModule = __decorate([
-    core_1.NgModule({
-        imports: [common_1.CommonModule],
-        exports: [VirtualScrollComponent],
-        declarations: [VirtualScrollComponent]
-    })
-], VirtualScrollModule);
 exports.VirtualScrollModule = VirtualScrollModule;
 //# sourceMappingURL=virtual-scroll.js.map

dist/virtual-scroll.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'","$quoted$":["[style.overflow-y]"]},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChangeEvent":{"__symbolic":"interface"},"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","host":{"[style.overflow-y]":"parentScroll ? 'hidden' : 'auto'"},"styles":["\n    :host {\n      overflow: hidden;\n      position: relative;\n\t  display: block;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"parentScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"containerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"addParentEventHandlers":[{"__symbolic":"method"}],"removeParentEventHandlers":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"getElementsOffset":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}}]

package.json

 {
   "name": "angular2-virtual-scroll",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Angular 2 module for virtual -infinite- list. Supports multi-column",
@@ -34,20 +34,21 @@ "main": "dist/virtual-scroll.js",
   "devDependencies": {
-    "@angular/common": "~2.4.0",
-    "@angular/compiler": "~2.4.0",
-    "@angular/compiler-cli": "^2.4.1",
-    "@angular/core": "~2.4.0",
-    "@angular/forms": "~2.4.0",
-    "@angular/http": "~2.4.0",
-    "@angular/platform-browser": "~2.4.0",
-    "@angular/platform-browser-dynamic": "~2.4.0",
-    "@angular/router": "~3.4.0",
-    "@types/node": "6.0.45",
+    "@angular/cli": "^1.3.0",
+    "@angular/common": "^4.3.0",
+    "@angular/compiler": "^4.3.0",
+    "@angular/compiler-cli": "^4.3.0",
+    "@angular/core": "^4.3.0",
+    "@angular/forms": "^4.3.0",
+    "@angular/http": "^4.3.0",
+    "@angular/platform-browser": "^4.3.0",
+    "@angular/platform-browser-dynamic": "^4.3.0",
+    "@angular/router": "^4.3.0",
+    "@types/node": "^8.0.14",
     "codelyzer": "^2.0.0",
     "core-js": "^2.4.1",
-    "rimraf": "2.5.4",
-    "rxjs": "5.0.1",
-    "tslint": "^4.4.2",
-    "typescript": "^2.1.6",
-    "zone.js": "^0.7.4"
+    "rimraf": "^2.6.1",
+    "rxjs": "^5.4.2",
+    "tslint": "^5.5.0",
+    "typescript": "2.4.1",
+    "zone.js": "^0.8.13"
   }
 }

README.md

@@ -14,4 +14,9 @@
 * Easy to use apis
-* OpenSource and available in [GitHub](https://github.com/rintoj/angular2-virtual-scroll)
+* OpenSource and available in GitHub
 
+## New features:
+
+* 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
@@ -135,5 +140,63 @@
 | bufferAmount   | number | The the number of elements to be rendered outside of the current container's viewport. Useful when not all elements are the same dimensions.
+| parentScroll   | Element / Window | Element (or window), which will have scrollbar. This element must be one of the parents of virtual-scroll
 | update         | Event  | This event is fired every time `start` or `end` index change and emits list of items from `start` to `end`. The list emitted by this event must be used with `*ngFor` to render the actual list of items within `<virtual-scroll>`
 | change         | Event  | This event is fired every time `start` or `end` index change and emits `ChangeEvent` which of format: `{ start: number, end: number }`
 
+## Additional elements in scroll
+
+If inside of content of virtual scroll element you want to show also additional elements except list itself (e.g. search field), you need to specify block with list using id "container".
+
+```html
+<virtual-scroll [items]="items"
+    (update)="viewPortItems = $event">
+    <input type="search">
+    <div #container>
+        <list-item *ngFor="let item of viewPortItems" [item]="item">
+        </list-item>
+    </div>
+</virtual-scroll>
+```
+
+## Use scrollbar of parent block
+
+If you want to use scrollbar of parent block, instead of scrolling block, set `parentScroll`.
+
+```html
+<div #scrollingBlock>
+    <virtual-scroll [items]="items"
+        [parentScroll]="scrollingBlock.nativeElement"
+        (update)="viewPortItems = $event">
+        <input type="search">
+        <div #container>
+            <list-item *ngFor="let item of viewPortItems" [item]="item">
+            </list-item>
+        </div>
+    </virtual-scroll>
+</div>
+```
+
+## Use scrollbar of window
+
+If you want to use scrollbar of window, instead of scrolling block, set `parentScroll`.
+
+```html
+<virtual-scroll [items]="items"
+    [parentScroll]="window"
+    (update)="viewPortItems = $event">
+    <input type="search">
+    <div #container>
+        <list-item *ngFor="let item of viewPortItems" [item]="item">
+        </list-item>
+    </div>
+</virtual-scroll>
+```
+
+```ts
+...
+export class MyComponent {
+...
+window: window;
+...
+```
+
 ## Items with variable size
@@ -278,3 +341,4 @@
 
-**Rinto Jose** (rintoj)
+* **Rinto Jose** (rintoj)
+* **Pavel Kukushkin** (kykint)
 
@@ -281,0 +345,0 @@ ### Hope this module is helpful to you. Please make sure to checkout my other [projects](https://github.com/rintoj) and [articles](https://medium.com/@rintoj). Enjoy coding!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49005

increased by15.89%

Lines of code

285

increased by9.2%

Number of lines in readme file

378

increased by20.38%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes