diff --git a/README.md b/README.md index 71ced50..d155402 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,9 @@ Simply replace the element that would ordinarily be passed to `Ps.initialize` wi [runInsideAngular] // Run perfect scrollbar inside the Angular zone. -() // All perfect scrollbar events work as bindings. +() // All perfect scrollbar events work as bindings. + // Event namea are in camel case (not kebab case). + // Example: ps-y-reach-start -> psYReachStart ``` **DIRECTIVE USAGE** @@ -109,7 +111,9 @@ Perfect scrollbar directive should be used with div elements and can take option [runInsideAngular] // Run perfect scrollbar inside the Angular zone. -() // All perfect scrollbar events work as bindings. +() // All perfect scrollbar events work as bindings. + // Event namea are in camel case (not kebab case). + // Example: ps-y-reach-start -> psYReachStart ``` ##### Available configuration options (custom / global configuration): diff --git a/src/lib/perfect-scrollbar.component.html b/src/lib/perfect-scrollbar.component.html index 2625d55..7af430a 100644 --- a/src/lib/perfect-scrollbar.component.html +++ b/src/lib/perfect-scrollbar.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/lib/perfect-scrollbar.component.ts b/src/lib/perfect-scrollbar.component.ts index 58958a7..66aba92 100644 --- a/src/lib/perfect-scrollbar.component.ts +++ b/src/lib/perfect-scrollbar.component.ts @@ -5,8 +5,8 @@ import { Subject } from 'rxjs/Subject'; import { Subscription } from 'rxjs/Subscription'; import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core'; -import { Input, HostBinding, HostListener, ViewChild } from '@angular/core'; import { ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core'; +import { Input, Output, EventEmitter, HostBinding, HostListener, ViewChild } from '@angular/core'; import { PerfectScrollbarDirective } from './perfect-scrollbar.directive'; import { Position, PerfectScrollbarConfigInterface } from './perfect-scrollbar.interfaces'; @@ -60,6 +60,19 @@ export class PerfectScrollbarComponent implements OnInit, OnDestroy, DoCheck { @ViewChild(PerfectScrollbarDirective) directiveRef: PerfectScrollbarDirective; + @Output('psScrollY' ) PS_SCROLL_Y = new EventEmitter(); + @Output('psScrollX' ) PS_SCROLL_X = new EventEmitter(); + + @Output('psScrollUp' ) PS_SCROLL_UP = new EventEmitter(); + @Output('psScrollDown' ) PS_SCROLL_DOWN = new EventEmitter(); + @Output('psScrollLeft' ) PS_SCROLL_LEFT = new EventEmitter(); + @Output('psScrollRight' ) PS_SCROLL_RIGHT = new EventEmitter(); + + @Output('psYReachEnd' ) PS_Y_REACH_END = new EventEmitter(); + @Output('psYReachStart' ) PS_Y_REACH_START = new EventEmitter(); + @Output('psXReachEnd' ) PS_X_REACH_END = new EventEmitter(); + @Output('psXReachStart' ) PS_X_REACH_START = new EventEmitter(); + @HostListener('document:touchstart', ['$event']) onGeneratedEvent(event: any) { // Stop the generated event from reaching window for PS to work correctly if (event['psGenerated']) { diff --git a/src/lib/perfect-scrollbar.directive.ts b/src/lib/perfect-scrollbar.directive.ts index 019e76d..87b9f3d 100644 --- a/src/lib/perfect-scrollbar.directive.ts +++ b/src/lib/perfect-scrollbar.directive.ts @@ -47,6 +47,34 @@ export class PerfectScrollbarDirective implements OnDestroy, DoCheck, OnChanges, this.config = config; } + @Output('psScrollY' ) PS_SCROLL_Y = new EventEmitter(); + @Output('psScrollX' ) PS_SCROLL_X = new EventEmitter(); + + @Output('psScrollUp' ) PS_SCROLL_UP = new EventEmitter(); + @Output('psScrollDown' ) PS_SCROLL_DOWN = new EventEmitter(); + @Output('psScrollLeft' ) PS_SCROLL_LEFT = new EventEmitter(); + @Output('psScrollRight' ) PS_SCROLL_RIGHT = new EventEmitter(); + + @Output('psYReachEnd' ) PS_Y_REACH_END = new EventEmitter(); + @Output('psYReachStart' ) PS_Y_REACH_START = new EventEmitter(); + @Output('psXReachEnd' ) PS_X_REACH_END = new EventEmitter(); + @Output('psXReachStart' ) PS_X_REACH_START = new EventEmitter(); + + private emit(event: any) { this[event.type.replace(/-/g, '_').toUpperCase()].emit(event); } + + @HostListener('ps-scroll-y', ['$event']) psScrollY(event: any) { this.emit(event); } + @HostListener('ps-scroll-x', ['$event']) psScrollX(event: any) { this.emit(event); } + + @HostListener('ps-scroll-up', ['$event']) psScrollUp(event: any) { this.emit(event); } + @HostListener('ps-scroll-down', ['$event']) pscrollDown(event: any) { this.emit(event); } + @HostListener('ps-scroll-left', ['$event']) psScrollLeft(event: any) { this.emit(event); } + @HostListener('ps-scroll-right', ['$event']) psScrollRight(event): any { this.emit(event); } + + @HostListener('ps-y-reach-end', ['$event']) psReachEndY(event): any { this.emit(event); } + @HostListener('ps-y-reach-start', ['$event']) psReachStartY(event): any { this.emit(event); } + @HostListener('ps-x-reach-end', ['$event']) psReachEndX(event): any { this.emit(event); } + @HostListener('ps-x-reach-start', ['$event']) psReachStartX(event): any { this.emit(event); } + constructor(@Optional() private defaults: PerfectScrollbarConfig, private zone: NgZone, public elementRef: ElementRef, private differs: KeyValueDiffers) {} diff --git a/src/lib/perfect-scrollbar.interfaces.ts b/src/lib/perfect-scrollbar.interfaces.ts index 29e2673..c2c5075 100644 --- a/src/lib/perfect-scrollbar.interfaces.ts +++ b/src/lib/perfect-scrollbar.interfaces.ts @@ -23,6 +23,21 @@ export class Position { } } +export const PerfectScrollbarEvents = [ + 'ps-scroll-y', + 'ps-scroll-x', + + 'ps-scroll-up', + 'ps-scroll-down', + 'ps-scroll-left', + 'ps-scroll-right', + + 'ps-y-reach-end', + 'ps-y-reach-start', + 'ps-x-reach-end', + 'ps-x-reach-start' +]; + export interface PerfectScrollbarConfigInterface { handlers?: string[];