diff options
author | 2020-01-31 17:10:17 +0530 | |
---|---|---|
committer | 2020-02-03 07:45:35 +0000 | |
commit | 5505e42484efac0273627795583179d58f81a1ee (patch) | |
tree | aaa7a249a6f8c6eec80babbd37ffaa29a0ca3152 /ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container | |
parent | 2edccd7e8ef958d4891ba6de87a449daeb7593fe (diff) |
Added RDP Library
added RDP Library
Issue-ID: PORTAL-826
Change-Id: If00af4c55b568bb4e41c789b6b18749d8bc96858
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>
Diffstat (limited to 'ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container')
4 files changed, 97 insertions, 0 deletions
diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.html new file mode 100644 index 00000000..95a0b70b --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.html @@ -0,0 +1 @@ +<ng-content></ng-content>
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.scss b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.scss new file mode 100644 index 00000000..e8765d83 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.scss @@ -0,0 +1,4 @@ +:host { + overflow: auto; +} +
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.spec.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.spec.ts new file mode 100644 index 00000000..1b38cce0 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RdpScrollContainerComponent } from './rdp-scroll-container.component'; + +describe('RdpScrollContainerComponent', () => { + let component: RdpScrollContainerComponent; + let fixture: ComponentFixture<RdpScrollContainerComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RdpScrollContainerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RdpScrollContainerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.ts new file mode 100644 index 00000000..db46b89f --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-scroll-container/rdp-scroll-container.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit, OnChanges, Input, Output, EventEmitter, + HostListener, ElementRef } from '@angular/core'; +import { throttle as _throttle, noop as _noop } from "lodash-es"; + +enum ScrollDirection { + UP = 'up', + DOWN = 'down' +} + +enum ScrollListener { + HOST = 'scroll', + WINDOW = 'window:scroll' +} + +@Component({ + selector: 'rdp-scroll-container', + templateUrl: './rdp-scroll-container.component.html', + styleUrls: ['./rdp-scroll-container.component.scss'] +}) +export class RdpScrollContainerComponent implements OnInit, OnChanges { + + private _element: Element; + private _window: Element; + public scrollTop = 0; + @Input() more = true; + @Input() scrollDelay = 500; + @Input() scrollOffset = 1000; + @Output() scrolled: EventEmitter<boolean> = new EventEmitter<boolean>(); + @HostListener(ScrollListener.HOST) _scroll: Function; + @HostListener(ScrollListener.WINDOW) _windowScroll: Function; + + constructor(private elRef: ElementRef) { + this._element = this.elRef.nativeElement; + this._window = document.documentElement as Element; + } + + ngOnInit() { + this.setThrottle(); + } + + ngOnChanges(changes) { + if (changes.scrollDelay) this.setThrottle(); + } + + setThrottle() { + this._scroll = this._windowScroll = _throttle(this.handleScroll, this.scrollDelay); + } + + getListener = () => this.elRef.nativeElement.clientHeight === this.elRef.nativeElement.scrollHeight + ? ScrollListener.WINDOW + : ScrollListener.HOST + + roundTo = (from: number, to: number = this.scrollOffset) => Math.floor(from / to) * to; + getScrollDirection = (st: number) => this.scrollTop <= st ? ScrollDirection.DOWN : ScrollDirection.UP; + + canScroll(e: Element): boolean { + const scrolled = this.more + && this.getScrollDirection(e.scrollTop) === ScrollDirection.DOWN + && this.roundTo(e.clientHeight) === this.roundTo(e.scrollHeight - e.scrollTop); + this.scrollTop = e.scrollTop; + return scrolled; + } + + handleScroll = () => this.getListener() === ScrollListener.HOST + ? this.scrolled.emit( this.canScroll(this._element) ) + : this.scrolled.emit( this.canScroll(this._window) ) +} |